:root {
  --graphite:#0e0e10; --graphite-2:#141417; --card:#1a1a1d; --card-2:#232326; --card-3:#2d2d31;
  --line:#2a2a2e; --bone:#ede9e0; --bone-dim:#a8a6a0; --bone-faint:#6e6c68;
  --amber:#ff8a00; --amber-deep:#b36200; --wire:#5b8def; --danger:#ff5c5c; --ok:#4cd08a; --warn:#f5c04a;
  --r:18px; --r-sm:11px;
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --glide:cubic-bezier(0.16,1,0.3,1);
  --sym:cubic-bezier(0.65,0,0.35,1);
  --overshoot:cubic-bezier(0.18,1.25,0.4,1);
  --shake:cubic-bezier(0.36,0.07,0.19,0.97);
  --top:calc(env(safe-area-inset-top,0px) + 58px);
  --bottom:env(safe-area-inset-bottom,0px);
  --font:Inter, Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background:
    radial-gradient(60rem 30rem at 50% -14rem, rgba(255,138,0,.10), transparent 70%),
    var(--graphite);
  background-attachment:fixed;
  color:var(--bone); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overscroll-behavior-y:contain;
}
::selection { background:var(--amber); color:var(--graphite); }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; }
a { color:var(--amber); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--wire); outline-offset:2px; border-radius:6px; }
.hidden { display:none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- top bar ---------- */
.top {
  position:fixed; inset:0 0 auto 0; z-index:40; height:var(--top);
  padding:env(safe-area-inset-top,0px) 12px 0;
  display:flex; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--graphite) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:9px; font-weight:900; font-size:21px; letter-spacing:-.05em; padding:6px 4px; }
.mark { position:relative; width:12px; height:12px; border-radius:50%; background:var(--bone-faint); transition:background .4s; }
.mark::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:0; }
.mark[data-conn="live"] { background:var(--amber); color:var(--amber); }
.mark[data-conn="live"]::after { animation:ring-out 2.6s ease-out infinite; }
.mark[data-conn="retry"] { background:var(--warn); color:var(--warn); }
.mark[data-conn="retry"]::after { animation:ring-out 1s ease-out infinite; }
.mark[data-conn="down"] { background:var(--danger); }
@keyframes ring-out { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(2.6); opacity:0; } }
.back { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; margin-left:-4px;
  transition:transform .45s var(--spring), background .2s; }
.back:active { transform:scale(.86); transition-duration:.08s; }
.thread-title { display:flex; align-items:center; gap:10px; min-width:0; font-weight:800; letter-spacing:-.02em; }
.thread-title span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spacer { flex:1; }

.tabs { position:relative; display:flex; gap:2px; padding:4px; background:var(--graphite-2); border:1px solid var(--line); border-radius:999px; }
.tabs .pill { position:absolute; top:4px; bottom:4px; left:4px; width:0; border-radius:999px; background:var(--amber);
  transition:left .42s var(--sym), width .42s var(--sym); }
.tabs button { position:relative; z-index:1; padding:7px 12px; border-radius:999px; font-size:13px; font-weight:600; color:var(--bone-dim);
  transition:color .25s; display:flex; align-items:center; gap:6px; }
.tabs button.active { color:var(--graphite); font-weight:800; }
.count { min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--amber); color:var(--graphite); font-size:11px; font-weight:900; font-variant-numeric:tabular-nums;
  transition:transform .45s var(--spring); }
.tabs button.active .count { background:var(--graphite); color:var(--amber); }
.count.bump { transform:scale(1.4); }
.count:empty, .count[data-n="0"] { display:none; }
.iconbtn { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid transparent;
  color:var(--bone-dim); transition:transform .45s var(--spring), border-color .25s, color .25s, background .25s; }
.iconbtn:hover { color:var(--bone); border-color:var(--line); }
.iconbtn:active { transform:scale(.86); transition-duration:.08s; }
.iconbtn svg { width:20px; height:20px; }

