[hidden]{display:none!important}
:root{
  color-scheme:dark;
  --bg:#0f172a; --surface:#1e293b; --surface-2:#334155;
  --border:#475569; --border-strong:#64748b;
  --text:#e2e8f0; --text-muted:#94a3b8;
  --accent:#38bdf8; --accent-ink:#0f172a;
  --green:#4ade80; --yellow:#fbbf24; --orange:#fb923c; --red:#f87171; --purple:#a78bfa;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --r-sm:4px; --r:8px; --r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'SF Mono','Fira Code','Consolas',monospace;
}
body{background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.7; font-size:16px; margin:0}
button{font:inherit; border-radius:var(--r); padding:10px 16px; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-ink); border:0; font-weight:600}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border-strong)}
.btn-secondary:hover:not(:disabled){background:var(--surface-2)}
button:disabled{opacity:.4; cursor:not-allowed}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent); outline-offset:2px}
input,textarea{background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r); padding:10px 12px; font:inherit; box-sizing:border-box; width:100%}
textarea{resize:vertical; min-height:88px; line-height:1.5}
::placeholder{color:var(--text-muted); opacity:1}

.wrap{max-width:720px; margin:0 auto; padding-inline:16px; padding-block:32px 64px; display:flex; flex-direction:column; gap:var(--sp-8)}
header h1{font-size:2rem; line-height:1.25; margin:0; letter-spacing:-.01em}
header p{margin:var(--sp-1) 0 0; color:var(--text-muted)}
h2{font-size:1.1rem; line-height:1.4; margin:0}
.label{font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted)}

/* The box */
.box{border:3px solid var(--border-strong); border-radius:12px; background:var(--surface); overflow:hidden; transition:border-color .3s}
.box.sealed{border-color:var(--yellow)}
.lid{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--surface-2); border-bottom:3px solid var(--border-strong); transition:border-color .3s}
.box.sealed .lid{border-bottom-color:var(--yellow)}
.lock{width:30px; height:30px; flex:0 0 auto; color:var(--text-muted); transition:color .3s}
.lock .shackle{transform:translateY(-4px); transition:transform .35s cubic-bezier(.5,1.6,.5,1)}
.box.sealed .lock{color:var(--yellow)}
.box.sealed .lock .shackle{transform:translateY(0)}
.lid-text{flex:1 1 auto; min-width:0}
.lid-title{font-weight:700; line-height:1.3}
.lid-status{color:var(--text-muted); font-size:14px; line-height:1.5}
.slots{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); padding:var(--sp-4)}
@media (max-width:600px){ .slots{grid-template-columns:1fr} header h1{font-size:1.55rem} }
.slot{border:2px dashed var(--border); border-radius:var(--r); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); min-height:170px; box-sizing:border-box; background:var(--bg); transition:border-color .2s, background .2s}
.slot.filled{border-style:solid; border-color:var(--border-strong)}
.slot.locked{border-color:color-mix(in srgb, var(--yellow) 55%, var(--border)); background:color-mix(in srgb, var(--yellow) 5%, var(--bg))}
.slot.drop-ok{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg))}
.slot-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2)}
.chip{font-size:12.5px; font-weight:700; border-radius:var(--r-pill); padding:2px 10px; line-height:1.5; white-space:nowrap}
.chip.locked{background:color-mix(in srgb, var(--yellow) 16%, transparent); color:var(--yellow)}
.chip.open{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent)}
.chip.waiting{background:var(--surface-2); color:var(--text)}
.slot-task{font-size:1.15rem; font-weight:600; line-height:1.4; flex:1 1 auto; overflow-wrap:anywhere}
.slot-since{font-size:14px; color:var(--text-muted)}
.slot-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.slot-actions button{padding:8px 14px; font-size:15px}
.btn-done{background:var(--green); color:var(--accent-ink); border:0; font-weight:600}
.btn-done:hover:not(:disabled){filter:brightness(1.08)}
.slot-form{display:flex; flex-direction:column; gap:var(--sp-2); flex:1 1 auto}
.slot-hint{font-size:14px; color:var(--text-muted); margin:0}
.hold{position:relative; overflow:hidden; background:transparent; color:var(--text-muted); border:1px solid var(--border); user-select:none; -webkit-user-select:none; touch-action:none}
.hold:hover:not(:disabled){color:var(--text); border-color:var(--border-strong)}
.hold .fill{position:absolute; inset:0; background:color-mix(in srgb, var(--orange) 30%, transparent); transform:scaleX(0); transform-origin:left; pointer-events:none}
.hold.holding .fill{transform:scaleX(1); transition:transform 1.5s linear}
.hold span{position:relative}
.box-foot{display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-4) var(--sp-4); flex-wrap:wrap}
.box-foot .note{flex:1 1 200px; min-width:0; color:var(--text-muted); font-size:14px}
.btn-lock{display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--yellow); color:var(--accent-ink); border:0; font-weight:700; flex:0 0 auto}
.btn-lock:hover:not(:disabled){filter:brightness(1.08)}
.btn-lock svg{width:18px; height:18px}

