/* Built from src/styles/*.css by scripts/build.mjs. Don't edit this file: edit the parts. */
/* ---- 01-base.css ---- */
/* The community (/): joining and signing in, then channels down the side, posts in the middle. Phone first.
   The look is the same as THE NETWORK's community: Apple's, with Liquid Glass on the controls (the header, the box to write in),
   light or dark like the phone. Never gold or amber. */
:root {
  color-scheme: light dark;
  --ground: #f2f2f7;
  --panel: #ffffff;
  --raise: #f2f2f7;
  --fill: rgba(120, 120, 128, .12);
  --line: rgba(60, 60, 67, .12);
  --line-2: rgba(60, 60, 67, .24);
  --ink: #000000;
  --ink-2: rgba(60, 60, 67, .82);
  --ink-3: rgba(60, 60, 67, .6);
  --paper: #007aff;
  --on-paper: #ffffff;
  --up: #34c759;
  --up-ink: #248a3d;
  --down: #ff3b30;
  --next: #007aff;
  --next-rgb: 0, 122, 255;
  --up-rgb: 52, 199, 89;
  --down-rgb: 255, 59, 48;
  --glass: rgba(255, 255, 255, .72);
  --glass-pill: rgba(255, 255, 255, .85);
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-rim: rgba(0, 0, 0, .07);
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .05);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --wash-1: rgba(0, 122, 255, .1);
  --wash-2: rgba(52, 199, 89, .08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #000000; --panel: #1c1c1e; --raise: #2c2c2e; --fill: rgba(118, 118, 128, .24);
    --line: rgba(84, 84, 88, .45); --line-2: rgba(84, 84, 88, .8);
    --ink: #ffffff; --ink-2: rgba(235, 235, 245, .8); --ink-3: rgba(235, 235, 245, .6);
    --paper: #0a84ff; --up: #30d158; --up-ink: #30d158; --down: #ff453a; --next: #0a84ff;
    --next-rgb: 10, 132, 255; --up-rgb: 48, 209, 88; --down-rgb: 255, 69, 58;
    --glass: rgba(36, 36, 40, .68); --glass-pill: rgba(255, 255, 255, .14); --glass-edge: rgba(255, 255, 255, .16); --glass-rim: var(--fill);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, .55); --card-shadow: none; --wash-1: rgba(10, 132, 255, .14); --wash-2: rgba(48, 209, 88, .07);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--next); outline-offset: 2px; border-radius: 4px; }
.input { width: 100%; min-width: 0; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--raise); }
.input:focus { outline: none; border-color: var(--next); }
.btn { border: 0; border-radius: 11px; padding: 11px 16px; font-weight: 650; background: var(--raise); box-shadow: 0 0 0 1px var(--line-2) inset; white-space: nowrap; }
.btn.go { background: var(--paper); color: var(--on-paper); box-shadow: none; }
.btn.small { padding: 8px 12px; font-size: 14px; }
.btn:disabled { opacity: .5; }
.linkbtn { border: 0; background: none; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--ink); }
.linkbtn.no, .linkbtn.no:hover { color: var(--down); }

/* ---- 02-gate.css ---- */
/* sign in */
.gate { max-width: 440px; margin: 0 auto; padding: 56px 20px; display: grid; gap: 14px; height: 100%; overflow-y: auto; align-content: start; }
.kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.gate h1 { margin: 0; font-size: 34px; letter-spacing: -.03em; }
.lede { margin: 0; color: var(--ink-2); }
.lede.small { font-size: 14px; color: var(--ink-3); }
.lab { font-size: 13px; color: var(--ink-3); }
.keyform { display: grid; gap: 8px; }
.adm summary { cursor: pointer; color: var(--ink-3); font-size: 14px; }
.adm .keyform { margin-top: 10px; }
.status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--down); }
.keyform h1 { margin: 0 0 4px; }
a.btn { display: block; text-align: center; text-decoration: none; color: inherit; }
a.btn.go { color: var(--on-paper); }
.btn.big { padding: 16px; font-size: 17px; }
.team { margin-top: 28px; }
.team a { color: var(--ink-3); }