/* ---------- layout ---------- */
main { padding:calc(var(--top) + 10px) 0 calc(var(--bottom) + 96px); max-width:760px; margin:0 auto; min-height:100%; }
.view { padding:0 12px; }
.filters { display:flex; gap:8px; padding:4px 2px 12px; overflow-x:auto; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.chip { flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--bone-dim); font-size:13px; font-weight:600;
  transition:transform .45s var(--spring), background .25s, color .25s, border-color .25s; }
.chip.on { background:var(--bone); color:var(--graphite); border-color:var(--bone); }
.chip:active { transform:scale(.92); transition-duration:.08s; }
.chip .count { background:var(--amber); color:var(--graphite); }

.board { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.board::-webkit-scrollbar { display:none; }
.board:empty { display:none; }
.board .pin-card { flex:none; width:min(78vw, 300px); scroll-snap-align:start; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; cursor:pointer;
  transition:transform .5s var(--spring), border-color .25s; }
.board .pin-card:active { transform:scale(.97); transition-duration:.08s; }
.pin-card .who { font-size:12px; color:var(--bone-faint); display:flex; gap:6px; align-items:center; }
.pin-card .t { font-weight:800; letter-spacing:-.01em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-card .s { color:var(--bone-dim); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.loadmore { display:block; margin:0 auto 14px; font-size:13px; color:var(--bone-faint); padding:8px 14px; }
.day { display:flex; align-items:center; gap:12px; color:var(--bone-faint); font-size:12px; font-weight:600; margin:18px 4px 10px; }
.day::before, .day::after { content:""; flex:1; height:1px; background:var(--line); }

/* ---------- messages ---------- */
.feed { display:flex; flex-direction:column; gap:10px; }
.msg { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:start; position:relative;
  touch-action:pan-y; transition:transform .45s var(--spring), opacity .3s; }
.msg.dragging { transition:none; }
.msg.enter { animation:msg-in .6s var(--spring) both; }
@keyframes msg-in { from { opacity:0; transform:translateY(18px) scale(.97); } }
.msg.flash .bubble { animation:flash 1.6s var(--glide); }
@keyframes flash { 0%,30% { border-color:var(--amber); box-shadow:0 0 0 4px rgba(255,138,0,.18); } }
.msg.out { grid-template-columns:minmax(0,1fr); justify-items:end; }
.msg.out .av { display:none; }
.collapse { overflow:hidden; transition:height .38s var(--glide), margin .38s var(--glide), opacity .25s !important; }

.av { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-size:17px; font-weight:800;
  background:color-mix(in srgb, var(--c, var(--bone-faint)) 18%, var(--card-2)); color:var(--c, var(--bone));
  border:1px solid color-mix(in srgb, var(--c, var(--line)) 35%, var(--line)); user-select:none; }

.bubble { position:relative; min-width:0; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:4px var(--r) var(--r) var(--r); padding:11px 14px 12px; transition:border-color .3s, background .3s; }
.msg.out .bubble { width:auto; max-width:86%; background:color-mix(in srgb, var(--amber) 13%, var(--card));
  border-color:color-mix(in srgb, var(--amber) 30%, var(--line)); border-radius:var(--r) 4px var(--r) var(--r); }
.bubble.asking { border-color:color-mix(in srgb, var(--amber) 55%, var(--line));
  background:linear-gradient(180deg, rgba(255,138,0,.07), transparent 60%), var(--card); }
.bubble.asking::before { content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--amber); }
.bubble.st-error { border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }
.bubble.st-ok { border-color:color-mix(in srgb, var(--ok) 32%, var(--line)); }

.meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--bone-faint); margin-bottom:3px; min-height:22px; }
.meta b { color:var(--bone-dim); font-weight:700; font-size:13px; }
.meta time { font-variant-numeric:tabular-nums; }
.meta .tools { margin-left:auto; display:flex; gap:2px; opacity:.55; transition:opacity .2s; }
.bubble:hover .meta .tools, .meta .tools .on { opacity:1; }
.meta .tools button { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:var(--bone-faint);
  transition:transform .4s var(--spring), color .2s; }
