/* Hunt Board styles.
   Direction: black "command center". Near-black surfaces, hairline borders,
   one electric green accent, Geist for a clean tech feel. Single dark theme on purpose. */
:root{
  color-scheme: dark;
  --bg:#08090a;
  --bg-glow:rgba(61,220,151,.10);
  --surface:#0f1012;
  --surface-2:#16171a;
  --surface-3:#1d1f23;
  --line:#23252a;
  --line-strong:#2f3238;
  --ink:#f4f5f6;
  --muted:#8b8f98;
  --faint:#5d616b;
  --accent:#3ddc97;
  --accent-ink:#03140b;
  --accent-soft:rgba(61,220,151,.12);
  --accent-line:rgba(61,220,151,.35);
  --shadow:rgba(0,0,0,.6);

  --s-found:#9aa1ad; --s-sent:#5b9dff; --s-replied:#ff5c5c; --s-talking:#3ddc97;
  --s-call:#ffb547; --s-won:#7cf29b; --s-lost:#5d616b;
  --late:#ff5c5c; --today:#ffb547;

  --f-body:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --r:12px;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--f-body); -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 420px at 50% -120px, var(--bg-glow), transparent 70%);
  background-repeat:no-repeat; min-height:100vh;
}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.02em; text-wrap:balance}
.muted{color:var(--muted)}
::selection{background:var(--accent); color:var(--accent-ink)}

.app{max-width:1200px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-block:20px 56px; display:flex; flex-direction:column; gap:18px}