/* ---- 03-app.css ---- */
/* the app */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100dvh; }
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.sidehead { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.sidehead b { font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.sidehead span { font-size: 13px; color: var(--ink-3); }
.chans { flex: 1; overflow-y: auto; padding: 10px 8px; display: grid; gap: 2px; align-content: start; }
.chans button { border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 8px; color: var(--ink-3); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.chans button .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chans button:hover { background: var(--raise); color: var(--ink-2); }
.chans button.new { color: var(--ink); }
.chans button[aria-current="true"] { background: var(--raise); color: var(--ink); }
.ic { display: inline-grid; place-items: center; width: 18px; flex: none; font-size: 18px; font-weight: 500; color: var(--ink-3); line-height: 1; }
.ic svg { width: 17px; height: 17px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: none; }
.admin { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; justify-items: start; }
.addch { display: flex; gap: 6px; width: 100%; }
.addch .input { padding: 8px 10px; font-size: 14px; }
.addch.first { width: auto; margin: 10px 8px 0; }
.scrim { display: none; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.top h2 { margin: 0; font-size: 17px; font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.menu { display: none; border: 0; background: none; font-size: 20px; padding: 2px 6px; position: relative; }
.menu.has::after { content: ""; position: absolute; top: 2px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.chadmin { display: flex; gap: 12px; align-items: center; }
.chadmin .input { padding: 6px 9px; font-size: 14px; width: 150px; }
.toast { margin: 8px 16px 0; padding: 10px 12px; border-radius: 10px; background: rgba(var(--down-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--down-rgb), .45) inset; font-size: 14px; }
.toast.ok { background: rgba(var(--up-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--up-rgb), .45) inset; }

.feed { flex: 1; overflow-y: auto; padding: 12px 8px 16px; display: flex; flex-direction: column; }
.empty { margin: auto; text-align: center; color: var(--ink-3); padding: 24px; }
.chhead { padding: 24px 8px 8px; margin-top: auto; display: grid; gap: 6px; }
.chhead .big { width: 56px; height: 56px; border-radius: 50%; background: var(--raise); display: grid; place-items: center; }
.chhead .big .ic { width: 30px; font-size: 30px; color: var(--ink-2); }
.chhead .big .ic svg { width: 28px; height: 28px; }
.chhead h3 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.02em; }
.chhead p { margin: 0; color: var(--ink-3); font-size: 14px; }
.day { display: flex; align-items: center; gap: 10px; margin: 18px 8px 6px; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; padding: 2px 8px; border-radius: 8px; }
.msg:not(.cont) { margin-top: 10px; padding-top: 4px; }
.msg:hover, .msg.open { background: var(--panel); }
button.av { border: 0; padding: 0; cursor: pointer; }
.av { grid-column: 1; grid-row: 1 / span 4; align-self: start; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: #fff; font-weight: 700; font-size: 16px; }
.msg.adm .av { background: var(--paper); color: var(--on-paper); }
.ct { position: absolute; left: 8px; top: 5px; width: 40px; text-align: right; white-space: nowrap; font: 500 10.5px/1.4 var(--mono); color: var(--ink-3); visibility: hidden; }
.msg.cont:hover .ct, .msg.cont.open .ct { visibility: visible; }
.mh { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.mh b, .mh .who { font-weight: 650; }
.who { border: 0; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--ink); cursor: pointer; }
.who:hover { text-decoration: underline; text-underline-offset: 3px; }
.mh .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--paper); color: var(--on-paper); }
.mh time { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.re { grid-column: 2; margin: 2px 0 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re b { color: var(--ink-2); font-weight: 600; }
.mt { grid-column: 2; grid-row: auto; margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mt a { color: var(--next); }
.ma { position: absolute; top: -12px; right: 10px; display: none; gap: 12px; padding: 3px 10px; border-radius: 8px; background: var(--raise); box-shadow: 0 0 0 1px var(--line-2) inset; z-index: 1; }
.msg:hover .ma, .msg:focus-within .ma, .msg.open .ma { display: flex; }
.ma .linkbtn { font-size: 12.5px; padding: 2px 0; text-decoration: none; }
.ma .linkbtn:hover { text-decoration: underline; }
.msg:first-of-type .ma { top: 2px; }
/* reactions, mentions, edits, the New line, jumping to a post */
.rxs { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rx { border: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--raise); box-shadow: 0 0 0 1px var(--line-2) inset; font-size: 14px; line-height: 1.4; }
.rx .n { font: 600 12.5px/1 var(--mono); color: var(--ink-2); }
.rx.me { background: rgba(var(--next-rgb), .14); box-shadow: 0 0 0 1px rgba(var(--next-rgb), .6) inset; }
.rx.me .n { color: var(--next); }
.rx:active { transform: scale(.94); }
.rxpick { grid-column: 2; display: flex; gap: 4px; margin-top: 6px; padding: 4px; border-radius: 999px; background: var(--raise); box-shadow: 0 0 0 1px var(--line-2) inset; justify-self: start; animation: pop .14s ease-out; }
.rxpick button { border: 0; background: none; width: 38px; height: 38px; border-radius: 50%; font-size: 21px; line-height: 1; }
.rxpick button:hover, .rxpick button.me { background: rgba(var(--next-rgb), .16); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.men { padding: 0 3px; border-radius: 4px; background: rgba(var(--next-rgb), .16); color: var(--next); font-weight: 600; }
.msg.tome { background: rgba(var(--next-rgb), .06); box-shadow: 2px 0 0 var(--next) inset; }
.edited { font-size: 12px; color: var(--ink-3); }
.re.go { cursor: pointer; }
.re.go:hover b { text-decoration: underline; }
.newline { display: flex; align-items: center; gap: 10px; margin: 14px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--down); }
.newline::before { content: ""; flex: 1; height: 1px; background: var(--down); opacity: .7; }
.msg.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { background: rgba(var(--next-rgb), .18); } 100% { background: transparent; } }
.editbox { grid-column: 2; display: grid; gap: 6px; margin-top: 4px; }
.editbox .row { display: flex; align-items: center; gap: 12px; }
/* replies and mentions, the pinned post, the description */
.inboxb { border: 0; background: none; text-align: left; margin: 10px 8px 0; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.inboxb:hover, .inboxb[aria-current="true"] { background: var(--raise); color: var(--ink); }
.inboxb.new { color: var(--ink); }
.inboxb .nm { flex: 1; }
.inboxb .dot { background: var(--next); }
.inbox { display: grid; gap: 4px; padding: 8px; }
.inbox h3 { margin: 4px 4px 8px; font-size: 18px; }
.ibx { border: 0; text-align: left; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; padding: 10px; border-radius: 10px; background: var(--panel); color: inherit; }
.ibx:hover { background: var(--raise); }
.ibx .av { grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 15px; }
.ibx .it { font-size: 13.5px; color: var(--ink-3); }
.ibx .it b { color: var(--ink); }
.ibx .tx { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inboxb + .inboxb { margin-top: 2px; }
.bsub { margin: -4px 4px 6px; color: var(--ink-3); font-size: 14px; }
.tt { flex: 1; min-width: 0; display: grid; }
.desc { margin: 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinbar { border: 0; display: flex; align-items: center; gap: 8px; margin: 8px 12px 0; padding: 9px 12px; border-radius: 10px; background: var(--panel); box-shadow: 0 0 0 1px var(--line-2) inset; text-align: left; font-size: 14px; color: var(--ink-2); }
.pinbar .ic { color: var(--next); }
.pinbar .pt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinbar.open .pt { white-space: pre-wrap; overflow-wrap: anywhere; }
.pinbar b { color: var(--ink); font-weight: 650; }
/* @mentions while writing */
.menpick { display: grid; gap: 2px; padding: 4px; border-radius: 12px; background: var(--raise); box-shadow: 0 0 0 1px var(--line-2) inset; }
.menpick button { border: 0; background: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; }
.menpick button:hover, .menpick button:first-child { background: var(--fill); }
.menpick .av { width: 26px; height: 26px; font-size: 12px; }
.menpick small { color: var(--ink-3); }
/* a profile */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .65); display: grid; place-items: end center; padding: 16px; }
.sheet .card { width: min(420px, 100%); display: grid; justify-items: center; gap: 8px; padding: 26px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 20px; background: var(--panel); box-shadow: 0 0 0 1px var(--line-2) inset; text-align: center; animation: pop .16s ease-out; }
.sheet .card h3 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.02em; }
.sheet .card .sub { margin: 0; color: var(--ink-3); }
.sheet .av.big2 { width: 72px; height: 72px; font-size: 30px; }
.sheet .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 8px 0 4px; }
.sheet .fact { display: grid; gap: 2px; padding: 12px 8px; border-radius: 12px; background: var(--raise); }
.sheet .fact b { font-size: 18px; }
.sheet .fact span { font-size: 12.5px; color: var(--ink-3); }
.sheet .row { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
@media (min-width: 761px) { .sheet { place-items: center; } }
.annote { margin: 0; border-top: 1px solid var(--line); padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); color: var(--ink-3); font-size: 14px; text-align: center; }

.members { display: grid; gap: 6px; padding: 8px; align-content: start; }
.members h3 { margin: 4px 4px 0; font-size: 22px; letter-spacing: -.022em; }
.mem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel); }
.mem span { min-width: 0; overflow-wrap: anywhere; }
.mem small { color: var(--ink-3); }
.mem.out .who2 { color: var(--ink-3); text-decoration: line-through; }

.composer { border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; }
.composer .row { display: flex; gap: 8px; align-items: flex-end; }
.ta { resize: none; max-height: 160px; line-height: 1.4; }
.replying { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(280px, 82vw); transform: translateX(-100%); transition: transform .2s ease; }
  .side.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .6); }
  .menu { display: block; }
  .chadmin .input { width: 110px; }
  .top { flex-wrap: wrap; row-gap: 4px; }
  .chadmin { flex-basis: 100%; }  /* the admin's buttons get their own line, so the channel name keeps its room */
}

