/* Storycoin: a trading terminal whose news is entertainment. Dark, dense, sans-serif only.
   Colour has three jobs: green/red = price direction, lime fill = a button that spends money, everything else is grey. */
:root {
  --bg: #060908; --bg2: #0a0f0d; --panel: #0d1311; --panel2: #121a17; --hover: #16201c;
  --line: #1b2622; --line2: #25332d;
  --text: #e8efea; --sub: #a6b4ad; --muted: #6c7c75; --faint: #3f4c47;
  --up: #2bd88f; --down: #ff5a6a;
  --lime: #d7edab; --lime-ink: #10261b; --lime-soft: rgba(215, 237, 171, .09); --lime-line: rgba(215, 237, 171, .28);
  --base: #0052ff;
  --r: 10px; --r2: 14px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bar: 52px; --strip: 32px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
i, em { font-style: normal; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
h1:focus { outline: none; }
h2 { font-size: 16px; line-height: 1.3; }
h3 { font-size: 14px; line-height: 1.3; }
p { margin: 0 0 12px; }
img { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--lime-ink); }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #1f2a26; border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--sub); outline-offset: 2px; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num, output { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }
.muted { color: var(--muted); } .sub { color: var(--sub); }
.note { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
sub { font-size: .72em; vertical-align: -.25em; line-height: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 239, 234, .45); } 70% { box-shadow: 0 0 0 7px rgba(232, 239, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 239, 234, 0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
.spinner { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; vertical-align: -2px; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text); animation: pulse 2s infinite; flex: none; }

/* ---------- Buttons and fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--text); border-radius: var(--r); background: var(--text); color: #0b0f0d; font: 600 14px/1.2 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .12s, background .12s, border-color .12s; -webkit-tap-highlight-color: transparent; }
.btn:hover:not(:disabled) { filter: brightness(.92); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn-lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.btn-lime:hover:not(:disabled) { filter: brightness(1.06); }
.btn-secondary { background: var(--panel2); border-color: var(--line2); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--hover); filter: none; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--sub); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); color: var(--text); filter: none; }
.btn-danger { background: transparent; border-color: transparent; color: #ff8d96; }
.btn-danger:hover:not(:disabled) { background: rgba(255, 90, 106, .1); filter: none; }
.btn-danger.is-confirm { background: var(--down); border-color: var(--down); color: #1a0306; }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn.is-busy { pointer-events: none; }
.btn .i { width: 15px; height: 15px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.actions .grow { flex: 1; }
.link { background: none; border: 0; padding: 2px; color: var(--sub); font: 500 13px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }
label, .label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
textarea, input[type="text"], input[type="search"] { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); color: var(--text); font: 14px/1.5 var(--font); outline: none; transition: border-color .15s; }
textarea { resize: vertical; min-height: 110px; }
textarea:hover, input[type="text"]:hover { border-color: var(--line2); }
textarea:focus, input[type="text"]:focus, input[type="search"]:focus { border-color: var(--sub); }
textarea:disabled, input:read-only { color: var(--sub); cursor: default; }
::placeholder { color: var(--faint); }
.field { position: relative; }
.count { position: absolute; right: 12px; bottom: 10px; font: 500 11px var(--mono); color: var(--muted); pointer-events: none; }
.field-error { color: #ff8d96; font-size: 13px; margin: 10px 0 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line2); color: var(--sub); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.coin-chip { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line2); font: 600 11.5px var(--mono); color: var(--sub); white-space: nowrap; }
.kind { display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line2); color: var(--sub); font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); }
.seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--sub); font: 500 12.5px var(--font); cursor: pointer; font-variant-numeric: tabular-nums; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.seg-sm button { height: 24px; padding: 0 8px; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; color: var(--sub); white-space: nowrap; cursor: pointer; text-decoration: none; }
.chip:hover { color: var(--text); border-color: var(--line2); }
.chip[aria-pressed="true"] { color: var(--text); background: var(--panel2); border-color: var(--line2); box-shadow: inset 0 -2px 0 var(--text); }
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; margin: 10px 0 4px; }
.preset { height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--sub); font: 550 12.5px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.preset:hover:not(:disabled) { color: var(--text); border-color: var(--line2); }
.preset[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.preset:disabled { opacity: .4; cursor: default; }
.rows { margin-top: 4px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.row:last-child, .row:has(+ .total-row) { border-bottom: 0; }
.row > span:first-child { color: var(--muted); }
.row strong { text-align: right; font-weight: 600; }
.total-row { margin-top: 4px; padding-top: 12px !important; border-top: 1px dashed var(--line2); border-bottom: 0 !important; }
.total-row strong { font-size: 18px; font-weight: 700; }
.usd { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.box, .sheet, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.sheet { padding: 20px; }
.box { padding: 16px; }
.card { padding: 14px; }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-h h2 { font-size: 14px; }
.card-h .note { margin-left: auto; }
.history-empty { padding: 18px; border-radius: var(--r2); border: 1px dashed var(--line2); color: var(--muted); font-size: 13px; text-align: center; }
.history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; }
.history-head h2 { font-size: 15px; }

/* ---------- App bar ---------- */
.appbar { position: sticky; top: 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: rgba(6, 9, 8, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; flex: none; text-decoration: none; }
.brand-logo { display: block; height: 24px; width: auto; }
.brand-mark { display: none; width: 30px; height: 30px; }
.demo-chip { padding: 3px 7px; border-radius: 6px; background: var(--lime-soft); border: 1px solid var(--lime-line); color: var(--lime); font: 700 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: help; }
.tabs { display: flex; gap: 2px; margin-left: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.tab { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 7px; color: var(--sub); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab[aria-current] { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.tab .i { width: 15px; height: 15px; }
.search { flex: 1; max-width: 260px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.search:focus-within { border-color: var(--line2); color: var(--sub); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; outline: 0; font-size: 13px; }
.search kbd { font: 11px var(--mono); border: 1px solid var(--line2); border-radius: 4px; padding: 0 5px; }
.spacer { flex: 1; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: 500 13px var(--font); white-space: nowrap; cursor: pointer; text-decoration: none; }
.pill:hover { border-color: var(--line2); }
.pill .lbl { color: var(--muted); font-size: 12px; }
.pill .i { width: 14px; height: 14px; }
.qb-pill { color: var(--lime); border-color: var(--lime-line); background: var(--lime-soft); }
.qb-pill .lbl { color: rgba(215, 237, 171, .7); }
.qb-pop { position: absolute; top: 40px; right: 0; z-index: 60; width: 260px; padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); color: var(--text); white-space: normal; cursor: default; text-align: left; }
.qb-pop h4 { font-size: 12px; font-weight: 500; color: var(--muted); }
.qb-pop .presets { grid-template-columns: repeat(4, 1fr); }
.qb-pop p { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.base-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--base); flex: none; box-shadow: inset 0 0 0 3.5px var(--base), inset 0 0 0 7px #fff; }
.net-pill.is-wrong { border-color: rgba(255, 90, 106, .4); color: #ff8d96; }
.wallet-av { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 40deg, #245c46, #d7edab, #7aa0c8, #245c46); flex: none; }
.appbar-connect { min-height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; }

/* Trending strip */
.strip { position: relative; height: var(--strip); overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg2); }
.strip-label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 14px; background: var(--bg2); box-shadow: 16px 0 14px -2px var(--bg2); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.strip-track { display: flex; width: max-content; height: 100%; padding-left: 132px; }
.strip-track.is-moving { animation: marquee var(--marquee, 60s) linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-item { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 16px; border-right: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.strip-item:hover { background: var(--hover); }
.strip-item img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; object-position: top; }
.strip-item .t { font: 600 12px var(--mono); }
.strip-item .rank { font: 11px var(--mono); color: var(--faint); }
.strip-empty { display: flex; align-items: center; padding-left: 132px; height: 100%; font-size: 12px; color: var(--muted); }

/* Create flow steps */
.flowbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg2); overflow-x: auto; }
.stepper { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.stepper li { display: flex; align-items: center; gap: 6px; }
.stepper li + li::before { content: ""; width: 16px; height: 1px; background: var(--line2); }
.stepper .step { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px 0 5px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.stepper .dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); font: 700 11px var(--font); }
.stepper .is-done .dot { background: var(--text); border-color: var(--text); color: var(--bg); }
.stepper .is-current .step { border-color: var(--sub); color: var(--text); }
.stepper .label { font-weight: 600; }
.flow-credits { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); white-space: nowrap; text-decoration: none; }
.flow-credits b { color: var(--text); font-weight: 600; }

/* Bottom nav (phones) */
.bnav { display: none; }

/* ---------- Layout ---------- */
.view { min-height: calc(100vh - var(--bar) - var(--strip) - 60px); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wrap-wide { padding: 16px; }
.page { padding-top: 22px; padding-bottom: 48px; }
.page-head { margin-bottom: 16px; }
.page-head h1 + .lede { margin-top: 6px; }
.lede { max-width: 640px; margin: 0; font-size: 14px; color: var(--sub); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.split > * { min-width: 0; }
.split-r { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 18px 16px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.site-footer a { color: var(--muted); }
body[data-route="watch"] .site-footer { display: none; }

/* ---------- Terminal ---------- */
.term-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.term-head h1 { display: flex; align-items: center; gap: 9px; font-size: 18px; }
.term-head .meta { font-size: 12.5px; color: var(--muted); }
.term-head .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pcol { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); }
.pcol.hero { border-color: var(--line2); background: linear-gradient(180deg, #101815, var(--panel) 120px); }
.pcol-h { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pcol-h h2 { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.pcol-h .rule { font: 11.5px var(--mono); color: var(--muted); }
.pcol-h .state { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pcol-h .st-pause { display: none; }
.pcol:hover .pcol-h .st-live { display: none; }
.pcol:hover .pcol-h .st-pause { display: inline; color: var(--text); }
.pcol-body { display: flex; flex-direction: column; }
.pcol-empty { padding: 26px 16px; text-align: center; font-size: 12.5px; color: var(--muted); }
.prow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 12px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; cursor: pointer; }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: var(--hover); }
.prow .art { position: relative; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--panel2); flex: none; }
.prow .art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.prow .art.ep { width: 32px; height: 54px; border-radius: 7px; border: 0; padding: 0; cursor: pointer; }
.prow .art .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .6)); color: #fff; }
.prow .art .play svg { width: 13px; height: 13px; fill: currentColor; }
.prow .badge { position: absolute; right: 2px; bottom: 2px; padding: 0 3px; border-radius: 4px; background: rgba(0, 0, 0, .72); font-size: 9.5px; font-weight: 700; line-height: 14px; font-variant-numeric: tabular-nums; }
.prow .l1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.prow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 620; }
.prow .tick { font: 11.5px var(--mono); color: var(--muted); }
.prow .age { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow .l2 { display: flex; gap: 10px; margin-top: 3px; overflow: hidden; font-size: 12px; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prow .l2 b { margin-right: 3px; font-weight: 500; color: var(--muted); }
.prow .l3 { display: flex; align-items: center; gap: 6px; margin-top: 4px; overflow: hidden; font-size: 11.5px; color: var(--sub); white-space: nowrap; }
.prow .l3 b { font-weight: 600; color: var(--text); }
.prow .l3 .ttl { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.prow .right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.chg { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 8px; background: var(--lime-soft); border: 1px solid var(--lime-line); color: var(--lime); font: 600 12.5px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; cursor: pointer; transition: background .12s, color .12s; }
.qb:hover:not(:disabled) { background: var(--lime); color: var(--lime-ink); }
.qb:disabled { opacity: .45; cursor: default; }
.qb .i { width: 13px; height: 13px; stroke-width: 2.2; }
.pseg { display: none; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.pseg button { height: 34px; border: 0; border-radius: 7px; background: none; color: var(--sub); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pseg button[aria-pressed="true"] { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.pseg .ct { margin-left: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.disc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 12px; }
.disc-head h2 { font-size: 18px; letter-spacing: -.02em; }
.disc-head .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.masonry { column-count: 6; column-gap: 10px; }
.tile { position: relative; display: block; margin-bottom: 10px; overflow: hidden; break-inside: avoid; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; cursor: pointer; }
.tile img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.tile.is-ep img { aspect-ratio: 9 / 16; object-fit: cover; }
.tile.is-char img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.tile:hover img { transform: scale(1.03); }
.tile .ov { position: absolute; inset: auto 0 0 0; padding: 34px 10px 9px; background: linear-gradient(transparent, rgba(4, 7, 6, .8) 38%, rgba(4, 7, 6, .95)); }
.tile .t1 { display: flex; align-items: baseline; gap: 6px; }
.tile .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 650; }
.tile .tk { font: 11px var(--mono); color: var(--sub); }
.tile .t2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tile .t3 { margin-top: 3px; overflow: hidden; font-size: 11px; color: var(--sub); white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tile .tag { position: absolute; top: 8px; left: 8px; border: 0; background: rgba(4, 7, 6, .72); backdrop-filter: blur(6px); color: var(--text); }
.tile .tag svg { width: 10px; height: 10px; fill: currentColor; }
.tile .qb { position: absolute; top: 8px; right: 8px; background: rgba(10, 16, 13, .8); backdrop-filter: blur(6px); }
.tile .qb:hover:not(:disabled) { background: var(--lime); }
.tile .lift { position: absolute; top: 36px; left: 8px; padding: 2px 6px; border-radius: 5px; background: rgba(4, 7, 6, .72); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.skel { background: linear-gradient(100deg, var(--panel) 30%, var(--panel2) 50%, var(--panel) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel-row { height: 72px; border-bottom: 1px solid var(--line); }
.skel-tile { height: 260px; margin-bottom: 10px; border-radius: 12px; break-inside: avoid; }

/* ---------- Coin page ---------- */
.coin-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "head side" "stats side" "chart side" "eps side" "flow side"; gap: 14px; align-items: start; }
.c-head { grid-area: head; display: flex; align-items: flex-start; gap: 14px; }
.c-head .av { width: 80px; height: 80px; flex: none; overflow: hidden; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel2); }
.c-head .av img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.c-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.c-head h1 .tk { font: 500 15px var(--mono); color: var(--sub); }
.c-head .tagline { margin-top: 4px; color: var(--sub); }
.c-head .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.c-head .meta .chip { height: 26px; font-size: 12px; }
.c-head .big { margin-left: auto; text-align: right; flex: none; }
.c-head .big .p { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.c-head .big .c { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-head .big small { display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-warn { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); color: var(--sub); font-size: 13px; }
.cstats { grid-area: stats; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); }
.cstat { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--line); }
.cstat:last-child { border-right: 0; }
.cstat .k { font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cstat .v { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-card { grid-area: chart; padding: 10px 12px 8px; }
.eps { grid-area: eps; }
.eps-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ep-card { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-align: left; cursor: pointer; }
.ep-card img, .ep-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ep-card .ov { position: absolute; inset: auto 0 0 0; padding: 28px 8px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); }
.ep-card .no { font: 10.5px var(--mono); color: var(--sub); }
.ep-card .tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.ep-card .dur { position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .65); font: 10.5px var(--mono); }
.ep-card:hover { border-color: var(--line2); }
.ep-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-style: dashed; border-color: var(--lime-line); background: var(--lime-soft); color: var(--lime); text-align: center; font: inherit; }
.ep-add .plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); }
.ep-add .plus .i { width: 18px; height: 18px; stroke-width: 2.4; }
.ep-add b { font-size: 13px; }
.ep-add span { font-size: 11.5px; line-height: 1.35; color: rgba(215, 237, 171, .75); }
.flow { grid-area: flow; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tape { max-height: 360px; overflow: auto; padding: 0; }
.tape table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tape th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tape td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tape .r { text-align: right; }
.tape tr.ev td { background: rgba(232, 239, 234, .035); color: var(--text); }
.tape tr.ev svg { width: 12px; height: 12px; fill: currentColor; vertical-align: -1px; margin-right: 5px; }
.tape .card-h { padding: 10px 12px 0; margin-bottom: 6px; }
.tape-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 12.5px; }
.embed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.post-embed { margin: 0; padding: 8px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); }
.post-embed iframe { display: block; width: 100%; height: 620px; border: 0; border-radius: 10px; background: var(--bg2); }
.post-embed.is-youtube iframe { height: auto; aspect-ratio: 9 / 16; }
.post-embed figcaption { padding: 8px 4px 0; }
.side { grid-area: side; position: sticky; top: calc(var(--bar) + var(--strip) + 14px); display: flex; flex-direction: column; gap: 12px; }
.trade { padding: 12px; }
.ts { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.ts button { height: 34px; border: 0; border-radius: 7px; background: none; color: var(--sub); font-weight: 600; cursor: pointer; }
.ts button[aria-pressed="true"] { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.ts button[value="buy"][aria-pressed="true"] { background: var(--lime); color: var(--lime-ink); box-shadow: none; }
.amt { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px; border-radius: 11px; background: var(--bg2); border: 1px solid var(--line2); }
.amt:focus-within { border-color: var(--sub); }
.amt input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: none !important; outline: 0; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.amt .unit { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sub); white-space: nowrap; }
.amt .unit img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: top; }
.bal { display: flex; justify-content: space-between; gap: 10px; margin: 6px 2px 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; font-size: 12.5px; color: var(--sub); }
.slip-warn { margin: 0 0 4px; font-size: 11.5px; color: var(--sub); }
.receipt { display: grid; gap: 5px; margin: 10px 0 12px; padding-top: 10px; border-top: 1px dashed var(--line2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.receipt div { display: flex; justify-content: space-between; gap: 10px; }
.receipt div span:first-child { color: var(--muted); }
.go { position: relative; width: 100%; min-height: 48px; overflow: hidden; font-size: 15px; }
.go .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(0, 0, 0, .2); }
.go.is-holding .fill { width: 100%; transition: width .8s linear; }
.go > span { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.fine { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.addep { border-color: var(--lime-line); }
.addep .t { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.addep .t .cost { margin-left: auto; color: var(--lime); font-variant-numeric: tabular-nums; }
.addep p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--sub); }
.about p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sub); }
.position .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mbar { display: none; }

/* ---------- Watch ---------- */
.watch { display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px; gap: 16px; height: calc(100vh - var(--bar) - var(--strip)); height: calc(100dvh - var(--bar) - var(--strip)); padding: 16px; }
.w-info, .w-next { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.w-info .lab { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.w-info h2 { font-size: 17px; }
.w-info p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--sub); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.kv > div { padding: 7px 9px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); }
.kv span { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.kv b { font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; }
.spark-mini { display: block; width: 100%; height: 70px; margin-top: 8px; }
.spark-mini path { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.w-char { display: flex; align-items: center; gap: 10px; }
.w-char img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; object-position: top; }
.w-char div { min-width: 0; font-size: 12.5px; color: var(--sub); line-height: 1.35; }
.w-char b { display: block; color: var(--text); font-size: 14px; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.keys kbd { padding: 0 5px; border-radius: 4px; border: 1px solid var(--line2); font: 10.5px var(--mono); color: var(--sub); }
.w-stage { position: relative; display: flex; justify-content: center; align-items: center; gap: 14px; min-height: 0; }
.wplayer { position: relative; flex: none; height: 100%; max-height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; border: 1px solid var(--line2); background: #000; }
.wplayer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.p-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 12px 56px 12px 12px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.p-coin { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(6, 9, 8, .66); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.p-coin img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top; }
.p-coin .t { font: 600 12px var(--mono); }
.p-since { padding: 4px 8px; border-radius: 999px; background: rgba(6, 9, 8, .66); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-sound { position: absolute; top: 12px; right: 12px; z-index: 4; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(6, 9, 8, .66); color: #fff; cursor: pointer; }
.p-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 60px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); pointer-events: none; }
.p-bottom .ep { font: 11.5px var(--mono); color: var(--sub); }
.p-bottom h3 { margin-top: 2px; font-size: 16px; font-weight: 700; }
.p-bottom p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #cfd8d3; }
.p-prog { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.p-prog i { display: block; width: 0; height: 100%; background: #fff; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 14px; align-self: flex-end; width: 84px; padding-bottom: 20px; }
.rail .rav { display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; border: 2px solid var(--text); }
.rail .rav img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rail .rpx { text-align: center; font-variant-numeric: tabular-nums; }
.rail .rpx .t { font: 11.5px var(--mono); color: var(--sub); }
.rail .rpx .p { font-size: 13px; font-weight: 650; }
.rail .rpx .c { font-size: 12.5px; font-weight: 650; }
.rail .rbuy { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 72px; padding: 10px 0 9px; border: 0; border-radius: 16px; background: var(--lime); color: var(--lime-ink); font: 700 14px var(--font); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); cursor: pointer; }
.rail .rbuy .i { width: 20px; height: 20px; stroke-width: 2.2; }
.rail .rbuy small { font-size: 11px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.rail .rbuy:disabled { opacity: .5; cursor: default; }
.rail .ract { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--sub); font-size: 11.5px; text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums; }
.rail .ract .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); }
.rail .ract .ic .i { width: 19px; height: 19px; }
.w-arrows { position: absolute; left: -56px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
.w-arrows button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); cursor: pointer; }
.w-arrows button:disabled { opacity: .3; cursor: default; }
.nx { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.nx:hover { background: var(--hover); }
.nx[aria-current] { border-color: var(--text); }
.nx img, .nx .ph { width: 54px; height: 96px; border-radius: 8px; object-fit: cover; background: var(--panel2); }
.nx .tk { font: 11px var(--mono); color: var(--sub); }
.nx .tt { margin: 2px 0 4px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.nx .mx { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.watch-empty { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.watch-empty .card { max-width: 420px; padding: 24px; }

/* ---------- Create flow ---------- */
.prompt { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line2); }
.prompt:focus-within { border-color: var(--sub); }
.prompt textarea { min-height: 96px; padding: 2px; border: 0; background: none; font-size: 16px; line-height: 1.5; resize: none; }
.prompt .pbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prompt .cost { margin-left: auto; font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.prompt .count { position: static; }
.how-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.how-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); font-size: 13px; }
.how-list li span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--panel2); border: 1px solid var(--line2); font-size: 11.5px; font-weight: 700; }
.how-list li b { display: block; font-weight: 600; }
.how-list li small { color: var(--muted); font-size: 12px; }
.how-list li em { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.art { position: relative; overflow: hidden; border-radius: 12px; background: var(--panel2); aspect-ratio: 2 / 3; isolation: isolate; }
img.portrait { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 25%; }
.art-badge { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(4, 7, 6, .72); backdrop-filter: blur(6px); font-size: 11.5px; font-weight: 600; }
.gen-status { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-bottom: 14px; font-size: 13px; color: var(--sub); }
.gen-status.is-error { color: #ff8d96; }
.gen-status .link { margin-left: 4px; }
.choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: block; margin: 0; padding: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; overflow: hidden; text-transform: none; letter-spacing: 0; color: var(--text); font-size: 13px; }
.choice:hover { border-color: var(--line2); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .art { border-radius: 0; }
.choice .k { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, .6); font: 600 11.5px var(--mono); }
.choice-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px 10px; font-size: 12.5px; }
.choice-meta b { font-weight: 600; white-space: nowrap; }
.choice-meta span { overflow: hidden; color: var(--muted); font: 500 11px var(--font); white-space: nowrap; text-overflow: ellipsis; }
.choice:has(input:checked) { border-color: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
.choice:has(input:checked) .k { background: var(--lime); color: var(--lime-ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--sub); outline-offset: 3px; }
.choice:has(input:disabled) { cursor: default; }
.skeleton .art { background: linear-gradient(100deg, var(--panel2) 30%, var(--hover) 50%, var(--panel2) 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton .choice-meta b, .skeleton .choice-meta span { color: transparent; background: var(--panel2); border-radius: 5px; }
.reveal .art { animation: develop .7s ease both; }
@keyframes develop { from { filter: blur(14px) saturate(.4); transform: scale(1.04); } to { filter: none; transform: none; } }
.portrait-frame .art { max-width: 380px; }
.profile-title { margin: 10px 0 8px; font-size: 26px; }
.backstory { min-height: 3em; margin-bottom: 14px; font-size: 14.5px; line-height: 1.6; color: var(--sub); }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--lime); animation: blink .8s steps(1) infinite; }
.traits { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.traits span { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line2); font-size: 12px; font-weight: 600; color: var(--sub); }
.row-input label { margin: 0; }
.row-input input { max-width: 220px; padding: 7px 11px; text-align: right; font-weight: 600; }
.ticker { position: relative; display: block; width: 100%; max-width: 220px; }
.ticker input { max-width: none !important; padding-left: 24px !important; font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.ticker::before { content: "$"; position: absolute; left: 11px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.lock-note { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg2); color: var(--sub); font-size: 13px; }
.deposit-box h3 { margin-bottom: 6px; font-size: 15px; }
.price-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.price-line .live { width: 7px; height: 7px; border-radius: 50%; background: var(--sub); flex: none; }
.price-line.is-stale .live { background: var(--down); }
input[type="range"] { --pct: 0%; width: 100%; height: 28px; margin: 8px 0 2px; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lime) var(--pct), var(--line2) var(--pct)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--line2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--lime); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 4px solid var(--bg); border-radius: 50%; background: var(--lime); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 4px solid var(--bg); border-radius: 50%; background: var(--lime); }
input[type="range"]:disabled { opacity: .5; cursor: default; }
.range-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wallet-connect { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.balance-note { display: block; margin: 3px 0 0; font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.balance-note.is-low { color: #ff8d96; }

/* Phone preview (the story page's video) */
.phone { position: relative; width: 250px; max-width: 100%; margin: 0 auto; padding: 6px; border-radius: 30px; background: #000; border: 1px solid var(--line2); }
.phone-screen { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 24px; background: var(--panel2); isolation: isolate; }
.phone-screen .kb { position: absolute; inset: 0; }
.phone-screen .phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.phone.is-idle .kb, .phone.is-gen .kb { filter: blur(10px) saturate(.4) brightness(.55); transform: scale(1.1); }
.phone-ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 14px 14px; background: linear-gradient(#0006, transparent 22%, transparent 58%, #000a); color: #fff; }
.phone-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; }
.phone-top .ep { padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.phone-caption { min-height: 40px; margin-bottom: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 10px #000a; transition: opacity .35s; }
.phone-handle { margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.ptrack { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.ptrack i { display: block; width: 100%; height: 100%; background: #fff; transform-origin: left; animation: track 9s linear infinite; }
@keyframes track { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.phone.is-paused .ptrack i { animation-play-state: paused; }
.phone-center { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; text-align: center; color: var(--text); }
.phone-center b { font-size: 16px; }
.phone-center small { font-size: 12px; color: var(--sub); }
.play { display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #0b0f0d; cursor: pointer; transition: opacity .2s; }
.phone.is-playing .play { opacity: 0; }
.phone.is-playing:hover .play, .phone.is-playing .play:focus-visible { opacity: .85; }
.phone-tools { position: absolute; top: 48px; right: 10px; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.phone-tool { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(6, 9, 8, .6); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
.phone-tool:hover { background: rgba(6, 9, 8, .85); }
.phone-tool[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.ring-progress { width: 80px; height: 80px; }
.ring-progress circle { fill: none; stroke-width: 5; }
.ring-progress .bg { stroke: rgba(255, 255, 255, .15); }
.ring-progress .fg { stroke: var(--lime); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .2s linear; }
.ring-pct { margin: -58px 0 28px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stage-list { display: grid; gap: 2px; margin: 16px 0 0; padding: 0; list-style: none; }
.stage-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--muted); }
.stage-list li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--line2); }
.stage-list li.is-active { color: var(--text); font-weight: 600; }
.stage-list li.is-active::before { border-color: var(--lime); border-right-color: transparent; animation: spin .9s linear infinite; }
.stage-list li.is-done { color: var(--sub); }
.stage-list li.is-done::before { content: "✓"; display: grid; place-items: center; background: var(--text); border-color: var(--text); color: var(--bg); font-size: 9px; font-weight: 700; }
.stage-box { padding: 16px; border-radius: var(--r2); background: var(--bg2); border: 1px solid var(--line); }

/* Scripts and storyboard */
.script-panel { margin-top: 18px; scroll-margin-top: 110px; }
.script-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.script-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.script-choice:hover:not(:disabled) { border-color: var(--sub); }
.script-choice:disabled { opacity: .5; cursor: not-allowed; }
.script-choice b { font-size: 15px; font-weight: 650; }
.script-choice small { font-size: 12.5px; line-height: 1.5; color: var(--sub); }
.script-choice .glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); }
.script-choice.is-primary { border-color: var(--lime-line); background: var(--lime-soft); }
.script-choice.is-primary .glyph { color: var(--lime); }
.script-card { overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel2); }
.script-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.script-head h3 { font-size: 16px; }
.script-meta { font-size: 11.5px; color: var(--muted); }
.script-body { max-height: 420px; overflow: auto; padding: 12px 16px 16px; background: var(--bg2); font-size: 13.5px; line-height: 1.6; }
.script-body .sblock { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.script-body .sblock:last-child { border-bottom: 0; }
.script-body h4 { margin: 0 0 3px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.script-body p { margin: 0 0 3px; }
.script-body b { font-weight: 600; color: var(--text); }
.script-body .is-hook { margin: 4px 0; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--lime-soft); box-shadow: inset 3px 0 0 var(--lime); }
.script-wait { display: grid; justify-items: start; gap: 8px; padding: 18px; border-radius: var(--r2); border: 1px dashed var(--line2); background: var(--bg2); color: var(--sub); font-size: 13.5px; }
.script-wait b { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.script-form textarea { min-height: 280px; font-size: 14px; }
.script-form .field + .field { margin-top: 12px; }
.board-panel { padding: 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--bg2); }
.board-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 14px; margin-bottom: 12px; }
.board-head h3 { font-size: 16px; overflow-wrap: anywhere; }
.board-tools { display: flex; align-items: center; gap: 10px; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.board-scene { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.board-frame { position: relative; display: block; margin: 0; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-transform: none; letter-spacing: 0; }
.board-frame img, .board-blank { display: block; width: 100%; height: 100%; object-fit: cover; }
.board-blank { background: repeating-linear-gradient(135deg, var(--panel) 0 10px, var(--panel2) 10px 20px); }
.board-check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(6, 9, 8, .75); }
.board-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--lime); cursor: pointer; }
.board-overlay { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(6, 9, 8, .85); color: var(--text); font-size: 12px; font-weight: 600; }
.board-overlay.is-error { color: #ff8d96; font-weight: 500; overflow-wrap: anywhere; }
.board-scene.is-busy img { filter: saturate(.4) opacity(.6); }
.board-scene.is-selected .board-frame { box-shadow: 0 0 0 2px var(--lime); }
.board-scene.is-failed .board-frame { border-color: var(--down); }
.board-text { font-size: 12.5px; line-height: 1.45; }
.board-text b { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.board-text p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 0; color: var(--sub); }
.board-text .board-line { -webkit-line-clamp: 2; color: var(--muted); }
.board-hint { margin: 12px 0 0; }
.board-fix { margin-top: 14px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); }
.board-fix h4 { margin: 0 0 10px; font-size: 14px; }
.board-fix .field + .field { margin-top: 10px; }
.board-fix label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--sub); }
.board-fix textarea { min-height: 60px; font-size: 13.5px; }
.board-fix .actions { margin-top: 12px; }
.selected-script { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg2); font-size: 13px; }
.selected-script .tick { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; }
.selected-script b { display: block; font-size: 14px; }
.selected-script span { color: var(--muted); }
.credit-line { margin: 10px 0 0; }
.credit-line.is-low { color: #ff8d96; }
.history { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.history-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); }
.history-item.is-viewing { border-color: var(--line2); }
.history-item.is-selected { border-color: var(--sub); }
.history-item h3 { font-size: 14.5px; overflow-wrap: anywhere; }
.history-item p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 12.5px; color: var(--muted); }
.item-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }

/* Posting */
.caption-field textarea { min-height: 130px; }
.attach { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r); border: 1px dashed var(--line2); background: var(--bg2); font-size: 13px; }
.attach small { display: block; color: var(--muted); font-size: 12px; }
.coin-dot { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line2); font: 600 12px var(--font); }
.post-panel { margin-top: 14px; padding: 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); }
.post-panel header { display: flex; align-items: center; gap: 10px; }
.post-panel header b { flex: 1; font-size: 14px; }
.post-panel .glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line2); }
.post-panel label { margin-top: 14px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-buttons .btn { flex: 1 1 180px; }
.share-way { margin: 14px 0; padding: 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--bg2); }
.share-way > p { margin: 4px 0 10px; font-size: 13px; }
.share-qr { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto 10px; padding: 8px; border-radius: 12px; background: #fff; }
.share-qr svg { display: block; width: 100%; height: 100%; }
.share-sheet { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 28px; align-items: start; }
.share-video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; object-fit: cover; }
.composer-frame { display: block; width: 100%; height: 720px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r2); background: #fff; }
.post-url { display: flex; gap: 8px; }
.post-url input { flex: 1; min-width: 0; padding: 8px 11px !important; font-size: 13.5px; }
.post-saved { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 12px; font-size: 13px; }
.post-saved .link:first-of-type { flex: 1; min-width: 0; overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.post-saved .tick { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 700; }
.toggles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.toggle { display: inline-flex; align-items: center; gap: 12px; min-width: 210px; padding: 12px 14px 12px 12px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font: 600 14px var(--font); text-align: left; cursor: pointer; }
.toggle .glyph { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.toggle small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.toggle .tick { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; border: 1.5px solid var(--line2); color: transparent; font-size: 11px; }
.toggle[aria-pressed="true"] { border-color: var(--sub); }
.toggle[aria-pressed="true"] .tick { background: var(--text); border-color: var(--text); color: var(--bg); }
.embed { margin-top: 20px; overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line); background: var(--bg2); }
.embed-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.embed-bar .dots { display: flex; gap: 6px; }
.embed-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); }
.embed-bar .lock { margin-left: auto; }
.embed-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding: 20px; }
.embed-body > * { min-width: 0; }
.modes { display: grid; gap: 8px; margin-bottom: 16px; }
.mode { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--text); font-size: 13px; }
.mode input { margin: 3px 0 0; accent-color: var(--lime); }
.mode b { display: block; font-size: 13.5px; }
.mode small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.mode:has(input:checked) { border-color: var(--sub); }
.steps-ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps-ol li { display: flex; gap: 10px; font-size: 13px; color: var(--sub); }
.steps-ol li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line2); color: var(--text); font: 600 11px var(--font); }
.profile-card { padding: 16px; border-radius: var(--r2); background: var(--panel); border: 1px solid var(--line); }
.profile-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avatar { position: relative; width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 50%; border: 2px solid var(--line2); background: var(--panel2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.profile-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.handle-field { position: relative; }
.handle-field::before { content: "@"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.handle-field input { padding: 7px 11px 7px 27px; font-weight: 600; }
.profile-card textarea { min-height: 70px; margin-top: 10px; font-size: 13.5px; }

/* Done */
.done-hero { padding: 28px 24px 22px; text-align: center; }
.success { position: relative; display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 16px; }
.success .avatar { width: 84px; height: 84px; }
.success .ok { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: var(--bg); border: 3px solid var(--panel); font-size: 12px; font-weight: 700; }
.done-hero .lede { margin: 8px auto 0; }
.done-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; text-align: left; }
.done-stats .stat { padding: 14px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--bg2); }
.done-stats .stat span { font-size: 11.5px; color: var(--muted); }
.done-stats .stat strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.earn { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.earn > div { padding: 22px 24px; }
.earn > div + div { border-left: 1px solid var(--line); background: var(--bg2); }
.earn h3 { margin-bottom: 12px; font-size: 15px; }
.flowchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.flowchips span { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2); font-size: 12.5px; font-weight: 600; }
.flowchips i { color: var(--muted); }
.holding { margin: 4px 0 10px; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Modal, player, toast */
dialog.modal { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line2); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: 0 40px 100px -30px #000; }
dialog.modal::backdrop { background: rgba(3, 5, 4, .7); backdrop-filter: blur(4px); }
dialog.modal[open] { animation: fade-up .2s ease; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.modal-head .brand-mark { display: block; width: 30px; height: 30px; }
.modal-head small { display: block; color: var(--muted); font-size: 12px; }
.modal-head b { font-size: 14px; }
.modal-body { padding: 14px 20px 20px; }
.modal-body h2 { margin: 2px 0 8px; font-size: 20px; }
.wallet-opts { display: grid; gap: 8px; margin-top: 14px; }
.wallet-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: 600 14px var(--font); text-align: left; cursor: pointer; }
.wallet-opt:hover { border-color: var(--sub); }
.wallet-opt .glyph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg2); }
.wallet-opt .glyph img { width: 24px; height: 24px; border-radius: 6px; }
.wallet-opt small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.wallet-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.wallet-warn { color: #ff8d96; }
.progress-steps { margin: 14px 0 0; }
dialog.player { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid var(--line2); border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 40px 100px -30px #000; }
dialog.player::backdrop { background: rgba(3, 5, 4, .85); backdrop-filter: blur(4px); }
.player-inner { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 20px; padding: 16px; }
.player-inner video { display: block; height: min(76vh, 680px); max-width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; }
.player-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 6px 6px 0; }
.player-side p { margin: 0; font-size: 13.5px; color: var(--sub); }
.player-side .actions { margin-top: auto; padding-top: 14px; }
dialog.player:has(.is-bare) { width: auto; overflow: hidden; }
.player-inner.is-bare { grid-template-columns: auto; justify-items: center; padding: 10px; }
.player-inner.is-bare video { height: min(calc(100vh - 56px), 960px); }
.player-close { position: absolute; right: 10px; top: 8px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.player-close:hover { background: rgba(255, 255, 255, .16); }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 95; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-size: 13.5px; font-weight: 500; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
storycoin-chart { display: block; }

/* ---------- Dashboard ---------- */
.dash-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 26px; }
.credit-top small { display: block; font-size: 12.5px; color: var(--muted); }
.credit-balance { display: block; font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.credit-add { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line2); }
.credit-add .presets { margin: 0 0 10px; }
.credit-add .btn { margin-top: 10px; }
.trade-field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--bg2); }
.trade-field:focus-within { border-color: var(--sub); }
.trade-field input { flex: 1; min-width: 0; padding: 11px 0; border: 0 !important; background: none !important; font-size: 18px; font-weight: 600; outline: none; }
.trade-field span { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.trade-field .unit-pre { font-size: 16px; color: var(--text); }
.credit-history { margin-top: 14px; font-size: 13px; }
.credit-history summary { cursor: pointer; font-weight: 600; color: var(--sub); }
.credit-history ul { margin: 8px 0 0; padding: 0; list-style: none; }
.credit-history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.credit-history li small { display: block; font-size: 11.5px; color: var(--muted); }
.credit-history b { font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-row > div { min-width: 0; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); }
.stat-row small { display: block; font-size: 11px; color: var(--muted); }
.stat-row b { display: block; margin-top: 3px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dash-section { margin-bottom: 26px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.video-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); }
.video-thumb { position: relative; display: grid; place-items: center; width: 100%; max-height: 300px; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; border: 0; background: var(--panel2); cursor: pointer; }
.video-card.is-making .video-thumb { cursor: default; }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .88); }
.video-play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 13px solid #0b0f0d; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.video-card .body { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px 12px; }
.video-card h3 { font-size: 14px; overflow-wrap: anywhere; }
.video-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.video-posted { font-size: 12px; color: var(--muted); }
.video-posted.is-posted { color: var(--sub); font-weight: 600; }
.dash-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 10px; }
.dash-coin { display: flex; gap: 14px; min-width: 0; padding: 12px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); }
.dash-coin .thumb { width: 90px; flex: none; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--panel2); }
.dash-coin .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dash-coin .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-coin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-coin-head h3 { font-size: 15px; overflow-wrap: anywhere; }
.dash-coin-head a { text-decoration: none; }
.dash-coin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dash-coin-stats small { display: block; font-size: 11px; color: var(--muted); }
.dash-coin-stats b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.char-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--r2); border: 1px solid var(--line); background: var(--panel); }
.char-card .thumb { aspect-ratio: 4 / 5; background: var(--panel2); }
.char-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.char-card .body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.char-card h3 { font-size: 14.5px; overflow-wrap: anywhere; }
.char-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .masonry { column-count: 5; }
  .coin-page { grid-template-columns: minmax(0, 1fr) 330px; }
  .cstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cstat:nth-child(4n) { border-right: 0; }
  .cstat:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .eps-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .watch { grid-template-columns: 250px minmax(0, 1fr) 250px; }
  .search { display: none; }
}
@media (max-width: 1060px) {
  .pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse .pcol:nth-child(3) { grid-column: 1 / -1; }
  .masonry { column-count: 4; }
  .watch { grid-template-columns: minmax(0, 1fr) 250px; }
  .w-info { display: none; }
  .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab .lbl-long { display: none; }
}
@media (max-width: 900px) {
  .coin-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stats" "chart" "side" "eps" "flow"; }
  .side { position: static; }
  .eps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split, .split-r { grid-template-columns: 1fr; gap: 18px; }
  .embed-body { grid-template-columns: 1fr; }
  .dash-top { grid-template-columns: 1fr; }
  .dash-coins { grid-template-columns: 1fr; }
  .earn { grid-template-columns: 1fr; }
  .earn > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  :root { --strip: 30px; }
  .appbar { gap: 8px; padding: 0 12px; }
  .brand-logo { display: none; }
  .brand-mark { display: block; }
  .tabs, .search, .net-pill .lbl, .wallet-pill .addr, .qb-pill .lbl, .qb-pill .eth { display: none; }
  .pill { height: 32px; padding: 0 9px; }
  .bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(6, 9, 8, .96); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .bnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500; text-decoration: none; }
  .bnav a .i { width: 21px; height: 21px; }
  .bnav a[aria-current] { color: var(--text); }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .wrap { padding: 0 12px; }
  .wrap-wide { padding: 12px; }
  .page { padding-top: 16px; }
  h1 { font-size: 21px; }
  .term-head .meta, .term-head .chips { display: none; }
  .pulse { display: block; }
  .pulse .pcol { display: none; }
  .pulse .pcol.is-shown { display: flex; }
  .pseg { display: grid; }
  .prow .l2, .prow .l3 { flex-wrap: wrap; row-gap: 2px; column-gap: 8px; }
  .masonry { column-count: 2; column-gap: 8px; }
  .tile { margin-bottom: 8px; }
  .disc-head .chips { margin-left: 0; }
  .c-head { flex-wrap: wrap; }
  .c-head .av { width: 60px; height: 60px; }
  .c-head h1 { font-size: 20px; }
  .c-head .big { width: 100%; margin-left: 0; text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .c-head .big .p { font-size: 22px; }
  .cstat { padding: 8px; }
  .cstat .k { font-size: 10px; }
  .cstat .v { font-size: 13.5px; }
  .eps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mbar { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(6, 9, 8, .96); border-top: 1px solid var(--line); }
  .mbar .px { margin-right: auto; font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .mbar .px b { display: block; font-size: 14px; }
  body[data-route="token"] { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .watch { display: block; height: auto; padding: 0; }
  .w-next, .w-arrows, .keys { display: none; }
  .w-stage { display: block; height: calc(100vh - var(--bar) - 60px); height: calc(100dvh - var(--bar) - 60px - env(safe-area-inset-bottom)); }
  .wplayer { width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
  .w-stage > .rail { position: absolute; right: 6px; bottom: 110px; z-index: 5; width: 76px; gap: 12px; padding: 0; }
  .rail .ract .ic { background: rgba(6, 9, 8, .55); border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
  .rail .rpx { padding: 4px 6px; border-radius: 10px; background: rgba(6, 9, 8, .55); backdrop-filter: blur(6px); }
  .p-bottom { padding-right: 92px; }
  body[data-route="watch"] .strip { display: none; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .script-choices { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .history-list { grid-template-columns: 1fr; }
  .char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-coin { flex-direction: column; }
  .dash-coin .thumb { width: 100%; aspect-ratio: 16 / 9; }
  .dash-coin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .done-stats { grid-template-columns: 1fr; }
  .share-sheet { grid-template-columns: 1fr; gap: 14px; }
  .share-video { width: auto; height: 42vh; margin: 0 auto; }
  .player-inner { grid-template-columns: 1fr; padding: 12px; }
  .player-inner video { width: 100%; height: auto; max-height: 62vh; margin: 0 auto; }
  .player-side { padding: 0; }
  .player-inner.is-bare video { width: 100%; height: auto; max-height: calc(100vh - 56px); }
  .toggle { flex: 1 1 100%; min-width: 0; }
  .actions .btn { flex: 1 1 auto; }
  .row-input { flex-wrap: wrap; }
  .row-input > span:last-child, .row-input .ticker, .row-input input { flex: 1 1 100%; max-width: none; }
  .sheet { padding: 16px; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body[data-route="token"] .toast { bottom: calc(136px + env(safe-area-inset-bottom)); }
  .flowbar { padding: 8px 12px; }
  .stepper .label { display: none; }
  .stepper .is-current .label { display: inline; }
  .flow-credits span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
@media print {
  .appbar, .strip, .bnav, .toast, .site-footer, .mbar { display: none; }
}
.qb-wrap { position: relative; display: inline-flex; }
.kicker { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rise { animation: fade-up .35s ease both; animation-delay: calc(var(--d, 0) * 40ms); }
.glyph { display: inline-block; width: 10px; height: 10px; flex: none; fill: currentColor; vertical-align: -1px; }
.pcol-h h2 .glyph { width: 11px; height: 11px; }
.prow .art .play .glyph { width: 13px; height: 13px; }
.tape tr.ev .glyph { margin-right: 6px; }
.prow a.name { color: inherit; text-decoration: none; }
.prow a.name:hover, .tile a.nm:hover { text-decoration: underline; }
.tile a.nm { color: inherit; text-decoration: none; }
.tile video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; pointer-events: none; }
.tile .tag .glyph { width: 9px; height: 9px; }
.w-arrows { position: static; transform: none; align-self: center; }
.p-top { overflow: hidden; }
.p-coin, .p-since { flex: none; }
.p-since .short { display: none; }
@media (max-width: 760px) {
  .p-coin .px { display: none; }
  .p-since .long { display: none; }
  .p-since .short { display: inline; }
  .rail .rpx { max-width: 76px; overflow: hidden; }
  .rail .rpx .p { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.stepper .label { display: inline; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
.row-input label { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ticker input { text-align: left !important; }
@media (max-width: 760px) { .cstat .v .muted { display: none; } }