/* Neener Neener
   iPhone first: one-screen app, content scrolls under a translucent header, floating glass tab bar
   with the "+" as its own orange button. From 900px wide (html.desk) the same screens re-flow into a
   desktop app: sidebar, two-column feed and detail with a sticky rail, dialogs instead of sheets.
   When the two conflict, the phone layout wins. Single committed look: OLED black glass, one accent. */
:root{
  color-scheme:dark;
  --ink:#06070B;--ink-2:#101219;
  --glass:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.18);
  --text:#F3F4F7;--text-2:rgba(243,244,247,.64);--text-3:rgba(243,244,247,.40);
  --volt:#FF7A1A;--volt-2:#FFB454;--volt-ink:#1C0C00;--volt-tint:rgba(255,122,26,.12);
  --win:#3CE7A2;--loss:#FF4D6D;--market:#6CB2FF;
  --r-card:22px;--r-el:16px;--r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --font-round:ui-rounded,"SF Pro Rounded",var(--font);
  --volt-text:#FFB454;--hero-a:#FFB454;
  --ink-fade:rgba(6,7,11,.72);--ink-0:rgba(6,7,11,0);
  --track:rgba(255,255,255,.16);--track-lead:rgba(255,255,255,.34);--fill:rgba(255,255,255,.045);
  --bar-bg:rgba(22,24,32,.74);--tab-on:rgba(255,255,255,.12);--hl:rgba(255,255,255,.08);
  --seg-on:rgba(255,255,255,.10);--seg-shadow:rgba(0,0,0,.4);
  --toast-bg:rgba(28,30,38,.94);--scrim:rgba(0,0,0,.55);--shadow:rgba(0,0,0,.5);--shadow-lg:rgba(0,0,0,.6);
  --code-bg:#000;--hover:rgba(255,255,255,.14);--picker-filter:invert(1);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
}
/* Light mode, for the insane. Chosen per account on the You screen; index.php puts the class on <html>. */
html.light{
  color-scheme:light;
  --ink:#F2F3F7;--ink-2:#FFFFFF;
  --glass:#FFFFFF;--glass-2:rgba(16,20,40,.06);
  --line:rgba(16,20,40,.09);--line-2:rgba(16,20,40,.17);
  --text:#0E1016;--text-2:rgba(14,16,22,.66);--text-3:rgba(14,16,22,.46);
  --volt-tint:rgba(255,122,26,.10);--volt-text:#C24E08;--hero-a:#FF9A3D;
  --win:#0B9A63;--loss:#DB2F57;--market:#2A74D6;
  --ink-fade:rgba(242,243,247,.82);--ink-0:rgba(242,243,247,0);
  --track:rgba(16,20,40,.10);--track-lead:rgba(16,20,40,.28);--fill:rgba(16,20,40,.035);
  --bar-bg:rgba(255,255,255,.82);--tab-on:rgba(16,20,40,.07);--hl:rgba(255,255,255,.7);
  --seg-on:#FFFFFF;--seg-shadow:rgba(16,20,40,.14);
  --toast-bg:rgba(255,255,255,.97);--scrim:rgba(20,22,30,.32);--shadow:rgba(20,24,40,.14);--shadow-lg:rgba(20,24,40,.22);
  --code-bg:#FFF3E9;--hover:rgba(16,20,40,.07);--picker-filter:none;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;height:100%;background:var(--ink);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0;width:100%;border-radius:0}
input::placeholder,textarea::placeholder{color:var(--text-3)}
svg{display:block}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
.d-only{display:none!important}
[hidden]{display:none!important}

/* ---------- shell ---------- */
#app{position:fixed;inset:0;overflow:hidden;background:var(--ink);isolation:isolate}
#screens{position:absolute;inset:0}
.side{display:none}
#bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,var(--volt),var(--volt-2));box-shadow:0 0 10px rgba(255,122,26,.7);opacity:0;transition:opacity .2s ease}
html.loading #bar{opacity:1;animation:bar 1.4s ease-in-out infinite}
@keyframes bar{0%{width:0;left:0}50%{width:60%;left:20%}100%{width:0;left:100%}}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--ink)}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.content{padding:0 max(16px,var(--sar)) calc(var(--sab) + 120px) max(16px,var(--sal))}
.screen.has-action .content{padding-bottom:calc(var(--sab) + 150px)}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;min-height:52px;padding:calc(var(--sat) + 6px) max(16px,var(--sar)) 10px max(16px,var(--sal));background:linear-gradient(var(--ink) 55%,var(--ink-fade));backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
.top .title{font-size:17px;font-weight:600;letter-spacing:-.01em;flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .lg{font-size:30px;font-weight:700;letter-spacing:-.03em;flex:1;text-align:left;line-height:1.1;min-width:0}
.top .act{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:50%;color:var(--text);flex:0 0 auto}
.top .act.lbl{min-width:0;padding:0 4px;font-size:16px;color:var(--volt);font-weight:500;border-radius:8px}
.top .act.lbl.strong{font-weight:700}
.top .act.lbl:disabled{color:var(--text-3)}
.top .act.glass{background:var(--glass);border:1px solid var(--line)}
.top .act.ph{visibility:hidden}
.top .acts{display:flex;gap:8px}
.top.clear{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.spacer{flex:1}

@keyframes pushIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes popIn{from{transform:translateX(-18px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetIn{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.screen.a-push{animation:pushIn .34s cubic-bezier(.2,.8,.2,1)}
.screen.a-pop{animation:popIn .28s cubic-bezier(.2,.8,.2,1)}
.screen.a-sheet{animation:sheetIn .38s cubic-bezier(.2,.8,.2,1)}
.screen.a-fade{animation:fadeIn .3s ease}
@media (prefers-reduced-motion:reduce){.screen,.sheet,.sheet-layer,.toast{animation:none!important}html.loading #bar{animation:none;width:100%;left:0}}

/* ---------- brand ---------- */
.wordmark{font-family:var(--font-round);font-weight:800;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.wordmark .echo{opacity:.36;margin-left:.2em}

/* ---------- avatars ---------- */
.av{--s:32px;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:calc(var(--s) * .4);color:#fff;background:var(--c,#444);flex:0 0 auto;letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.25);overflow:hidden;line-height:1}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.ring{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--volt)}
.avs{display:flex}
.avs .av{--s:22px;border:2px solid var(--ink);margin-left:-7px;font-size:9px}
.avs .av:first-child{margin-left:0}
.avs .more{font-size:11px;color:var(--text-3);font-weight:600;align-self:center;margin-left:4px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:var(--r-el);font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap;transition:transform .12s ease,opacity .15s ease,filter .15s ease,background .15s ease}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.38;pointer-events:none}
.btn.busy{opacity:.6;pointer-events:none}
.btn-primary{background:linear-gradient(150deg,var(--volt-2),var(--volt) 70%);color:var(--volt-ink);box-shadow:0 10px 32px rgba(255,122,26,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-glass{background:var(--glass-2);border:1px solid var(--line);color:var(--text)}
.btn-ghost{color:var(--text-2)}
.btn-danger{color:var(--loss);background:rgba(255,77,109,.10);border:1px solid rgba(255,77,109,.2)}
.btn-sm{height:38px;font-size:14px;padding:0 14px;border-radius:12px}
.btn-block{width:100%}
.btn svg{width:18px;height:18px}
.link{color:var(--volt-text);font-weight:600;font-size:13px}

/* ---------- cards & lists ---------- */
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.card.orange{background:linear-gradient(160deg,rgba(255,122,26,.16),rgba(255,122,26,.06));border-color:rgba(255,122,26,.3)}
.stack{display:flex;flex-direction:column;gap:12px}
.sec{display:flex;align-items:baseline;gap:10px;margin:22px 4px 10px}
.sec h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
.sec .n{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sec .right{margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--line);font-size:13px;font-weight:600;white-space:nowrap}
.chip.volt{background:var(--volt-tint);border-color:rgba(255,122,26,.35);color:var(--volt-text)}
.chip.win{color:var(--win);background:rgba(60,231,162,.10);border-color:rgba(60,231,162,.25)}
.chip.loss{color:var(--loss);background:rgba(255,77,109,.10);border-color:rgba(255,77,109,.25)}
.chip svg{width:14px;height:14px}
.muted{color:var(--text-2)}.faint{color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
.empty{padding:28px 18px;text-align:center;color:var(--text-3);font-size:14px;border:1px dashed var(--line-2);border-radius:var(--r-card);line-height:1.45}
.empty b{color:var(--text-2);font-weight:600}

/* ---------- poll card ---------- */
.poll{display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.poll-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);min-width:0}
.poll-meta .who{color:var(--text);font-weight:600;white-space:nowrap}
.poll-meta .av{--s:24px}
.poll-meta .locks{display:inline-flex;align-items:center;gap:5px;color:var(--text-3);white-space:nowrap}
.poll-meta .locks svg{width:13px;height:13px}
.poll .q{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.28;text-wrap:balance;overflow-wrap:anywhere}
.split{display:flex;gap:3px;height:10px}
.split i{display:block;flex:1 1 0;border-radius:999px;background:var(--track);min-width:4px}
.split i.mine{background:linear-gradient(90deg,var(--volt),var(--volt-2));box-shadow:0 0 14px rgba(255,122,26,.45)}
.split i.lead{background:var(--track-lead)}
.split i.won{background:var(--win);box-shadow:0 0 12px rgba(60,231,162,.35)}
.split.empty i{background:repeating-linear-gradient(90deg,var(--track) 0 6px,transparent 6px 11px)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--text-2)}
.legend li{display:flex;gap:6px;align-items:center;min-width:0}
.legend b{color:var(--text);font-weight:600;overflow-wrap:anywhere}
.legend .pct{font-variant-numeric:tabular-nums}
.legend li.mine b{color:var(--volt-text)}
.legend li.won b{color:var(--win)}
.legend li svg{width:13px;height:13px;color:var(--win)}
.legend.two{justify-content:space-between}
.legend.two li:last-child{flex-direction:row-reverse;text-align:right}
.poll-foot{display:flex;align-items:center;gap:8px;margin-top:2px;min-height:38px}
.poll-foot .due{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);min-width:0;flex-wrap:wrap}
.poll-foot .due svg{width:14px;height:14px;flex:0 0 auto}
.poll-foot .due .lt{color:var(--text-3)}
.lockchip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:12px;background:var(--volt-tint);border:1px solid rgba(255,122,26,.3);color:var(--volt-text);font-size:14px;font-weight:600;white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.lockchip svg{width:14px;height:14px;flex:0 0 auto}
.statechip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--text-3);background:var(--glass);border:1px solid var(--line);white-space:nowrap}
.delta{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;padding:0 10px;height:32px;display:inline-flex;align-items:center;border-radius:10px}
.delta.up{color:var(--win);background:rgba(60,231,162,.10)}
.delta.down{color:var(--loss);background:rgba(255,77,109,.10)}
.mkt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);min-width:0}
.mkt .dot{width:7px;height:7px;border-radius:50%;background:var(--market);box-shadow:0 0 8px var(--market);flex:0 0 auto}
.mkt b{color:var(--market);font-weight:600}
.ribbon{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:700;color:var(--volt-text);letter-spacing:.01em}
.ribbon svg{width:13px;height:13px}

/* ---------- feed ---------- */
.rating-pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--line);font-weight:700;font-size:15px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rating-pill .d{font-size:12px;font-weight:700}
.up{color:var(--win)}.down{color:var(--loss)}
.jump{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--volt-tint);border:1px solid rgba(255,122,26,.3);color:var(--volt-text);font-size:13px;font-weight:600;margin:12px 0 0}
.jump svg{width:14px;height:14px}
.seg{display:flex;padding:3px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}
.seg button{flex:1;height:32px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--text-2);text-align:center;white-space:nowrap;padding:0 10px}
.seg button[aria-current]{background:var(--seg-on);color:var(--text);box-shadow:0 1px 4px var(--seg-shadow)}
.feed-seg{margin-top:4px}
.banners{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.banner{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line);text-align:left}
.banner.win{background:linear-gradient(160deg,rgba(255,122,26,.18),rgba(255,122,26,.06));border-color:rgba(255,122,26,.35)}
.banner .pts{font-family:var(--font-round);font-weight:800;font-size:22px;letter-spacing:-.04em;min-width:52px;font-variant-numeric:tabular-nums}
.banner.win .pts{color:var(--volt-text)}
.banner:not(.win) .pts{color:var(--loss)}
.banner .t{flex:1;min-width:0}
.banner .t b{display:block;font-size:14.5px;font-weight:600}
.banner .t span{display:block;font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner .chev{color:var(--text-3)}
.banner .chev svg{width:16px;height:16px}

/* ---------- tab bar ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 8px);display:flex;justify-content:center;align-items:center;gap:12px;z-index:30;pointer-events:none;padding:0 16px}
.tabbar .pill{pointer-events:auto;display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--bar-bg);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);border:1px solid var(--line-2);box-shadow:0 12px 36px var(--shadow),inset 0 1px 0 var(--hl)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:80px;height:54px;border-radius:999px;color:var(--text-3);font-size:11px;font-weight:600}
.tab svg{width:22px;height:22px}
.tab[aria-current]{background:var(--tab-on);color:var(--text)}
.tabbar .plus{pointer-events:auto;width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,var(--volt-2),var(--volt) 70%);color:var(--volt-ink);box-shadow:0 12px 36px rgba(255,122,26,.4),inset 0 1px 0 rgba(255,255,255,.4);display:grid;place-items:center;transition:transform .12s ease}
.tabbar .plus:active{transform:scale(.94)}
.tabbar .plus svg{width:28px;height:28px}

/* ---------- action bar ---------- */
.actionbar{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:28px max(16px,var(--sar)) calc(var(--sab) + 14px) max(16px,var(--sal));background:linear-gradient(var(--ink-0),var(--ink) 38%);display:flex;flex-direction:column;gap:10px}
.hint{font-size:12.5px;color:var(--text-3);text-align:center;line-height:1.4}
.formerr{font-size:13.5px;color:var(--loss);text-align:center;line-height:1.4}
.formerr:empty{display:none}

/* ---------- options ---------- */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line);width:100%;transition:border-color .15s ease,background .15s ease;min-height:56px}
.opt:disabled{cursor:default}
.opt .fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--fill);pointer-events:none}
.opt .radio{position:relative;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto}
.opt .radio svg{width:14px;height:14px;opacity:0}
.opt .lbl{position:relative;flex:1;font-weight:600;font-size:16px;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.opt .lbl small{display:block;font-weight:400;font-size:12.5px;color:var(--text-3);margin-top:2px}
.opt .pct{position:relative;font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:600;font-size:15px;min-width:38px;text-align:right}
.opt .avs{position:relative}
.opt.sel{border-color:var(--volt);background:var(--volt-tint)}
.opt.sel .radio,.opt.mine .radio{background:var(--volt);border-color:var(--volt);color:var(--volt-ink)}
.opt.sel .radio svg,.opt.mine .radio svg,.opt.won .radio svg{opacity:1}
.opt.mine{border-color:rgba(255,122,26,.55);background:var(--volt-tint)}
.opt.mine .pct{color:var(--volt-text)}
.opt.won{border-color:rgba(60,231,162,.5);background:rgba(60,231,162,.08)}
.opt.won .radio{background:var(--win);border-color:var(--win);color:#042415}
.opt.won.mine .radio{background:var(--win);border-color:var(--win)}
.opt.mine:not(.won) .radio svg[width="12"]{width:11px;height:11px}

/* ---------- detail ---------- */
.q-hero{font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.15;text-wrap:balance;margin:6px 0 10px;overflow-wrap:anywhere}
.byline{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);margin-top:4px}
.byline .who{color:var(--text);font-weight:600}
.byline svg{width:15px;height:15px}
.facts{display:flex;flex-direction:column;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line);margin-top:16px}
.fact{display:flex;align-items:center;gap:12px;padding:12px 14px;font-size:14.5px;min-height:48px}
.fact + .fact{border-top:1px solid var(--line)}
.fact svg{width:18px;height:18px;color:var(--text-2);flex:0 0 auto}
.fact .k{color:var(--text-2);flex:1;white-space:nowrap}
.fact .v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:0;overflow-wrap:anywhere}
.fact .v.market{color:var(--market)}
.fact a.v{text-decoration:underline;text-decoration-color:rgba(108,178,255,.4);text-underline-offset:3px}
.desc{color:var(--text-2);font-size:15px;line-height:1.45;margin-top:10px;white-space:pre-line;overflow-wrap:anywhere}
.status{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line);font-size:14.5px;line-height:1.4}
.status svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--text-2)}
.status b{font-weight:600}
.status.win{background:rgba(60,231,162,.07);border-color:rgba(60,231,162,.3)}
.status.win svg{color:var(--win)}
.status.volt{background:var(--volt-tint);border-color:rgba(255,122,26,.3)}
.status.volt svg{color:var(--volt-text)}
.status .btn{margin-top:10px}
.talk{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .av{--s:28px}
.msg .b{background:var(--glass);border:1px solid var(--line);border-radius:16px;border-top-left-radius:6px;padding:9px 12px;font-size:14.5px;line-height:1.35;max-width:84%;white-space:pre-line;overflow-wrap:anywhere}
.msg .b .n{display:block;font-size:12px;color:var(--text-3);margin-bottom:2px;font-weight:600;white-space:normal}
.msg .b .n time{font-weight:400;margin-left:6px}
.msg.me{flex-direction:row-reverse}
.msg.me .b{border-top-left-radius:16px;border-top-right-radius:6px;background:rgba(255,122,26,.10);border-color:rgba(255,122,26,.22)}
.say{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 6px 0 16px;border-radius:23px;background:var(--glass);border:1px solid var(--line)}
.say input{height:44px}
.say .send{width:34px;height:34px;border-radius:50%;background:var(--glass-2);display:grid;place-items:center;color:var(--text-2);flex:0 0 auto}
.say .send svg{width:16px;height:16px}
.say:focus-within .send{background:var(--volt);color:var(--volt-ink)}
.rail > * + *{margin-top:16px}
.rail .card.action{display:flex;flex-direction:column;gap:10px}
.rail .card.action .btn{width:100%}
.rail .facts{margin-top:16px}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:18px}
.fgroup{display:flex;flex-direction:column;gap:8px}
.fgroup > label,.fgroup .lab{font-size:13px;font-weight:600;color:var(--text-2);padding-left:4px}
.field{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line);font-size:16px}
.field.ta{padding:14px 16px;align-items:flex-start}
.field textarea{resize:none;line-height:1.35;min-height:62px;font-size:16px}
.field input{height:50px;font-size:16px}
.field:focus-within{border-color:rgba(255,122,26,.6);box-shadow:0 0 0 3px rgba(255,122,26,.15)}
.field input:focus-visible,.field textarea:focus-visible,.say input:focus-visible{outline:none}
.say:focus-within{border-color:rgba(255,122,26,.5)}
.field .ico{color:var(--text-3);display:grid;place-items:center;flex:0 0 auto}
.field .ico svg{width:18px;height:18px}
.field .x{width:28px;height:28px;border-radius:50%;background:var(--glass-2);display:grid;place-items:center;color:var(--text-2);flex:0 0 auto}
.field .x svg{width:12px;height:12px}
.field .n{font-size:13px;color:var(--text-3);font-weight:600;width:16px;text-align:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
.field input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;text-align:left;color:var(--text)}
.field input[type=date]::-webkit-date-and-time-value{text-align:left}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:var(--picker-filter);opacity:.6;cursor:pointer}
.field.c-date{position:relative}
.field.c-date .ph{position:absolute;left:44px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.field.c-date.has-val .ph,.field.c-date:focus-within .ph{display:none}
.field.c-date:not(.has-val):not(:focus-within) input{color:transparent}
.addrow{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--r-el);border:1px dashed var(--line-2);color:var(--volt-text);font-weight:600;font-size:15px;width:100%;justify-content:center}
.addrow svg{width:16px;height:16px}
.quick{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 4px;scrollbar-width:none;margin:0 -4px}
.quick::-webkit-scrollbar{display:none}
.quick .chip{flex:0 0 auto}
.quick .chip[aria-pressed=true]{background:var(--volt-tint);border-color:rgba(255,122,26,.4);color:var(--volt-text)}
.help{font-size:13px;color:var(--text-3);padding-left:4px;line-height:1.4}
.help b{color:var(--text-2);font-weight:600}
.avatar-pick{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 4px}
.avatar-pick .circle{width:96px;height:96px;border-radius:50%;border:1.5px dashed var(--line-2);display:grid;place-items:center;color:var(--text-3);background:var(--glass);overflow:hidden}
.avatar-pick .circle img{width:100%;height:100%;object-fit:cover}
.avatar-pick .circle svg{width:30px;height:30px}
.avatar-pick .circle .av{--s:96px;font-size:36px}
.avatar-pick .btn{height:36px;font-size:14px;padding:0 14px}
.mktbox{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r-el);background:rgba(108,178,255,.07);border:1px solid rgba(108,178,255,.22);font-size:13.5px}
.mktbox b{color:var(--text);font-weight:600}
.mktbox .row-o{display:flex;justify-content:space-between;gap:10px;color:var(--text-2)}
.mktbox .row-o span:last-child{color:var(--market);font-weight:600;font-variant-numeric:tabular-nums}
.mktbox.err{background:rgba(255,77,109,.07);border-color:rgba(255,77,109,.25);color:var(--text-2)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-el);background:var(--volt-tint);border:1px solid rgba(255,122,26,.3);font-size:14px;color:var(--text)}
.notice svg{width:18px;height:18px;color:var(--volt-text);flex:0 0 auto;margin-top:1px}