/* ---- 04-glass.css ---- */
/* ---------- the Apple look, with Liquid Glass (2026-10-24) ---------- */
body { background: radial-gradient(1100px 620px at 0% -12%, var(--wash-1), transparent 62%), radial-gradient(900px 520px at 100% -6%, var(--wash-2), transparent 60%), var(--ground); letter-spacing: -.01em; }
.gate h1, .chhead h3, .members h3, .inbox h3, .sheet .card h3 { letter-spacing: -.022em; font-weight: 700; }
.kicker { letter-spacing: .02em; font-size: 13px; }
.btn { border-radius: 999px; font-weight: 600; box-shadow: none; background: var(--fill); }
.btn.go { background: var(--next); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px rgba(var(--next-rgb), .28); }
a.btn.go { color: #fff; }
.input { border: 0; background: var(--fill); border-radius: 12px; }
.input:focus { border: 0; box-shadow: 0 0 0 3px rgba(var(--next-rgb), .32); }
.linkbtn { color: var(--next); text-decoration: none; font-weight: 500; }
.linkbtn:hover { color: var(--next); opacity: .75; }
/* sign in: a card in the middle */
.gate { padding-top: 64px; }
.gate h1 { font-size: 34px; }
.keyform { padding: 20px; border-radius: 22px; background: var(--panel); box-shadow: var(--card-shadow); }
.adm .keyform { padding: 0; background: none; box-shadow: none; }
.btn.big { padding: 15px; }
/* the app: glass on the controls */
.side { background: var(--panel); border-right: .5px solid var(--line-2); }
.sidehead, .admin { border-color: var(--line); }
.chans button[aria-current="true"], .inboxb[aria-current="true"] { background: rgba(var(--next-rgb), .12); color: var(--next); }
.chans button[aria-current="true"] .ic { color: var(--next); }
.chans button.new .dot, .menu.has::after { background: var(--down); }
.top { position: relative; z-index: 2; border-bottom: .5px solid var(--glass-rim); background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); }
.top h2 { font-size: 17px; font-weight: 600; }
.pinbar { background: var(--panel); box-shadow: var(--card-shadow); border-radius: 14px; }
.msg:hover, .msg.open { background: var(--fill); }
.av { color: #fff; }
.msg.adm .av { background: var(--next); color: #fff; }
.mh .tag { background: var(--next); color: #fff; }
.ma { background: var(--glass-pill); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), 0 4px 14px rgba(0, 0, 0, .1); border-radius: 999px; }
.rx { background: var(--fill); box-shadow: none; }
.rxpick { background: var(--glass-pill); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), 0 6px 18px rgba(0, 0, 0, .12); }
.composer { border-top: 0; margin: 0 10px 8px; padding: 6px; border-radius: 26px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), var(--glass-shadow); }
.composer .input { background: transparent; border-radius: 20px; }
.composer .input:focus { box-shadow: none; }
.composer .btn { border-radius: 999px; }
.app .composer { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.annote { border-top: 0; }
.menpick { background: var(--glass-pill); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: inset 0 0 0 .5px var(--glass-rim), 0 6px 18px rgba(0, 0, 0, .1); border-radius: 16px; }
.mem, .ibx { background: var(--panel); box-shadow: var(--card-shadow); border-radius: 14px; }
.sheet { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet .card { background: var(--glass-pill); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), var(--glass-shadow); border-radius: 28px; }
.sheet .fact { background: var(--fill); }
.toast { border-radius: 14px; }
.sidehead b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-transform: none; }

/* ---- 05-sheet.css ---- */
/* ---------- newcomers: a New tag, the welcome ---------- */
.mt:empty { display: none; }
.tag.nw { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: rgba(var(--up-rgb), .16); color: var(--up-ink); vertical-align: 1px; }
.mh .tag.nw { background: rgba(var(--up-rgb), .16); color: var(--up-ink); }
/* the sheet: people to pick from, the welcome, a new password */
.sheet .card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.sheet .card.list, .sheet .card.hello { justify-items: stretch; text-align: left; gap: 10px; }
.sheet .whd { display: flex; align-items: center; gap: 8px; color: var(--up-ink); }
.sheet .whd svg { width: 26px; height: 26px; flex: none; }
.sheet .whd h3 { margin: 0; color: var(--ink); }
.wlist { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.wpick { border: 0; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--fill); color: inherit; }
.wpick:hover:not(:disabled) { background: rgba(var(--up-rgb), .14); }
.wpick b { font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wpick span { font-size: 13px; color: var(--ink-3); }
.wpick:disabled { opacity: .5; cursor: default; }
.sheet .card.list .row { justify-content: flex-end; }
.sheet .card.hello h3 { margin: 0; }
.steps { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; color: var(--ink-2); }
.steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--next-rgb), .14); color: var(--next); font-size: 14px; font-weight: 700; }
.steps b { color: var(--ink); font-weight: 650; }
.fromr { padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: 14px; }
.fromr b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--next); }
.fromr p { margin: 4px 0 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sheet .card.hello .row { display: grid; gap: 8px; justify-content: stretch; }
/* How it works: one step at a time, a big emoji, dots for where you are */
.sheet .card.tour { justify-items: stretch; text-align: center; gap: 12px; outline: none; touch-action: pan-y; }
.tour .tbody { display: grid; justify-items: center; gap: 8px; animation: tin .28s cubic-bezier(.3, .7, .2, 1); }
.tour .temo { font-size: 54px; line-height: 1.1; }
.tour h3 { margin: 0; }
.tour .sub { margin: 0; max-width: 36ch; font-size: 15.5px; line-height: 1.45; }
.tdots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; }
.tdots i { width: 7px; height: 7px; border-radius: 4px; background: var(--fill); transition: width .2s; }
.tdots i.on { width: 20px; background: var(--next); }
.tnav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes tin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour .tbody { animation: none; } }