.meta .tools button:active { transform:scale(.8); transition-duration:.08s; }
.meta .tools button.on { color:var(--amber); }
.meta .tools svg { width:16px; height:16px; }
.msg.out .meta { justify-content:flex-end; }

.state { display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 7px; border-radius:999px; font-size:11px; font-weight:800;
  background:var(--card-2); color:var(--bone-dim); transition:background .35s, color .35s; }
.state i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.state.running { color:var(--wire); }
.state.running i { background:none; border:2px solid color-mix(in srgb, var(--wire) 30%, transparent); border-top-color:var(--wire); width:10px; height:10px; animation:spin .7s linear infinite; }
.state.waiting { color:var(--amber); }
.state.waiting i { animation:dot-pulse 1.4s ease-in-out infinite; }
.state.ok { color:var(--ok); } .state.error { color:var(--danger); } .state.warn { color:var(--warn); } .state.info { color:var(--wire); }
@keyframes spin { to { transform:rotate(1turn); } }
@keyframes dot-pulse { 50% { transform:scale(.55); opacity:.5; } }

.title { font-weight:800; font-size:16px; letter-spacing:-.015em; line-height:1.3; margin:1px 0 3px; overflow-wrap:anywhere; }
.md { color:var(--bone); overflow-wrap:anywhere; }
.msg:not(.out) .md { color:color-mix(in srgb, var(--bone) 88%, var(--bone-dim)); }
.md p + p, .md ul, .md ol, .md pre, .md h1, .md h2, .md h3 { margin-top:6px; }
.md ul, .md ol { padding-left:20px; }
.md h1, .md h2, .md h3 { font-size:15px; font-weight:800; }
.md code { font-family:var(--mono); font-size:.88em; background:var(--card-2); padding:1px 5px; border-radius:5px; }
.md blockquote, .b-quote { border-left:3px solid var(--line); padding-left:10px; color:var(--bone-dim); margin-top:6px; }