/* ---------- welcome ---------- */
.welcome{justify-content:space-between;background:radial-gradient(90% 50% at 50% 18%,rgba(255,122,26,.18),transparent 60%),var(--ink)}
.welcome .hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:calc(var(--sat) + 20px) 24px 0;text-align:center}
.welcome .halo{position:relative;width:148px;height:148px;display:grid;place-items:center}
.welcome .halo::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,138,45,.45),rgba(255,122,26,0) 65%);filter:blur(10px)}
.welcome .halo svg{position:relative}
.welcome .wordmark{font-size:40px;position:relative}
.welcome .tag{font-size:19px;color:var(--text-2);letter-spacing:-.01em;max-width:26ch;text-wrap:balance}
.welcome .actions{display:flex;flex-direction:column;gap:12px;padding:0 20px calc(var(--sab) + 24px)}
.welcome .fine{text-align:center;font-size:13px;color:var(--text-3);margin-top:4px;line-height:1.45}
.welcome .notice{margin:0 20px 14px}

/* ---------- board ---------- */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;align-items:end;margin-top:6px}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line);text-align:center;min-width:0}
.pod .av{--s:52px}
.pod .nm{font-weight:600;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .rt{font-size:22px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.pod .rk{font-size:11px;font-weight:700;color:var(--text-3)}
.pod.first{padding-top:22px;padding-bottom:20px;background:linear-gradient(170deg,rgba(255,122,26,.2),rgba(255,122,26,.05));border-color:rgba(255,122,26,.4);box-shadow:0 14px 44px rgba(255,122,26,.18)}
.pod.first .av{--s:68px;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--volt),0 0 30px rgba(255,122,26,.5)}
.pod.first .rt{font-size:28px;color:var(--volt-text)}
.pod.first .rk{color:var(--volt-text)}
.rows{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:62px;width:100%;text-align:left}
.row + .row{border-top:1px solid var(--line)}
.row .rk{width:20px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;font-size:14px;text-align:center;flex:0 0 auto}
.row .av{--s:38px}
.row .nm{flex:1;min-width:0}
.row .nm b{display:block;font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm span{display:block;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.row .spark{width:52px;height:20px;color:var(--text-3);flex:0 0 auto}
.row .spark.up{color:var(--win)}.row .spark.down{color:var(--loss)}
.row .rt{text-align:right;min-width:54px}
.row .rt b{display:block;font-weight:700;font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.row .rt span{display:block;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-3)}
.row .rt span.up{color:var(--win)}.row .rt span.down{color:var(--loss)}
.row.me{background:var(--volt-tint)}
.row.me .rk{color:var(--volt-text)}
.rows.mini .row{min-height:48px;padding:8px 12px;gap:10px}
.rows.mini .av{--s:30px}
.rows.mini .nm b{font-size:14px}
.rows.mini .rt b{font-size:15px}

/* ---------- profile ---------- */
.me-hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:4px 0 6px}
.me-hero .av{--s:96px;font-size:36px}
.me-hero.is-me .av{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--volt),0 0 40px rgba(255,122,26,.35)}
.me-hero h1{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-top:6px}
.me-hero .h{color:var(--text-3);font-size:14px}
.me-hero .badges{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.bigstat{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin-top:10px}
.bigstat .n{font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;font-family:var(--font-round)}
.bigstat .l{text-align:left;font-size:13px;color:var(--text-2);line-height:1.3;padding-bottom:6px}
.bigstat .l b{display:block;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.stat{padding:14px;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line)}
.stat .v{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.stat .k{font-size:12.5px;color:var(--text-3);margin-top:6px}
.hist{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line);overflow:hidden}
.hrow{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:60px;width:100%;text-align:left;cursor:pointer}
.hrow + .hrow{border-top:1px solid var(--line)}
.hrow .t{flex:1;min-width:0}
.hrow .t b{display:block;font-weight:600;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.hrow .t span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.hrow .d{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right;flex:0 0 auto}
.hrow .d.up{color:var(--win)}.hrow .d.down{color:var(--loss)}.hrow .d.wait{color:var(--text-3);font-weight:500;font-size:13px}
.listbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;border-radius:var(--r-el);background:var(--glass);border:1px solid var(--line);font-size:16px;font-weight:500}
.listbtn svg{width:18px;height:18px;color:var(--text-2)}
.listbtn .chev{margin-left:auto;color:var(--text-3)}
.listbtn.danger,.listbtn.danger svg{color:var(--loss)}

/* ---------- result ---------- */
.result{background:radial-gradient(80% 40% at 50% 0%,rgba(255,122,26,.22),transparent 65%),var(--ink)}
.result.lost{background:radial-gradient(80% 40% at 50% 0%,rgba(255,77,109,.12),transparent 65%),var(--ink)}
.res-hero{text-align:center;padding:14px 0 6px}
.res-hero .ttl{font-size:30px;font-weight:800;letter-spacing:-.035em;font-family:var(--font-round)}
.res-hero .delta-big{font-size:84px;font-weight:800;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;font-family:var(--font-round);background:linear-gradient(170deg,var(--hero-a),var(--volt));-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 2px}
.res-hero .delta-big.neg{background:none;color:var(--loss)}
.res-hero .sub{color:var(--text-2);font-size:15px;text-wrap:balance}
.res-q{margin-top:14px;text-align:center;font-size:14.5px;color:var(--text-2);text-wrap:balance}
.res-q b{color:var(--text)}
.breakdown{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--glass);border:1px solid var(--line);margin-top:18px}
.brow{display:flex;align-items:center;gap:12px;padding:13px 16px}
.brow + .brow{border-top:1px solid var(--line)}
.brow .k{flex:1;min-width:0}
.brow .k b{display:block;font-weight:600;font-size:15px}
.brow .k span{display:block;font-size:12.5px;color:var(--text-3);margin-top:1px}
.brow .v{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.brow.total{background:var(--glass)}
.brow.total .v{color:var(--volt-text);font-size:19px}
.result.lost .brow.total .v{color:var(--loss)}
.taunt{margin-top:18px;border-radius:var(--r-card);padding:20px;background:#000;border:1px solid var(--line-2);position:relative;overflow:hidden}
.taunt::before{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.5),transparent 65%);filter:blur(12px)}
.taunt .wordmark{font-size:30px;position:relative}
.taunt p{position:relative;margin-top:8px;font-size:15px;color:var(--text-2);line-height:1.4;overflow-wrap:anywhere}
.taunt .wordmark + p{margin-top:14px}
.taunt p b{color:var(--text)}
.taunt .mk{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.taunt .mk small{font-size:12px;color:var(--text-3);font-weight:600}
.msg .taunt{margin-top:0;padding:14px 16px;max-width:84%;border-top-left-radius:6px}
.msg.me .taunt{border-top-left-radius:var(--r-card);border-top-right-radius:6px}
.msg .taunt .wordmark{font-size:20px}
.msg .taunt p{font-size:14px;margin-top:6px}
.msg .taunt .wordmark + p{margin-top:10px}

/* ---------- sheets ---------- */
.sheet-layer{position:fixed;inset:0;z-index:60;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .2s ease}
.sheet{position:absolute;left:max(10px,var(--sal));right:max(10px,var(--sar));bottom:calc(var(--sab) + 10px);max-height:calc(100% - var(--sat) - var(--sab) - 30px);overflow-y:auto;background:var(--ink-2);border:1px solid var(--line-2);border-radius:30px;padding:22px 18px 18px;display:flex;flex-direction:column;gap:12px;animation:sheetIn .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 80px var(--shadow-lg)}
.sheet h2{font-size:22px;font-weight:700;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.sheet p{color:var(--text-2);font-size:15px;line-height:1.45}
.sheet .grab{width:38px;height:5px;border-radius:3px;background:var(--line-2);margin:-8px auto 4px;flex:0 0 auto}
.sheet .btn{width:100%;flex:0 0 auto}
.sheet .list{display:flex;flex-direction:column;gap:8px}
.sheet .list .btn{justify-content:flex-start;background:var(--glass);border:1px solid var(--line)}
.sheet .list .btn.danger{color:var(--loss)}
.sheet .list .btn small{margin-left:auto;font-size:12.5px;color:var(--text-3);font-weight:500}
.codebox{display:flex;align-items:center;justify-content:center;min-height:72px;border-radius:var(--r-el);background:var(--code-bg);border:1px solid var(--line-2);font-family:var(--font-round);font-weight:800;font-size:30px;letter-spacing:.02em;color:var(--volt-text);user-select:all;-webkit-user-select:all;padding:0 12px;text-align:center;overflow-wrap:anywhere}
.copyfield{width:100%;height:48px;padding:0 14px;border-radius:12px;background:var(--ink);border:1px solid var(--line-2);font-size:15px;color:var(--text)}
.toast{position:fixed;left:0;right:0;margin:0 auto;width:max-content;top:calc(var(--sat) + 10px);z-index:300;background:var(--toast-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-2);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center;box-shadow:0 10px 30px var(--shadow);animation:sheetIn .3s ease;max-width:calc(100% - 32px)}
.toast svg{width:16px;height:16px;color:var(--win);flex:0 0 auto}
.toast.bad svg{color:var(--loss)}
.fatal{max-width:520px;margin:12vh auto 0;padding:24px}
.fatal h1{font-size:24px;margin:18px 0 10px;letter-spacing:-.02em}
.fatal p{color:var(--text-2);line-height:1.5;margin-top:10px}

/* =====================================================================
   DESKTOP (html.desk, 900px and wider)
   ===================================================================== */
@keyframes dialogIn{from{transform:translate(-50%,-47%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
html.desk .d-only{display:block!important}
html.desk .m-only{display:none!important}
html.desk #app{display:grid;grid-template-columns:248px minmax(0,1fr)}
html.desk #app.noside{grid-template-columns:minmax(0,1fr)}
html.desk #screens{position:relative;inset:auto;min-height:0;min-width:0}
html.desk .side{display:flex;flex-direction:column;gap:6px;padding:26px 16px 20px;border-right:1px solid var(--line);background:var(--ink);min-height:0}
html.desk #app.noside .side{display:none}
html.desk .tabbar{display:none}
.side .wordmark{font-size:26px;padding:4px 10px 20px}
.side .nav{display:flex;flex-direction:column;gap:4px}
.side .nav a{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:14px;font-size:15.5px;font-weight:600;color:var(--text-2);transition:background .15s ease,color .15s ease}
.side .nav a svg{width:21px;height:21px}
.side .nav a[aria-current]{background:var(--glass-2);color:var(--text)}
.side .new{margin-top:16px;width:100%;height:48px;font-size:16px}
.side .grow{flex:1}
.side .me{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);width:100%;min-width:0}
.side .me .av{--s:38px}
.side .me > span:last-child{min-width:0}
.side .me b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me span span{display:block;font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
html.desk .content{max-width:1200px;width:100%;margin:0 auto;padding:8px 40px 60px}
html.desk .screen.has-action .content{padding-bottom:40px}
html.desk .top{min-height:0;gap:14px;padding:22px max(40px,calc((100% - 1200px) / 2 + 40px)) 14px}
html.desk .top .title{text-align:left;font-size:22px;font-weight:700;letter-spacing:-.02em}
html.desk .top .act.ph{display:none}
html.desk .top .seg{width:220px}
html.desk .layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
html.desk .layout > .rail{position:sticky;top:84px}
html.desk .layout .main > .sec:first-child{margin-top:8px}
html.desk .feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
html.desk .center{max-width:640px;margin:0 auto}
html.desk .center.wide{max-width:760px}
html.desk .q-hero{font-size:32px}
html.desk .grid2{grid-template-columns:repeat(4,1fr)}
html.desk .actionbar{position:static;background:var(--ink);border-top:1px solid var(--line);padding:14px 40px 18px;flex-direction:row;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
html.desk .actionbar .btn{min-width:300px}
html.desk .actionbar .hint{text-align:left;max-width:40ch}
html.desk .screen.railed .actionbar{display:none}
html.desk .welcome .hero{gap:26px}
html.desk .welcome .halo{width:200px;height:200px}
html.desk .welcome .halo svg{width:160px;height:160px}
html.desk .welcome .wordmark{font-size:56px}
html.desk .welcome .tag{font-size:22px}
html.desk .welcome .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;padding-bottom:64px}
html.desk .welcome .actions .btn{min-width:240px}
html.desk .welcome .fine{width:100%}
html.desk .welcome .notice{max-width:520px;margin:0 auto 14px}
html.desk .sheet{left:50%;top:50%;right:auto;bottom:auto;width:460px;max-height:calc(100% - 80px);transform:translate(-50%,-50%);border-radius:26px;padding:26px 24px 22px;animation:dialogIn .25s cubic-bezier(.2,.8,.2,1)}
html.desk .sheet .grab{display:none}
html.desk .toast{top:22px}
html.desk .screen.a-push,html.desk .screen.a-pop,html.desk .screen.a-sheet{animation:fadeIn .22s ease}
@media (hover:hover){
  html.desk .poll:hover{border-color:var(--line-2);background:var(--glass-2)}
  html.desk .poll.orange:hover{border-color:rgba(255,122,26,.5)}
  html.desk .btn-primary:hover{filter:brightness(1.07)}
  html.desk .btn-glass:hover,html.desk .listbtn:hover,html.desk .top .act.glass:hover,html.desk .sheet .list .btn:hover{background:var(--hover)}
  html.desk .opt:not(:disabled):hover{border-color:var(--line-2)}
  html.desk .side .nav a:hover{background:var(--glass);color:var(--text)}
  html.desk .row:hover,html.desk .hrow:hover{background:var(--glass)}
  html.desk .banner:hover{border-color:var(--line-2)}
}

/* =====================================================================
   Light mode extras
   ===================================================================== */
html.light .card,html.light .rows,html.light .hist,html.light .facts,html.light .breakdown,html.light .stat,
html.light .pod,html.light .opt,html.light .listbtn,html.light .banner,html.light .field,html.light .say,
html.light .top .act.glass,html.light .rating-pill,html.light .side .me{box-shadow:0 1px 2px rgba(16,20,40,.05)}
html.light .seg{background:rgba(16,20,40,.06);border-color:transparent}
html.light .msg .b{background:#fff}
html.light .msg.me .b{background:rgba(255,122,26,.10)}
/* The taunt card stays black in both themes: it's the thing people screenshot. */
.taunt{--text:#F3F4F7;--text-2:rgba(243,244,247,.64);--text-3:rgba(243,244,247,.40);--line-2:rgba(255,255,255,.18);color:var(--text)}
.taunt svg{color:#fff}
/* Right after switching, a home-screen app keeps its white status-bar text until it's reopened.
   Paint the strip under it dark so the clock stays readable. It has no height once reopened. */
html.light body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#0E1016;z-index:250;pointer-events:none}
.switch{margin-left:auto;width:50px;height:30px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line);position:relative;flex:0 0 auto;transition:background .2s ease}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s ease}
[aria-checked="true"] .switch{background:var(--volt);border-color:var(--volt)}
[aria-checked="true"] .switch::after{transform:translateX(20px)}
.insane{display:grid;place-items:center;width:64px;height:64px;margin:4px auto 2px;border-radius:50%;background:rgba(255,77,109,.12);color:var(--loss)}
.insane svg{width:32px;height:32px}
.sheet h2.center{text-align:center}
/* What someone wrote when they turned on light mode. Always a bright white card, even in dark mode. */
.confession{margin:14px auto 4px;max-width:460px;padding:16px 18px;border-radius:var(--r-card);background:#FFFFFF;color:#0E1016;border:1px solid rgba(16,20,40,.12);box-shadow:0 12px 44px rgba(255,214,150,.28)}
.confession .cf-head{display:flex;align-items:center;gap:8px;font-size:13px;color:#B54708}
.confession .cf-head svg{width:16px;height:16px;flex:0 0 auto}
.confession .cf-head b{font-weight:700}
.confession p{margin-top:8px;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;white-space:pre-line;overflow-wrap:anywhere}
.confession span{display:block;margin-top:8px;font-size:12.5px;color:rgba(14,16,22,.5)}
html.light .confession{box-shadow:0 1px 2px rgba(16,20,40,.06)}
/* Sheets with a text box sit at the top so the iPhone keyboard doesn't cover them. */
.sheet.at-top{top:calc(var(--sat) + 10px);bottom:auto}
.sheet.at-top .grab{display:none}
/* Invite sheet */
.sheet .lab{font-size:13px;font-weight:600;color:var(--text-2);padding-left:4px;margin-bottom:-4px}
.sheet .seg button{height:38px}
.btn-ghost.danger-text{color:var(--loss)}