/* Us — couple task board. Apple-clean, warm, happy. */
:root{
  --bg:#FFF9FB;
  --surface:#FFFFFF;
  --surface-soft:#FFF1F5;
  --text:#2B2B33;
  --muted:#9A93A3;
  --accent:#FF6B9D;
  --accent-deep:#E14E82;
  --accent-soft:#FFE3EC;
  --line:#F3E4EA;
  --green:#3FB97F;
  --radius:18px;
  --shadow:0 6px 24px rgba(255,107,157,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  overscroll-behavior-y:none;
}
.hidden{display:none!important}
.view{min-height:100dvh;display:flex;flex-direction:column}

/* ---------- splash / who ---------- */
.splash-wrap,.who-wrap{
  margin:auto;text-align:center;padding:32px 24px;max-width:380px;
}
.splash-heart,.who-heart{font-size:64px;animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.12)}24%{transform:scale(1)}}
.app-title{font-size:44px;margin:12px 0 4px;letter-spacing:-.5px}
.app-sub{color:var(--muted);font-size:17px;margin:0 0 24px}
.who-cards{display:flex;gap:16px;justify-content:center;margin-bottom:20px}
.who-card{
  flex:1;max-width:150px;background:var(--surface);border:2px solid var(--line);
  border-radius:var(--radius);padding:22px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:17px;box-shadow:var(--shadow);transition:transform .12s,border-color .12s;
}
.who-card:active{transform:scale(.96)}
.who-card:hover{border-color:var(--accent)}
.who-emoji{font-size:44px}
.who-name{font-weight:700}
.muted{color:var(--muted);font-size:13px}

/* ---------- board ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 8px;
}
.me-chip{
  background:var(--accent-soft);color:var(--accent-deep);
  font-weight:700;font-size:15px;padding:8px 14px;border-radius:999px;
}
.btn-ghost{
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font-size:15px;color:var(--muted);cursor:pointer;
}
.btn-ghost:active{transform:scale(.95)}

.filters{
  display:flex;gap:8px;padding:8px 16px;
  overflow-x:auto;scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.filter{
  flex:1;white-space:nowrap;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:9px 14px;font-size:14px;font-weight:600;
  color:var(--muted);cursor:pointer;
}
.filter.active{background:var(--text);border-color:var(--text);color:#fff}

.task-list{
  flex:1;overflow-y:auto;padding:8px 16px 12px;
  display:flex;flex-direction:column;gap:10px;
}
.task{
  background:var(--surface);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:2px solid transparent;transition:border-color .15s;
}
.task:active{transform:scale(.99)}
.check{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--accent);background:#fff;color:#fff;
  font-size:18px;font-weight:800;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.task.done .check{background:var(--green);border-color:var(--green)}
.task.done{opacity:.72}
.task.done .task-title{text-decoration:line-through;color:var(--muted)}
.task-body{flex:1;min-width:0}
.task-title{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.task-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.del{
  flex:none;width:32px;height:32px;border-radius:50%;border:none;
  background:var(--surface-soft);color:var(--muted);font-size:18px;cursor:pointer;
}
.del:active{transform:scale(.9)}
.empty-hint{text-align:center;color:var(--muted);font-size:15px;margin:24px 0 0}

/* ---------- add bar ---------- */
.add-bar{
  padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 16px);
  background:var(--surface);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.add-input{
  border:2px solid var(--line);border-radius:14px;padding:13px 14px;
  font-size:16px;width:100%;outline:none;background:var(--bg);color:var(--text);
}
.add-input:focus{border-color:var(--accent)}
.assign-row{display:flex;gap:8px}
.assign{
  flex:1;border:1px solid var(--line);background:var(--bg);border-radius:999px;
  padding:8px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
}
.assign.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}
.btn-primary{
  background:var(--accent);color:#fff;border:none;border-radius:14px;
  padding:14px;font-size:17px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(255,107,157,.35);
}
.btn-primary:active{transform:scale(.98);background:var(--accent-deep)}
.add-btn{width:100%}

/* ---------- toast / offline ---------- */
.toast{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;z-index:50;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.offline-badge{
  position:fixed;top:0;left:0;right:0;z-index:60;text-align:center;
  background:#FFF3CD;color:#8a6d1a;font-size:13px;font-weight:600;padding:8px;
}