/* ---------- header ---------- */
.top{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand-name{font-size:19px; font-weight:700; letter-spacing:-.03em}
.mark{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--accent); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 0 24px rgba(61,220,151,.35)}
.mark svg{width:17px; height:17px; stroke:var(--accent-ink)}
.tag{font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--accent); border:1px solid var(--accent-line); padding:5px 7px; border-radius:6px}
.tabs{display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); padding:3px; border-radius:10px}
.tab{border:0; background:transparent; padding:7px 14px; border-radius:7px; font-weight:500; font-size:14px; cursor:pointer; color:var(--muted); transition:color .15s, background .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface-3); color:var(--ink); box-shadow:0 0 0 1px var(--line-strong) inset}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); border-radius:10px; padding:9px 16px; font-weight:500; font-size:14px; cursor:pointer; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, border-color .15s}
.btn:hover{transform:translateY(-2px); border-color:#3a3d44; box-shadow:0 10px 20px -12px var(--shadow)}
.btn:active{transform:translateY(-1px)}
.btn:disabled{opacity:.55; cursor:default; transform:none}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600}
.btn.primary:hover{box-shadow:0 10px 26px -10px rgba(61,220,151,.55)}
.btn.sm{padding:6px 11px; font-size:13px; border-radius:8px}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--ink); border-color:var(--line)}
.btn.danger{background:transparent; border-color:rgba(255,92,92,.35); color:var(--late)}
.btn:focus-visible,.tab:focus-visible,.row-main:focus-visible,.card:focus-visible,.cell:focus-visible,.icon-btn:focus-visible,.auth-switch:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- stats ---------- */
.stats{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.stat{padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{font:500 26px/1.05 var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.stat span{font:500 10.5px/1.2 var(--f-mono); color:var(--muted); text-transform:uppercase; letter-spacing:.12em}
.coach{display:flex; gap:10px; align-items:flex-start; font-size:14px; padding:11px 14px; border-radius:var(--r); border:1px solid var(--accent-line); background:linear-gradient(90deg, var(--accent-soft), transparent 70%); color:#cfd3d9}
.coach b{color:var(--ink)}
.coach svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--accent)}

/* ---------- today ---------- */
.today-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start}
.stack{display:flex; flex-direction:column; gap:16px; min-width:0}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0}
.panel-h{display:flex; align-items:center; gap:10px}
.panel-h h3{font-size:16px}
.panel-h .cnt{font:500 11.5px/1 var(--f-mono); padding:4px 8px; border-radius:20px; background:color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); color:var(--c, var(--muted))}
.panel-h p{margin:0 0 0 auto; font-size:13px; color:var(--muted)}
.empty{margin:0; color:var(--muted); font-size:14px}
.banner{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; padding:14px 16px; border-radius:var(--r); border:1px solid rgba(255,92,92,.35); background:linear-gradient(90deg, rgba(255,92,92,.10), transparent 75%)}
.banner div{flex:1 1 300px; min-width:0; color:#cfd3d9; font-size:14px}
.banner b{display:block; color:var(--late); font-weight:600; font-size:15px}

.rows{display:flex; flex-direction:column; gap:6px}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid transparent; transition:border-color .15s}
.row:hover{border-color:var(--line-strong)}
.row-main{flex:1 1 280px; min-width:0; display:flex; align-items:center; gap:11px; border:0; background:transparent; text-align:left; cursor:pointer; padding:0}
.dot{width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; box-shadow:0 0 10px var(--c)}
.who{display:flex; flex-direction:column; min-width:0; flex:1}
.nm{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bz{font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nx{display:flex; flex-direction:column; align-items:flex-end; font-size:13px; gap:3px; text-align:right; flex:none; color:#cfd3d9}
.row-act{display:flex; gap:6px; flex-wrap:wrap}
.due{font:500 11px/1 var(--f-mono); padding:4px 7px; border-radius:6px; background:var(--surface-3); color:var(--muted); white-space:nowrap}
.due.late{background:rgba(255,92,92,.14); color:var(--late)}
.due.today{background:rgba(255,181,71,.14); color:var(--today)}
.showall{align-self:flex-start}

/* ---------- hunt timer ---------- */
.hunt{gap:14px}
.hunt-top{display:flex; gap:16px; align-items:center}
.ring{--p:0; width:100px; height:100px; border-radius:50%; flex:none; background:conic-gradient(var(--ring, var(--accent)) calc(var(--p) * 1%), var(--surface-3) 0); display:grid; place-items:center; box-shadow:0 0 30px -6px color-mix(in srgb, var(--ring, var(--accent)) 45%, transparent)}
.ring-in{width:84px; height:84px; border-radius:50%; background:var(--surface); display:grid; place-items:center; font:500 19px/1 var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.hunt.over{border-color:rgba(255,92,92,.45); background:linear-gradient(180deg, rgba(255,92,92,.08), var(--surface) 60%)}
.hunt.over .ring{--ring:var(--late)}
.hunt-msg{margin:0; font-size:14px; color:#cfd3d9}
.hunt.over .hunt-msg{color:var(--late); font-weight:500}
.hunt-ctl{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.hunt-ctl select{font:inherit; font-size:14px; padding:7px 10px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}
.meter{display:flex; flex-direction:column; gap:7px}
.meter-l{display:flex; justify-content:space-between; font-size:14px; color:#cfd3d9}
.meter-l b{font:500 14px var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink)}
.bar{height:6px; border-radius:6px; background:var(--surface-3); overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:6px; box-shadow:0 0 12px rgba(61,220,151,.6)}
.mini{display:flex; flex-direction:column; gap:4px}
.mini button{display:flex; justify-content:space-between; gap:10px; border:1px solid transparent; background:var(--surface-2); padding:8px 10px; border-radius:8px; cursor:pointer; text-align:left; font-size:14px}
.mini button:hover{border-color:var(--line-strong)}
.mini button span:first-child{display:flex; align-items:center; gap:9px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini .muted{font-family:var(--f-mono); font-size:12.5px}

/* ---------- board ---------- */
.board{display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity}
.col{flex:0 0 252px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px; scroll-snap-align:start; max-height:72vh; overflow-y:auto}
.col-h{display:flex; align-items:center; gap:9px; font-weight:500; font-size:14px}
.col-h .cnt{margin-left:auto; font:500 11.5px/1 var(--f-mono); color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); padding:4px 8px; border-radius:20px}
.col-hint{margin:0 0 4px; font-size:12px; color:var(--faint)}
.card{display:flex; flex-direction:column; gap:4px; text-align:left; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:10px 11px; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow:0 12px 24px -16px var(--shadow)}
.card .nm{font-size:14px}
.card .meta{display:flex; justify-content:space-between; gap:6px; align-items:center; font-size:12px; color:var(--muted); margin-top:2px}

/* ---------- calendar ---------- */
.cal-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cal-h h3{font-size:18px; min-width:170px}
.cal-note{margin:0; font-size:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.wd{font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); padding:4px 6px}
.cell{min-height:98px; border:1px solid var(--line); background:var(--surface-2); border-radius:9px; padding:7px; display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; min-width:0; transition:border-color .15s}
.cell:hover{border-color:var(--line-strong)}
.cell.blank{background:transparent; border-style:dashed; border-color:#17181b; cursor:default}
.cell.is-today{border-color:var(--accent-line); box-shadow:0 0 0 1px var(--accent-line) inset}
.cell.is-sel{background:var(--surface-3); border-color:var(--line-strong)}
.dn{font:500 12px/1 var(--f-mono); color:var(--muted)}
.is-today .dn{color:var(--accent)}
.chips{display:flex; flex-direction:column; gap:3px; min-width:0}
.chip{font-size:11px; line-height:1.35; padding:2px 6px; border-radius:5px; background:color-mix(in srgb, var(--c) 15%, transparent); color:var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.more{font-size:11px; color:var(--muted)}
.count{display:none}

/* ---------- drawer ---------- */
.drawer-wrap{position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end}
.scrim{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px)}
.drawer{position:relative; width:min(470px,100%); height:100%; background:var(--surface); border-left:1px solid var(--line); overflow-y:auto; padding:calc(20px + env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 20px; display:flex; flex-direction:column; gap:16px}
.dr-head{display:flex; gap:12px; align-items:flex-start}
.dr-head > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.dr-head h2{font-size:24px; font-weight:700; letter-spacing:-.03em}
.dr-head p{margin:0}
.pill{align-self:flex-start; font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; padding:5px 8px; border-radius:6px; background:color-mix(in srgb, var(--c) 14%, transparent); color:var(--c)}
.icon-btn{border:1px solid var(--line-strong); background:var(--surface-2); width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:19px; line-height:1; flex:none; color:var(--ink)}
.icon-btn:hover{border-color:#3a3d44}
.links{display:flex; gap:8px; flex-wrap:wrap}
.chip-link{font-size:13px; font-weight:500; color:var(--accent); text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid var(--accent-line); background:var(--accent-soft)}
.chip-link:hover{background:rgba(61,220,151,.2)}
.facts{margin:0; display:grid; gap:4px 0}
.facts dt{font:500 10.5px/1.4 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin-top:8px}
.facts dd{margin:0; color:#dfe2e6}
.next-box{padding:12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.next-box label{font:500 10.5px/1.4 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint)}
.next-line{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
.next-line b{font-weight:600}
.next-line input{font:inherit; font-size:14px; padding:6px 8px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-3); color:var(--ink)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.step{font-size:12px; text-align:center; display:flex; flex-direction:column; gap:7px; align-items:center; color:var(--faint)}
.step i{width:100%; height:4px; border-radius:4px; background:var(--line-strong)}
.step.done i{background:var(--s-sent); box-shadow:0 0 8px rgba(91,157,255,.5)}
.step.done{color:var(--muted)}
.step.now i{background:var(--today); box-shadow:0 0 8px rgba(255,181,71,.5)}
.step.now{color:var(--ink); font-weight:500}
.acts{display:flex; gap:8px; flex-wrap:wrap}
.script{display:flex; flex-direction:column; gap:8px}
.script-h{display:flex; justify-content:space-between; align-items:center}
textarea{font:inherit; font-size:14px; width:100%; border:1px solid var(--line-strong); border-radius:10px; padding:10px 12px; background:var(--surface-2); color:var(--ink); resize:vertical}
textarea:focus,input:focus,select:focus{outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft)}
.fld-l{font:500 10.5px/1.4 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint)}
.hist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; border-left:1px solid var(--line); padding-left:12px}
.hist li{display:flex; gap:10px; font-size:14px; color:#cfd3d9}
.hist time{font:500 12px/1.65 var(--f-mono); color:var(--faint); flex:none; width:52px}

/* ---------- modal ---------- */
.modal-wrap{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px}
.modal{position:relative; width:min(520px,100%); max-height:92vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line-strong); border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:0 40px 80px -30px #000}
.modal h2{font-size:22px; font-weight:700}
.fld{display:flex; flex-direction:column; gap:6px}
.fld input{font:inherit; font-size:15px; padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}
.fld input::placeholder,textarea::placeholder{color:var(--faint)}
.fld small{color:var(--muted); font-size:12px}
.fld small.over{color:var(--late)}
.qual{display:flex; flex-direction:column; gap:9px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px}
.qual label{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#dfe2e6}
.qual input{width:17px; height:17px; margin-top:2px; accent-color:var(--accent)}
.form-err{margin:0; color:var(--late); font-size:14px}
.modal-acts{display:flex; gap:8px; justify-content:flex-end}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--surface-3); color:var(--ink); border:1px solid var(--line-strong); padding:10px 16px; border-radius:10px; font-size:14px; z-index:60; max-width:calc(100% - 32px); box-shadow:0 16px 40px -12px #000}
.foot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}
.user-menu{display:flex; align-items:center; gap:8px; font:500 12.5px var(--f-mono); color:var(--muted)}
.user-menu span{max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- landing + auth ---------- */
.land{max-width:1200px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); padding-block:18px 0}
.land-top{display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line)}
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,440px); gap:56px; align-items:start; padding-block:56px 64px}
.hero-copy{display:flex; flex-direction:column; gap:20px; min-width:0}
.eyebrow{font:500 11px/1.3 var(--f-mono); text-transform:uppercase; letter-spacing:.14em; color:var(--accent)}
.hero h1{font-size:clamp(34px, 4.6vw, 56px); line-height:1.04; font-weight:800; letter-spacing:-.045em; max-width:17ch}
.lead{margin:0; font-size:18px; line-height:1.55; color:#c4c8cf; max-width:52ch}
.perks{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.perks li{display:flex; gap:14px; align-items:flex-start; color:var(--muted); font-size:15px}
.perks b{display:block; color:var(--ink); font-weight:600; margin-bottom:1px}
.perk-ic{flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--accent-line); background:var(--accent-soft)}
.perk-ic svg{width:18px; height:18px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.preview{margin-top:8px; max-width:440px; border:1px solid var(--line-strong); border-radius:14px; background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 40px 80px -40px rgba(61,220,151,.25)}
.pv-h{display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px}
.pv-tag{font:500 11px/1 var(--f-mono); color:var(--today); background:rgba(255,181,71,.14); padding:4px 7px; border-radius:6px}
.pv-row{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; background:var(--surface-3)}
.pv-row i{width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); flex:none}
.pv-row div{flex:1; min-width:0; display:flex; flex-direction:column}
.pv-row b{font-weight:500; font-size:14px}
.pv-row small{color:var(--muted); font-size:12.5px}
.pv-due{font:500 11px/1 var(--f-mono); font-style:normal; padding:4px 7px; border-radius:6px; background:var(--surface); color:var(--muted)}
.pv-due.today{color:var(--today); background:rgba(255,181,71,.14)}
.pv-note{margin:0; font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); text-align:right}

.form-col{position:sticky; top:24px}
.auth-card{background:linear-gradient(180deg, #121316, var(--surface)); border:1px solid var(--line-strong); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:16px; box-shadow:0 0 0 1px rgba(255,255,255,.02) inset, 0 50px 100px -40px rgba(61,220,151,.22)}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:11px; background:var(--bg); border:1px solid var(--line)}
.seg-b{border:0; background:transparent; color:var(--muted); font-weight:500; font-size:14px; padding:9px; border-radius:8px; cursor:pointer}
.seg-b[aria-selected="true"]{background:var(--surface-3); color:var(--ink); box-shadow:0 0 0 1px var(--line-strong) inset}
.auth-head{display:flex; flex-direction:column; gap:4px}
.auth-head h2{font-size:26px; font-weight:700; letter-spacing:-.035em}
.auth-head p{margin:0; font-size:14px}
.fld select{font:inherit; font-size:15px; padding:10px 12px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}
.fld-row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.link-sm{border:0; background:none; padding:0; color:var(--accent); font:500 13px var(--f-body); cursor:pointer; text-decoration:none}
.link-sm:hover{text-decoration:underline}
.link-sm.center{align-self:center}
.pass{position:relative; display:flex}
.pass input{flex:1; padding-right:46px}
.eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:8px; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--muted)}
.eye:hover{color:var(--ink); background:var(--surface-3)}
.eye svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.strength{display:flex; align-items:center; gap:5px}
.strength i{flex:1; height:4px; border-radius:4px; background:var(--line-strong)}
.strength span{font:500 11px/1 var(--f-mono); color:var(--muted); margin-left:6px; min-width:44px; text-align:right}
.strength[data-s="1"] i:nth-child(1){background:var(--late)}
.strength[data-s="2"] i:nth-child(-n+2){background:var(--today)}
.strength[data-s="3"] i{background:var(--accent)}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#cfd3d9; line-height:1.45}
.check input{width:17px; height:17px; margin-top:2px; accent-color:var(--accent); flex:none}
.check a{color:var(--accent)}
.btn.block{width:100%; padding:12px 16px; font-size:15px}
.fine{margin:0; text-align:center; font-size:12.5px; color:var(--faint)}
.auth-msg{margin:0; font-size:14px; padding:10px 12px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--accent-line); color:#d8f7e8}
.auth-msg.err{background:rgba(255,92,92,.1); border-color:rgba(255,92,92,.35); color:var(--late)}
.auth-msg button{border:0; background:none; padding:0; color:inherit; font:inherit; text-decoration:underline; cursor:pointer}

.lp{border-top:1px solid var(--line); padding-block:56px}
.lp-in{display:flex; flex-direction:column; gap:14px}
.lp-h{font-size:clamp(26px, 3vw, 36px); font-weight:700; letter-spacing:-.035em; margin-bottom:10px}
.steps-3{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.steps-3 li{border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:8px}
.steps-3 .n{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font:500 13px var(--f-mono); color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-soft)}
.steps-3 b{font-size:17px; font-weight:600; letter-spacing:-.02em}
.steps-3 p{margin:0; color:var(--muted); font-size:14.5px}
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.obj{border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:18px 20px}
.obj b{font-weight:600}
.obj p{margin:6px 0 0; color:var(--muted); font-size:14.5px}
.lp-cta{margin-top:18px}
.land-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-block:22px 32px; font-size:13px; color:var(--faint)}
.land-foot a{color:var(--muted)}

/* app header extras */
.me{position:relative}
.avatar{width:38px; height:38px; border-radius:50%; border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--accent); font:600 14px var(--f-body); cursor:pointer; display:grid; place-items:center}
.avatar:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.me-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:240px; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:4px; box-shadow:0 24px 48px -16px #000}
.me-menu b{font-weight:600}
.me-menu span{font:500 12.5px var(--f-mono); color:var(--muted); overflow-wrap:anywhere; margin-bottom:8px}
.me-menu .btn{align-self:flex-start; padding-left:0}
.hello{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.hello h1{font-size:clamp(26px, 3vw, 34px); font-weight:700; letter-spacing:-.04em}
.hello p{margin:2px 0 0; font-size:14px}
.name-ask{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 8px 8px 14px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:12px; font-size:14px}
.name-ask input{font:inherit; font-size:14px; padding:7px 10px; border-radius:8px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); min-width:0; width:190px}

.legal{max-width:680px; margin:0 auto; padding:40px max(20px, env(safe-area-inset-right,0px)) 60px max(20px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:10px}
.legal h1{font-size:36px; font-weight:800; letter-spacing:-.04em; margin-top:16px}
.legal h2{font-size:18px; margin-top:18px}
.legal p{margin:0; color:#cfd3d9}
.loading{min-height:60vh; display:grid; place-items:center; color:var(--muted); font-family:var(--f-mono); font-size:13px}
.welcome{display:flex; flex-direction:column; gap:10px; align-items:flex-start; border-color:var(--accent-line)}
.welcome ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; color:#cfd3d9}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero{grid-template-columns:minmax(0,1fr); gap:32px; padding-block:32px 48px}
  .form-col{position:static}
  .steps-3,.faq{grid-template-columns:minmax(0,1fr)}
  .preview{display:none}
  .today-grid{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width: 600px){
  .tabs{width:100%}
  .tab{flex:1}
  .top .btn.primary{width:100%}
  .nx{align-items:flex-start; text-align:left; flex-direction:row; gap:8px; flex-wrap:wrap}
  .row-main{flex-wrap:wrap}
  .row-main .who{flex:1 1 calc(100% - 22px)}
  .row-main .nx{margin-left:19px}
  .stat b{font-size:22px}
  .cell{min-height:54px; padding:5px}
  .chips{display:none}
  .count{display:block; font:500 11px/1 var(--f-mono); color:var(--accent); margin-top:auto}
  .cell.has-late .count{color:var(--late)}
  .grid{gap:4px}
  .auth-card{padding:20px}
  .lead{font-size:16px}
  .top{gap:10px}
  .top .tabs{order:3}
  .top .btn.primary{order:4}
}
@media (prefers-reduced-motion: reduce){ .btn,.card,.tab{transition:none} .btn:hover,.card:hover{transform:none} }