/* Brain dump + lists */
.panel{display:flex; flex-direction:column; gap:var(--sp-3)}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.panel-head .sub{color:var(--text-muted); font-size:14px}
.dump-row{display:flex; gap:var(--sp-2); align-items:flex-end; flex-wrap:wrap}
.dump-row textarea{flex:1 1 280px}
.dump-row button{flex:0 0 auto}
.hint{font-size:14px; color:var(--text-muted); margin:0}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.item{display:flex; align-items:center; gap:var(--sp-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4)}
.item[draggable="true"]{cursor:grab}
.item .text{flex:1 1 auto; min-width:0; overflow-wrap:anywhere; line-height:1.45}
.item .acts{display:flex; gap:var(--sp-1); flex:0 0 auto}
.item button{padding:6px 12px; font-size:14px}
.btn-x{background:transparent; border:1px solid transparent; color:var(--text-muted)}
.btn-x:hover:not(:disabled){color:var(--red); border-color:var(--border)}
.empty{color:var(--text-muted); font-size:15px; border:1px dashed var(--border); border-radius:var(--r); padding:var(--sp-3) var(--sp-4); margin:0}
details.done summary{cursor:pointer; list-style:none; display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3)}
details.done summary::-webkit-details-marker{display:none}
details.done summary h2::before{content:"\25B8"; display:inline-block; margin-right:var(--sp-2); color:var(--text-muted); transition:transform .2s}
details.done[open] summary h2::before{transform:rotate(90deg)}
details.done .list{margin-top:var(--sp-3)}
.done-item{display:flex; gap:var(--sp-3); align-items:baseline; padding:var(--sp-2) var(--sp-4); border-left:3px solid var(--green); background:var(--surface); border-radius:0 var(--r) var(--r) 0}
.done-item .text{flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.done-item .when{flex:0 0 auto; font-family:var(--font-mono); font-size:13px; color:var(--text-muted); font-variant-numeric:tabular-nums}
.savebar{font-size:13px; color:var(--text-muted); text-align:center}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r); padding:8px 8px 8px 16px; display:flex; align-items:center; gap:var(--sp-3); box-shadow:0 8px 24px rgba(0,0,0,.4); max-width:calc(100vw - 32px); box-sizing:border-box; z-index:10}
.toast button{padding:6px 12px; font-size:14px}
@keyframes stamp{0%{transform:scale(1.4); opacity:0} 60%{transform:scale(.95); opacity:1} 100%{transform:scale(1)}}
.stamp{animation:stamp .4s ease-out}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* auth pages + header bar */
.auth{min-height:100vh; display:grid; place-items:center; padding-inline:16px; box-sizing:border-box}
.auth-card{box-sizing:border-box; width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-2)}
.auth-card h1{font-size:1.4rem; line-height:1.3; margin:0}
.auth-card label{font-size:14px; color:var(--text-muted); margin-top:var(--sp-2)}
.auth-card button{margin-top:var(--sp-4)}
.auth-lock{width:36px; height:36px; color:var(--yellow)}
.muted{color:var(--text-muted); margin:0}
.error-alert{background:color-mix(in srgb, var(--red) 12%, transparent); border:1px solid var(--red); color:var(--text); border-radius:var(--r); padding:var(--sp-2) var(--sp-3); font-size:15px}
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4)}
.topbar .signout{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1)}
.topbar button{padding:6px 12px; font-size:14px}
.savebar.bad{color:var(--orange)}
.lock .keyhole{fill:var(--surface-2)}