.blocks { display:grid; gap:9px; margin-top:8px; }
.blocks:first-child { margin-top:2px; }
.b-h { font-size:14px; font-weight:800; letter-spacing:-.01em; margin-top:4px; }
.b-kv { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:14px; }
.b-kv dt { color:var(--bone-faint); }
.b-kv dd { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.b-code { position:relative; }
.b-code pre { font:12.5px/1.55 var(--mono); background:var(--graphite-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; overflow:auto; max-height:320px; white-space:pre; color:var(--bone); }
.b-code.log pre { background:#09090a; color:#cfcac0; }
.b-code .ln-err { color:var(--danger); } .b-code .ln-warn { color:var(--warn); } .b-code .ln-ok { color:var(--ok); }
.b-code .copy { position:absolute; top:6px; right:6px; }
.bar { height:8px; border-radius:999px; background:var(--card-2); overflow:hidden; border:1px solid var(--line); }
.bar i { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--amber-deep), var(--amber));
  transition:width .9s var(--glide); }
.bubble.st-ok .bar i { background:linear-gradient(90deg, #2d8a58, var(--ok)); }
.bubble.st-error .bar i { background:var(--danger); }
.b-progress .lbl { display:flex; justify-content:space-between; font-size:12px; color:var(--bone-dim); margin-bottom:5px; font-variant-numeric:tabular-nums; }
.b-status { justify-self:start; }
.b-list { padding-left:20px; }
.b-list li + li { margin-top:2px; }
hr.b-div { border:0; height:1px; background:var(--line); }
.b-metric .v { font-size:30px; font-weight:900; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.1; }
.b-metric .l { font-size:12px; color:var(--bone-faint); }
.b-metric .d { font-size:12px; font-weight:800; margin-left:6px; }
.metrics { display:flex; flex-wrap:wrap; gap:18px 26px; }
.tone-ok { color:var(--ok); } .tone-warn { color:var(--warn); } .tone-error { color:var(--danger); } .tone-info { color:var(--wire); }
.img { display:block; max-width:100%; max-height:420px; border-radius:var(--r-sm); border:1px solid var(--line); cursor:zoom-in; background:var(--card-2); }
figure figcaption { font-size:12px; color:var(--bone-faint); margin-top:4px; }
.links { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.link { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 11px; border-radius:999px; background:var(--card-2);
  border:1px solid var(--line); color:var(--bone); font-size:13px; font-weight:600; transition:border-color .25s, transform .45s var(--spring); }
.link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link:hover { border-color:var(--amber); text-decoration:none; }
.link:active { transform:scale(.95); transition-duration:.08s; }
.link svg { width:14px; height:14px; flex:none; color:var(--amber); }
iframe.html { width:100%; height:120px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; display:block; margin-top:8px;
  transition:height .45s var(--glide); }
.json { font:12.5px/1.55 var(--mono); background:var(--graphite-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; overflow:auto; max-height:360px; margin-top:8px; }
.json details { padding-left:14px; }
.json summary { margin-left:-14px; cursor:pointer; color:var(--bone-dim); list-style:none; }
.json summary::before { content:"▸"; display:inline-block; width:14px; transition:transform .3s var(--spring); }
.json details[open] > summary::before { transform:rotate(90deg); }
.json .k { color:var(--wire); } .json .s { color:#d6b27a; } .json .n { color:var(--ok); } .json .z { color:var(--bone-faint); }
.delivery { font-size:11px; color:var(--bone-faint); margin-top:6px; }
.delivery.fail { color:var(--danger); }

/* ---------- requests ---------- */
.ask { margin-top:12px; display:grid; gap:10px; }
.choices { display:flex; flex-wrap:wrap; gap:8px; }
.choice { position:relative; min-height:42px; padding:10px 18px; border-radius:13px; border:1px solid var(--line); background:var(--card-2);
  font-weight:700; font-size:14px; overflow:hidden; touch-action:none; user-select:none;
  transition:transform .5s var(--spring), background .25s, border-color .25s, color .25s, opacity .3s; }
.choice:hover { border-color:var(--bone-faint); }
.choice:active { transform:scale(.93); transition:transform .08s ease-out; }
.choice.primary { background:var(--amber); border-color:var(--amber); color:var(--graphite); box-shadow:0 4px 0 var(--amber-deep); }
.choice.primary:active { transform:translateY(3px) scale(.97); box-shadow:0 1px 0 var(--amber-deep); }
.choice.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }
.choice.busy { opacity:.55; pointer-events:none; }
.choice.hold .fill { position:absolute; inset:0; background:color-mix(in srgb, var(--danger) 26%, transparent); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease-out; }
.choice.hold.holding .fill { transform:scaleX(1); transition:transform .9s linear; }
.choice.hold .lab { position:relative; }
.choice.hold small { font-weight:600; opacity:.65; margin-left:6px; }
.fields { display:grid; gap:9px; }
.field { display:grid; gap:4px; }
.field > span { font-size:12px; color:var(--bone-dim); font-weight:600; }
.input, .fields input, .fields select, .fields textarea {
  width:100%; background:var(--graphite-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; outline:none;
  transition:border-color .25s, box-shadow .25s; resize:vertical; }
.input:focus, .fields input:focus, .fields select:focus, .fields textarea:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,138,0,.12); }
.input.error { border-color:var(--danger); animation:shake-x .45s var(--shake) both; }
@keyframes shake-x { 10%,90% { transform:translateX(-1px); } 20%,80% { transform:translateX(2px); } 30%,50%,70% { transform:translateX(-4px); } 40%,60% { transform:translateX(4px); } }
.reply { display:flex; gap:8px; align-items:flex-end; }
.reply textarea { min-height:42px; max-height:160px; }
.deadline { font-size:12px; color:var(--bone-faint); font-variant-numeric:tabular-nums; }
.deadline.soon { color:var(--amber); }
.answer { display:flex; align-items:center; gap:10px; margin-top:12px; padding:9px 12px; border-radius:var(--r-sm); background:var(--graphite-2);
  border:1px solid var(--line); font-size:14px; }
.answer svg { flex:none; width:24px; height:24px; }
.answer .ring { fill:none; stroke:var(--ok); stroke-width:2.5; stroke-dasharray:66; stroke-dashoffset:0; }
.answer .tick { fill:none; stroke:var(--ok); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16; stroke-dashoffset:0; }
.answer.draw .ring { animation:draw66 .5s ease forwards; }
.answer.draw .tick { stroke-dashoffset:16; animation:draw16 .3s ease .35s forwards; }
@keyframes draw66 { from { stroke-dashoffset:66; } to { stroke-dashoffset:0; } }
@keyframes draw16 { to { stroke-dashoffset:0; } }
.answer.expired .ring, .answer.expired .tick { stroke:var(--bone-faint); }
.answer b { font-weight:800; }
.answer .via { margin-left:auto; font-size:12px; color:var(--bone-faint); white-space:nowrap; }
.answer .fv { color:var(--bone-dim); font-size:13px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 16px; border-radius:13px;
  border:1px solid var(--line); background:var(--card-2); font-weight:700; font-size:14px;
  transition:transform .5s var(--spring), border-color .25s, background .25s; }
.btn:hover { border-color:var(--bone-faint); }
.btn:active { transform:scale(.94); transition:transform .08s ease-out; }
.btn.primary { background:var(--amber); border-color:var(--amber); color:var(--graphite); }
.btn.danger { color:var(--danger); }
.btn.block { width:100%; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* ---------- composer ---------- */
.composer { position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 12px calc(10px + var(--bottom));
  background:linear-gradient(180deg, transparent, var(--graphite) 38%); }
.composer-inner { max-width:760px; margin:0 auto; }
.slash { display:flex; gap:6px; overflow-x:auto; padding:0 0 8px; scrollbar-width:none; }
.slash::-webkit-scrollbar { display:none; }
.slash button { flex:none; padding:6px 11px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px;
  animation:pop-in .4s var(--spring) both; animation-delay:calc(var(--i) * 40ms); }
.slash button b { color:var(--amber); font-family:var(--mono); font-weight:700; margin-right:6px; }
.slash button span { color:var(--bone-faint); }
@keyframes pop-in { from { opacity:0; transform:translateY(8px) scale(.9); } }
.bar-in { display:flex; align-items:flex-end; gap:8px; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 18px 40px -22px #000; transition:border-color .25s; }
.bar-in:focus-within { border-color:color-mix(in srgb, var(--amber) 55%, var(--line)); }
.target { flex:none; display:flex; align-items:center; gap:6px; height:38px; padding:0 10px 0 4px; border-radius:16px; background:var(--card-2);
  font-size:13px; font-weight:700; max-width:42%; transition:transform .45s var(--spring); }
.target:active { transform:scale(.92); transition-duration:.08s; }
.target .av { width:30px; height:30px; border-radius:11px; font-size:14px; }
.target span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-in textarea { flex:1; min-width:0; min-height:38px; max-height:160px; padding:8px 4px; background:none; border:0; outline:none; resize:none; line-height:1.4; }
.bar-in textarea::placeholder { color:var(--bone-faint); }
.send { flex:none; width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:var(--amber); color:var(--graphite);
  transition:transform .5s var(--spring), opacity .25s, background .25s; }
.send:active { transform:scale(.84); transition:transform .08s ease-out; }
.send[disabled] { background:var(--card-3); color:var(--bone-faint); }
.send svg { width:18px; height:18px; }

/* ---------- threads ---------- */
.threads { display:grid; gap:4px; }
.thread { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px; border-radius:var(--r);
  text-align:left; width:100%; transition:background .25s, transform .45s var(--spring); }
.thread:hover { background:var(--card); }
.thread:active { transform:scale(.98); transition-duration:.08s; }
.thread .av { width:44px; height:44px; border-radius:15px; font-size:20px; }
.thread .n { font-weight:800; letter-spacing:-.01em; display:flex; gap:8px; align-items:center; }
.thread .p { color:var(--bone-faint); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread .r { display:grid; justify-items:end; gap:4px; font-size:12px; color:var(--bone-faint); font-variant-numeric:tabular-nums; }
.muted-tag { font-size:11px; color:var(--bone-faint); font-weight:600; }
.empty { text-align:center; color:var(--bone-dim); padding:56px 20px; display:grid; gap:10px; justify-items:center; }
.empty h3 { color:var(--bone); font-size:18px; letter-spacing:-.02em; }
.empty p { max-width:36ch; font-size:14px; }
.empty code { font-family:var(--mono); font-size:12px; background:var(--card); border:1px solid var(--line); padding:8px 10px; border-radius:10px; display:block; text-align:left; white-space:pre-wrap; max-width:100%; color:var(--bone-dim); }

/* ---------- alarms ---------- */
.quick { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 16px; }
.quick .chip { font-variant-numeric:tabular-nums; }
.alarms { display:grid; gap:10px; }
.alarm { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); touch-action:pan-y;
  transition:transform .45s var(--spring), opacity .3s, border-color .3s; }
.alarm.dragging { transition:none; }
.alarm.off { opacity:.55; }
.alarm.ringing { border-color:var(--amber); animation:ring-glow 1.2s ease-in-out infinite; }
@keyframes ring-glow { 50% { box-shadow:0 0 0 6px rgba(255,138,0,.14); } }
.alarm .clock { font-size:34px; font-weight:900; letter-spacing:-.05em; font-variant-numeric:tabular-nums; line-height:1; }
.alarm .clock small { font-size:14px; font-weight:700; letter-spacing:0; color:var(--bone-faint); margin-left:3px; }
.alarm .info { min-width:0; }
.alarm .lbl { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alarm .sub { font-size:13px; color:var(--bone-faint); display:flex; gap:10px; flex-wrap:wrap; }
.alarm .sub .rep { color:var(--bone-dim); }
.cring { width:40px; height:40px; }
.cring svg { transform:rotate(-90deg); }
.cring .bg { fill:none; stroke:var(--card-2); stroke-width:4; }
.cring .fg { fill:none; stroke:var(--amber); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.section-h { font-size:13px; color:var(--bone-faint); font-weight:700; margin:20px 4px 8px; }

.switch { width:50px; height:30px; flex:none; border-radius:999px; background:var(--card-2); border:1px solid var(--line); padding:3px;
  transition:background .3s, border-color .3s; }
.switch i { display:block; width:22px; height:22px; border-radius:50%; background:var(--bone-faint); transition:transform .45s var(--spring), background .3s; }
.switch.on { background:var(--amber-deep); border-color:var(--amber); }
.switch.on i { transform:translateX(20px); background:var(--amber); }

/* ---------- sheet ---------- */
.scrim { position:fixed; inset:0; z-index:60; background:rgba(5,5,6,.6); opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.show { opacity:1; pointer-events:auto; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:61; max-width:620px; margin:0 auto; max-height:88vh; overflow:auto;
  background:var(--graphite-2); border:1px solid var(--line); border-bottom:0; border-radius:26px 26px 0 0;
  padding:10px 18px calc(22px + var(--bottom)); transform:translateY(105%); transition:transform .55s var(--overshoot); }
.sheet.show { transform:translateY(0); }
.sheet .grab { width:40px; height:5px; border-radius:99px; background:var(--card-3); margin:0 auto 12px; }
.sheet h2 { font-size:20px; letter-spacing:-.03em; margin-bottom:12px; }
.sheet .row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.sheet .row:last-child { border-bottom:0; }
.sheet .row .t { font-weight:700; }
.sheet .row .d { font-size:13px; color:var(--bone-faint); }
.sheet .stack { display:grid; gap:12px; }
.sheet .opts { display:grid; gap:4px; }
.opt { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:10px; border-radius:14px; transition:background .2s, transform .45s var(--spring); }
.opt:hover, .opt.on { background:var(--card); }
.opt:active { transform:scale(.98); transition-duration:.08s; }
.opt .danger { color:var(--danger); }
.mono { font-family:var(--mono); font-size:12.5px; overflow-wrap:anywhere; color:var(--bone-dim); }
.big-time { font-size:56px; font-weight:900; letter-spacing:-.06em; text-align:center; background:none; border:0; outline:none; width:100%;
  font-variant-numeric:tabular-nums; color-scheme:dark; }
.pills { display:flex; gap:6px; flex-wrap:wrap; }
.stepper { display:flex; align-items:center; gap:12px; }
.stepper button { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card-2); font-size:18px;
  transition:transform .4s var(--spring), border-color .25s; }
.stepper button:active { transform:scale(.84); transition-duration:.08s; }
.stepper .v { min-width:3ch; text-align:center; font-size:22px; font-weight:900; font-variant-numeric:tabular-nums; transition:transform .4s var(--spring), color .25s; }
.stepper .v.bump { transform:scale(1.3); color:var(--amber); }

/* ---------- toasts ---------- */
.toasts { position:fixed; left:0; right:0; top:calc(var(--top) + 10px); z-index:80; display:grid; justify-items:center; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; max-width:min(92vw, 460px);
  background:var(--card-2); border:1px solid var(--line); border-radius:14px; padding:10px 14px; font-size:14px; box-shadow:0 18px 36px -18px #000;
  transform:translateY(-140%) scale(.94); opacity:0; transition:transform .55s var(--overshoot), opacity .25s; }
.toast.show { transform:none; opacity:1; }
.toast.err { border-color:color-mix(in srgb, var(--danger) 55%, var(--line)); }
.toast button { color:var(--amber); font-weight:800; }
.toast .drain { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--amber); transform-origin:left; animation:drain var(--d, 4s) linear forwards; }
@keyframes drain { to { transform:scaleX(0); } }

/* ---------- ring screen ---------- */
.ringer { position:fixed; inset:0; z-index:90; display:grid; grid-template-rows:1fr auto; justify-items:center; padding:calc(40px + env(safe-area-inset-top,0px)) 24px calc(34px + var(--bottom));
  background:radial-gradient(40rem 40rem at 50% 38%, rgba(255,138,0,.16), transparent 60%), var(--graphite);
  opacity:0; pointer-events:none; transition:opacity .35s; }
.ringer.show { opacity:1; pointer-events:auto; }
.ringer .center { display:grid; justify-items:center; align-content:center; gap:14px; text-align:center; }
.orb { width:148px; height:148px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--bone), var(--amber) 32%, var(--amber-deep) 72%);
  animation:breathe 2.4s ease-in-out infinite; margin-bottom:18px; }
@keyframes breathe { 0%,100% { transform:scale(.9); box-shadow:0 0 30px 0 rgba(255,138,0,.25); } 50% { transform:scale(1.07); box-shadow:0 0 80px 18px rgba(255,138,0,.4); } }
.ringer .now { font-size:76px; font-weight:900; letter-spacing:-.07em; line-height:.95; font-variant-numeric:tabular-nums; }
.ringer .label { font-size:20px; color:var(--bone-dim); font-weight:600; max-width:22ch; }
.ringer .actions { width:min(100%, 380px); display:grid; gap:14px; }
.unlock { position:relative; height:62px; border-radius:999px; border:1px solid var(--line); background:var(--card); overflow:hidden; touch-action:none; user-select:none; }
.unlock .u-fill { position:absolute; inset:0 auto 0 0; width:62px; background:color-mix(in srgb, var(--amber) 22%, transparent); }
.unlock .u-label { position:absolute; inset:0; display:grid; place-items:center; color:var(--bone-dim); font-weight:700; padding-left:40px; }
.unlock .u-thumb { position:absolute; top:5px; left:5px; width:52px; height:52px; border-radius:50%; background:var(--amber); color:var(--graphite);
  display:grid; place-items:center; transition:left .45s var(--spring), background .25s; cursor:grab; }
.unlock.dragging .u-thumb { transition:background .25s; }
.unlock.done .u-thumb { background:var(--ok); }
.unlock .u-thumb svg { width:22px; height:22px; }

/* ---------- lightbox & gate ---------- */
.lightbox { position:fixed; inset:0; z-index:95; background:rgba(5,5,6,.92); display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s; }
.lightbox.show { opacity:1; pointer-events:auto; }
.lightbox img { max-width:100%; max-height:100%; border-radius:12px; transform:scale(.92); transition:transform .5s var(--spring); }
.lightbox.show img { transform:none; }
.gate { min-height:100vh; display:grid; place-items:center; padding:24px; }
.gate form { width:min(100%, 380px); display:grid; gap:12px; }
.gate h1 { font-size:44px; letter-spacing:-.06em; }
.gate p { color:var(--bone-dim); font-size:14px; }

@media (min-width:720px) {
  .msg { grid-template-columns:38px minmax(0,1fr); }
  .av { width:38px; height:38px; }
}

/* ---------- additions for app.js ---------- */
.md pre { font:12.5px/1.55 var(--mono); background:var(--graphite-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; overflow:auto; white-space:pre; max-height:320px; }
.md pre code { background:none; padding:0; font-size:inherit; }
.md a { overflow-wrap:anywhere; }
.bump { animation:pop .42s var(--spring); }
.count.bump { animation:none; }
@keyframes pop { 40% { transform:scale(1.14); } }
.error-shake, .bar-in.error, .btn.error, .opt.error, .big-time.error, .fields .error { animation:shake-x .45s var(--shake) both; }
.choice.hold .fill, .choice.hold .lab { pointer-events:none; }
.meta > span:not(.state) { color:var(--bone-faint); }
.thread-title .av { width:30px; height:30px; border-radius:10px; font-size:15px; }
.sheet h2 { display:flex; align-items:center; gap:10px; }
.sheet h2 .av { width:32px; height:32px; border-radius:11px; font-size:16px; }
.opt .av { width:34px; height:34px; }
.opt svg { width:18px; height:18px; flex:none; color:var(--bone-dim); }
.opt .t { font-weight:700; }
.opt .d { font-size:12px; color:var(--bone-faint); }
.b-code .copy { width:30px; height:30px; background:var(--card-2); border-color:var(--line); opacity:.7; }
.b-code .copy:hover { opacity:1; }
.b-code .copy svg { width:15px; height:15px; }
.toggle-row { padding:4px 0; }
.toggle-row > span { font-size:14px; color:var(--bone); font-weight:600; }
.thread .count { justify-self:end; }
#sheetFeed .msg { grid-template-columns:34px minmax(0,1fr); }
.gate code { font-size:12px; background:var(--card); padding:1px 6px; border-radius:6px; }
.alarm .clock { min-width:0; }
@media (max-width:380px) { .tabs button { padding:7px 9px; } .brand span:last-child { display:none; } }
.btn svg { width:18px; height:18px; flex:none; }
@media (max-width:460px) {
  .top { gap:6px; padding-left:10px; padding-right:6px; }
  .brand { font-size:19px; }
  .tabs button { padding:7px 10px; font-size:12.5px; gap:4px; }
  .iconbtn { width:36px; height:36px; }
}
@media (max-width:400px) { .brand span:last-child { display:none; } }