/* ---- 06-messages.css ---- */
/* ---------- private messages (2026-10-27): the team and one creator at a time; a message from the team stops the creator ---------- */
.inboxb .cnt { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--down); color: #fff; font-size: 12.5px; font-weight: 700; }
.dmb .dot { background: var(--down); }
.dms { display: grid; gap: 8px; padding: 8px; align-content: start; }
.dms h3 { margin: 4px 4px 0; font-size: 22px; letter-spacing: -.022em; }
.dms .bsub { margin: 0 4px 4px; font-size: 14px; color: var(--ink-3); }
.dmacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 4px 10px; }
.dmrow { border: 0; text-align: left; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: var(--card-shadow); color: inherit; }
.dmrow:hover { background: var(--raise); }
.dmrow .av { grid-row: 1 / span 2; width: 40px; height: 40px; }
.dmrow .it { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dmrow .it b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmrow time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.dmrow .nr { grid-column: 3; grid-row: 1; padding: 3px 9px; border-radius: 999px; background: var(--down); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dmrow .tx { grid-column: 2 / span 2; font-size: 14.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmrow.wait { box-shadow: inset 0 0 0 1.5px var(--down), var(--card-shadow); }
.dmchat { display: grid; gap: 6px; padding: 8px 8px 12px; align-content: start; }
.dmtop { display: flex; align-items: center; gap: 12px; padding: 10px 6px 14px; margin-bottom: 4px; border-bottom: .5px solid var(--line-2); }
.dmtop > div { flex: 1; min-width: 0; }
.dmtop h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.dmtop p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.av.big { width: 48px; height: 48px; font-size: 20px; flex: none; }
.av.tm { background: var(--next); color: #fff; }
.av.tm svg { width: 24px; height: 24px; }
.bub { justify-self: start; max-width: min(80%, 520px); padding: 9px 13px 10px; border-radius: 20px 20px 20px 6px; background: var(--panel); box-shadow: var(--card-shadow); }
.bub.me { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--next); color: #fff; box-shadow: none; }
.bub.st:not(.me) { background: rgba(var(--next-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--next-rgb), .45); }
.bm { margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12.5px; color: var(--ink-3); }
.bm b { font-size: 13px; font-weight: 650; color: var(--ink); }
.bm .tag { padding: 1px 6px; border-radius: 5px; background: var(--next); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bub.me .bm, .bub.me .bm b { color: rgba(255, 255, 255, .86); }
.allt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub.me .bt a { color: #fff; text-decoration: underline; }
.composer.dmc { box-shadow: inset 0 0 0 1.5px rgba(var(--next-rgb), .6), var(--glass-shadow); }
.whd.dmh { color: var(--next); }
.wpick.pp { grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 0 10px; }
.wpick.pp .av { grid-row: 1 / span 2; width: 32px; height: 32px; font-size: 14px; }
.wpick.pp b, .wpick.pp span:not(.av) { grid-column: 2; }
.mem > span:first-child { flex: 1; }
/* the message that stops a creator: over everything, until Reply or Got it */
.sheet.stop { place-items: center; background: rgba(0, 10, 30, .62); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
.sheet .card.dmpop { width: min(460px, 100%); gap: 0; padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px)); justify-items: stretch; text-align: left; overflow: hidden auto;
  background: var(--panel); border-radius: 28px; box-shadow: 0 0 0 3px var(--next), 0 0 0 9px rgba(var(--next-rgb), .25), 0 28px 70px rgba(0, 0, 0, .5); animation: stop .32s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes stop { from { transform: translateY(24px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.dmband { display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: var(--next); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dmband svg { width: 24px; height: 24px; flex: none; }
.sheet .card.dmpop h3 { margin: 18px 22px 2px; font-size: 26px; line-height: 1.15; }
.dmmsgs { display: grid; gap: 10px; margin: 12px 22px 0; padding-bottom: 2px; max-height: 46vh; overflow-y: auto; }
.dmm { padding: 14px 16px; border-radius: 18px; background: rgba(var(--next-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--next-rgb), .4); }
.dmw { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13px; color: var(--ink-3); }
.dmw b { font-size: 14px; color: var(--next); }
.dmt { margin: 0; font-size: 18px; line-height: 1.4; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.dmmore, .dmpriv { margin: 10px 22px 0; font-size: 13px; color: var(--ink-3); }
.sheet .card.dmpop .row { display: grid; gap: 8px; margin: 16px 22px 0; justify-content: stretch; }
.sheet .card.dmpop .btn { padding: 15px; font-size: 17px; }

/* ---- 07-backdrop.css ---- */
/* ---------- the backdrop: a soft aurora behind the glass, drifting slowly, and a faint dot texture at the top ---------- */
:root { --win: #00c46a; --win-ink: #00a85b; --win-rgb: 0, 196, 106; --loss: #ff2d55; --loss-ink: #e8204a; --loss-rgb: 255, 45, 85; }
@media (prefers-color-scheme: dark) { :root { --win: #2ef08f; --win-ink: #3cf59a; --win-rgb: 46, 240, 143; --loss: #ff4d6d; --loss-ink: #ff6b85; --loss-rgb: 255, 77, 109; } }
:root { --aur-1: rgba(0, 122, 255, .3); --aur-2: rgba(52, 199, 89, .24); --aur-3: rgba(175, 82, 222, .22); --aur-dots: rgba(60, 60, 67, .12); }
@media (prefers-color-scheme: dark) {
  :root { --aur-1: rgba(10, 132, 255, .66); --aur-2: rgba(48, 209, 88, .36); --aur-3: rgba(191, 90, 242, .48); --aur-dots: rgba(255, 255, 255, .09); }
}
body { background: var(--ground); }
body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 30% 26%, var(--aur-1), transparent 24%), radial-gradient(circle at 72% 22%, var(--aur-3), transparent 20%),
    radial-gradient(circle at 62% 48%, var(--aur-2), transparent 24%), radial-gradient(circle at 34% 64%, var(--aur-3), transparent 18%);
  filter: blur(48px); animation: drift 40s ease-in-out infinite alternate; will-change: transform; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--aur-dots) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
@keyframes drift { from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(10deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
.chhead .big { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim); }

/* ---- 08-join-and-members.css ---- */
/* ---------- joining (the front page) ---------- */
.gate { gap: 16px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.gate h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.022em; font-weight: 700; }
.gate .keyform { gap: 8px; }
.gate .keyform .lab { margin-top: 4px; }
.gate .keyform .btn.big { margin-top: 8px; }
.gate .keyform .status:empty { min-height: 0; }
.atbox { position: relative; }
.atbox span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.atbox .input { padding-left: 30px; }
.chk { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.chk input { width: 22px; height: 22px; margin: 0; accent-color: var(--next); flex: none; }
.chk.news { align-items: flex-start; font-size: 14px; }
.chk.news input { margin-top: 1px; }
.chk small { color: var(--ink-3); font-size: 12.5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }  /* a box people never see: bots fill it in */
.fine { margin: 0 4px; font-size: 12.5px; color: var(--ink-3); }
.lede.small .linkbtn { font-size: inherit; padding: 0; }
.linkbtn:disabled, .linkbtn:disabled:hover { color: var(--ink-3); opacity: 1; cursor: default; }
.admin .count { font-size: 13px; color: var(--ink-3); }
/* the team's list of members: who joined, where they came from */
.msearch { margin: 6px 0 2px; }
.froms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 4px; }
.froms span { padding: 4px 10px; border-radius: 999px; background: var(--fill); font-size: 13px; color: var(--ink-2); }
.froms b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.mem { flex-wrap: wrap; }
.mem .who2 { flex: 1; min-width: 160px; display: grid; gap: 1px; }
.mem .who2 b { font-weight: 650; }
.mem .acts { display: flex; flex-wrap: wrap; gap: 14px; }
.mem.mute .tag.mute { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: rgba(var(--down-rgb), .14); color: var(--down); vertical-align: 1px; }
.sheet .row.wrap { flex-wrap: wrap; justify-content: flex-start; }
.pw { font: 600 20px/1.3 var(--mono); letter-spacing: .01em; padding: 14px; border-radius: 14px; background: var(--fill); text-align: center; overflow-wrap: anywhere; user-select: all; }
.dmrow.all .av { background: var(--next); }
.dmrow.all .av svg { width: 22px; height: 22px; }

/* ---- 09-dashboard.css ---- */
/* ---------- the admin's dashboard: glass cards over the backdrop, one big number, one chart at a time ---------- */
.dash { width: 100%; max-width: 980px; margin: 0 auto; padding: 10px 6px 28px; display: grid; gap: 14px; align-content: start; }
.dhead h3 { margin: 6px 4px 0; font-size: 28px; letter-spacing: -.025em; font-weight: 700; }
.dhead p { margin: 2px 4px 0; color: var(--ink-3); font-size: 14px; }
.dacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 2px; }
.dacts .btn { flex: 1 1 auto; }
@media (min-width: 761px) { .dacts .btn { flex: 0 1 auto; } }
.dcard { padding: 16px 18px 18px; border-radius: 22px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), var(--card-shadow); min-width: 0; }
.dcard h4 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.dsub { margin: 2px 0 10px; font-size: 13.5px; color: var(--ink-3); }
.dempty { margin: 10px 0 2px; font-size: 14px; color: var(--ink-3); }
.dfine { margin: 0 6px; font-size: 12.5px; color: var(--ink-3); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
/* what needs the admin */
.dcard.needs { box-shadow: inset 0 0 0 1.5px rgba(var(--next-rgb), .55), var(--card-shadow); }
.nrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ndot { width: 9px; height: 9px; border-radius: 50%; background: var(--next); flex: none; }
.nt { flex: 1; min-width: 0; font-size: 15px; }
/* the numbers */
.tiles { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 10px; }
.tile { display: grid; align-content: start; gap: 2px; padding: 14px 16px 16px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-rim), var(--card-shadow); min-width: 0; }
.tl { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.tv { font-size: 30px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.tile.hero .tv { font-size: 52px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.td { font-size: 13px; color: var(--ink-3); }
.td.up { color: var(--up-ink); font-weight: 600; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr 1fr; } .tile.hero, .tiles > .tile:nth-child(4) { grid-column: 1 / -1; } }
/* the chart */
.chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill); gap: 2px; max-width: 100%; overflow-x: auto; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.csum { margin: 8px 0 14px; font-size: 14px; color: var(--ink-2); }
.plot { position: relative; height: 180px; margin: 0 34px 0 0; }
.plot .grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.plot .grid span { position: absolute; right: -34px; top: -8px; width: 30px; font: 500 11px/1.4 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; outline-offset: -2px; }
.col i { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--next); transition: opacity .12s; }
.cols:hover .col i, .cols:focus-within .col i { opacity: .45; }
.cols .col.hl i, .cols .col:focus i { opacity: 1; }
.tip { position: absolute; top: -10px; transform: translate(-50%, -100%); padding: 6px 10px 7px; border-radius: 12px; background: var(--glass-pill); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%);
  box-shadow: inset 0 0 0 .5px var(--glass-rim), 0 6px 18px rgba(0, 0, 0, .16); font-size: 13px; white-space: nowrap; pointer-events: none; z-index: 2; }
.tip.r { transform: translate(-100%, -100%); }
.tip.l { transform: translate(0, -100%); }
.tip b { font-size: 15px; }
.tip span { display: block; color: var(--ink-3); font-size: 12px; }
.xax { display: flex; justify-content: space-between; margin: 8px 34px 0 0; font-size: 12px; color: var(--ink-3); }
/* the links */
.lrow { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: .5px solid var(--line); }
.lrow:first-of-type { border-top: 0; }
.ll { font-weight: 600; font-size: 14.5px; }
.lrow code { font: 13px/1.4 var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.lrow.mine { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 520px) { .lrow { grid-template-columns: minmax(0, 1fr) auto; } .lrow code { grid-column: 1 / -1; grid-row: 2; } }
/* bars: where they came from, the busiest channels */
.hbars { display: grid; gap: 2px; margin-top: 2px; }
.hrow { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 4px; border: 0; background: none; border-radius: 10px; text-align: left; color: inherit; width: 100%; }
.hrow.go:hover { background: var(--fill); }
.hl { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht { height: 10px; border-radius: 0 5px 5px 0; background: var(--fill); overflow: hidden; }
.ht i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--next); }
.hn { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2.5ch; text-align: right; }
/* people */
.prow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; background: none; border-radius: 12px; text-align: left; color: inherit; }
.prow:hover { background: var(--fill); }
.prow .rk { width: 16px; text-align: center; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.prow .av { width: 36px; height: 36px; font-size: 15px; flex: none; }
.pw2 { flex: 1; min-width: 0; display: grid; }
.pw2 b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw2 small { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcard > .linkbtn { margin-top: 8px; }

/* ---- 10-traders.css ---- */
/* ---------- for traders: $TICKER chips, trade idea cards, chart snapshots, trending, the market clock ---------- */
.tkr { border: 0; padding: 0 5px; border-radius: 6px; background: rgba(var(--next-rgb), .14); color: var(--next); font: 600 .94em/1.4 var(--mono); letter-spacing: -.01em; cursor: pointer; }
.tkr:hover { background: rgba(var(--next-rgb), .24); }
.tkr small { font-weight: 500; color: var(--ink-3); }
.tkr.big { font-size: 15px; padding: 2px 8px; }
.tkr.on { background: var(--next); color: #fff; }
.tkr.on small { color: rgba(255, 255, 255, .8); }
/* a trade idea: long in green, short in red (always with the word too), the levels, the risk against the reward, how it went */
.ih { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ih .dir { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; background: rgba(var(--up-rgb), .16); color: var(--up-ink); }
.idea.short .ih .dir { background: rgba(var(--down-rgb), .14); color: var(--down); }
.ist { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ist .linkbtn { font-size: 13px; padding: 2px 0; }
.badge { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--fill); color: var(--ink-2); }
.badge.open { background: rgba(var(--next-rgb), .14); color: var(--next); }
.badge.target { background: rgba(var(--up-rgb), .16); color: var(--up-ink); }
.nfa { margin: 0; font-size: 11.5px; color: var(--ink-3); }
/* chart snapshots from TradingView */
.snaps { grid-column: 2; display: grid; gap: 6px; margin-top: 6px; justify-items: start; }
.snap { display: block; width: min(100%, 540px); border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 .5px var(--line-2); background: var(--fill); }
.snap img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: contain; }
/* trending today, in the sidebar */
.trend { margin: 10px 8px 0; padding: 10px 10px 12px; border-radius: 12px; background: var(--fill); }
.trend p { margin: 0 2px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.trend .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trend .tkr { padding: 3px 8px; font-size: 13px; }
/* the market clock, in the header */
.mkt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--fill); font-size: 12.5px; white-space: nowrap; flex: none; }
.mkt i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.mkt b { font-weight: 650; }
.mkt span { color: var(--ink-3); }
.mkt.open i { background: var(--up); box-shadow: 0 0 0 3px rgba(var(--up-rgb), .25); }
.mkt.pre i, .mkt.after i { background: var(--next); }
@media (max-width: 760px) { .top .tt { flex: 1 1 0; } .mkt { padding: 4px 9px; font-size: 12px; } }
@media (max-width: 400px) { .mkt span { display: none; } }
/* the trade idea button, next to the box */
.ibtn { flex: none; align-self: flex-end; width: 40px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--next); display: grid; place-items: center; }
.ibtn:hover { background: rgba(var(--next-rgb), .14); }
.ibtn svg { width: 22px; height: 22px; }
.composer .row .ibtn + .ibtn { margin-left: -6px; }
/* a picture: waiting in the box, and in a post */
.attach { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; font-size: 13.5px; color: var(--ink-2); }
.attach img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--fill); }
.attach span { flex: 1; min-width: 0; }
.composer.drop { box-shadow: inset 0 0 0 2px var(--next), var(--glass-shadow); }
.shot { grid-column: 2; justify-self: start; display: block; width: min(100%, 520px); margin-top: 6px; border-radius: 14px; overflow: hidden; background: var(--fill); box-shadow: inset 0 0 0 .5px var(--line-2); }
.shot img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.gone { grid-column: 2; margin: 6px 0 0; font-size: 13px; color: var(--ink-3); font-style: italic; }
/* the trade idea form */
.ideaf .irow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ideaf .fld { display: grid; gap: 5px; min-width: 0; text-align: left; }
.ideaf .fld .input { font-family: var(--mono); }
.ideaf .fld.sym .input { text-transform: uppercase; }
.ideaf .seg button { padding: 8px 13px; }
.rrline { margin: 0; font-size: 14px; color: var(--ink-3); }
.rrline.ok { color: var(--ink); font-weight: 600; }
.rrline.bad { color: var(--down); }
/* a ticker's page */
.tkhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 4px 0; }
.tkhead h3 { margin: 0; font: 700 26px/1.2 var(--mono); letter-spacing: -.02em; }
.tkhead .btn { display: inline-block; }
.ibx .tx.il { font: 600 13.5px/1.4 var(--mono); }
.sheet .card .sub.fine2 { font-size: 12px; margin-top: -4px; }

/* ---- 11-idea-charts.css ---- */
/* a trade idea's chart: one line (or candles), shaded against the "said at" price, a live dot, nothing else */
.ih .lev, .said .lev { font: 700 12px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: rgba(var(--up-rgb), .16); color: var(--up-ink); }
.idea.short .lev { background: rgba(var(--down-rgb), .14); color: var(--down); }
.perf { margin-left: auto; display: grid; justify-items: end; line-height: 1.15; min-width: 0; }
.perf b { font: 700 24px/1.15 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color .15s; }
.perf.up b { color: var(--up-ink); }
.perf.dn b { color: var(--down); }
.perf small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.said { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 0; font-size: 13.5px; color: var(--ink-3); }
.said b { font: 600 13.5px var(--mono); color: var(--ink); margin-left: 4px; }
.said .lvls { flex-basis: 100%; font-size: 12.5px; }
.ichart { position: relative; margin: 2px -6px 0; }
.ichart svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; outline: none; -webkit-user-select: none; user-select: none; }
.ichart svg:focus-visible { outline: 2px solid var(--next); outline-offset: 2px; border-radius: 8px; }
.ichart .pre { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.ichart .ln { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ichart .ln.up { stroke: var(--up); }
.ichart .ln.dn { stroke: var(--down); }
.ichart .base { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; opacity: .8; }
.ichart .spt { fill: var(--panel); stroke: var(--next); stroke-width: 2.5; }
.ichart .si { fill: var(--ink); font: 700 10px var(--font); pointer-events: none; }
.ichart .dot.up { fill: var(--up); }
.ichart .dot.dn { fill: var(--down); }
.ichart .dot { stroke: var(--panel); stroke-width: 2; }
.ichart .pulse { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-out infinite; }
.ichart .pulse.up { stroke: var(--up); }
.ichart .pulse.dn { stroke: var(--down); }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ichart .pulse { animation: none; opacity: 0; } }
.ichart .xl { fill: var(--ink-3); font: 500 11px var(--font); }
.ichart .lvl { stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.ichart .lvl.stop { stroke: var(--down); }
.ichart .lvl.target { stroke: var(--up); }
.ichart .ll { font: 600 10.5px var(--font); opacity: .9; }
.ichart .ll.stop { fill: var(--down); }
.ichart .ll.target { fill: var(--up-ink); }
.ichart .cu { fill: var(--up); stroke: var(--up); }
.ichart .cd { fill: var(--down); stroke: var(--down); }
.ichart .wk { stroke-width: 1; }
.ichart .old { opacity: .3; }
.ichart .hair { stroke: var(--ink-2); stroke-width: 1; }
.ichart .hdot { fill: var(--ink); stroke: var(--panel); stroke-width: 2; }
.nochart { margin: 0; padding: 26px 12px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.ist .mode { margin-left: auto; color: var(--ink-3); }
.badge.closed { background: var(--fill); color: var(--ink-2); }
.badge.stop { background: rgba(var(--down-rgb), .14); color: var(--down); }
.ideaf .irow.two { grid-template-columns: 1fr 1fr; }
.ideaf details.more summary { cursor: pointer; color: var(--next); font-size: 14px; font-weight: 600; text-align: left; }
.ideaf details.more[open] .irow { margin-top: 10px; }
.ideaf .seg { flex-wrap: wrap; }
/* where they got in and out: IN in blue (the poster), OUT filled in the result's color, NOW outlined (still live), the time
   they were in shaded, and when under each */
.ichart .band { fill: var(--fill); opacity: .7; }
.ichart .vg { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.ichart .pill { stroke-width: 1.5; }
.ichart .pv { font: 700 11.5px var(--mono); letter-spacing: .01em; pointer-events: none; }
.ichart .pill.in { fill: var(--next); }
.ichart .pv.in, .ichart .pv.out { fill: #fff; }
.ichart .pill.out.up { fill: var(--up); }
.ichart .pill.out.dn { fill: var(--down); }
.ichart .pill.now { fill: var(--panel); }
.ichart .pill.now.up { stroke: var(--up); }
.ichart .pill.now.dn { stroke: var(--down); }
.ichart .pv.now.up { fill: var(--up-ink); }
.ichart .pv.now.dn { fill: var(--down); }
.ichart .xdot { stroke: var(--panel); stroke-width: 2.5; }
.ichart .xdot.up { fill: var(--up); }
.ichart .xdot.dn { fill: var(--down); }
.ichart .xl.in { fill: var(--next); font-weight: 600; }
.ichart svg.scrub .pill, .ichart svg.scrub .pv { opacity: .2; }
/* the card's words for it: In $X when → Out $Y how long later */
.said.trade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.said.trade .leg { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.said.trade .leg b { margin: 0; font: 600 14px var(--mono); color: var(--ink); }
.said.trade .leg small { font-size: 12.5px; color: var(--ink-3); }
.said.trade .arrow { color: var(--ink-3); }
.chip { align-self: center; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chip.in { background: var(--next); color: #fff; }
.chip.out.up { background: var(--up); color: #fff; }
.chip.out.dn { background: var(--down); color: #fff; }
.chip.now.up { box-shadow: inset 0 0 0 1.5px var(--up); color: var(--up-ink); }
.chip.now.dn { box-shadow: inset 0 0 0 1.5px var(--down); color: var(--down); }
.chip.then { box-shadow: inset 0 0 0 1.5px var(--ink-3); color: var(--ink-2); }
/* the account switch, and a funded account's line: −$2,000 max loss … +$3,000 target, where the trade is (the dot) and the
   worst it went (the tick) */
.ist .acct { color: var(--ink-3); }
.rules { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.rules[hidden] { display: none; }
.rules .rl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rules .track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--loss-rgb), .45), rgba(127, 127, 127, .18) 40%, rgba(127, 127, 127, .18) 60%, rgba(var(--win-rgb), .45)); }
.rules .track i, .rules .track b { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.rules .zero { width: 2px; height: 12px; border-radius: 1px; background: var(--ink-3); opacity: .5; }
.rules .low { width: 2px; height: 10px; border-radius: 1px; background: var(--loss); }
.rules b { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--panel, #1c1c1e); }
.rules b.up { background: var(--win); box-shadow: 0 0 10px rgba(var(--win-rgb), .7); }
.rules b.dn { background: var(--loss); box-shadow: 0 0 10px rgba(var(--loss-rgb), .7); }

/* ---- 12-idea-look.css ---- */
/* ---------- the dopamine look for trade ideas: neon green and hot pink-red, a gradient edge and a glow in the color of how
   it's going, the dollars big and glowing, a 🔥 when it's on fire, confetti when a winner closes ---------- */
.idea { --up: var(--win); --up-ink: var(--win-ink); --up-rgb: var(--win-rgb); --down: var(--loss); --down-rgb: var(--loss-rgb);
  --glow: var(--next-rgb); --glow2: 175, 82, 222;
  position: relative; grid-column: 2; justify-self: start; width: min(100%, 580px); margin-top: 8px; padding: 14px 16px 12px; border-radius: 22px; display: grid; gap: 10px;
  border: 1.5px solid transparent;
  background: radial-gradient(130% 90% at 100% 0%, rgba(var(--glow), .17), transparent 55%) padding-box, linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(var(--glow), .95), rgba(var(--glow2), .75) 60%, rgba(var(--glow), .35)) border-box;
  box-shadow: 0 12px 34px -8px rgba(var(--glow), .28), var(--card-shadow); transition: box-shadow .4s; }
.idea.win { --glow: var(--win-rgb); --glow2: 34, 211, 238; }
.idea.loss { --glow: var(--loss-rgb); --glow2: 191, 90, 242; }
.idea.hot { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 14px 46px -6px rgba(var(--glow), .55), var(--card-shadow); } }
@media (prefers-reduced-motion: reduce) { .idea.hot { animation: none; } }
.idea.wiped { --glow: var(--loss-rgb); --glow2: 120, 120, 128; filter: saturate(.85); }
.ih .dir { background: linear-gradient(135deg, var(--win), #22d3ee); color: #03140b; letter-spacing: .06em; box-shadow: 0 4px 14px -4px rgba(var(--win-rgb), .7); }
.idea.short .ih .dir { background: linear-gradient(135deg, var(--loss), #bf5af2); color: #fff; box-shadow: 0 4px 14px -4px rgba(var(--loss-rgb), .7); }
.ih .tkr.big { font-size: 16px; font-weight: 700; padding: 3px 9px; }
.ih .lev { background: rgba(var(--glow), .16); color: inherit; }
.perf b { font: 800 30px/1.05 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.perf.up b { color: var(--win-ink); text-shadow: 0 0 22px rgba(var(--win-rgb), .5); }
.perf.dn b { color: var(--loss-ink); text-shadow: 0 0 22px rgba(var(--loss-rgb), .45); }
.perf small { margin-top: 2px; font-size: 12px; font-weight: 600; }
.ichart .sw { stop-color: var(--win); }
.ichart .sl { stop-color: var(--loss); }
.ichart .ln { stroke-width: 2.6; }
.ichart .ln.up { filter: drop-shadow(0 0 5px rgba(var(--win-rgb), .75)); }
.ichart .ln.dn { filter: drop-shadow(0 0 5px rgba(var(--loss-rgb), .7)); }
.ichart .dot.up { filter: drop-shadow(0 0 6px rgba(var(--win-rgb), .95)); }
.ichart .dot.dn { filter: drop-shadow(0 0 6px rgba(var(--loss-rgb), .95)); }
.ichart .band { opacity: .55; }
.badge.open { background: rgba(var(--glow), .14); color: inherit; }
.idea.win .badge.open { color: var(--win-ink); }
.idea.hot .badge.open { background: linear-gradient(135deg, rgba(var(--win-rgb), .22), rgba(34, 211, 238, .22)); }
.chip.out.up, .chip.out.dn { box-shadow: 0 3px 10px -3px rgba(var(--glow), .8); }
/* confetti, when a winner closes */
.confetti { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: boom 1.3s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes boom { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.idea .perf { order: 9; flex-basis: 100%; margin: 2px 0 0; justify-items: start; }  /* the dollars on their own line, big, under the tags */
.idea .perf b { font-size: 36px; }
.idea .perf small { font-size: 12.5px; white-space: normal; }  /* a long line wraps on a phone */
/* plain words first: the sentence and how it's going, the dollars and what they're on, the stop-to-target bar, What's this? */
.idea .itop { display: flex; align-items: flex-start; gap: 10px; }
.idea .plain { margin: 0; flex: 1; min-width: 0; font-size: 15.5px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.idea .itop .badge { flex: none; margin-top: 1px; }
.idea .perf .pnum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.idea .perf .pword { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.meter { display: grid; grid-template-columns: 14px auto minmax(0, 1fr); gap: 0 10px; height: 132px; margin: 2px 0; }
.meter[hidden] { display: none; }
.meter.one { display: block; height: auto; }
.meter .vbar { position: relative; }
.meter .vtrack { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; background: rgba(127, 127, 127, .14); }
.meter .zone { position: absolute; left: 0; right: 0; }
.meter .zone.up { background: rgba(var(--win-rgb), .5); }
.meter .zone.dn { background: rgba(var(--loss-rgb), .55); }
.meter .in { position: absolute; left: -5px; right: -5px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--next); }
.meter .vbar b { position: absolute; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: 3px solid var(--panel); }
.meter .vbar b.up { box-shadow: 0 0 0 3px rgba(var(--win-rgb), .55), 0 0 12px rgba(var(--win-rgb), .8); }
.meter .vbar b.dn { box-shadow: 0 0 0 3px rgba(var(--loss-rgb), .5), 0 0 12px rgba(var(--loss-rgb), .7); }
.meter .vlab { position: relative; min-width: 104px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter .vlab span { position: absolute; left: 0; white-space: nowrap; transform: translateY(-50%); }
.meter .vlab span[style*="top: 0%"] { transform: none; }
.meter .vlab span[style*="top: 100%"] { transform: translateY(-100%); }
.meter .vlab .tg { color: var(--win-ink); }
.meter .vlab .sp { color: var(--loss-ink); }
.meter .vlab .gi { color: var(--next); }
.meter .vsum { display: grid; align-content: center; gap: 4px; padding-left: 4px; min-width: 0; }
.meter .vsum p { margin: 0; }
.meter .says { font-size: 14px; font-weight: 750; line-height: 1.25; }
.meter .says.up { color: var(--win-ink); }
.meter .says.dn { color: var(--loss-ink); }
.meter .nowp { font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter .rr { font-size: 12.5px; color: var(--ink-2); }
.meter .rr b.up { color: var(--win-ink); }
.meter .rr b.dn { color: var(--loss-ink); }
.meter .ratio { font-size: 12px; color: var(--ink-3); }
.meter .ml { grid-column: 1 / -1; align-self: center; font-size: 12.5px; color: var(--ink-3); }
.explain { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--fill); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.explain[hidden] { display: none; }
.explain p { margin: 0; }
.explain b { color: var(--ink); }
.ist .why { color: var(--next); font-weight: 600; }
.ichart .lvl { stroke-width: 1.3; stroke-dasharray: 4 4; opacity: .85; }
.ichart .ll { font: 700 10.5px var(--font); letter-spacing: .04em; opacity: 1; }

/* ---- 13-community.css ---- */
/* ---------- community: faces, who's here, the welcome card and its Wave, polls, streaks, a pop when you react ---------- */
.av { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.av.emo { font-size: 1.25em; text-shadow: none; }
.ic.emo { font-size: 15px; filter: saturate(1.1); }
.streak { font-size: 12px; font-weight: 700; color: var(--ink-2); }
/* who's here now, under the community's name */
.herenow { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 10px 4px 4px; border: 0; border-radius: 999px; background: rgba(var(--up-rgb), .12); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: default; }
.herenow::before { content: ""; order: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(var(--up-rgb), .25); }
.herenow .hn { order: 3; }
.herenow .stack { display: inline-flex; }
.herenow .stack .av { width: 22px; height: 22px; font-size: 11px; margin-right: -7px; box-shadow: 0 0 0 2px var(--panel); }
.herenow .stack .av:last-child { margin-right: 0; }
/* someone new: everyone can wave */
.joined { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 6px 8px; padding: 7px 8px 7px 10px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(var(--next-rgb), .1), rgba(191, 90, 242, .08) 55%, rgba(var(--up-rgb), .08)); box-shadow: inset 0 0 0 .5px rgba(var(--next-rgb), .25); }
.joined .av { grid-row: auto; width: 30px; height: 30px; font-size: 14px; }
.joined .jt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.joined .jt p { margin: 0; font-size: 14.5px; }
.joined .jt b { font-weight: 700; }
.joined .jt small { color: var(--ink-3); font-size: 12px; }
.btn.wave { padding: 6px 12px; font-size: 13.5px; background: var(--panel); box-shadow: 0 3px 10px -4px rgba(var(--next-rgb), .5), inset 0 0 0 1px rgba(var(--next-rgb), .35); font-weight: 700; transition: transform .12s; }
.btn.wave:hover { transform: rotate(-4deg) scale(1.04); }
.btn.wave.on { background: rgba(var(--next-rgb), .14); color: var(--next); box-shadow: none; }
/* a poll */
.poll { grid-column: 2; justify-self: start; width: min(100%, 440px); margin-top: 8px; display: grid; gap: 6px; }
.opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0; border-radius: 14px; background: var(--fill); color: inherit; text-align: left; font-weight: 600; transition: transform .1s; }
.opt:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgba(var(--next-rgb), .5); }
.opt:active { transform: scale(.98); }
.opt i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(var(--next-rgb), .28), rgba(191, 90, 242, .22)); border-radius: 14px; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.opt.mine i { background: linear-gradient(90deg, rgba(var(--up-rgb), .38), rgba(34, 211, 238, .28)); }
.opt .ot { position: relative; flex: 1; min-width: 0; }
.opt .op { position: relative; font: 700 13.5px var(--mono); }
.poll .pn { margin: 2px 4px 0; font-size: 12.5px; color: var(--ink-3); }
.pollf .tpls { display: flex; flex-wrap: wrap; gap: 6px; }
.pollf .tpls button { border: 0; padding: 7px 12px; border-radius: 999px; background: var(--fill); font-size: 13.5px; font-weight: 600; }
.pollf .tpls button:hover { background: rgba(var(--next-rgb), .14); }
.pollf .popts { display: grid; gap: 6px; }
.pollf > .linkbtn { justify-self: start; }
/* your profile */
.sheet .card .phead { display: flex; align-items: center; gap: 14px; text-align: left; }
.sheet .card .phead h3 { margin: 0; }
.sheet .card .lab { text-align: left; margin-top: 4px; }
.egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.egrid button { border: 0; height: 42px; border-radius: 12px; background: var(--fill); font-size: 22px; transition: transform .1s; }
.egrid button:hover { transform: scale(1.08); }
.egrid button.on { background: rgba(var(--next-rgb), .2); box-shadow: inset 0 0 0 2px var(--next); }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tchips span, .tchips button { border: 0; padding: 4px 11px; border-radius: 999px; background: rgba(var(--next-rgb), .12); color: var(--next); font-size: 13px; font-weight: 650; }
.tchips.pick { justify-content: flex-start; }
.tchips.pick button { background: var(--fill); color: var(--ink-2); padding: 7px 13px; }
.tchips.pick button.on { background: var(--next); color: #fff; }
.sheet .card .bio { margin: 0; color: var(--ink-2); font-size: 15px; }
.sheet .facts { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
/* a little pop when you react */
.rx.pop { animation: rxpop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rxpop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rx.pop, .opt i { animation: none; transition: none; } }

/* ---- 14-calls.css ---- */
/* ---------- Kalshi calls: the trade idea card's look, with the market's question where the chart would be ---------- */
.idea.call .ctitle { margin: 0; font-size: 16px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.idea.call .perf:not(.up):not(.dn) b { color: var(--ink); }
.idea.call .ist a.linkbtn { font-size: 13px; padding: 2px 0; }
/* the top of the idea form: a trade idea or a Kalshi call */
.ideaf .seg.kinds { justify-self: center; align-self: center; flex-wrap: nowrap; }
.ideaf .fld.plain .input { font-family: var(--font); }
.ideaf .seg.yn { display: flex; flex-wrap: nowrap; }
.ideaf .seg.yn button { flex: 1; }

/* ---- 15-alerts.css ---- */
/* Alerts (src/page/67-alerts.js): the banner at the top of the chat, the block on the welcome, and the card from Alerts in
   the side (the bell, what buzzes, and the iPhone's Home Screen steps) */
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 12px 0; padding: 10px 12px; border-radius: 14px;
  background: rgba(var(--next-rgb), .12); box-shadow: 0 0 0 1px rgba(var(--next-rgb), .28) inset; }
.nudge .ic { color: var(--next); display: grid; flex: none; }
.nudge .ic svg { width: 20px; height: 20px; }
.nudge .nt { flex: 1 1 220px; margin: 0; font-size: 14.5px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.nudge .nb { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nudge .linkbtn { font-size: 13px; color: var(--ink-3); }
.walert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; margin: 4px 0; padding: 12px; border-radius: 14px;
  background: rgba(var(--next-rgb), .12); }
.walert .ic { color: var(--next); display: grid; }
.walert .ic svg { width: 22px; height: 22px; }
.walert p { margin: 0; font-weight: 650; color: var(--ink); }
.walert p:only-child { grid-column: 1 / -1; }
.walert .btn { grid-column: 1 / -1; }
.alertf .whd { color: var(--next); }
.alertf .abody { display: grid; gap: 10px; }
.alertf .abody p { margin: 0; }
.alertf .lead { font-size: 17px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.alertf .note { font-size: 13px; color: var(--ink-3); }
.alertf .chk { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
.alertf .chk:last-of-type { border-bottom: 0; }
.alertf .row { flex-wrap: wrap; }