:root{
  --bg:#0b0b0f; --panel:#15151c; --panel2:#1c1c26; --line:#2a2a38;
  --text:#f2f2f5; --muted:#9a9ab0; --red:#e50914; --red-text:#ff5252; --green:#22c55e; --amber:#f59e0b;
  --accent:#87D2F9;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
a{color:#7db4ff}
header.topbar{position:sticky;top:0;z-index:30;background:rgba(11,11,15,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
header.topbar .brand{font-weight:800;font-size:18px}
header.topbar nav{display:flex;gap:8px;margin-left:auto;align-items:center;flex-wrap:wrap}
header.topbar nav a, .btn-link{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;text-decoration:none;cursor:pointer}
header.topbar nav a.active{background:var(--red);border-color:var(--red);color:#fff}
.userchip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.userchip img{width:26px;height:26px;border-radius:50%}
main{max-width:860px;margin:0 auto;padding:12px 12px 110px}
.banner{background:#3a2b05;border:1px solid var(--amber);color:#ffd97a;border-radius:10px;padding:9px 12px;font-size:13px;margin:10px 0}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.controls select,.controls input[type="search"],.controls input[type="date"]{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:14px}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:14px;cursor:pointer}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.btn.hunt-on{background:var(--red);border-color:#ff5560;color:#fff;font-weight:800}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:6px 11px;font-size:13px;cursor:pointer}
.chip.on{background:#fff;color:#111;border-color:#fff;font-weight:700}
.card{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin:0 0 10px;text-decoration:none;color:var(--text);cursor:pointer;align-items:flex-start}
.card:hover{border-color:#3d3d55}
.rank{font-size:17px;font-weight:800;color:var(--muted);min-width:26px;text-align:center;padding-top:6px}
.thumb{width:132px;min-width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:#000}
.card .meta{flex:1;min-width:0}
.card .title{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .channel{color:var(--muted);font-size:13px;margin-top:3px}
.card .stats{font-size:12px;color:var(--muted);margin-top:5px;display:flex;gap:8px;flex-wrap:wrap}
.badge{display:inline-block;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;background:#2e7d32;color:#fff}
.badge.hot{background:var(--red)}
.badge.est{background:#555}
.badge.flag{background:var(--amber);color:#111}
.views{font-size:16px;font-weight:800;text-align:right;white-space:nowrap}
.views small{display:block;color:var(--muted);font-weight:400;font-size:11px}
h2.section{font-size:16px;margin:20px 0 10px}
.section-note{color:var(--muted);font-size:13px;margin:-4px 0 10px}
/* Filters sheet */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;display:none}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--panel);border-radius:18px 18px 0 0;padding:16px 16px 26px;max-height:86vh;overflow:auto;display:none;max-width:860px;margin:0 auto}
.sheet.open,.sheet-backdrop.open{display:block}
.sheet h3{margin:2px 0 12px;font-size:19px}
.field{margin:0 0 14px}
.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field select{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px;font-size:15px}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.switch{position:relative;width:50px;height:29px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#3a3a48;border-radius:999px;transition:.15s;cursor:pointer}
.slider:before{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider:before{transform:translateX(21px)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.sheet-actions{display:flex;gap:10px;margin-top:16px}
.sheet-actions .btn{flex:1;padding:13px;font-size:15px}
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:35;background:#fff;color:#111;font-weight:700;border:none;border-radius:999px;padding:13px 22px;font-size:15px;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:pointer}
/* History / admin */
.timeline{border-left:2px solid var(--line);margin:8px 0 0 6px;padding-left:16px}
.tl-item{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.tl-item:before{content:"";position:absolute;left:-23px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.tl-item .when{color:var(--muted);font-size:12px}
.tl-item .what{font-size:14px;margin-top:2px}
.tl-item .what b{font-weight:700}
.tl-item details{font-size:12px;color:var(--muted);margin-top:5px;word-break:break-word}
.tl-item .flex{display:flex;gap:10px;align-items:flex-start}
.tl-item img.thumb{width:110px;min-width:110px}
.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:16px 0;color:var(--muted);font-size:14px}
.summary{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.summary .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:110px}
.summary .stat b{display:block;font-size:20px}
.summary .stat span{color:var(--muted);font-size:12px}
.empty{color:var(--muted);text-align:center;padding:30px 0;font-size:14px}
/* Login */
.login-wrap{max-width:420px;margin:8vh auto;padding:0 16px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.login-card h1{font-size:22px;margin:0 0 6px}
.login-card p{color:var(--muted);font-size:14px}
.login-card input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px;font-size:16px;letter-spacing:2px;text-transform:uppercase}
.login-card input.plain{letter-spacing:normal;text-transform:none}
.login-card .btn{width:100%;padding:13px;margin-top:10px;font-size:15px}
.btn.discord{background:#5865F2;border-color:#5865F2;color:#fff;font-weight:700}
.err{background:#3d0a0e;border:1px solid var(--red);color:#ffb3b8;border-radius:10px;padding:9px 12px;font-size:13px;margin:10px 0;display:none}
.or{text-align:center;color:var(--muted);font-size:12px;margin:14px 0}
/* Thumbnail Lab */
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.thumb-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:9px;display:flex;flex-direction:column;gap:6px}
.thumb-card .thumb-wrap{position:relative}
.thumb-card img.thumb{width:100%;min-width:0;aspect-ratio:16/9}
.thumb-card .badge{position:absolute;top:6px;left:6px}
.thumb-card .sim-badge{position:absolute;top:6px;right:6px;background:#1d4ed8}
.thumb-card .title{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thumb-card .channel{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb-card .stats{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.thumb-card .actions{display:flex;gap:6px;margin-top:auto}
.thumb-card .actions .btn{flex:1;padding:7px 6px;font-size:12.5px}
.ab-entry{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin:0 0 12px}
.ab-pair{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ab-pair figure{margin:0;width:200px;max-width:44%}
.ab-pair img{width:100%;border-radius:9px;background:#000}
.ab-pair figcaption{color:var(--muted);font-size:12px;margin-top:4px}
.ab-arrow{align-self:center;font-size:22px;color:var(--muted)}
.perf-line{font-size:13.5px;margin-top:8px}
.perf-line .up{color:var(--green);font-weight:700}
.perf-line .down{color:var(--red-text);font-weight:700}
.save-modal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.save-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;width:100%;max-width:380px;max-height:84vh;overflow:auto}
.save-box h3{margin:0 0 12px;font-size:17px}
.save-box .save-pick{display:block;width:100%;text-align:left;margin:0 0 8px}
/* Site footer (legal links; the metric note appears on data pages) */
.site-footer{border-top:1px solid var(--line);margin-top:34px;padding:16px 4px 10px;color:var(--muted);font-size:12.5px;line-height:1.55}
.site-footer .metric-note{display:block;margin-top:5px}
/* Legal documents (/privacy, /terms) */
.doc{max-width:760px;margin:0 auto;padding:20px 16px 60px;line-height:1.65;font-size:15px}
.doc h1{font-size:26px;margin:10px 0 4px}
.doc h2{font-size:18px;margin:26px 0 8px}
.doc p,.doc li{color:#d9d9e4}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin:0 0 8px}
.doc .updated{color:var(--muted);font-size:13px}
.doc .backlink{font-size:13px;margin:0}
/* ---- Polish pass: app shell rhythm, landing pages, admin members ---- */
header.topbar{padding:12px 16px}
header.topbar .brand{letter-spacing:.2px}
header.topbar .brand .net{color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:2.5px;margin-left:8px;vertical-align:2px}
header.topbar nav a, .btn-link{transition:border-color .12s,background .12s}
header.topbar nav a:hover, .btn-link:hover{border-color:var(--accent);color:#fff}
.userchip{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 6px;color:var(--text)}
main{padding:16px 14px 110px}
.btn{transition:border-color .12s,background .12s,transform .05s}
.btn:hover{border-color:#45455e}
.btn:active{transform:translateY(1px)}
.btn.danger{border-color:#5c1a1e;color:#ff9aa0}
.btn.danger:hover{border-color:var(--red);background:#2a0d10}
.btn.small{padding:6px 11px;font-size:12.5px}
.card{transition:border-color .12s,transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.controls select:focus,.controls input:focus,.login-card input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(135,210,249,.18)}
.login-card input{transition:border-color .12s,box-shadow .12s}
/* Landing (logged-out pages: /login, /signup, /forgot, /change-password) */
.login-wrap{max-width:440px;margin:6vh auto}
.brand-head{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.brand-head .brand-network{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:3.5px;line-height:1.2}
.brand-head .brand-product{font-size:27px;font-weight:800;line-height:1.15}
.tagline{color:var(--muted);font-size:14.5px;margin:2px 0 4px}
.notice{background:#0d2b18;border:1px solid var(--green);color:#b7f4cd;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0;display:none;line-height:1.5}
.login-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px}
.login-links a{color:var(--accent);text-decoration:none}
.login-links a:hover{text-decoration:underline}
.login-card .field label{font-size:13px}
/* Admin: Members & sign-ups */
.member-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 8px}
.member-row .m-name{font-weight:700;font-size:14.5px}
.member-row .m-meta{color:var(--muted);font-size:12.5px}
.member-row .m-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.status-badge{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.status-badge.active{background:#14532d;color:#bbf7d0}
.status-badge.pending{background:#57400a;color:#fde68a}
.status-badge.rejected,.status-badge.disabled{background:#3f1d20;color:#fda4af}
.status-badge.outdated{background:#57400a;color:#fde68a}
.admin-badge{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;background:#123a52;color:var(--accent)}
.reset-banner{background:#241a04;border:1px solid var(--amber);border-radius:12px;padding:10px 12px;margin:0 0 8px;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.temp-reveal{background:#0d2b18;border:1px solid var(--green);border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:13.5px;line-height:1.55}
.temp-reveal code{background:#000;border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:14px;color:#b7f4cd}
.subsection{font-size:14.5px;margin:16px 0 8px;color:var(--text)}
/* ---- Modern background redesign (2026-10-17): ambient glows + fine grid,
   glass panels, soft depth. Layered over the base theme; no markup changes. */
:root{--radius:16px;--line:rgba(255,255,255,.09);--panel:rgba(19,23,33,.72);--panel2:rgba(255,255,255,.055)}
html{background:#05070b}
body{isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(60rem 34rem at 15% -10%, rgba(135,210,249,.16), transparent 60%),
  radial-gradient(52rem 30rem at 88% -6%, rgba(88,101,242,.13), transparent 60%),
  radial-gradient(70rem 42rem at 50% 115%, rgba(20,184,166,.07), transparent 62%),
  linear-gradient(180deg,#080b11 0%,#05070b 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.033) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 95% 62% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 95% 62% at 50% 0%,#000 25%,transparent 78%)}
@media (prefers-reduced-motion: no-preference){
  body::before{animation:bgdrift 28s ease-in-out infinite alternate}
  @keyframes bgdrift{from{transform:scale(1.12) translate3d(-1.5%,-1%,0)}to{transform:scale(1.12) translate3d(1.5%,1.5%,0)}}
}
::selection{background:rgba(135,210,249,.35)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
header.topbar{background:rgba(7,9,13,.72);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.08)}
.card,.tl-item,.summary .stat,.thumb-card,.ab-entry,.member-row,.reset-banner,.temp-reveal{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.card:hover{border-color:rgba(135,210,249,.38);box-shadow:0 16px 38px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.login-wrap{position:relative}
.login-wrap::before{content:"";position:absolute;inset:-46px -30px auto;height:300px;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 62% at 50% 38%,rgba(135,210,249,.20),transparent 70%);filter:blur(22px)}
.login-card{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),rgba(13,16,24,.82);
  border:1px solid rgba(255,255,255,.11);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.sheet,.save-box{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),rgba(13,16,24,.92);
  border-color:rgba(255,255,255,.11);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.banner,.notice,.err{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* ---- Modern v2 (2026-10-17): stronger aurora + grain, gradient type and
   buttons, gradient-border auth card, micro-interactions. CSS-only. */
:root{color-scheme:dark}
body::before{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(62rem 36rem at 12% -12%, rgba(135,210,249,.22), transparent 60%),
  radial-gradient(54rem 32rem at 90% -8%, rgba(99,102,241,.19), transparent 60%),
  radial-gradient(46rem 26rem at 78% 108%, rgba(236,72,153,.06), transparent 60%),
  radial-gradient(70rem 42rem at 50% 115%, rgba(20,184,166,.09), transparent 62%),
  linear-gradient(180deg,#090c13 0%,#05070b 100%)}
header.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(135,210,249,.55),rgba(129,140,248,.55),transparent)}
header.topbar .brand{background:linear-gradient(92deg,#fff 30%,#cfe9fb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header.topbar .brand .net{-webkit-text-fill-color:var(--accent)}
h2.section{font-size:17px;letter-spacing:-.01em}
h2.section::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2.5px;background:linear-gradient(135deg,var(--accent),#818cf8);margin-right:9px;vertical-align:2px;box-shadow:0 0 12px rgba(135,210,249,.55)}
.views,.stats,.summary,.tl-item .when,.card .stats{font-variant-numeric:tabular-nums}
.card .thumb,.thumb-card img.thumb{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb{transform:scale(1.035)}
.thumb-card:hover img.thumb{transform:scale(1.03)}
.btn.primary{background:linear-gradient(180deg,#ff2e3e,#e50914 55%,#c10811);border-color:rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(229,9,20,.34),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.discord{background:linear-gradient(180deg,#6a76ff,#5865F2 55%,#4752c4);border-color:rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(88,101,242,.32),inset 0 1px 0 rgba(255,255,255,.25)}
header.topbar nav a.active{background:linear-gradient(180deg,#ff2e3e,#d90419);border-color:rgba(255,255,255,.16);box-shadow:0 6px 18px rgba(229,9,20,.3)}
.chip.on{background:linear-gradient(180deg,#ffffff,#d9ecfd);box-shadow:0 6px 16px rgba(255,255,255,.14)}
.controls select,.controls input,.login-card input,.field select{background:rgba(255,255,255,.05);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
:focus-visible{outline:2px solid rgba(135,210,249,.75);outline-offset:2px}
.brand-head .brand-network{display:inline-block;border:1px solid rgba(135,210,249,.35);background:rgba(135,210,249,.08);padding:3px 9px;border-radius:999px}
.brand-head .brand-product{background:linear-gradient(94deg,#ffffff 15%,#a8dcf7 58%,#a5b4fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em}
.login-card{position:relative;border-color:transparent}
.login-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(135,210,249,.55),rgba(255,255,255,.09) 32%,rgba(129,140,248,.4) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.fab{background:linear-gradient(180deg,#ffffff,#d9ecfd);box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.25),0 8px 26px rgba(135,210,249,.18)}
.tl-item:before{background:linear-gradient(135deg,var(--accent),#818cf8);box-shadow:0 0 10px rgba(135,210,249,.6)}
/* ---- Modern v3 (2026-10-17): living background — drifting aurora with a slow
   hue cycle, breathing grid, travelling sheen on the auth card's gradient
   border, button sheen, and staggered entrance motion. Transform/opacity-led;
   everything below is disabled under prefers-reduced-motion. */
body::before{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(62rem 36rem at 12% -12%, rgba(135,210,249,.24), transparent 60%),
  radial-gradient(54rem 32rem at 90% -8%, rgba(99,102,241,.21), transparent 60%),
  radial-gradient(30rem 20rem at 88% 62%, rgba(129,140,248,.12), transparent 65%),
  radial-gradient(26rem 18rem at 4% 78%, rgba(56,189,248,.10), transparent 65%),
  radial-gradient(46rem 26rem at 78% 108%, rgba(236,72,153,.07), transparent 60%),
  radial-gradient(70rem 42rem at 50% 115%, rgba(20,184,166,.10), transparent 62%),
  linear-gradient(180deg,#090c13 0%,#05070b 100%)}
@media (prefers-reduced-motion: no-preference){
  body::before{animation:bgdrift2 24s ease-in-out infinite alternate}
  @keyframes bgdrift2{
    0%{transform:scale(1.15) translate3d(-2.5%,-1.5%,0) rotate(-.4deg);filter:hue-rotate(0deg)}
    50%{filter:hue-rotate(16deg)}
    100%{transform:scale(1.15) translate3d(2.5%,2%,0) rotate(.4deg);filter:hue-rotate(0deg)}}
  body::after{animation:gridbreath 20s ease-in-out infinite alternate;transform-origin:50% 0}
  @keyframes gridbreath{from{transform:scale(1)}to{transform:scale(1.05) translateY(6px)}}
  .login-card::before{background-size:220% 220%;animation:borderflow 7s ease-in-out infinite}
  @keyframes borderflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  .login-card{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .card,.tl-item,.thumb-card,.member-row,.summary .stat{animation:rise .55s cubic-bezier(.2,.7,.2,1) both}
  .card:nth-child(2),.thumb-card:nth-child(2){animation-delay:.05s}
  .card:nth-child(3),.thumb-card:nth-child(3){animation-delay:.1s}
  .card:nth-child(4),.thumb-card:nth-child(4){animation-delay:.15s}
  .card:nth-child(5),.thumb-card:nth-child(5){animation-delay:.2s}
  .card:nth-child(6),.thumb-card:nth-child(6){animation-delay:.25s}
  .card:nth-child(7),.thumb-card:nth-child(7){animation-delay:.3s}
  .card:nth-child(8),.thumb-card:nth-child(8){animation-delay:.35s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .btn.primary{position:relative;overflow:hidden}
  .btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);transform:translateX(-130%)}
  .btn.primary:hover::after{transition:transform .7s ease;transform:translateX(130%)}
}
/* ---- Auth pages: true screen centering (2026-10-17) ---- */
.login-wrap{max-width:440px;min-height:100dvh;margin:0 auto;padding:28px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.login-card{width:100%}
.login-wrap .site-footer{width:100%;margin-top:18px;text-align:center;border-top:none;padding-top:0}
/* ---- Board reorganization (2026-10-17): page head, sticky toolbar with
   segmented groups, medallion ranks, hero outlier rail, skeleton + empty
   states. Scoped to .board-main / board-only classes so history, lookup
   and doc pages keep their existing layout untouched. */
.board-main{--stick-top:148px;padding-bottom:56px}
.board-head{margin:2px 0 4px}
.board-title{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:0}
.board-summary{color:var(--muted);font-size:13.5px;margin:3px 0 10px;min-height:20px}
.toolbar{position:sticky;top:64px;z-index:20;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:9px;margin:0 -2px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.09);
  background:rgba(9,12,18,.84);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.seg{display:flex;gap:2px;padding:3px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:999px;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.seg button:hover{color:#fff}
.seg-sort button.on{background:linear-gradient(180deg,#ffffff,#d9ecfd);color:#111;box-shadow:0 4px 12px rgba(255,255,255,.16)}
.seg-time button.on{background:linear-gradient(180deg,#a8dcf7,#87D2F9);color:#0b1520;box-shadow:0 4px 14px rgba(135,210,249,.3)}
.toolbar .btn{white-space:nowrap}
.toolbar .btn.hunt-on{box-shadow:0 8px 22px rgba(229,9,20,.35)}
.board-main .fab{position:static;left:auto;bottom:auto;transform:none;margin-left:auto;
  display:inline-flex;align-items:center;padding:9px 15px;font-size:14px;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.fbadge{background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:800;
  padding:1px 7px;margin-left:7px;box-shadow:0 4px 10px rgba(229,9,20,.4)}
.legacy-controls{display:none!important}
/* In-chart source switcher: pill chrome matching the segmented
   groups; the select's face is the current source's name. */
.source-switch{appearance:none;-webkit-appearance:none;max-width:100%;min-width:0;cursor:pointer;
  background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239fb3c8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid rgba(255,255,255,.09);color:var(--text);border-radius:999px;
  padding:8px 30px 8px 13px;font-size:13.5px;font-weight:700}
.source-switch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(135,210,249,.18)}
.source-switch option,.source-switch optgroup{background:var(--panel2);color:var(--text)}
.board-main h2.section{position:sticky;top:var(--stick-top);z-index:10;
  background:rgba(8,11,17,.87);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:9px 12px;margin-left:-12px;margin-right:-12px;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.count{background:rgba(135,210,249,.14);color:var(--accent);border:1px solid rgba(135,210,249,.3);
  border-radius:999px;font-size:12px;font-weight:700;padding:2px 9px;vertical-align:2px;margin-left:9px}
#flaggedWrap .count{background:rgba(245,158,11,.15);color:#fcd34d;border-color:rgba(245,158,11,.35)}
.board-main .card{padding:12px;gap:13px}
.board-main .card .rank{width:34px;height:34px;min-width:34px;border-radius:50%;padding-top:0;
  display:flex;align-items:center;justify-content:center;align-self:center;
  font-size:14px;color:#dbeafe;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15)}
.board-main .card .rank.r1{background:linear-gradient(180deg,#ff2e3e,#c10811);color:#fff;border-color:rgba(255,255,255,.3);
  box-shadow:0 6px 16px rgba(229,9,20,.4)}
.board-main .card .flagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.board-main .card .stats{gap:6px 14px;margin-top:8px;align-items:baseline}
.board-main .card .stat{display:inline-flex;align-items:baseline;gap:5px}
.board-main .card .stat .k{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.board-main .card .stat b{color:var(--text);font-weight:700;font-size:12.5px}
.board-main .card .stat.meta-cat{color:var(--muted)}
.board-main .card .rail{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin-left:auto;padding-left:4px;min-width:88px}
.board-main .card .outlier-badge{font-size:13px;padding:4px 10px;border-radius:9px;
  background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.35)}
.board-main .card .outlier-badge.hot{font-size:18px;padding:7px 13px;border-radius:11px;color:#fff;
  background:linear-gradient(180deg,#ff2e3e,#c10811);border-color:rgba(255,255,255,.2);
  box-shadow:0 8px 22px rgba(229,9,20,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.board-main .card .outlier-badge .est-note{font-size:10px;font-weight:600;opacity:.85}
.board-main .card .views{font-size:17px}
.empty-state{border:1.5px dashed rgba(255,255,255,.16);border-radius:16px;padding:36px 20px;
  text-align:center;background:rgba(255,255,255,.02);margin:6px 0 10px}
.empty-state .empty-title{font-size:16.5px;font-weight:700}
.empty-state p{color:var(--muted);font-size:13.5px;margin:6px 0 14px}
.skel{display:flex;gap:12px;padding:12px;border-radius:16px;margin:0 0 10px;
  border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03)}
.sk-thumb{width:132px;min-width:132px;aspect-ratio:16/9;border-radius:9px;background:rgba(255,255,255,.07)}
.sk-lines{flex:1;padding-top:5px;min-width:0}
.sk-line{height:12px;border-radius:6px;background:rgba(255,255,255,.07);margin:0 0 10px}
.sk-rail{width:64px;height:46px;border-radius:10px;background:rgba(255,255,255,.06);flex:none}
@media (prefers-reduced-motion: no-preference){
  .skel{position:relative;overflow:hidden}
  .skel::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
    transform:translateX(-100%);animation:skelshimmer 1.3s infinite}
  @keyframes skelshimmer{to{transform:translateX(100%)}}
}
@media (min-width:1024px){
  .board-main{max-width:1120px}
  .board-main .card{gap:15px;padding:14px}
  .board-main .card .thumb{width:168px;min-width:168px}
  .board-main .card .title{font-size:16.5px}
  .board-main .card .views{font-size:19px}
  .sk-thumb{width:168px;min-width:168px}
}
@media (max-width:520px){
  .board-main .card{gap:10px;padding:10px}
  .board-main .card .thumb{width:112px;min-width:112px}
  .board-main .card .rank{width:28px;height:28px;min-width:28px;font-size:12.5px}
  .board-main .card .rail{min-width:74px}
  .board-main .card .outlier-badge.hot{font-size:15px;padding:6px 10px}
  .toolbar{padding:8px}
  .seg button{padding:6px 9px;font-size:12.5px}
  .sk-thumb{width:112px;min-width:112px}
}
/* ---- PWA (2026-10-17): board install banner + /install tutorial ---- */
.install-banner{position:relative;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:0 0 12px;padding:13px 38px 13px 15px;border-radius:16px;
  background:linear-gradient(120deg,rgba(135,210,249,.14),rgba(129,140,248,.10) 55%,rgba(255,255,255,.03)),rgba(13,17,26,.85);
  border:1px solid rgba(135,210,249,.35);
  box-shadow:0 12px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%)}
.install-banner-text{flex:1;min-width:210px;display:flex;flex-direction:column;gap:2px}
.install-banner-text b{font-size:15px}
.install-banner-text span{color:var(--muted);font-size:13px}
.install-banner-action{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.install-banner-action .btn{text-align:center;text-decoration:none;white-space:nowrap}
.install-banner-mini{color:var(--muted);font-size:12px;text-align:center}
.install-banner-close{position:absolute;top:6px;right:8px;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--muted);
  font-size:17px;line-height:1;cursor:pointer}
.install-banner-close:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.install-sec{margin-top:20px;border-top:1px solid var(--line);padding-top:15px;text-align:left}
.install-sec h3{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.install-sec .rec-badge{background:rgba(135,210,249,.14);color:var(--accent);border:1px solid rgba(135,210,249,.35);
  border-radius:999px;font-size:11px;font-weight:700;padding:2px 9px;letter-spacing:.4px;text-transform:uppercase}
.install-sec.dim{opacity:.62}
.steps{margin:8px 0 2px;padding-left:21px;font-size:14.5px;line-height:1.55;color:#d9d9e4}
.steps li{margin:0 0 9px}
.steps .sic{display:inline-flex;vertical-align:-4px;margin:0 1px;color:var(--accent)}
.steps b{color:var(--text)}
.install-ok{background:#0d2b18;border:1px solid var(--green);color:#b7f4cd;border-radius:10px;
  padding:10px 12px;font-size:14px;margin:12px 0 2px;line-height:1.5}
/* ---- Premium finish (2026-10-17): brand logo, type scale, control
   uniformity, layered elevation, density polish. Refinement layer over
   everything above — same design language, finished like a product. */
/* Brand logo (auth brand-heads) */
.brand-logo{width:54px;height:54px;flex:none;object-fit:contain;border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 1px rgba(135,210,249,.30),inset 0 1px 0 rgba(255,255,255,.14)}
.brand-head{gap:14px;margin-bottom:10px}
@media (prefers-reduced-motion: no-preference){
  .brand-logo{animation:logofloat 6s ease-in-out infinite alternate}
  @keyframes logofloat{from{transform:translateY(0)}to{transform:translateY(-3px)}}
}
/* Type scale + tracking */
h1{letter-spacing:-.02em}
h2{letter-spacing:-.015em}
.login-card h1{font-size:23px;font-weight:700;letter-spacing:-.02em}
.doc h1{letter-spacing:-.02em}
.doc h2{letter-spacing:-.01em}
.card .title{letter-spacing:-.005em}
.subsection{font-size:15px;font-weight:650;letter-spacing:-.01em;margin:24px 0 10px}
.tl-item .when,.member-row .m-meta,.summary .stat span,.doc .updated{font-variant-numeric:tabular-nums}
/* Surface rhythm: one padding beat for data cards, 24px section cadence */
.card{padding:14px}
.tl-item{padding:12px 14px}
.ab-entry{padding:14px}
.thumb-card{padding:10px}
.summary .stat{padding:12px 16px}
.login-card{padding:26px 24px}
h2.section{margin:24px 0 12px}
/* Layered elevation on raised elements */
.login-card{box-shadow:0 24px 60px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
.sheet{box-shadow:0 -18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.save-box{box-shadow:0 28px 70px rgba(0,0,0,.6),0 4px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
/* Topbar: true 56px bar */
header.topbar{padding-top:10px;padding-bottom:10px;min-height:56px}
/* Controls: uniform 40px, 11px radius, double-ring focus */
.controls select,.controls input[type="search"],.controls input[type="date"]{height:40px;border-radius:11px;padding:0 12px}
.field select{height:40px;border-radius:11px;padding:0 12px}
.login-card input{height:44px;border-radius:11px;padding:0 13px}
.login-card .btn{height:44px;padding:0 16px;display:flex;align-items:center;justify-content:center}
.sheet-actions .btn{height:44px;padding:0 14px}
.controls select:focus,.controls input:focus,.login-card input:focus,.field select:focus{
  outline:none;border-color:rgba(135,210,249,.65);
  box-shadow:0 0 0 2px rgba(5,7,11,.9),0 0 0 4px rgba(135,210,249,.45)}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.chip:disabled{opacity:.45;cursor:not-allowed}
/* One motion curve for interactive elements */
.btn,.chip,.seg button,header.topbar nav a,.btn-link,.tl-item,.member-row,.thumb-card{
  transition-duration:.16s;transition-timing-function:cubic-bezier(.2,.7,.2,1)}
/* Data rows: hover lift (history, admin, thumbnails) */
.tl-item:hover,.member-row:hover{border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(15,18,26,.82)}
.thumb-card:hover{border-color:rgba(255,255,255,.18)}
.ab-entry{transition:border-color .16s cubic-bezier(.2,.7,.2,1)}
.ab-entry:hover{border-color:rgba(255,255,255,.16)}
a{text-underline-offset:3px}
/* Thumbnails: one radius everywhere */
.thumb,.thumb-card img.thumb,.ab-pair img,.tl-item img.thumb{border-radius:10px}
/* Skeleton: softer two-tone shimmer base */
.sk-thumb,.sk-line,.sk-rail{background:linear-gradient(100deg,rgba(255,255,255,.05) 40%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.05) 60%)}
/* ---- Finance module (2026-10-17): watchlist dashboard + stock pages.
   fin- prefixed; extends the glass language, touches no other rules. */
.fin-asts{background:linear-gradient(180deg,rgba(135,210,249,.09),rgba(255,255,255,.02)),rgba(15,18,26,.78);
  border:1px solid rgba(135,210,249,.35);border-radius:var(--radius);padding:14px;margin:0 0 18px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.fin-asts-tag{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.fin-row{display:flex;align-items:stretch;gap:6px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:10px 8px 10px 14px;margin:0 0 10px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);transition:border-color .16s cubic-bezier(.2,.7,.2,1)}
.fin-row:hover{border-color:rgba(135,210,249,.35)}
.fin-rowlink{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.fin-main{flex:1;min-width:0}
.fin-tick{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.fin-name{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-subs{display:flex;gap:12px;flex-wrap:wrap;margin-top:3px}
.fin-sub{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.fin-sub b{color:var(--text)}
.fin-spark{flex:none;align-self:center}
.fin-nums{text-align:right;flex:none}
.fin-price{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.fin-chg{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fin-up{color:var(--green)}
.fin-down{color:#ff5560}
.fin-x{flex:none;align-self:flex-start;background:transparent;border:1px solid transparent;color:var(--muted);
  border-radius:8px;font-size:17px;line-height:1;padding:4px 8px;cursor:pointer}
.fin-x:hover{color:#ff9aa0;border-color:rgba(255,255,255,.14)}
.fin-x:disabled{opacity:.4;cursor:wait}
.fin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-top:6px}
.fin-title{font-size:26px;margin:0}
.fin-tick-lg{color:var(--accent);font-size:19px;font-weight:700}
.fin-head-nums{text-align:right}
.fin-bigprice{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fin-stale{color:var(--amber)}
.fin-chart-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:14px;margin:16px 0;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.fin-chart-controls{margin:0 0 8px;justify-content:space-between}
.fin-toggle{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer}
.fin-toggle input{width:17px;height:17px;accent-color:#818cf8}
.fin-scores{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.fin-scores{grid-template-columns:1fr}}
.fin-score-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.fin-score-title{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.fin-score-num{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.fin-score-of{font-size:16px;color:var(--muted);font-weight:600}
.fin-formula{margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);
  font-size:11.5px;line-height:1.55;color:var(--muted)}
.fin-tablewrap{overflow-x:auto;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),rgba(15,18,26,.78)}
.fin-ftable{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.fin-ftable th,.fin-ftable td{padding:8px 11px;text-align:right;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.055)}
.fin-ftable thead th{color:var(--text);font-size:13px;background:rgba(255,255,255,.03)}
.fin-ftable tbody th{text-align:left;color:var(--muted);font-weight:600}
.fin-ftable tbody tr:last-child th,.fin-ftable tbody tr:last-child td{border-bottom:none}
.fin-th-sub{display:block;font-size:10.5px;color:var(--muted);font-weight:400}


/* ================= Shell (2026-10-17) =================
   One client-rendered chrome (public/shell.js) for every page:
   row 1 (56px) brand + section switcher + profile menu, row 2 (44px)
   sub-nav pills for the active section. Heights are deterministic so
   the board's sticky offsets (--stick-top via header.topbar) and the
   --shell-h variable are stable from first paint. */
header.topbar.shell-top{display:block;padding:0;height:56px}
header.topbar.shell-top.shell-has-sub{height:100px}
header.topbar.shell-top::after{display:none}
.shell-row1{height:56px;display:flex;align-items:center;gap:14px;padding:0 14px;max-width:1440px;margin:0 auto}
.shell-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.shell-logo{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.shell-wordmark{font-weight:800;font-size:16.5px;letter-spacing:2.2px;color:var(--text)}
.shell-switch{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:4px}
.shell-sec{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 20px;border-radius:999px;font-size:15px;font-weight:700;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .15s,background .15s,box-shadow .15s}
.shell-sec:hover{color:#fff}
.shell-sec.active{background:linear-gradient(135deg,#87d2f9,#818cf8);color:#071018;box-shadow:0 4px 16px rgba(110,170,250,.35)}
.shell-sec.active:hover{color:#071018}
.shell-sec.locked{opacity:.55}
.shell-sec-lock{font-size:12px}
.shell-profile{margin-left:auto;position:relative;flex:none;display:flex;align-items:center;gap:10px}
.shell-icon-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--muted);cursor:pointer;flex:none;padding:0;transition:color .15s,border-color .15s}
.shell-icon-btn:hover{color:#fff;border-color:var(--accent)}
.shell-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell-avatar-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:block}
.shell-avatar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell-avatar-disc{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#071018;background:linear-gradient(135deg,#87d2f9,#818cf8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.shell-avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.shell-menu{position:absolute;right:0;top:calc(100% + 10px);width:252px;z-index:80;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(13,16,24,.97);border:1px solid rgba(255,255,255,.11);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.55);padding:8px;backdrop-filter:blur(14px)}
.shell-menu[hidden]{display:none}
.shell-menu-head{padding:8px 10px 10px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.shell-menu-name{font-weight:700;font-size:15px}
.shell-menu-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.shell-type-badge{display:inline-block;background:rgba(135,210,249,.15);color:var(--accent);border:1px solid rgba(135,210,249,.35);border-radius:999px;padding:0 7px;font-size:11px;font-weight:700;text-transform:capitalize}
.shell-menu a{display:block;padding:9px 10px;border-radius:9px;color:var(--text);text-decoration:none;font-size:14px}
.shell-menu a:hover{background:rgba(255,255,255,.06)}
.shell-menu-div{height:1px;background:rgba(255,255,255,.08);margin:6px 4px}
.shell-menu-logout{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:9px;color:#ff8f97;font-size:14px;cursor:pointer;font:inherit}
.shell-menu-logout:hover{background:rgba(255,80,90,.1)}
.shell-subnav{height:44px;display:flex;gap:6px;align-items:center;padding:0 14px;max-width:1440px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.shell-subnav::-webkit-scrollbar{display:none}
.shell-pill{flex:none;background:rgba(255,255,255,.045);color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 13px;font-size:13px;text-decoration:none;white-space:nowrap}
.shell-pill:hover{border-color:var(--accent)}
.shell-pill.active{background:rgba(135,210,249,.16);border-color:rgba(135,210,249,.45);color:#fff}
.shell-pill-app{margin-left:auto}
/* Legacy variant: today's flat bar, rendered by shell.js until the
   shell is promoted. Structure reuses the base .topbar/nav styles. */
header.topbar.shell-legacy::after{display:none}
/* Home / locked: the big section buttons (switcher, standalone) */
.shell-home-btns{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.shell-sec.shell-sec-lg{min-height:52px;padding:10px 24px;font-size:16.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.shell-sec.shell-sec-lg:hover{border-color:var(--accent);color:#fff}
/* Admin: member type + access controls inside member rows */
.shell-access{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.shell-access select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:13px}
.shell-access .m-note{font-size:12px;color:var(--muted)}
/* Profile page */
.shell-profile-card{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.shell-profile-pic{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.shell-profile-disc{width:88px;height:88px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#071018;background:linear-gradient(135deg,#87d2f9,#818cf8)}
.shell-kv{display:grid;grid-template-columns:130px 1fr;gap:6px 14px;font-size:14px;margin-top:6px}
.shell-kv dt{color:var(--muted)}
.shell-kv dd{margin:0}
@media (max-width:640px){
  .shell-wordmark{display:none}
  .shell-sec{padding:6px 13px;font-size:14px}
  .shell-row1{gap:9px;padding:0 10px}
  .shell-subnav{padding:0 10px}
}

/* Offline notice (rendered by pwa.js): fixed bottom pill, purely
   informational — pointer-events:none so it never blocks the app. */
/* Stale-client update banner (version.js, 2026-10-18): fixed slim
   bar pinned above everything except the call overlay (z 1200) and
   its toast (1300), so it nags on every surface but never covers an
   active call. Not dismissible while the client is behind. The body
   class pushes page flow + the sticky topbar down by its height. */
.update-banner{position:fixed;top:0;left:0;right:0;height:44px;z-index:1100;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 12px;background:#57400a;color:#fde68a;border-bottom:1px solid rgba(253,230,138,.35);font-size:13.5px;font-weight:600;box-sizing:border-box}
.update-banner-btn{background:#fde68a;color:#3a2a04;border:none;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.update-banner-btn[disabled]{opacity:.6;cursor:default}
body.has-update-banner{padding-top:44px}
body.has-update-banner header.topbar{top:44px}
.update-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:1090;background:#1c2b1a;color:#bbf7c4;border:1px solid rgba(187,247,196,.35);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.5);white-space:nowrap}
.update-forced-overlay{position:fixed;inset:0;z-index:2000;background:rgba(5,7,11,.92);display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.update-forced-card{background:#0d1420;border:1px solid rgba(135,210,249,.25);border-radius:20px;padding:32px 28px;max-width:380px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.update-forced-title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#eef4fa;margin-bottom:10px}
.update-forced-sub{font-size:14.5px;color:#9fb4c8;margin-bottom:22px}
.update-forced-btn{background:#87d2f9;color:#06283d;border:none;border-radius:999px;padding:12px 26px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.update-forced-btn[disabled]{opacity:.6;cursor:default}
.offline-pill{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:9999;display:flex;align-items:center;gap:9px;max-width:min(92vw,440px);padding:9px 15px;border-radius:999px;background:rgba(10,14,22,.88);border:1px solid rgba(255,255,255,.13);box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text,#e8eef6);pointer-events:none;opacity:0;transition:opacity .25s ease,transform .25s ease}
.offline-pill-show{opacity:1;transform:translate(-50%,0)}
.offline-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#ff7847;box-shadow:0 0 0 3px rgba(255,120,71,.18);animation:offline-pulse 1.6s ease-in-out infinite}
.offline-pill-online .offline-dot{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18);animation:none}
.offline-text{display:flex;flex-direction:column;line-height:1.3}
.offline-main{font-size:13.5px;font-weight:600}
.offline-sub{font-size:12px;color:var(--muted,#93a1b5)}
@keyframes offline-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){.offline-dot{animation:none}.offline-pill{transition:none}}

/* Force-update affordances: version microcopy in the shell menu head /
   legacy bar, and the dropdown's "Update app" item (shell.js, pwa.js
   __appUpdate). */
.upd-version{font-size:11.5px;color:var(--muted);margin-top:5px;letter-spacing:.01em;white-space:nowrap}
nav .upd-version{display:inline-block;margin-top:0;vertical-align:middle}
.shell-menu-update{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:9px;color:var(--text);font-size:14px;cursor:pointer;font:inherit}
.shell-menu-update:hover{background:rgba(255,255,255,.06)}

/* ---- Audit fixes (2026-10-17 UI audit round) ----
   1) Tap targets: every interactive row/chip/pill measures >=40px
      tall (min-height is uncontested by earlier rules, so the total
      box height holds at every breakpoint, incl. <=520px).
   5) Legacy-bar locked sections (shell.js renders .fix-locked).
   8) Thumbnails page: no horizontal overflow while loading. */
.chip{min-height:41px}
.seg button{min-height:41px}
.btn.small{min-height:41px}
header.topbar nav a,header.topbar nav .btn-link{min-height:41px;display:inline-flex;align-items:center}
.shell-subnav .shell-pill{min-height:41px;display:inline-flex;align-items:center}
.thumb-card .actions .btn{min-height:41px}
.shell-menu a{min-height:41px;display:flex;align-items:center}
.shell-menu-logout,.shell-menu-update{min-height:41px;display:flex;align-items:center}
header.topbar nav a.fix-locked{opacity:.55}
body[data-page="thumbnails"] main{overflow-x:clip}
body[data-page="thumbnails"] #status,body[data-page="thumbnails"] #grid{max-width:100%;box-sizing:border-box}
body[data-page="thumbnails"] .thumb-grid{max-width:100%;box-sizing:border-box}

/* ---- Shell 2 (2026-10-17): slim top bar + left drawer/rail + bottom
   tab bar. Rendered by shell.js only when the effective variant is
   'shell2' (body.shell2). Drawer rows merge two references:
   Viewstats' left panel (switcher rows on top, grouped cards,
   accent-tinted active row, profile card pinned at the bottom) and
   Qualtrim's "More" rows (icon tile + title + muted subtitle +
   chevron). The tab bar follows Qualtrim mobile: icons WITH labels
   in a floating glass pill, the active tab a filled lighter segment.
   The header stays a header.topbar so the board's sticky contract
   (offsetHeight + --shell-h) holds at the new 52px height. */
header.topbar.shell2-top{display:block;padding:0;height:52px}
.shell2-row1{height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;max-width:1440px;margin:0 auto}
.shell2-scrim{position:fixed;inset:0;z-index:85;background:rgba(2,4,8,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.shell2-scrim[hidden]{display:none}
.shell2-drawer{position:fixed;top:0;left:0;bottom:0;z-index:90;width:min(324px,88vw);background:#0e1119;border-right:1px solid var(--line);transform:translateX(-106%);transition:transform .24s ease;display:flex;flex-direction:column;overflow-y:auto;padding:10px 0 14px;box-sizing:border-box}
.shell2-drawer.open{transform:none;box-shadow:24px 0 60px rgba(0,0,0,.5)}
.s2-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 8px}
.s2-drawer-brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:2.2px;font-size:15px;color:var(--text)}
.s2-group{margin:10px 12px 0}
.s2-group-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 4px 8px}
.s2-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden}
.s2-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;text-decoration:none;color:var(--text);border-bottom:1px solid rgba(255,255,255,.06);box-sizing:border-box}
.s2-row:last-child{border-bottom:0}
.s2-row:hover{background:rgba(255,255,255,.04)}
.s2-row.on{background:rgba(135,210,249,.13);border-radius:12px;margin:3px 6px;padding-left:8px;padding-right:8px;border-bottom-color:transparent}
.s2-row.on .s2-row-title{color:var(--accent)}
.s2-row.on .s2-tile{background:rgba(135,210,249,.22)}
.s2-tile{width:40px;height:40px;flex:none;border-radius:11px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:19px}
.s2-row-main{flex:1;min-width:0;display:flex;flex-direction:column}
.s2-row-title{font-size:15px;font-weight:600;line-height:1.25}
.s2-row-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-chev{color:var(--muted);font-size:19px;flex:none}
.s2-lock{font-size:12px;flex:none}
.s2-dot{width:9px;height:9px;border-radius:50%;background:#ff5252;flex:none;box-shadow:0 0 0 3px rgba(255,82,82,.18)}
.s2-drawer-spacer{flex:1;min-height:18px}
.s2-profile-card{display:flex;align-items:center;gap:12px;margin:14px 12px 0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:10px 14px;text-decoration:none;color:var(--text);min-height:60px;box-sizing:border-box}
.s2-prof-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.s2-prof-disc{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#87d2f9,#818cf8);color:#071018;font-weight:800}
.s2-drawer-foot{display:flex;align-items:center;gap:4px;margin:10px 12px 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.s2-foot-btn{background:none;border:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:9px 10px;border-radius:9px;cursor:pointer;min-height:41px;display:inline-flex;align-items:center}
.s2-foot-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.s2-drawer-foot .upd-version{margin:0 0 0 auto}
.shell2-tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;display:flex;gap:2px;width:min(94vw,430px);background:rgba(13,16,24,.82);border:1px solid rgba(255,255,255,.11);border-radius:999px;padding:5px;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 14px 34px rgba(0,0,0,.5);box-sizing:border-box}
.s2-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;border-radius:999px;color:var(--muted);text-decoration:none;position:relative;min-height:52px;box-sizing:border-box}
.s2-tab svg{width:21px;height:21px}
.shell2-tabbar .s2-tab:nth-child(3) svg{width:23px;height:23px}
.s2-tab-label{font-size:10.5px;font-weight:600;letter-spacing:.01em}
.s2-tab.active{background:rgba(255,255,255,.13);color:#fff}
.s2-tab:hover{color:#fff}
.s2-tab-lock{position:absolute;top:4px;right:10px;font-size:9px}
.s2-tab-badge{position:absolute;top:6px;right:14px;width:8px;height:8px;border-radius:50%;background:#ff5252;box-shadow:0 0 0 2px rgba(13,16,24,.9)}
@media (max-width:1023px){
  body.shell2 main{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
  body.drawer-open{overflow:hidden}
  body.shell2 .offline-pill{bottom:calc(88px + env(safe-area-inset-bottom))}
  body.shell2[data-page="board"] .offline-pill{bottom:calc(150px + env(safe-area-inset-bottom))}
}
.shell2-navtoggle{display:none}
@media (min-width:1024px){
  .shell2-tabbar{display:none}
  .shell2-burger{display:none}
  .s2-close{display:none}
  .shell2-scrim{display:none!important}
  body.shell2 .shell2-navtoggle{display:inline-flex}
  /* Desktop sidebar states (shell2; cycled by the top-bar toggle,
     persisted as localStorage 'mx-nav'): full 240px · rail 68px
     icon rail · hidden 0. The offset is carried by body padding —
     NOT a margin on main — so each page's own margin:0 auto keeps
     centring its content column in the space beside the sidebar
     (the old fixed margin-left pinned the 860px column against the
     rail and left a void on the right of most pages). */
  body.shell2{--nav-w:240px;padding-left:var(--nav-w)}
  body.shell2.nav-rail{--nav-w:68px}
  body.shell2.nav-hidden{--nav-w:0px}
  .shell2-drawer{transform:none;width:var(--nav-w,240px);box-shadow:none;transition:transform .24s ease,width .18s ease}
  body.shell2.nav-hidden .shell2-drawer{transform:translateX(-106%)}
  /* The top bar is sticky (in flow), so the body padding already
     offsets it by --nav-w; it must not take the offset a second
     time as a margin — the double offset left a page-background
     strip between the sidebar's right edge and the bar's left
     edge. With no margin the bar starts flush at the sidebar's
     edge; main keeps its base margin:0 auto, which is what
     re-centres the content column inside the padded body. */
  body.shell2 header.topbar.shell2-top{margin-left:0}
  body.shell2:not([data-page="call-room"]) main{max-width:1180px}
  /* The call room keeps its exact pre-rework offsets (separate lane). */
  body.shell2[data-page="call-room"]{padding-left:0}
  body.shell2[data-page="call-room"] header.topbar.shell2-top{margin-left:240px}
  body.shell2[data-page="call-room"] main{margin-left:240px}
  /* Full mode: the rail head duplicates the top-bar brand — drop it.
     Rail mode keeps a centred logo mark as the rail's anchor. */
  body.shell2 .s2-drawer-head{display:none}
  body.shell2.nav-rail .s2-drawer-head{display:flex;justify-content:center;padding:4px 0 10px}
  body.shell2.nav-rail .s2-drawer-brand{font-size:0;gap:0}
  /* Persistent-rail rows: the drill-in chevrons are phone-menu
     furniture; hide them at desktop widths. */
  body.shell2 .s2-chev{display:none}
  /* Icon rail internals: tiles only, centred; titles/subtitles and
     group headers go away (row title attributes carry the names);
     the unread dot and the lock shrink to tile-corner badges. */
  body.shell2.nav-rail .s2-group{margin:12px 6px 0}
  body.shell2.nav-rail .s2-group-h{display:none}
  body.shell2.nav-rail .s2-card{background:none;border:none;border-radius:0;overflow:visible}
  body.shell2.nav-rail .s2-row{justify-content:center;gap:0;min-height:52px;padding:6px 0;position:relative;border-bottom:none}
  body.shell2.nav-rail .s2-row.on{margin:3px 2px;padding-left:0;padding-right:0}
  body.shell2.nav-rail .s2-row-main{display:none}
  body.shell2.nav-rail .s2-dot{position:absolute;top:6px;right:8px;box-shadow:none}
  body.shell2.nav-rail .s2-lock{position:absolute;bottom:4px;right:6px;font-size:9px}
  body.shell2.nav-rail .s2-profile-card{justify-content:center;margin:14px 6px 0;padding:10px 0}
  body.shell2.nav-rail .s2-drawer-foot{display:none}
  /* Discover's category strip: at desktop widths it wraps inside
     the (now wider) column instead of clipping its last circle at
     the column edge. */
  .disc-cats{flex-wrap:wrap;overflow-x:visible}
  /* Board toolbar: one control height (Hunt Mode / Filters were
     36px beside 41px range and sort pills). */
  #toolbar #huntBtn,#toolbar #openFilters{height:41px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion: reduce){.shell2-drawer{transition:none}}
/* Settings (profile): the generic .card is a flex row built for
   clickable board cards; on the profile page that squeezed every
   settings card's children side-by-side (the "Turn on 2FA" button
   rendered as a small circle with its label wrapped over 3 lines).
   Settings cards are panels — stack their contents, and never let
   a settings button wrap its own label. */
body[data-page="profile"] .card{display:block;cursor:auto}
body[data-page="profile"] .btn{white-space:nowrap}
/* Board (shell2, <=720px): floating Filters & Sort pill above the tab
   bar — a second trigger for the existing #openFilters sheet button,
   created by app.js on shell:rendered; no filter logic lives here. */
.fab-filters{display:none}
@media (max-width:720px){
  body.shell2 .fab-filters{display:inline-flex;align-items:center;gap:8px;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(94px + env(safe-area-inset-bottom));z-index:65;background:linear-gradient(180deg,#ffffff,#d9ecfd);color:#111;font:inherit;font-size:14.5px;font-weight:700;border:none;border-radius:999px;padding:12px 20px;box-shadow:0 12px 30px rgba(0,0,0,.55);cursor:pointer}
}

/* ---- Ask Rosty (2026-10-17): member thread + admin inbox ---- */
.ask-thread{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px}
.ask-msg{display:flex;gap:8px;max-width:88%;align-self:flex-start}
.ask-msg.me{align-self:flex-end}
.ask-avatar{width:30px;height:30px;border-radius:50%;flex:none;background:#0a0f18;margin-top:2px}
.ask-bubble{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:9px 12px;min-width:0}
.ask-msg.me .ask-bubble{background:rgba(135,210,249,.13);border-color:rgba(135,210,249,.35)}
.ask-kind{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.ask-body{white-space:pre-wrap;word-break:break-word;font-size:14.5px;line-height:1.45}
.ask-meta{font-size:11px;color:var(--muted);margin-top:4px}
.ask-composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-top:14px}
.ask-kinds{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ask-chip{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;min-height:41px;font:inherit}
.ask-chip.on{background:var(--accent);border-color:var(--accent);color:#08222f;font-weight:700}
.ask-composer textarea{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:15px;font:inherit;resize:vertical;box-sizing:border-box}
.ask-sendrow{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.ask-sendrow .btn{margin-left:auto}
.ask-thread-row{display:flex;width:100%;text-align:left;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;color:var(--text);cursor:pointer;font:inherit;align-items:flex-start;box-sizing:border-box}
.ask-thread-row:hover{border-color:var(--accent)}
.ask-thread-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ask-thread-name{font-weight:700}
.ask-thread-type{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:400}
.ask-unread{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px}
.ask-thread-preview{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ask-thread-time{font-size:11.5px;color:var(--muted);flex:none}

/* ---- Our Channels (2026-10-17) ---- */
.chan-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:12px}
.chan-row{display:flex;align-items:center;gap:13px;min-height:64px;padding:10px 16px;text-decoration:none;color:var(--text);border-bottom:1px solid rgba(255,255,255,.06);box-sizing:border-box}
.chan-row:last-child{border-bottom:0}
a.chan-row:hover{background:rgba(255,255,255,.04)}
.chan-logo{width:44px;height:44px;border-radius:12px;flex:none;object-fit:cover;background:#0a0f18}
.chan-logo-wrap{position:relative;width:44px;height:44px;flex:none}
.chan-initial{position:absolute;right:-4px;bottom:-4px;background:var(--accent);color:#08222f;font-size:11px;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.chan-main{flex:1;min-width:0;display:flex;flex-direction:column}
.chan-name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chan-handle{font-size:13px;color:var(--muted)}
.chan-stats{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.5;flex:none}
.chan-stats b{color:var(--text)}
.chan-chev{color:var(--muted);font-size:20px;flex:none}
.chan-off{font-size:12.5px;color:var(--muted);flex:none}

/* Ask Rosty recipient identities (2026-10-17): Newsy-destined inbox
   threads carry a red FOR NEWSY marker; replies sent as Newsy render
   with a warm initial disc instead of Rosty's cat avatar. */
.ask-fornewsy{background:#e50914;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;border-radius:6px;padding:2px 7px;vertical-align:1px}
.ask-avatar-disc{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#e50914);color:#fff;font-weight:800;font-size:13px;margin-top:2px}

/* === chat bubbles (shared) ===
   The conversation primitives of the chat screen (ask-chat.html
   carries the same rules page-locally for its fixed-height layout;
   these shared copies serve the admin inbox thread view, which
   renders the SAME bubbles/composer in normal page flow so what
   the admin sees is exactly what the member sees). */
.mc-stream{display:flex;flex-direction:column;padding:8px 2px 10px}
.mc-loading{align-self:center;color:var(--muted);font-size:13.5px;margin-top:22px}
.mc-loaderr{align-self:center;color:var(--red-text);font-size:13.5px;margin-top:22px;text-align:center;max-width:85%}
.mc-empty{margin:auto;text-align:center;color:var(--muted);padding:24px 18px}
.mc-empty img{width:84px;height:84px;object-fit:contain;opacity:.95}
.mc-empty p{font-size:14.5px;margin:12px 0 0}
.mc-sep{align-self:center;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;padding:3px 11px;border-radius:999px;margin:12px 0 4px}
.mc-row{display:flex;align-items:flex-end;gap:7px;margin-top:9px}
.mc-row.me{justify-content:flex-end}
.mc-col{display:flex;flex-direction:column;max-width:78%;min-width:0}
.mc-row.me .mc-col{align-items:flex-end}
.mc-row.in .mc-col{align-items:flex-start}
.mc-bubble{border-radius:18px;padding:9px 13px;font-size:15px;line-height:1.45;word-break:break-word}
.mc-bubble .mc-text{white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.mc-bubble.me{background:linear-gradient(180deg,#2a76ad,#1d5f8e);border:1px solid rgba(135,210,249,.28);color:#fff;border-bottom-right-radius:4px}
.mc-bubble.in{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-bottom-left-radius:4px}
.mc-bubble.sending{opacity:.62}
.mc-bubble.failed{border-color:rgba(255,82,82,.65)}
.mc-kind{display:inline-flex;align-items:center;background:rgba(255,255,255,.17);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2.5px 8px;border-radius:999px;margin-bottom:5px}
.mc-sender{font-size:11px;font-weight:700;color:#ffb35c;margin:0 0 3px 4px;letter-spacing:.02em}
.mc-time{font-size:10.5px;color:var(--muted);margin-top:3px;padding:0 4px}
.mc-time.failed{color:var(--red-text);font-weight:600}
.mc-miniava{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:#0a0f18;margin-bottom:16px}
.mc-miniava-disc{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#e50914);color:#fff;font-weight:800;font-size:11px}
@media (prefers-reduced-motion: no-preference){
  .mc-in{animation:mcIn .22s ease-out}
  @keyframes mcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
.mc-linkcard{display:flex;gap:10px;align-items:center;margin-top:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:7px;text-decoration:none;color:inherit}
.mc-bubble.in .mc-linkcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
.mc-linkcard img{width:84px;height:47px;object-fit:cover;border-radius:8px;flex:none;background:#000}
.mc-linkcard-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.mc-linkcard-meta b{font-size:13.5px}
.mc-linkcard-meta span{font-size:12px;opacity:.72}

/* === in-app calls (WebRTC) ===
   Call records inside threads (kind 'call') + the call overlay from
   public/call.js. The record bubble reuses .mc-bubble; the overlay
   follows the app's card language — large soft card on near-black. */
.mc-call-bubble{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mc-call-ic{font-size:19px;line-height:1}
.mc-call-main{display:flex;flex-direction:column;gap:1px}
.mc-call-main b{font-size:14.5px}
.mc-call-main small{font-size:12px;opacity:.78}
.mc-call-missed{color:var(--red-text);font-weight:600;opacity:1}
.mc-bubble.me .mc-call-missed{color:#ffb3b3}
.mc-call-rec{font-size:11px;font-weight:600;opacity:.75}
.mc-call-audio{display:block;width:210px;max-width:100%;height:34px;margin-top:2px}
.call-overlay{position:fixed;inset:0;z-index:1200;background:rgba(2,6,12,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.call-overlay[hidden]{display:none}
.call-card{background:var(--panel2);border:1px solid var(--line);border-radius:26px;padding:30px 26px 26px;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.call-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#0a0f18;border:1px solid var(--line)}
.call-name{font-size:21px;font-weight:700;margin-top:16px}
.call-status{font-size:14.5px;color:var(--muted);margin-top:5px;min-height:20px;font-variant-numeric:tabular-nums}
.call-rec-note{font-size:12.5px;color:var(--muted);margin-top:10px}
.call-rec-note[hidden]{display:none}
.call-rec-live{font-size:12.5px;font-weight:700;color:#ff6b6b;margin-top:10px}
.call-rec-live[hidden]{display:none}
.call-remote-video{width:100%;border-radius:16px;margin-top:16px;background:#000;max-height:300px}
.call-remote-video[hidden]{display:none}
.call-local-video{width:84px;border-radius:12px;margin-top:10px;background:#000;align-self:flex-end}
.call-local-video[hidden]{display:none}
.call-actions{display:flex;gap:26px;margin-top:26px;align-items:center}
.call-btn{width:62px;height:62px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.call-btn:active{transform:scale(.94)}
.call-accept{background:#25d366;border-color:#25d366;animation:callPulse 1.6s ease-in-out infinite}
.call-btn.call-decline{background:#e53935;border-color:#e53935;transform:rotate(135deg)}
.call-btn.call-decline:active{transform:rotate(135deg) scale(.94)}
.call-util.call-off{opacity:.45}
.call-btn.call-util{font-size:21px}
@keyframes callPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}55%{box-shadow:0 0 0 13px rgba(37,211,102,0)}}
@media (prefers-reduced-motion: reduce){.call-accept{animation:none}}
.call-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:1300;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:88vw;text-align:center}
.call-toast[hidden]{display:none}
.mc-err{color:var(--red-text);font-size:12.5px;text-align:center;margin:0;padding-top:2px}
.mc-err:empty{display:none}
.mc-msgline{font-size:12.5px;color:var(--muted);text-align:center;min-height:17px;margin:8px 0 0}
.mc-msgline.bad{color:var(--red-text)}
/* Composer — the chat pill + round send button (shared) */
.mc-composer{display:flex;align-items:flex-end;gap:9px;padding-top:9px}
.mc-composer textarea{flex:1;min-width:0;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:24px;padding:12px 16px;font:inherit;font-size:16px;line-height:1.4;min-height:48px;max-height:116px;resize:none;overflow-y:auto;box-sizing:border-box}
.mc-composer textarea:focus{outline:none;border-color:rgba(135,210,249,.65);box-shadow:0 0 0 2px rgba(5,7,11,.9),0 0 0 4px rgba(135,210,249,.45)}
.mc-composer textarea:disabled{opacity:.5}
.mc-send{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid rgba(135,210,249,.35);background:linear-gradient(180deg,#2a76ad,#1d5f8e);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mc-send svg{width:21px;height:21px;margin-left:2px}
.mc-send:disabled{opacity:.38;cursor:not-allowed}
.mc-send:not(:disabled):active{transform:scale(.94)}
/* Conversation tabs (inbox thread view): Rosty desk / Newsy
   read-only. Navigation between the member's two conversations —
   NOT an identity switch: each tab IS its conversation. */
.mc-seg{display:inline-flex;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:999px;margin:12px 0 2px}
.mc-seg-btn{border:none;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:8px 18px;min-height:41px;cursor:pointer}
.mc-seg-btn.on{background:linear-gradient(180deg,#2a76ad,#1d5f8e);color:#fff}
/* Read-only note shown instead of a composer on the Newsy tab */
.mc-readonly{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-top:10px;font-size:13.5px;color:var(--muted)}
.mc-readonly .btn{margin-left:auto}

/* Messages — WhatsApp-style contacts list + conversation header
   (2026-10-17). Rows: round avatar, name + time on the top line,
   last-message preview + green unread badge on the second line. */
.msg-list{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.msg-pin-label{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 2px 0}
.msg-row{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--text);text-decoration:none;box-sizing:border-box}
.msg-row:hover{border-color:var(--accent)}
.msg-row.pinned{border-color:rgba(135,210,249,.45);background:rgba(135,210,249,.06)}
.msg-row.oversight{border-style:dashed;background:rgba(255,255,255,.02)}
.msg-avatar{width:48px;height:48px;border-radius:50%;flex:none;object-fit:cover;background:#0a0f18}
.msg-avatar-disc{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2b6cb0,#87d2f9);color:#fff;font-weight:800;font-size:17px}
.msg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-top{display:flex;align-items:baseline;gap:8px}
.msg-name{font-weight:700;font-size:15.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-time{font-size:11.5px;color:var(--muted);flex:none}
.msg-sub{display:flex;align-items:center;gap:8px}
.msg-preview{flex:1;min-width:0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-badge{background:#25d366;color:#04240f;font-size:11.5px;font-weight:800;border-radius:999px;min-width:21px;height:21px;display:flex;align-items:center;justify-content:center;padding:0 6px;flex:none;box-sizing:border-box}
/* Presence line (admin-only data — see public/ask.js): a subtle
   third line under the preview on the admin's peer rows. */
.msg-presence{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.presence-dot{width:8px;height:8px;border-radius:50%;background:#25d366;flex:none}
.chat-sub .presence-dot{display:inline-block;margin-right:6px;vertical-align:1px}
/* Group chat rows: the initial disc carries a 👥 corner marker. */
.msg-group-ava{position:relative}
.msg-group-badge{position:absolute;right:-4px;bottom:-4px;font-size:10px;line-height:1;background:var(--panel2);border:1px solid var(--line);border-radius:999px;width:19px;height:19px;display:flex;align-items:center;justify-content:center}
.chat-head{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin-top:10px}
.chat-avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:#0a0f18}
.chat-avatar-disc{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#e50914);color:#fff;font-weight:800;font-size:16px}
.chat-head-main{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-name{font-weight:700;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-call{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);display:flex;align-items:center;justify-content:center;font-size:19px;text-decoration:none}
.chat-call:hover{background:rgba(37,211,102,.25)}

/* ================= Discover feed + Leaderboard (2026-10-17) =================
   Viewstats-pattern home feed: search hero pill, category circles,
   ranked preview sections (rank # · round avatar · name/@handle ·
   BIG number + % beneath), See All buttons; the leaderboard reuses
   the same rows under a sortable metric header. */
.disc-hero{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 16px;margin:6px 0 4px}
.disc-hero:focus-within{border-color:var(--accent)}
.disc-hero-badge{width:40px;height:40px;flex:none;border-radius:50%;background:var(--red);color:#fff;font-weight:900;font-size:21px;display:flex;align-items:center;justify-content:center}
.disc-hero-fields{flex:1;min-width:0;display:flex;flex-direction:column}
.disc-hero-label{font-weight:700;font-size:15.5px}
.disc-hero input{background:transparent;border:0;outline:none;color:var(--text);font-size:13.5px;padding:2px 0 0;width:100%}
.disc-hero input::placeholder{color:var(--muted)}
.disc-cats{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:none}
.disc-cats::-webkit-scrollbar{display:none}
.disc-cat{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--text);flex:none;width:72px}
.disc-cat-circle{width:56px;height:56px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px}
.disc-cat:hover .disc-cat-circle{border-color:var(--accent)}
.disc-cat-label{font-size:12px;text-align:center;line-height:1.25;color:var(--text)}
.disc-chan-circle{overflow:hidden;padding:0;position:relative}
.disc-chan-logo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.disc-chan-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--text)}
.disc-channels .disc-cat{width:84px}
.disc-channels .disc-cat-label{overflow-wrap:anywhere}
.disc-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.disc-sec-head h2.section{margin-bottom:2px}
.disc-sub{color:var(--muted);font-size:13px;margin:0 0 8px}
.disc-teaser{display:flex;align-items:center;gap:2px;text-decoration:none;padding-bottom:8px}
.disc-stack{display:inline-flex}
.disc-avatar{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2b6cb0,#87d2f9);color:#fff;font-weight:800;font-size:15px}
.disc-avatar-sm{width:30px;height:30px;font-size:11px;border:2px solid var(--bg);margin-left:-9px}
.disc-avatar-sm:first-child{margin-left:0}
.disc-rows{margin-top:2px}
.disc-rows .rank{padding-top:0;align-self:center}
.disc-nums{text-align:right;flex:none;display:flex;flex-direction:column}
.disc-big{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.disc-pct{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.disc-seeall{display:block;text-align:center;margin:12px 0 6px;padding:12px;font-weight:700}
.disc-shorts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:640px){.disc-shorts{grid-template-columns:repeat(3,1fr)}}
.disc-short{display:flex;flex-direction:column;text-decoration:none;color:var(--text);min-width:0}
.disc-short-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#000}
.disc-short-title{font-size:13.5px;font-weight:600;line-height:1.3;margin-top:7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.disc-short-chan{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-short-meta{color:var(--muted);font-size:12.5px}
/* Leaderboard controls + sortable header */
.lb-controls{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.lb-headrow{display:flex;align-items:center;gap:13px;padding:10px 16px 2px;color:var(--muted);font-size:13px}
.lb-h-rank{min-width:26px;text-align:center}
.lb-h-chan{flex:1}
.lb-sort{background:none;border:none;color:var(--text);font:inherit;font-weight:700;cursor:pointer;padding:4px 2px}
.lb-sort:hover{color:var(--accent)}

/* ============ Finance — Watchlist Movers card (2026-10-17) ============ */
.mov-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:14px;margin:0 0 18px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.mov-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mov-title{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.mov-summary{font-size:13.5px;color:var(--muted);margin:12px 0 8px}
.mov-summary b{color:var(--text)}
.mov-bar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.07)}
.mov-bar-up{background:var(--green)}
.mov-bar-flat{background:#6b7280}
.mov-bar-down{background:#ff5560}
.mov-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-top:12px}
@media (max-width:560px){.mov-cols{grid-template-columns:1fr}}
.mov-col-h{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.mov-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);padding:5px 0}
.mov-row:hover .fin-tick{color:var(--accent)}
.mov-row .fin-tick{font-size:14.5px}
.mov-row .fin-chg{margin-left:auto;font-size:13.5px;font-weight:700}
.mov-note{color:var(--muted);font-size:13px;margin:10px 0 2px}

/* ================= UI/UX audit round 2 (2026-10-17) =================
   Geometry, scroll and design-system fixes from the owner's tester
   pass. Sections: (1) board sticky stack — auto-hide + collapse,
   (2) overlay stacking vs the shell2 tab bar, (3) legacy bar height,
   (4) touch targets round 2, (5) status-colour unification,
   (6) micro-motion + density/CLS polish. */

/* (1) Board toolbar: the flex row moves into .toolbar-full so the bar
   can collapse to a slim summary strip (.toolbar-mini). The sticky
   glass box itself is unchanged. */
.toolbar-full{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%}
.toolbar-mini{display:none;width:100%;align-items:center;gap:8px;background:none;border:none;
  color:var(--text);font:inherit;font-size:13.5px;font-weight:600;padding:2px 4px;cursor:pointer;
  min-height:41px;text-align:left}
.tb-mini-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.tb-mini-chev{color:var(--accent);font-size:15px;flex:none}
.toolbar.tb-collapsed .toolbar-full{display:none}
.toolbar.tb-collapsed .toolbar-mini{display:flex}
.tb-collapse{flex:none;width:41px;min-height:41px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:var(--muted);font-size:15px;cursor:pointer;line-height:1}
.tb-collapse:hover{color:#fff;border-color:rgba(255,255,255,.3)}
@media (prefers-reduced-motion: no-preference){
  .toolbar{transition:transform .18s cubic-bezier(.2,.7,.2,1),opacity .18s cubic-bezier(.2,.7,.2,1)}
}
.toolbar.tb-hidden{transform:translateY(calc(-100% - 16px));opacity:0;pointer-events:none}
/* On phones the list title is a label, not chrome: it scrolls away
   with the content instead of sticking under the toolbar. */
@media (max-width:720px){
  .board-main h2.section{position:static}
  /* Shell2 already gives the board a floating Filters & Sort pill —
     the in-toolbar Filters button is the same control twice. */
  body.shell2 .board-main .toolbar .fab{display:none}
  .board-summary{min-height:40px}
}
/* Shell2 board: reserve clearance for tab bar + floating Filters pill
   so the last card is never trapped underneath them. */
@media (max-width:1023px){
  body.shell2[data-page="board"] main{padding-bottom:calc(158px + env(safe-area-inset-bottom))}
}

/* (2) Sheets and modals must paint ABOVE the shell2 tab bar (z 70):
   the filter sheet's Done/Clear actions and the save modal sat under
   it. Drawer (90) / scrim (85) relationships are preserved. */
.sheet-backdrop{z-index:92}
.sheet{z-index:93}
.save-modal{z-index:93}

/* (3) Legacy variant: the flat bar wrapped its ~17 links into 4–6
   rows on phones (~250px of sticky chrome on every page). On small
   screens the nav becomes ONE horizontally scrolling row. */
@media (max-width:900px){
  header.topbar.shell-legacy{padding:8px 12px;row-gap:6px}
  header.topbar.shell-legacy nav{order:2;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:2px;margin-left:0}
  header.topbar.shell-legacy nav::-webkit-scrollbar{display:none}
  header.topbar.shell-legacy nav a,header.topbar.shell-legacy nav .btn-link{white-space:nowrap;flex:none}
  header.topbar.shell-legacy .userchip{flex:none}
}

/* (4) Touch targets round 2 — everything interactive ≥41px. */
.lb-sort{min-height:41px;display:inline-flex;align-items:center;padding:6px 10px;border-radius:9px}
.mov-row{min-height:41px;align-items:center;padding-top:6px;padding-bottom:6px}
.fin-x{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.install-banner-close{width:40px;height:40px;top:5px;right:6px;font-size:19px}
.install-banner{padding-right:48px}
.shell-access select{min-height:41px}
.disc-teaser{min-height:41px;align-items:center}
.f2-field input,.f2-field select{min-height:41px}

/* (5) One down-red everywhere: --red-text (#ff5252, 6.32:1 on the
   page background) replaces the stray #ff5560 in finance surfaces. */
.fin-down{color:var(--red-text)}
.mov-bar-down{background:#ff5252}

/* (6) Micro-motion on state changes (house curve), tab-label size,
   loading-state reservations so content stops jumping. */
.shell-pill,.msg-row,.chan-row,.mov-row,.f2-erow,.s2-tab{transition:border-color .16s cubic-bezier(.2,.7,.2,1),background-color .16s cubic-bezier(.2,.7,.2,1),color .16s cubic-bezier(.2,.7,.2,1)}
.s2-tab-label{font-size:11px}
#discFeed{min-height:320px}
#lbRows{min-height:320px}
#watchRows{min-height:180px}
@media (max-width:520px){
  .thumb-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
/* Shell v1 on very narrow phones: keep brand + switcher + avatar on
   one 56px row. */
@media (max-width:400px){
  .shell-row1{padding:0 8px;gap:7px}
  .shell-sec{padding:6px 10px;font-size:13.5px}
}

/* (7) Composition (owner's design reference, 2026-10-17): no bare
   text dumps on the aurora background. Page intros live in a
   .page-head card — quiet back link inside the surface, confident
   title, calm sub-copy — and empty states are composed cards, in
   the same radius-20 glass language as the chat screen. */
.page-head{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:16px 18px;margin:14px 0 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.page-head .section{margin:0}
.page-head h2.section{margin-top:2px}
.page-back{display:inline-flex;align-items:center;min-height:41px;padding-right:12px;margin:-6px 0 0;
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
.page-back:hover{color:var(--accent)}
.page-sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin:7px 0 0}
.page-sub b{color:var(--text)}
.empty-card{text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),rgba(15,18,26,.72);
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:34px 22px;margin:14px 0}
.empty-card .empty-cat{width:72px;height:72px;object-fit:contain;opacity:.95}
.empty-card .empty-title{font-size:16.5px;font-weight:700;margin:12px 0 0}
.empty-card p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:6px auto 0;max-width:420px}
/* .empty (loading / no-results placeholders) becomes a soft composed
   panel instead of a line of floating text. */
.empty{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:16px;
  padding:26px 18px;margin:10px 0}
/* Locked landing: one centered composed card, not prose on a void. */
.locked-card{max-width:520px;margin:26px auto 0;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:30px 24px 24px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.locked-cat{width:76px;height:76px;object-fit:contain}
.locked-card .section{margin:12px 0 0}
.locked-card .page-sub{margin-left:auto;margin-right:auto;max-width:400px}
.locked-card .shell-home-btns{justify-content:center;margin-top:18px}
.locked-links{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);
  color:var(--muted);font-size:13.5px}
.home-links{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);
  color:var(--muted);font-size:13.5px}
/* Legal reading surfaces: the document sits in one calm card with
   the reference's reading type (a touch larger, more air). */
main.doc,div.doc{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),rgba(13,16,24,.82);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:30px 32px 42px;
  margin-top:16px;margin-bottom:26px;box-shadow:0 18px 44px rgba(0,0,0,.42);
  font-size:15.5px;line-height:1.7}
@media (max-width:560px){main.doc,div.doc{padding:22px 18px 32px}}
/* Stock page: the JS-rendered ticker head gets the same composed
   header-card surface as .page-head. */
#stockHead{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:16px 18px;margin:4px 0 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}

/* ==== Admin preview-as-member banner (2026-10-17) ====
   Rendered by shell.js INSIDE header.topbar while an admin previews
   a member's view. The shell variants stamp fixed heights on the
   header (56/100px shell, 52px shell2); .has-preview lifts them so
   the header — and finalize()'s offsetHeight → --shell-h — grows by
   exactly the banner's height. Amber = "you are looking through
   someone else's eyes; nothing you do here changes anything". */
header.topbar.has-preview{height:auto}
.preview-banner{flex:1 0 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:8px;padding:7px 12px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,176,32,.18),rgba(255,122,26,.12));
  border:1px solid rgba(255,176,32,.45);color:#ffe1b0;font-size:13px;line-height:1.35}
header.topbar.shell-top .preview-banner,header.topbar.shell2-top .preview-banner{margin:8px 10px 10px}
.preview-banner b{color:#fff}
.preview-banner .pv-status{opacity:.85;font-style:italic}
.preview-banner .pv-stop{margin-left:auto;background:#ffb020;color:#241a00;border:none;
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer;min-height:34px}
.preview-banner .pv-stop:hover{background:#ffc44d}

/* ==== Design preview banner (tech sandbox, self only, 2026-10-19) ====
   Same amber family as the admin preview banner, but a floating pill:
   it marks pages where the member's OWN design sandbox is active.
   The shell renders it only from a real-self /api/me payload. */
.design-preview-banner{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));z-index:1200;max-width:92vw;
  padding:7px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,rgba(255,176,32,.92),rgba(255,122,26,.92));
  color:#241a00;font-size:12.5px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.45);
  pointer-events:none}
@media (min-width:1024px){.design-preview-banner{bottom:18px}}

/* ==== Admin: member digital footprint (2026-10-17) ==== */
.footprint-box{flex:1 0 100%;border-top:1px solid var(--line);margin-top:8px;padding-top:10px}
.footprint-box .fp-head{font-weight:700;font-size:13.5px;margin-bottom:8px}
.footprint-box .fp-sec{margin:0 0 10px}
.footprint-box .fp-sec h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#8a94a6);margin:0 0 5px;font-weight:600}
.footprint-box .fp-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.footprint-box .fp-line code{font-size:12.5px}

/* ==== Web Push: profile card + Messages prompt banner (2026-10-17) ====
   The card body is rendered by push.js (support / installed / denied /
   off / on states); the banner is ask.js's one slim prompt linking to
   /profile#notifications. Same glass-and-line language as the install
   banner it sits beside. */
.push-card-body .section-note{margin:6px 0 0}
.push-card-body .push-note-ok{color:#7ee2a8}
.push-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.push-linkbtn{background:none;border:none;color:var(--accent,#87d2f9);font:inherit;
  font-size:13.5px;cursor:pointer;padding:6px 4px;text-decoration:underline}
.push-linkbtn:disabled{opacity:.5;cursor:default}
.push-banner{position:relative;display:flex;gap:10px;align-items:center;
  margin:0 0 12px;padding:11px 42px 11px 14px;border-radius:14px;
  background:linear-gradient(120deg,rgba(135,210,249,.12),rgba(255,255,255,.03)),rgba(13,17,26,.85);
  border:1px solid rgba(135,210,249,.35);font-size:14px}
.push-banner-text{flex:1;min-width:0}
.push-banner .btn{text-decoration:none;white-space:nowrap}

/* ================================================================
   Call room (/call/<roomId>) + call chat cards (2026-10-18)
   The room page (public/call-room.html/.js): a full-height Meet-style
   stage under the shell in the app's glass language. Controls reuse
   .call-btn (see the in-app calls section above); this block only
   adds the room layout, the meter, the join/error/back affordances,
   and the .mc-call-card chat card rendered by ask-chat/ask-inbox.
   ================================================================ */
.cr-main{display:flex;flex-direction:column;align-items:center;height:calc(100vh - var(--shell-h,100px));height:calc(100dvh - var(--shell-h,100px));max-width:860px;margin:0 auto;padding:12px 12px 24px;overflow:hidden}
.cr-stage{position:relative;flex:1 1 auto;width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),rgba(15,18,26,.78);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.cr-avatar-wrap{position:relative;width:96px;height:96px;border-radius:50%;flex:none}
.cr-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#0a0f18;border:1px solid var(--line);display:block}
.cr-avatar-wrap.cr-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:crPulse 1.8s ease-in-out infinite}
@keyframes crPulse{0%,100%{box-shadow:0 0 0 0 rgba(135,210,249,.45)}55%{box-shadow:0 0 0 16px rgba(135,210,249,0)}}
@media (prefers-reduced-motion: reduce){.cr-avatar-wrap.cr-pulse::after{animation:none}}
.cr-name{font-size:23px;font-weight:700;margin-top:18px;letter-spacing:-.01em}
.cr-status{font-size:15px;color:var(--muted);margin-top:6px;min-height:21px;font-variant-numeric:tabular-nums}
.cr-timer{font-size:15px;color:var(--text);margin-top:2px;font-variant-numeric:tabular-nums}
.cr-timer[hidden]{display:none}
.cr-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px;background:#000}
.cr-remote-video[hidden]{display:none}
.cr-local-video{position:absolute;right:14px;bottom:14px;width:104px;border-radius:12px;background:#000;box-shadow:0 8px 22px rgba(0,0,0,.5);z-index:3}
.cr-local-video[hidden]{display:none}
.cr-meter{display:flex;gap:3px;align-items:flex-end;height:16px;margin-top:12px}
.cr-meter-bar{width:5px;height:5px;border-radius:2px;background:rgba(255,255,255,.18);transition:height .18s ease,background .18s ease}
.cr-meter-bar:nth-child(2){height:8px}
.cr-meter-bar:nth-child(3){height:11px}
.cr-meter-bar:nth-child(4){height:13px}
.cr-meter-bar:nth-child(5){height:16px}
.cr-meter-bar.cr-on{background:#25d366}
.cr-rec-note{font-size:12.5px;color:var(--muted);margin-top:12px}
.cr-rec-note[hidden]{display:none}
.cr-rec-live{font-size:12.5px;font-weight:700;color:#ff6b6b;margin-top:12px}
.cr-rec-live[hidden]{display:none}
.cr-rec-off{font-size:12.5px;color:var(--muted);margin-top:12px}
.cr-rec-off[hidden]{display:none}
.cr-error{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px;background:#3d0a0e;border:1px solid var(--red);color:#ffb3b8;border-radius:12px;padding:12px 16px;font-size:13.5px;max-width:88%}
.cr-error[hidden]{display:none}
.cr-retry{background:#fff;color:#111;border:none;border-radius:999px;padding:8px 20px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;min-height:41px}
.cr-join-wrap{margin-top:22px}
.cr-join-wrap[hidden]{display:none}
.cr-join{background:linear-gradient(180deg,#2a76ad,#1d5f8e);color:#fff;border:1px solid rgba(135,210,249,.4);border-radius:999px;padding:14px 38px;font:inherit;font-size:16.5px;font-weight:700;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.cr-join:active{transform:scale(.97)}
.cr-back{margin-top:20px;color:var(--accent);font-size:14.5px;font-weight:600;text-decoration:none;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:10px 22px}
.cr-back[hidden]{display:none}
.cr-controls{flex:none;display:flex;gap:26px;margin-top:18px;align-items:center}
.cr-controls[hidden]{display:none}
.cr-recorder-status{color:var(--muted);font-size:13px;padding:16px;text-align:center}

/* Call chat card: the joinable room record inside message threads */
.mc-call-card{background:linear-gradient(180deg,#2a76ad,#1d5f8e);border:1px solid rgba(135,210,249,.28);border-radius:14px;padding:10px 12px;min-width:210px;color:#fff}
.mc-call-card-head{display:flex;align-items:center;gap:8px}
.mc-call-card-title{font-weight:600;font-size:14.5px}
.mc-call-chip{border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:.02em;background:rgba(255,255,255,.16);color:#fff}
.mc-chip-waiting{background:rgba(245,158,11,.25);color:#ffd97a;animation:mcChipPulse 1.4s ease-in-out infinite}
@keyframes mcChipPulse{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){.mc-chip-waiting{animation:none}}
.mc-chip-live{background:rgba(37,211,102,.22);color:#4be381}
.mc-chip-ended{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.mc-chip-missed{color:#ffb3b3}
.mc-chip-failed{color:#ffb3b3}
.mc-chip-declined{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75)}
.mc-call-join{margin-left:auto;background:rgba(255,255,255,.20);color:#fff;border-radius:999px;padding:6px 16px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
.mc-call-join:hover{background:rgba(255,255,255,.30)}

/* ---- call room: minimized pill + embedded app view (2026-10-18) ----
   Minimizing keeps the call's own document (and its peer
   connection) alive: the stage shrinks to a rendered 1px box
   instead of display:none so media pipelines never notice, the
   app opens in a same-origin iframe over the page, the room's own
   shell chrome steps aside (the framed app brings its own), and
   the floating pill carries peer, elapsed time, mute and End —
   its timer is written by the same startTimer tick (same server
   liveAt base) as the full-screen one. */
.cr-embed{position:fixed;inset:0;z-index:40;background:#05070b}
/* Defect 5 (2026-10-20): while minimized, the embedded app view
   stops short of the bottom edge by a reserved strip that belongs
   to the pill alone (pill ≈50px at bottom:12px + margins). The
   frame's own bottom tab bar and chat composer therefore render
   entirely inside the frame — the pill floats in dead space below
   it and can never cover a button again. */
body.cr-min .cr-embed{bottom:calc(76px + env(safe-area-inset-bottom))}
.cr-embed[hidden]{display:none}
.cr-embed iframe{width:100%;height:100%;border:0;display:block}
body.cr-min .cr-stage{position:fixed;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
body.cr-min .cr-controls{display:none}
body.cr-min #shell{display:none}
.cr-pill{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(19,25,38,.94);border:1px solid rgba(135,210,249,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 32px rgba(0,0,0,.55);cursor:pointer}
.cr-pill[hidden]{display:none}
.cr-pill-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.cr-pill-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
.cr-pill-timer{font-variant-numeric:tabular-nums;color:var(--blue,#87D2F9);font-size:14px;margin-right:auto}
.cr-pill-btn{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.09);color:#fff;font-size:16px;cursor:pointer;flex:none}
.cr-pill-btn.call-off{opacity:.45}
.cr-pill-end{background:#e5484d}
.cr-pill-expand{display:flex;flex:none;color:#9fb4c8;pointer-events:none}

/* Minimize control: crisp inline SVG (addendum 4, 2026-10-20) —
   a font dash rendered inconsistently across phones; the SVG is
   the same on every device and sized inside the stock 62px button
   so the controls row never shifts. */
#crMinimize svg{display:block}

/* ---- incoming-call banner on the room page (R2, 2026-10-20) ----
   The room page never loads call.js, so an invite arriving while
   the user sits on a previous call's ended screen is presented by
   the room client itself: a top card under the shell topbar with
   the same Accept navigation as everywhere else in the app. */
.cr-invite{position:fixed;left:12px;right:12px;top:calc(60px + env(safe-area-inset-top));z-index:80;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:18px;background:rgba(19,25,38,.97);border:1px solid rgba(135,210,249,.35);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.cr-invite[hidden]{display:none}
.cr-invite-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.cr-invite-text{flex:1;min-width:0}
.cr-invite-name{font-weight:650;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-invite-sub{font-size:12.5px;color:#9fb4c8}
.cr-invite-btn{flex:none;border:0;border-radius:999px;padding:9px 15px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:#fff}
.cr-invite-accept{background:#2f9e5f}
.cr-invite-decline{background:rgba(255,255,255,.13)}

/* ---- return-to-call pill (shell, persistence Rule 1) ----
   Shown by shell.js on non-call pages while a live call's room
   document was replaced (e.g. a push-notification tap navigated
   the window away): the call itself survives server-side, and
   this is the one-tap way back into the room. */
/* ---- minimized-call bar (2026-10-21): WhatsApp-pattern top bar
   replacing the floating return pill. ONE slim row pinned to the
   very top of the viewport, full width; the html.mx-callbar-on
   offset pushes page content below it so nothing is overlapped.
   Left: mic toggle. Centre (the return link): phone glyph + peer
   name + live elapsed timer. Right: red round hang-up. Colours are
   fixed deep-green/red (a live-call surface, like the call room
   itself) so the bar reads identically in both themes. */
.mx-call-bar{position:fixed;top:0;left:0;right:0;height:48px;z-index:95;display:flex;align-items:center;background:rgba(20,38,29,.98);border-bottom:1px solid rgba(88,214,141,.35);color:#eafff3;box-sizing:border-box}
.mx-embedded .mx-call-bar{display:none}
html.mx-callbar-on body{padding-top:48px}
.mxcb-mic{flex:none;width:52px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#eafff3;cursor:pointer;padding:0}
.mxcb-mic.mxcb-muted{color:#ff7a6e}
.mxcb-main{flex:1;min-width:0;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;color:#eafff3;text-decoration:none;font-size:14.5px;font-weight:600;padding:0 4px}
.mxcb-phone{flex:none;display:flex;color:#58d68d}
.mxcb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mxcb-time{flex:none;font-weight:500;opacity:.85;font-variant-numeric:tabular-nums}
.mxcb-end{flex:none;width:34px;height:34px;margin:0 10px 0 2px;border-radius:50%;border:0;background:#e53935;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mxcb-end:disabled{opacity:.55}

/* ---- embedded mode (the in-call app iframe) ----
   The shell marks the document .mx-embedded: call-start buttons
   disappear (a second call never starts from inside the frame)
   and the incoming-call overlay never exists (call.js is not
   loaded there at all). */
.mx-embedded #chatCall{display:none!important}
.mx-embedded .call-overlay{display:none!important}

/* Tags & channel keywords (vidIQ-style chips, tap-to-copy) */
.tag-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 12px; }
.tag-chip { border: 1px solid var(--line, rgba(255,255,255,.16)); background: rgba(135,210,249,.08); color: inherit;
  border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 550; cursor: pointer; font-family: inherit; }
.tag-chip:active { background: rgba(135,210,249,.28); }

/* ---- In-app message banners (iOS-style), shell.js inbox notifier ----
   Foreground-only: Web Push remains the background channel. Frosted
   glass over the app's dark theme; sits below the call overlay
   (z 1200) and above the chrome. */
.mx-notif-stack { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; transform: translateX(-50%);
  width: min(430px, calc(100vw - 20px)); z-index: 1100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.mx-notif { pointer-events: auto; display: flex; align-items: center; gap: 11px; color: #f5f5f7; cursor: pointer;
  background: rgba(34,34,40,.82); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.09); border-radius: 22px; box-shadow: 0 18px 44px rgba(0,0,0,.5);
  padding: 11px 13px; transform: translateY(-18px); opacity: 0;
  transition: transform .45s cubic-bezier(.21,1.02,.55,1.01), opacity .3s ease; touch-action: pan-x; }
.mx-notif-in { transform: translateY(0); opacity: 1; }
.mx-notif-out { transform: translateY(-14px) !important; opacity: 0 !important; transition: transform .3s ease-in, opacity .28s ease-in; }
.mx-notif-ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #3a3a44; }
.mx-notif-ava-disc { display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; }
.mx-notif-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mx-notif-top { display: flex; align-items: baseline; gap: 8px; }
.mx-notif-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-notif-when { margin-left: auto; font-size: 12px; color: rgba(235,235,245,.55); flex: 0 0 auto; }
.mx-notif-preview { font-size: 14px; color: rgba(235,235,245,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-notif-x { flex: 0 0 auto; width: 22px; height: 22px; border: none; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.mx-notif-x:hover { background: rgba(255,255,255,.22); color: #fff; }
@media (prefers-reduced-motion: reduce) { .mx-notif { transition: opacity .2s ease; } .mx-notif-in { transform: none; } }

/* ==== Chat media: photo + voice messages (2026-10-20) ====
   Shared by the three chat screens (their bubble/composer shells
   are page-local; these are the media pieces inside the bubbles).
   The composer gains two round tool buttons (attach / mic); while
   recording, the composer swaps for the recording bar. */
.mc-tool{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mc-tool:active{transform:scale(.94)}
.mc-tool:disabled{opacity:.38;cursor:not-allowed}
.mc-photo{display:block;max-width:min(260px,62vw);width:100%;height:auto;border-radius:12px;cursor:zoom-in;background:#000}
.mc-bubble .mc-photo{margin:1px 0}
.mc-bubble .mc-photo + .mc-text,.mc-bubble .mc-voice + .mc-text{margin-top:6px}
.mc-voice{display:flex;align-items:center;gap:9px;min-width:196px;padding:2px 0}
.mc-voice-btn{flex:none;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.22);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mc-bubble.in .mc-voice-btn{background:rgba(135,210,249,.25)}
.mc-voice-btn:active{transform:scale(.94)}
.mc-voice-track{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.mc-bubble.in .mc-voice-track{background:rgba(255,255,255,.14)}
.mc-voice-fill{display:block;height:100%;width:0%;background:#fff;border-radius:99px}
.mc-bubble.in .mc-voice-fill{background:#87d2f9}
.mc-voice-dur{flex:none;font-size:12px;font-variant-numeric:tabular-nums;opacity:.85;min-width:32px;text-align:right}
.mc-voice-audio{display:none}
.mc-transcript{display:block;margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14)}
.mc-bubble.me .mc-transcript{border-top-color:rgba(255,255,255,.28)}
.mc-transcript-label{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.mc-transcript-text{display:block;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word;user-select:text;-webkit-user-select:text}
.mc-transcript-none{font-size:13px;font-style:italic;opacity:.75}
.mc-transcript-note{font-size:12.5px;opacity:.8}
.mc-transcribe-btn{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);color:inherit;font:inherit;font-size:12px;font-weight:600;border-radius:99px;padding:4px 11px;cursor:pointer}
.mc-bubble.in .mc-transcribe-btn{border-color:rgba(135,210,249,.45);background:rgba(135,210,249,.12)}
.mc-transcribe-btn:active{transform:scale(.96)}
.mc-transcript.failed .mc-transcribe-btn{margin-left:8px}
.mc-recbar{flex:none;display:flex;align-items:center;gap:10px;padding-top:9px}
.mc-recbar[hidden]{display:none}
.mc-rec-dot{flex:none;width:11px;height:11px;border-radius:50%;background:#ff5252;animation:mcRecPulse 1.1s ease-in-out infinite}
@keyframes mcRecPulse{0%,100%{opacity:1}50%{opacity:.35}}
.mc-rec-time{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.mc-rec-hint{flex:1;color:var(--muted);font-size:13px}
.mc-rec-cancel,.mc-rec-send{flex:none;font:inherit;font-size:14px;font-weight:700;border-radius:999px;padding:11px 18px;min-height:44px;cursor:pointer}
.mc-rec-cancel{background:none;border:1px solid var(--line);color:var(--red-text)}
.mc-rec-send{background:linear-gradient(180deg,#2a76ad,#1d5f8e);border:1px solid rgba(135,210,249,.35);color:#fff}
.mc-viewer{position:fixed;inset:0;z-index:200;background:rgba(2,4,8,.94);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.mc-viewer[hidden]{display:none}
.mc-viewer img{max-width:100%;max-height:100%;object-fit:contain}
/* ==== @mentions: pill + long-press feedback (Phase 3, 2026-10-20) ==== */
.mc-mention{color:#87d2f9;background:rgba(135,210,249,.15);border-radius:6px;padding:0 4px;font-weight:600;white-space:nowrap}
.mc-tagging{animation:mcTagPulse .38s ease}
@keyframes mcTagPulse{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
/* ==== Language pill (2026-10-20): floating zh/fr ↔ EN switcher,
   rendered by shell.js ONLY while the active UI language is not
   English. Glass style matches the shell2 bottom tab bar. Offsets:
   the tab bar's top edge sits ~74px above the viewport bottom on
   shell2 phones, and on chat pages the composer (send button /
   recording bar) occupies the 84px–141px zone above it — the pill
   always floats clear above both. ==== */
.lang-pill{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:72;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(13,16,24,.82);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.lang-pill button{border:none;background:none;color:var(--muted,#8a94a6);font:inherit;font-size:13px;font-weight:700;border-radius:999px;padding:7px 13px;min-height:34px;cursor:pointer;line-height:1}
.lang-pill button.on{background:rgba(255,255,255,.14);color:#fff;cursor:default}
body:has(.mc-composer) .lang-pill{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (max-width:1023px){
  body.shell2 .lang-pill{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.shell2:has(.mc-composer) .lang-pill{bottom:calc(150px + env(safe-area-inset-bottom))}
}

/* ---- call-room fit pass (2026-10-20, build -21) ----
   Geometry-proven on the staging twin at phone sizes:
   (1) The controls row is up to six 62px buttons (mute, camera, the
   dynamic speaker toggle, PiP, minimize, End) + 26px gaps = 502px —
   wider than every phone viewport — so Mute hung off the left edge
   and End off the right (clipped by .cr-main's overflow:hidden).
   On narrow screens the row now wraps; the buttons keep their
   approved 62px size and full tappability.
   (2) An unbreakable peer name (a long single-token username)
   spilled past both stage edges; name/status now wrap anywhere.
   (3) Short viewports (landscape phones) clipped the stage's
   centered column at the top — avatar first. A compact tier
   shrinks the stage furniture, and in landscape the shell tab bar
   (not part of the call UI; the call's own controls carry every
   action) steps aside so the call gets the height back. */
.cr-name{max-width:100%;overflow-wrap:anywhere}
.cr-status{max-width:100%;overflow-wrap:anywhere}
@media (max-width:560px){
  .cr-controls{flex-wrap:wrap;justify-content:center;row-gap:14px;max-width:100%}
}
@media (max-height:600px){
  .cr-main{padding-top:8px}
  .cr-stage{padding:12px 16px}
  .cr-avatar-wrap{width:64px;height:64px}
  .cr-avatar{width:64px;height:64px}
  .cr-name{font-size:19px;margin-top:10px}
  .cr-status{font-size:13.5px;margin-top:4px;min-height:19px}
  .cr-timer{font-size:13.5px}
  .cr-meter{display:none}
  .cr-rec-note,.cr-rec-live,.cr-rec-off{margin-top:6px;font-size:11.5px}
  .cr-controls{margin-top:10px}
  .cr-join-wrap{margin-top:10px}
  .cr-join{padding:10px 30px;font-size:15px}
  .cr-back{margin-top:10px;padding:8px 18px}
  .cr-error{margin-top:8px;padding:10px 14px}
  .cr-local-video{width:84px;right:10px;bottom:10px}
}
@media (max-height:600px) and (orientation:landscape){
  /* 26px, not 12: the End button's decline glyph is rotate(135deg),
     so its bounding box reaches ~13px past its layout box — the
     extra reserve keeps even that box inside the viewport. */
  body.shell2 main.cr-main{padding-bottom:26px}
  body[data-page="call-room"] .shell2-tabbar{display:none}
}

/* Render-sanity sentinel (2026-10-20, web-always-latest): version.js
   probes a .mx-css-probe element's computed color on boot; this exact
   value is the "main stylesheet actually applied" signal that drives
   the poisoned-cache self-repair. Do not restyle or remove. */
.mx-css-probe{color:rgb(23, 89, 201)!important}

/* ---- call completeness: switch camera, screen share, connection
   quality (2026-10-20) ----
   Self-view mirroring follows the capture source: a front camera
   is mirrored (the self-view users expect), a back camera and a
   shared screen are not — mirroring shared text would make it
   unreadable. The peer always receives the unmirrored track.
   The flip/share buttons are stock 62px .call-btn circles, so the
   -21 wrap rule absorbs them at phone widths unchanged. */
.cr-local-video.cr-mirror{transform:scaleX(-1)}
#crFlip svg,#crShare svg{display:block}
.call-btn.call-active{background:rgba(37,211,102,.25);border-color:rgba(37,211,102,.6)}
.cr-share-note{font-size:12.5px;font-weight:700;color:#87D2F9;margin-top:12px}
.cr-share-note[hidden]{display:none}
.cr-quality{position:absolute;top:12px;right:12px;display:flex;gap:2.5px;align-items:flex-end;height:14px;z-index:4;background:rgba(10,14,22,.45);padding:4px 6px;border-radius:8px}
.cr-quality[hidden]{display:none}
.cr-q-bar{width:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.cr-q-bar:nth-child(1){height:5px}
.cr-q-bar:nth-child(2){height:9px}
.cr-q-bar:nth-child(3){height:13px}
.cr-quality[data-level="3"] .cr-q-bar.cr-on{background:#25d366}
.cr-quality[data-level="2"] .cr-q-bar.cr-on{background:#f5b544}
.cr-quality[data-level="1"] .cr-q-bar.cr-on{background:#ff6b6b}

/* ---- call stage layout (2026-10-21): the stage placeholder
   (peer avatar + name) is laid out in normal flow while the
   remote video covers the whole stage absolutely — a visible
   placeholder therefore painted ON TOP of live video. The room
   now drives the placeholder with the hidden attribute
   (syncStageLayout in call-room.js): live video always owns
   the stage alone; the placeholder owns it only when no video
   is flowing. These guards make hidden win unconditionally. */
.cr-avatar-wrap[hidden],.cr-name[hidden]{display:none!important}

/* ---- app downloads page (/download, 2026-10-21) ---- */
.dl-wrap{max-width:880px;margin:0 auto;padding:34px 16px 10px}
.dl-head{text-align:center}
.dl-head .brand-head{justify-content:center}
.dl-head h1{margin:10px 0 4px}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.dl-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;text-align:left;display:flex;flex-direction:column;gap:7px}
.dl-card h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-card .rec-badge{background:rgba(135,210,249,.14);color:var(--accent);border:1px solid rgba(135,210,249,.35);border-radius:999px;font-size:11px;font-weight:700;padding:2px 8px}
.dl-card.dim{opacity:.62}
.dl-card.recommended{border-color:rgba(135,210,249,.55)}
.dl-sub{color:var(--muted);font-size:13px;margin:0}
.dl-meta{color:var(--muted);font-size:12.5px;margin:0}
.dl-note{font-size:13.5px;line-height:1.5;margin:2px 0 6px;flex:1}
.dl-note[hidden]{display:none}
.dl-btn{text-align:center;text-decoration:none}
.dl-btn.is-disabled{opacity:.55;pointer-events:none}
.dl-foot-note{text-align:center;color:var(--muted);font-size:13px;margin-top:20px}
.dl-wrap .site-footer{text-align:center;border-top:none}

/* ---- native app shells (Capacitor app + desktop wrapper) ----------
   Inside an installed app there is nothing to install: the install
   pill, the legacy top-bar install link, and the More page's Install
   row are web-only UI and are hidden. Tap highlight + overscroll are
   calmed so the surface feels like an app, not a browser page.
   The cross-document view transition softens full-page moves in
   Chromium/WebView; layout is unchanged everywhere. */
html.maxnewsy-app .shell-pill-app, html.maxnewsy-desktop .shell-pill-app,
html.maxnewsy-app .more-row[href="/install"], html.maxnewsy-desktop .more-row[href="/install"],
html.maxnewsy-app header.topbar a[href="/install"], html.maxnewsy-desktop header.topbar a[href="/install"] { display: none !important; }
html.maxnewsy-app { -webkit-tap-highlight-color: transparent; }
html.maxnewsy-app body { overscroll-behavior-y: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .1s; }

/* ---- router navigation affordances (web-fluidity lane) -------------
   A slim top progress bar while a client-side swap is in flight and a
   gentle dim of the outgoing <main>; the swapped-in page paints at
   full opacity instantly. No layout properties change. */
main { transition: opacity .15s ease; }
html.mxr-nav main { opacity: .5; }
.mxr-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 300; pointer-events: none; opacity: 0; overflow: hidden; }
.mxr-progress.mxr-on { opacity: 1; }
.mxr-progress.mxr-on::before { content: ''; display: block; height: 100%; width: 40%; background: var(--accent, #87D2F9); animation: mxr-slide .9s ease-in-out infinite; }
.mxr-progress.mxr-done { opacity: 0; transition: opacity .18s ease; }
@keyframes mxr-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }

/* Perf pass (2026-10-20): "load older messages" pill — mirrors the
   new-message pill, anchored to the top of the chat stream. */
.mc-loadolder{position:absolute;left:50%;transform:translateX(-50%);top:10px;z-index:5;background:rgba(19,25,38,.95);color:var(--text);border:1px solid var(--line);font:inherit;font-size:13px;font-weight:600;border-radius:999px;padding:8px 15px;min-height:38px;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.mc-loadolder[hidden]{display:none}
.mc-loadolder:disabled{opacity:.55;cursor:default}