/* 红烧爆头社区 - the live show's own look (web/js/lib/videocard.js THEME, hostchar.js STYLE): a deep navy stage, 红烧's
   gold-to-orange, 爆头's ice-to-blue, dark text on the bright pills, the show's fonts. Dark only, like the show. */
:root {
  --bg0: #0b0f1c; --bg1: #171d33; --panel: rgba(255, 255, 255, 0.045); --panel2: rgba(255, 255, 255, 0.08); --line: #2f3752;
  --text: #eef1f8; --muted: #9aa4ba; --faint: #6f7890; --ink: #10131c;
  --gold: #f0b90b; --hot1: #ffd84d; --hot2: #ffa23d; --hot3: #ff6a2b; --cool: #4fc3f7; --cool1: #a6ecff; --cool2: #5cb6ff;
  --up: #2ecc87; --down: #f65460; --warn: #f5a623;
  --radius: 14px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg0); }
body { margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(47, 123, 255, 0.12), transparent 60%),
              radial-gradient(900px 500px at -10% 0%, rgba(255, 162, 61, 0.10), transparent 55%),
              linear-gradient(160deg, var(--bg0), var(--bg1)) fixed; }
a { color: var(--cool); text-decoration: none; }
a:hover { color: var(--cool1); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, canvas { display: block; }

/* the top bar: the two hosts as the mark, the name in gold */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 14px; padding: 8px 16px;
  background: rgba(11, 15, 28, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--hot1), var(--hot2) 35%, transparent 50%, var(--cool2) 65%, var(--cool1)); opacity: 0.7; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); white-space: nowrap; letter-spacing: 0.5px; }
.brand:hover { color: var(--text); }
.brand canvas { width: 54px; height: 32px; }
.brand b { background: linear-gradient(90deg, var(--hot1), var(--hot2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top nav a { padding: 6px 12px; border-radius: 999px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.top nav a.on { color: var(--ink); background: linear-gradient(90deg, var(--hot1), var(--hot2)); }
.top nav a:not(.on):hover { color: var(--text); background: var(--panel2); }
.top .right { display: flex; align-items: center; gap: 8px; }
#who { display: flex; align-items: center; gap: 8px; }
.chipbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--muted); }
.chipbtn.on { border-color: var(--hot1); color: var(--hot1); background: rgba(255, 216, 77, 0.08); }
select.chipbtn { width: auto; max-width: 140px; padding: 4px 8px; cursor: pointer; }
select.chipbtn option { background: var(--bg1); color: var(--text); }
.me-pill { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); font-size: 13px; }
@media (max-width: 560px) { .brand span { display: none; } select.chipbtn { max-width: 96px; }
  /* every tab whole at 375 px ("小游戏" was cut to "小游") */
  .top { gap: 8px; padding: 8px 10px; } .top nav a { padding: 6px 9px; } }
/* a phone: the places at the bottom under the thumb (2026-10-05), the top bar keeps the mark, the language and the account */
.bnav { display: none; }
@media (max-width: 560px) {
  .top nav { display: none; } .top .right { margin-inline-start: auto; }
  .bnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: rgba(11, 15, 28, 0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .bnav a { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; }
  .bnav a .bi { font-size: 20px; line-height: 1; filter: grayscale(0.6); }
  .bnav a.on { color: var(--hot1); } .bnav a.on .bi { filter: none; }
  .bnav a .count { position: absolute; top: 4px; inset-inline-start: calc(50% + 6px); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

.notice { max-width: 980px; margin: 12px auto 0; padding: 10px 14px; border-radius: var(--radius); white-space: pre-wrap; font-size: 14px;
  background: linear-gradient(90deg, rgba(255, 216, 77, 0.14), rgba(255, 162, 61, 0.06)); border: 1px solid rgba(255, 216, 77, 0.35); }
/* 通知 (2026-10-05): 🔔 in the top bar, the host's new post as a banner on every page, the list */
.bell { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); text-decoration: none; font-size: 16px; }
.bell.on { border-color: var(--hot1); }
.bell .count { position: absolute; top: -6px; inset-inline-end: -8px; margin: 0; }
.hpbanner { max-width: 980px; margin: 12px auto 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(246, 70, 93, 0.16), rgba(255, 162, 61, 0.08)); border: 1px solid rgba(246, 70, 93, 0.45); }
.hpbanner img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.hpbanner .hptext { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hpbanner .btn { flex: none; }
.hpicon { font-size: 22px; flex: none; }
@media (max-width: 980px) { .notice, .hpbanner { margin-inline: 12px; } }
/* 战报 (2026-10-07, web/feats.js): the games' moments and leaders, a line at a time, each line into its game */
.ticker { max-width: 980px; margin: 10px auto 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; min-height: 44px;
  border-radius: var(--radius); font-size: 14px; background: linear-gradient(90deg, rgba(92, 182, 255, 0.14), rgba(166, 236, 255, 0.04));
  border: 1px solid rgba(92, 182, 255, 0.4); }
.ticker[hidden] { display: none; }
.tk-label { flex: none; font-weight: 700; font-size: 13px; color: var(--cool1); white-space: nowrap; }
.tk-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease; }
.ticker.tk-out .tk-item { opacity: 0; transform: translateY(-6px); }
.tk-emoji { flex: none; font-size: 17px; display: inline-block; }
.tk-item.fresh .tk-emoji { animation: tkpop 0.9s ease 2; }
@keyframes tkpop { 50% { transform: scale(1.35); } }
.tk-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.tk-text .tkname { color: var(--hot1); }
.tk-text .num { color: var(--cool1); }
.tk-ago { flex: none; color: var(--faint); font-size: 12px; white-space: nowrap; }
.tk-go { flex: none; color: var(--ink); background: linear-gradient(90deg, var(--hot1), var(--hot2)); border-radius: 999px; padding: 4px 10px;
  font-size: 12px; font-weight: 700; white-space: nowrap; }
.tk-item:hover .tk-go { filter: brightness(1.08); }
.tk-n { flex: none; color: var(--faint); font-size: 11px; }
.tk-x { flex: none; font-size: 18px; padding: 0 4px; }
@media (max-width: 980px) { .ticker { margin-inline: 12px; } }
@media (max-width: 560px) { .tk-label, .tk-ago, .tk-n { display: none; } .ticker { font-size: 13px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .tk-item { transition: none; } .ticker.tk-out .tk-item { transform: none; } .tk-item.fresh .tk-emoji { animation: none; }
}
.pushcard { border-color: rgba(255, 216, 77, 0.4); }
.notices { gap: 0; padding: 4px 12px; }
.notice-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.notice-row:first-child { border-top: none; }
.notice-row.unread { font-weight: 600; }
.notice-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hot1); margin-inline-end: 6px; vertical-align: middle; }
.notice-row .nicon { width: 32px; text-align: center; font-size: 20px; flex: none; }
.notice-row .ntext { font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice-row .nthumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
/* the lobby's title: one line over the games (2026-10-06: the games first) */
.lobbyhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lobbyhead h2 { margin: 0; }
/* 翻译: someone's writing in the reader's language, marked, the original one tap away */
.trmark { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 400; }
.trmark .trflip { font-size: 12px; padding: 0; }
.trbody { white-space: pre-wrap; }
/* 邀请 */
input.invlink { font-family: Consolas, monospace; font-size: 13px; }
.person .rank { width: 22px; text-align: center; color: var(--hot1); }
label.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
label.check input { width: auto; margin-top: 3px; flex: none; }
main { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
main.single { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
@media (max-width: 820px) { main { grid-template-columns: minmax(0, 1fr); } .side { order: 2; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stack > * + * { margin-top: 12px; }
h1 { font-size: 22px; margin: 0 0 6px; } h2 { font-size: 17px; margin: 0 0 10px; } h3 { font-size: 15px; margin: 0 0 8px; }
.muted { color: var(--muted); } .faint { color: var(--faint); font-size: 13px; } .small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
/* the show's kicker: small, gold, spaced */
.kicker { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--down); margin-inline-end: 6px;
  box-shadow: 0 0 0 0 rgba(246, 84, 96, 0.6); animation: pulse 1.6s infinite; vertical-align: 1px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(246, 84, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 84, 96, 0); } }

/* buttons: 红烧's pill for the main action, 爆头's for the second, quiet ones elsewhere */
.btn { border: 1px solid var(--line); background: var(--panel2); padding: 7px 14px; border-radius: 10px; color: var(--text); font-weight: 600; }
.btn:hover { border-color: var(--faint); }
.btn.hot { background: linear-gradient(90deg, var(--hot1), var(--hot2)); border-color: transparent; color: var(--ink); }
.btn.hot:hover { filter: brightness(1.06); }
.btn.cool { background: linear-gradient(90deg, var(--cool1), var(--cool2)); border-color: transparent; color: var(--ink); }
.btn.up { background: var(--up); border-color: var(--up); color: #fff; font-weight: 800; }
.btn.down { background: var(--down); border-color: var(--down); color: #fff; font-weight: 800; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; }
.link { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; }
.link:hover { color: var(--text); }
input[type=text], input[type=password], textarea, select { width: 100%; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; outline: none; color: var(--text); }
input:focus, textarea:focus, select:focus { border-color: var(--hot2); box-shadow: 0 0 0 3px rgba(255, 162, 61, 0.15); }
textarea { resize: vertical; min-height: 84px; }
label.field { display: block; } label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.err { color: var(--down); font-size: 14px; margin-top: 6px; } .ok { color: var(--up); font-size: 14px; margin-top: 6px; }
.warnbox { border: 1px solid rgba(245, 166, 35, 0.45); background: rgba(245, 166, 35, 0.08); color: #ffd79a; border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.okbox { border: 1px solid rgba(46, 204, 135, 0.4); background: rgba(46, 204, 135, 0.08); color: #9ee6c4; border-radius: 10px; padding: 8px 12px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.tabs button.on { background: linear-gradient(90deg, var(--cool1), var(--cool2)); color: var(--ink); }
.pk-tabs a { color: var(--muted); padding: 7px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); background: var(--panel); }
.pk-tabs a.on { background: linear-gradient(90deg, var(--cool1), var(--cool2)); color: var(--ink); border-color: transparent; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 2px 10px; font-size: 13px; color: var(--muted); }
.chip.on { border-color: var(--hot1); color: var(--hot1); }

/* the hero: the show's two hosts talking in turn on its stage */
.hero { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: center; overflow: hidden;
  background: linear-gradient(135deg, rgba(23, 29, 51, 0.95), rgba(11, 15, 28, 0.95)); }
.hero canvas { width: 190px; height: 120px; border-radius: 10px; }
.hero h1 { font-size: 20px; margin: 4px 0 2px; }
@media (max-width: 520px) { .hero { grid-template-columns: 1fr; } .hero canvas { width: 100%; height: auto; aspect-ratio: 19 / 12; } }

/* avatars: an emoji on a ring in 红烧's or 爆头's tones, like the stickers */
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.02) 60%), var(--avbg, #1d2440);
  border: 2px solid transparent; background-clip: padding-box; position: relative; color: var(--text); font-weight: 800; }
.av::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: var(--ring, linear-gradient(135deg, var(--hot1), var(--hot3)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.av.cool { --ring: linear-gradient(135deg, var(--cool1), #2f7bff); }
.av.sm { width: 26px; height: 26px; font-size: 14px; } .av.lg { width: 72px; height: 72px; font-size: 38px; }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.avgrid button { background: none; border: 2px solid transparent; border-radius: 50%; padding: 2px; display: grid; place-items: center; }
.avgrid button.on { border-color: var(--hot1); box-shadow: 0 0 12px rgba(255, 216, 77, 0.45); }
/* 2026-10-09: pictures in the ring (the pink peach, the coins' logos); the level's frame (等级特权): Lv.3 silver, Lv.5 gold,
   Lv.7 diamond and Lv.9 the legend's fire - those two turning slowly; the level avatars locked in the picker until then */
.av img { width: 80%; height: 80%; object-fit: contain; pointer-events: none; user-select: none; }
.av.coin img { width: 86%; height: 86%; border-radius: 50%; }
.av.img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* a member's own picture (imported from Binance Square) */
@property --fra { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.av.fr1 { --ring: linear-gradient(135deg, #f4f7fb, #9aa7b8 55%, #e8edf3); }
.av.fr2 { --ring: linear-gradient(135deg, #fff1a8, #f0b90b 50%, #b8860b); box-shadow: 0 0 8px rgba(240, 185, 11, 0.35); }
.av.fr3 { --ring: conic-gradient(from var(--fra), #a6ecff, #5cb6ff, #e3f7ff, #7f8cff, #a6ecff); box-shadow: 0 0 10px rgba(92, 182, 255, 0.45); }
.av.fr4 { --ring: conic-gradient(from var(--fra), #ffd84d, #ff6a2b, #ff2e63, #ffa23d, #ffd84d); box-shadow: 0 0 12px rgba(255, 106, 43, 0.55); }
.av.fr3, .av.fr4 { animation: frspin 6s linear infinite; }
@keyframes frspin { to { --fra: 360deg; } }
@media (prefers-reduced-motion: reduce) { .av.fr3, .av.fr4 { animation: none; } }
.avgrid button { position: relative; }
.avgrid button.locked { opacity: 0.45; cursor: not-allowed; }
.avgrid button .avlv { position: absolute; bottom: -4px; inset-inline-end: -4px; font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 8px;
  background: var(--bg1); border: 1px solid var(--line); color: var(--gold); }
/* 2026-10-09 upgrade: 勋章墙, the celebration, 等级特权, 本周 / 新人任务, 活跃, 本周主题赛, 规则与公平 */
.mdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.md { display: grid; justify-items: center; align-content: start; text-align: center; gap: 3px; padding: 10px 6px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.md .mde { font-size: 30px; line-height: 1.15; }
.md b { overflow-wrap: anywhere; }
.md.off { opacity: 0.5; } .md.off .mde { filter: grayscale(1); }
.md.on.t-bronze { border-color: #b87333; } .md.on.t-silver { border-color: #c0c7d2; }
.md.on.t-gold { border-color: var(--gold); box-shadow: 0 0 10px rgba(240, 185, 11, 0.3); }
.tiny { font-size: 11px; }
.sheet.celebrate { text-align: center; }
.sheet.celebrate .mdgrid { justify-content: center; }
.cel-big { font-size: 56px; line-height: 1.1; animation: celpop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes celpop { from { transform: scale(0.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cel-big { animation: none; } }
.cel-actions { justify-content: center; }
.perks { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--panel); }
.perk { display: flex; gap: 8px; align-items: center; opacity: 0.55; } .perk.on { opacity: 1; }
.tasksec { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.tasksec.newbie { border-top: 0; padding-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pulse { display: flex; align-items: center; gap: 6px; color: var(--muted); flex-wrap: wrap; }
.pulse:empty { display: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ebd85; flex: none; animation: livepulse 1.8s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(46, 189, 133, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(46, 189, 133, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 189, 133, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.wkbanner { background: linear-gradient(135deg, rgba(240, 185, 11, 0.12), var(--panel)); }
.wkbanner:empty { display: none; }
.chip.champ { display: inline-flex; align-items: center; gap: 6px; }
.fair h2 { font-size: 18px; margin: 0; }
.fairtab td { padding: 6px 8px; vertical-align: top; }
.sdk-proof { display: block; overflow-wrap: anywhere; }
code { font-family: Consolas, ui-monospace, monospace; overflow-wrap: anywhere; }
/* the name's colour by level (等级特权): Lv.5 gold, Lv.7 ice, Lv.9 fire */
.nm5 { color: #ffd84d; } .nm7 { color: #a6ecff; }
.nm9 { background: linear-gradient(90deg, #ffd84d, #ff6a2b, #ff2e63); -webkit-background-clip: text; background-clip: text; color: transparent; }

.post .head { display: flex; gap: 10px; align-items: center; }
.post .head > .grow { min-width: 0; }
/* the name and its badges (Lv, 主播, 币安已核验) wrap on a phone instead of running past the card (no break point between
   a name and a badge otherwise) */
.post .name, a.name { font-weight: 700; color: var(--text); }
a.name { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 3px; max-width: 100%; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 6px; margin-inline-start: 6px; vertical-align: 1px; font-weight: 800; color: var(--ink); }
.badge.owner { background: linear-gradient(90deg, var(--hot1), var(--hot2)); }
.badge.staff { background: linear-gradient(90deg, var(--cool1), var(--cool2)); }
.badge.pin { background: var(--panel2); color: var(--muted); }
/* 币安已核验 (Binance's gold, like the host's own badge but outlined) / 待验证 (quiet) */
.badge.vok { background: rgba(240, 185, 11, 0.12); color: var(--gold); border: 1px solid rgba(240, 185, 11, 0.55); font-weight: 700; }
.badge.vno { background: transparent; color: var(--faint); border: 1px dashed var(--line); font-weight: 600; }
.steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 14px; }
.num { font-family: Consolas, "SFMono-Regular", monospace; color: var(--hot1); letter-spacing: 0.5px; unicode-bidi: isolate; }
.uidbig { font: 700 17px/1.3 Consolas, "SFMono-Regular", monospace; color: var(--hot1); letter-spacing: 0.5px; white-space: nowrap; }
.vbanner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid rgba(240, 185, 11, 0.4);
  background: rgba(240, 185, 11, 0.06); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; }
.post .body { margin: 10px 0 8px; white-space: pre-wrap; word-break: break-word; }
a.plain { color: inherit; display: block; }
.tag { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--panel2); color: var(--muted); margin-inline-end: 6px; font-weight: 700; }
.stance-long { color: var(--up); } .stance-short { color: var(--down); } .stance-wait { color: var(--hot1); }
.actions { display: flex; gap: 18px; color: var(--muted); font-size: 14px; }
.actions button { background: none; border: 0; padding: 0; color: inherit; }
.actions button:hover { color: var(--text); }
.actions .liked { color: var(--down); }
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.comment .body { white-space: pre-wrap; word-break: break-word; }

.ref { background: linear-gradient(135deg, rgba(255, 216, 77, 0.16), rgba(255, 106, 43, 0.06) 55%, rgba(47, 123, 255, 0.08)); border-color: rgba(255, 216, 77, 0.35); }
.price { font: 800 34px/1.1 ui-monospace, Menlo, Consolas, monospace; }
.up { color: var(--up); } .down { color: var(--down); }
.bigbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bigbtns .btn { padding: 14px; font-size: 18px; border-radius: 12px; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; color: #fff; }
.dot.up { background: var(--up); } .dot.down { background: var(--down); } .dot.flat { background: var(--faint); }
.bar { height: 8px; border-radius: 4px; background: var(--down); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--up); }
table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
table.board td { padding: 6px 4px; border-top: 1px solid var(--line); }
table.board td.n { text-align: end; font-variant-numeric: tabular-nums; }
.rank { width: 28px; color: var(--hot1); font-weight: 800; }
canvas.game { width: min(100%, 420px, 49vh); aspect-ratio: 7 / 10; margin: 0 auto; border-radius: 12px; background: var(--bg0); border: 1px solid var(--line); touch-action: none; }
/* friends and messages: the count in the hosts' red, people rows, bubbles (mine in 红烧's gold, theirs on the stage) */
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 9px;
  background: var(--down); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.card > .person:first-of-type, .card > h3 + .person { border-top: 0; }
a.link-row { color: var(--text); } a.link-row:hover { background: var(--panel); }
.chat { max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.bubble { max-width: 80%; align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.bubble.mine { align-self: flex-end; background: linear-gradient(135deg, rgba(255, 216, 77, 0.22), rgba(255, 162, 61, 0.14)); border-color: rgba(255, 216, 77, 0.4);
  border-radius: 14px 14px 4px 14px; }
.bubble .text { white-space: pre-wrap; word-break: break-word; }
.bubble .meta { display: flex; gap: 10px; justify-content: flex-end; color: var(--faint); font-size: 11px; margin-top: 2px; }
.voice { display: flex; align-items: center; gap: 8px; } .voice audio { height: 34px; max-width: 230px; }
.rec { font: 700 15px ui-monospace, Menlo, Consolas, monospace; color: var(--down); }
.card.live { border-color: rgba(246, 84, 96, 0.45); background: linear-gradient(135deg, rgba(246, 84, 96, 0.12), rgba(255, 216, 77, 0.06)); }
footer { max-width: 980px; margin: 8px auto 32px; padding: 0 16px; color: var(--faint); font-size: 12px; line-height: 1.7; }
.empty { text-align: center; color: var(--muted); padding: 24px 0; }
.steps { padding-inline-start: 20px; margin: 8px 0; } .steps li { margin: 4px 0; }

/* 积分 and levels: the badge by every name brightens with the level - quiet, 爆头's blue, 红烧's gold, red-gold, burning */
.badge.lv { font-family: Consolas, "SFMono-Regular", monospace; letter-spacing: 0.3px; }
.badge.lv1 { background: var(--panel2); color: var(--muted); }
.badge.lv2 { background: linear-gradient(90deg, var(--cool1), var(--cool2)); }
.badge.lv3 { background: linear-gradient(90deg, var(--hot1), var(--hot2)); }
.badge.lv4 { background: linear-gradient(90deg, var(--hot2), var(--hot3)); color: #fff; }
.badge.lv5 { background: linear-gradient(90deg, var(--hot1), var(--hot3), #c2185b); color: #fff; box-shadow: 0 0 10px rgba(255, 106, 43, 0.55); }
.badge.feat { background: rgba(240, 185, 11, 0.14); color: var(--gold); border: 1px solid rgba(240, 185, 11, 0.5); }
.lvbig { display: inline-grid; place-items: center; min-width: 64px; height: 64px; padding: 0 8px; border-radius: 16px; font: 800 20px Consolas, monospace; color: var(--ink); }
.lvbig.lv1 { background: var(--panel2); color: var(--muted); } .lvbig.lv2 { background: linear-gradient(135deg, var(--cool1), var(--cool2)); }
.lvbig.lv3 { background: linear-gradient(135deg, var(--hot1), var(--hot2)); } .lvbig.lv4 { background: linear-gradient(135deg, var(--hot2), var(--hot3)); color: #fff; }
.lvbig.lv5 { background: linear-gradient(135deg, var(--hot1), var(--hot3), #c2185b); color: #fff; box-shadow: 0 0 18px rgba(255, 106, 43, 0.5); }
.bar.xp { background: var(--panel2); } .bar.xp > i { background: linear-gradient(90deg, var(--hot1), var(--hot2)); }
details > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
.ledger { display: grid; gap: 4px; margin-top: 6px; } .pos { color: var(--up); font-weight: 700; } .neg { color: var(--down); font-weight: 700; }
.today .chip.on { border-color: var(--up); color: var(--up); }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; padding: 10px 18px; border-radius: 999px; font-weight: 800;
  color: var(--ink); background: linear-gradient(90deg, var(--hot1), var(--hot2)); box-shadow: var(--shadow); transition: opacity 0.5s, transform 0.5s; }
.toast.out { opacity: 0; transform: translate(-50%, 12px); }
/* the page's own questions and error notices (web/ask.js): in-app browsers silence confirm() / prompt() / alert() */
.toast.warn { max-width: min(92vw, 520px); border-radius: 14px; color: #fff; background: rgba(160, 36, 48, 0.96); border: 1px solid #f65460; text-align: center; }
.ask-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 16, 0.7); backdrop-filter: blur(3px); }
.ask { width: min(420px, 100%); padding: 18px; box-shadow: var(--shadow); }
.ask-t { font-size: 15px; line-height: 1.6; white-space: pre-line; }
.ask-in { width: 100%; resize: vertical; min-height: 72px; }
.ask-btns { gap: 10px; }
.btn.danger { background: rgba(246, 84, 96, 0.18); border-color: #f65460; color: #ff8a93; }

/* 合成大饼: coins on a 4 x 4 board, from PEPE's green to 大饼's orange */
.g2048 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; padding: 8px;
  border-radius: 14px; background: var(--bg0); border: 1px solid var(--line); touch-action: none; user-select: none; }
.g2048.over { opacity: 0.6; }
.g2048 .t { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: var(--panel); min-width: 0;
  min-height: 0; overflow: hidden; }
.g2048 .t b { font: 800 clamp(11px, 3.4vw, 16px) / 1.1 Consolas, "SFMono-Regular", monospace; }
.g2048 .t small { font-size: 10px; opacity: 0.7; }
.g2048 .t .coinlogo { width: 44%; height: auto; aspect-ratio: 1; margin-bottom: 3px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
/* a coin's Binance logo on the page (coins.js coinBadge): round, on white like Binance shows it; a letter badge without one */
.coinlogo { display: inline-block; flex: none; border-radius: 50%; background: #fff; object-fit: cover; vertical-align: middle; }
.coinlogo.letter { display: inline-grid; place-items: center; color: #fff; font: 800 11px / 1 system-ui, sans-serif; background: #8a93a8; }
.chip .coinlogo { width: 16px; height: 16px; margin-inline-end: 5px; margin-top: -2px; }
.tag .coinlogo { width: 14px; height: 14px; margin-inline-end: 4px; margin-top: -2px; }
.g2048 .t.pop { animation: pop 0.18s ease-out; }
@keyframes pop { from { transform: scale(0.82); } to { transform: scale(1); } }
.t1 { background: #1f5f3a !important; } .t2 { background: #8a3b12 !important; } .t3 { background: #8a6d2a !important; }
.t4 { background: #1e3f8a !important; } .t5 { background: #2b2f3a !important; } .t6 { background: #2a5ada !important; }
.t7 { background: #b8323a !important; } .t8 { background: linear-gradient(135deg, #9945ff, #14f195) !important; }
.t9 { background: #f0b90b !important; color: var(--ink); } .t10 { background: linear-gradient(135deg, #627eea, #3c3c9d) !important; }
.t11 { background: #f7931a !important; color: var(--ink); box-shadow: 0 0 16px rgba(247, 147, 26, 0.6); }
.t12 { background: linear-gradient(135deg, #f7931a, #c2185b) !important; box-shadow: 0 0 18px rgba(247, 147, 26, 0.7); }
/* the games' lobby: groups of cards, each with its coins' logos; a game's page keeps the others one tap away */
.btn.sm { padding: 4px 12px; font-size: 13px; min-height: 0; }
/* 今日任务 */
.tasks h3 { margin: 0; }
.tasklist { display: grid; gap: 6px; }
.task { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; }
.task .tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); font-weight: 800; font-size: 12px; }
.task.done .tick { background: var(--up); border-color: var(--up); color: #fff; }
.task.done .grow { color: var(--muted); text-decoration: line-through; }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.gcard { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; transition: transform 0.12s, border-color 0.12s; }
.gcard:hover { transform: translateY(-2px); border-color: var(--hot1); }
.gcard .gname { font-size: 16px; }
.gcard .gfoot { margin-top: auto; padding-top: 4px; }
.gcard .gbest { color: var(--hot1); font-weight: 700; }
.gicons { display: flex; align-items: center; min-height: 36px; }
.gicons .coinlogo { width: 34px; height: 34px; border: 2px solid var(--bg1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.gicons .coinlogo + .coinlogo { margin-inline-start: -10px; }
.gemoji { font-size: 30px; line-height: 1; }
.gteaser { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; border-color: rgba(240, 185, 11, 0.45);
  background: linear-gradient(160deg, rgba(240, 185, 11, 0.10), var(--panel)); }
.gteaser .btn { align-self: flex-start; }
.badge.hotb { background: linear-gradient(90deg, var(--hot1), var(--hot3)); color: var(--ink); font-weight: 800; }
.gnav { display: flex; gap: 8px; align-items: center; min-width: 0; }
.gnav > .btn { flex: none; white-space: nowrap; }
.gchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gchips::-webkit-scrollbar { display: none; }
.gchips .chip { white-space: nowrap; }
/* 声音 (web/sound.js): the 🔊 in the game bar and its small panel */
.gnav .gchips { flex: 1 1 auto; min-width: 0; }
.snd { position: relative; flex: none; }
.snd-btn { min-width: 40px; font-size: 18px; line-height: 1; padding: 6px 8px; }
.snd-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: grid; gap: 10px;
  padding: 12px 14px; background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.snd-panel[hidden] { display: none; }
.snd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.snd-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cool1); }
.snd-row input[type="range"] { width: 120px; accent-color: var(--cool1); }
/* 知识问答 */
.qopts { display: grid; gap: 8px; }
.btn.qo { text-align: start; padding: 10px 14px; font-weight: 500; }
.btn.qo b { color: var(--hot1); }
.btn.qo.right { border-color: var(--up); background: rgba(46, 204, 135, 0.14); }
.btn.qo.wrong { border-color: var(--down); background: rgba(246, 84, 96, 0.12); }
.btn.qo:disabled { opacity: 1; cursor: default; }
/* K线大师 */
canvas.chart { width: 100%; aspect-ratio: 640 / 340; border-radius: 12px; border: 1px solid var(--line); background: var(--bg0); }
/* 合约模拟 (web/games/futures.js) */
canvas.fx-chart { aspect-ratio: 640 / 360; }
.fx-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px 14px; }
.fx-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-stat b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-range { flex: 1; min-width: 120px; max-width: 220px; accent-color: var(--hot1); }
input.fx-pct { width: 64px; padding: 4px 8px; text-align: end; }
.fx-log { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.fx-hint .err { margin-top: 4px; font-size: 13px; }
button.chip { cursor: pointer; }

/* a link to Binance for a member not checked yet: our referral sign-up in its place, how to open it directly under it */
.locked { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* a sheet over the dimmed page: a picture shown large */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 16, 0.74); backdrop-filter: blur(3px); }
.sheet { position: relative; width: min(100%, 420px); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 18px 16px; border-radius: var(--radius);
  background: var(--bg1); border: 1px solid var(--line); box-shadow: var(--shadow); }
.sheet > .x { position: absolute; top: 8px; inset-inline-end: 12px; font-size: 22px; line-height: 1; }
.sheet.viewer { width: auto; max-width: min(100%, 1100px); padding: 30px 10px 10px; background: var(--bg0); }
.sheet.viewer img { max-width: 100%; max-height: calc(100vh - 130px); margin: 0 auto; border-radius: 8px; }
.sheet.viewer .nav { justify-content: center; margin-top: 8px; }
/* the host's posts: where from (his Binance Square in Binance's gold, a live show in the show's red), the pictures, the original */
.badge.src { background: rgba(240, 185, 11, 0.12); color: var(--gold); border: 1px solid rgba(240, 185, 11, 0.45); font-weight: 700; }
.badge.src.live { background: rgba(246, 84, 96, 0.12); color: #ff9aa2; border-color: rgba(246, 84, 96, 0.45); }
.pimgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.pimgs.n1 { grid-template-columns: minmax(0, 1fr); }
.pimg { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg0); cursor: zoom-in; }
.pimg img { width: 100%; height: auto; max-height: 240px; object-fit: cover; }
.pimgs.n1 .pimg { justify-self: start; max-width: 100%; }
.pimgs.n1 .pimg img { width: auto; max-width: 100%; max-height: 520px; }
.post .orig { margin: 0 0 8px; }
/* the host's composer: pictures (shrunk before upload), the source tag, the original's link */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .thumbs:empty { display: none; }
.thumb { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .x { position: absolute; top: 3px; inset-inline-end: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.7); color: #fff; line-height: 1; }
.picker { margin-top: 8px; }
.hidden { display: none; }
/* pictures dropped onto the composer; the host's Binance Square posts to bring in */
.card.drop { outline: 2px dashed var(--gold); outline-offset: -4px; }
.sheet.sqsheet { width: min(100%, 560px); }
.sqsheet h3 { margin: 0 0 4px; }
.sqlist { margin-top: 10px; }
.sqitem { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sqitem .badge { margin-inline-start: 6px; }
.sqtext { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }

/* 币圈贪吃蛇 (web/games/snake.js, 2026-10-06): steered on the canvas itself (swipes, its d-pad), so on a phone it takes the
   full width rather than half the screen's height; it takes the keys while focused - its border says so, not an outline */
canvas.game.snake { width: min(100%, 420px, 70vh); }
canvas.game.snake:focus { outline: none; }
canvas.game.snake:focus-visible { border-color: var(--hot1); }

/* ---------------------------------------------------------------------------- 币圈学院 (web/academy.js, 2026-10-06): six tracks
   in their own colours, a level map of three stops, a run with hearts, a combo and a 知识卡 after each answer, a result
   with its medal and a moment of confetti. Logical sides only (inset-inline-*, margin-inline-*): Arabic flips by itself. */
.ac-t-crypto { --ac: #f0b90b; } .ac-t-futures { --ac: #ff8a3d; } .ac-t-risk { --ac: #2ecc87; }
.ac-t-chart { --ac: #4fc3f7; } .ac-t-stocks { --ac: #a78bfa; } .ac-t-safety { --ac: #ff6b8b; }
.ac-hero h2, .ac-thead h2 { margin: 0; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.ac-cap { font-size: 36px; line-height: 1; }
.ac-bar { height: 8px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.ac-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hot1), var(--hot2)); transition: width 0.6s ease; }
.ac-track .ac-bar > i, .ac-thead .ac-bar > i { background: var(--ac, var(--hot1)); }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.ac-track { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--text); text-decoration: none;
  border-top: 3px solid var(--ac, var(--hot1)); transition: transform 0.12s, border-color 0.12s; }
.ac-track:hover { color: var(--text); transform: translateY(-2px); border-color: var(--ac, var(--hot1)); }
.ac-track.done { background: linear-gradient(160deg, rgba(255, 216, 77, 0.08), var(--panel)); }
.ac-temoji { font-size: 28px; line-height: 1; }
.ac-temoji.big { font-size: 40px; }
.ac-tname { font-size: 16px; overflow-wrap: anywhere; }
.ac-tsub { line-height: 1.45; overflow-wrap: anywhere; }
.ac-medals { display: flex; gap: 6px; font-size: 20px; line-height: 1; }
.ac-medal { position: relative; filter: grayscale(1); opacity: 0.35; }
.ac-medal.on { filter: none; opacity: 1; }
.ac-medal sup { position: absolute; top: -6px; inset-inline-end: -8px; font-size: 11px; }
.badge.ac-soonb { background: var(--panel2); color: var(--muted); font-weight: 700; margin-inline-start: 0; }
.ac-daily { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
a.ac-daily:hover { color: var(--text); border-color: var(--hot1); }
.ac-daily .grow > * + * { margin-top: 2px; }
/* a track's map: three stops on a dashed path */
.ac-path { position: relative; display: flex; flex-direction: column; gap: 14px; padding-inline-start: 4px; }
.ac-path::before { content: ""; position: absolute; top: 28px; bottom: 28px; inset-inline-start: 30px; border-inline-start: 3px dashed var(--line); }
.ac-node { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ac-dot { position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; font-weight: 800; color: var(--muted); background: var(--bg1); border: 3px solid var(--line); }
.ac-node.ac-open .ac-dot { border-color: var(--ac, var(--hot1)); color: var(--hot1); animation: ac-pulse 1.8s infinite; }
.ac-node.ac-passed .ac-dot { border-color: var(--hot1); background: rgba(255, 216, 77, 0.1); }
.ac-node.ac-locked .ac-dot, .ac-node.ac-soon .ac-dot { font-size: 20px; opacity: 0.6; }
.ac-node.ac-locked .ac-ncard, .ac-node.ac-soon .ac-ncard { opacity: 0.7; }
.ac-star { position: absolute; top: -6px; inset-inline-end: -6px; font-size: 16px; font-style: normal; }
.card.ac-ncard { min-width: 0; padding: 10px 12px; }
.ac-ncard .row + * { margin-top: 4px; }
@keyframes ac-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 216, 77, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(255, 216, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 216, 77, 0); } }
/* a run: hearts, the five steps, the combo, the question, the 知识卡 */
.card.ac-runbar { padding: 10px 12px; border-top: 3px solid var(--ac, var(--hot1)); }
.ac-runname { overflow-wrap: anywhere; }
.ac-hearts { display: flex; gap: 2px; font-size: 20px; line-height: 1; }
.ac-heart.gone { opacity: 0.45; }
.ac-heart.lost { animation: ac-lost 0.6s ease; }
@keyframes ac-lost { 0% { transform: scale(1.5); } 30% { transform: translateX(-4px) scale(1.1); } 60% { transform: translateX(4px); } 100% { transform: none; } }
.ac-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 10px; }
.ac-steps i { height: 6px; border-radius: 999px; background: var(--panel2); }
.ac-steps i.ac-s-cur { background: var(--hot1); opacity: 0.6; }
.ac-steps i.ac-s-ok { background: var(--up); } .ac-steps i.ac-s-bad { background: var(--down); }
.ac-combo { text-align: center; }
.ac-combo:empty { display: none; }
.ac-combochip { display: inline-block; padding: 4px 14px; border-radius: 999px; font-weight: 800; color: var(--ink);
  background: linear-gradient(90deg, var(--hot1), var(--hot3)); animation: ac-pop 0.35s ease; }
@keyframes ac-pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; } }
.ac-qtext { margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.chip.ac-tag { color: var(--cool1); border-color: rgba(79, 195, 247, 0.45); }
.ac-candles { width: 100%; height: auto; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); }
.btn.qo span { overflow-wrap: anywhere; }
.btn.qo.picked, .btn.ac-tf.picked { border-color: var(--hot1); }
.btn.qo.dim, .btn.ac-tf.dim { opacity: 0.55; }
.ac-tfrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn.ac-tf { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; font-size: 18px; border-radius: 12px; min-width: 0; }
.btn.ac-tf b { font-size: 26px; line-height: 1; }
.btn.ac-tf.yes b { color: var(--up); } .btn.ac-tf.no b { color: var(--down); }
.btn.ac-tf.right { border-color: var(--up); background: rgba(46, 204, 135, 0.16); }
.btn.ac-tf.wrong { border-color: var(--down); background: rgba(246, 84, 96, 0.14); }
.btn.ac-tf:disabled { opacity: 1; cursor: default; }
.btn.ac-tf.dim:disabled { opacity: 0.55; }
.ac-know { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); animation: ac-in 0.25s ease; }
.ac-know.ac-good { border-color: rgba(46, 204, 135, 0.5); background: rgba(46, 204, 135, 0.07); }
.ac-know.ac-bad { border-color: rgba(246, 84, 96, 0.5); background: rgba(246, 84, 96, 0.07); }
.ac-verdict { font-weight: 800; }
.ac-know.ac-good .ac-verdict { color: var(--up); } .ac-know.ac-bad .ac-verdict { color: var(--down); }
.ac-kt { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--gold); }
.ac-ex { margin-top: 2px; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.btn.ac-next { width: 100%; padding: 12px; font-size: 16px; }
@keyframes ac-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ac-q.shake { animation: ac-shake 0.4s ease; }
@keyframes ac-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* the result */
.ac-result { position: relative; overflow: hidden; text-align: center; }
.ac-result h2 { margin: 0; }
.ac-result.win { border-color: rgba(255, 216, 77, 0.55); background: linear-gradient(160deg, rgba(255, 216, 77, 0.10), rgba(79, 195, 247, 0.06)); }
.ac-big { font-size: 56px; line-height: 1.1; animation: ac-pop 0.5s ease; }
.ac-medalbig { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
.ac-medalicon { font-size: 34px; line-height: 1; }
.ac-perf { color: var(--hot1); font-weight: 800; }
.ac-gain { font-size: 26px; font-weight: 900; color: var(--hot1); animation: ac-pop 0.5s ease 0.2s both; }
.ac-actions { justify-content: center; }
.ac-result .warnbox { text-align: start; }
/* a pass: confetti over the page for a moment */
.ac-confetti { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.ac-confetti i { position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; animation: ac-fall 2s ease-in forwards; }
@keyframes ac-fall { to { transform: translate(var(--dx, 0), 105vh) rotate(540deg); } }
@media (max-width: 560px) {
  .ac-dot { width: 48px; height: 48px; font-size: 22px; }
  .ac-path::before { inset-inline-start: 26px; top: 24px; bottom: 24px; }
  .ac-daily { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-node.ac-open .ac-dot, .ac-heart.lost, .ac-combochip, .ac-know, .ac-q.shake, .ac-big, .ac-gain { animation: none; }
  .ac-confetti { display: none; }
}

/* 研究室 (2026-10-06): the desk's research results (web/lab.js) - a wider single page; a wide table scrolls sideways inside
   its card, never the page */
main.single.wide { max-width: 980px; }
.lab-page p { margin-bottom: 0; }
.lab-headline { font-size: 16px; font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; border-color: rgba(255, 216, 77, 0.45);
  background: linear-gradient(90deg, rgba(255, 216, 77, 0.10), rgba(79, 195, 247, 0.05)); }
.lab-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.lab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lab-table th { padding: 6px; min-width: 56px; text-align: start; vertical-align: bottom; color: var(--muted); font-weight: 700;
  line-height: 1.35; border-bottom: 1px solid var(--line); }
table.lab-table td { padding: 7px 6px; vertical-align: top; border-top: 1px solid var(--line); }
table.lab-table tbody tr:first-child td { border-top: none; }
table.lab-table .n { text-align: end; font-variant-numeric: tabular-nums; }
table.lab-table td.n, table.lab-table td.nw { white-space: nowrap; }
table.lab-table td.txt { min-width: 200px; overflow-wrap: anywhere; }
table.lab-table td.txt2 { min-width: 120px; overflow-wrap: anywhere; }
table.lab-table .badge { margin-inline-start: 0; white-space: nowrap; }
.badge.lab-rej { background: rgba(246, 84, 96, 0.14); color: #ff9aa2; border: 1px solid rgba(246, 84, 96, 0.5); }
.badge.lab-cand { background: rgba(46, 204, 135, 0.14); color: var(--up); border: 1px solid rgba(46, 204, 135, 0.5); }
.badge.lab-none { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 600; }
.lab-note { white-space: pre-line; overflow-wrap: anywhere; }

/* 币圈数独: nine coins on a 9 x 9 board - thick lines between the boxes, the chosen cell gold, its row / column / box and
   the same coin lit, clashes red, a completed row / column / box flashing green; notes in the coins' colours */
.sdk [hidden] { display: none !important; }
.sdk-modes .sdk-chip { cursor: pointer; font-weight: 700; }
.sdk-status { align-items: center; }
.sdk-status .clock { font: 700 16px / 1 Consolas, "SFMono-Regular", monospace; color: var(--hot1); min-width: 52px; }
.sdk-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); width: min(100%, 468px);
  aspect-ratio: 1; margin: 0 auto; border: 2px solid #8e98b5; border-radius: 10px; overflow: hidden; background: var(--bg0); user-select: none;
  -webkit-user-select: none; touch-action: manipulation; }
.sdk-grid .c { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg1); color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.sdk-grid .c:nth-child(9n) { border-right: 0; } .sdk-grid .c:nth-child(n + 73) { border-bottom: 0; }
.sdk-grid .c.br { border-right: 2px solid #8e98b5; } .sdk-grid .c.bb { border-bottom: 2px solid #8e98b5; }
.sdk-grid .c .coinlogo { width: 66%; height: auto; aspect-ratio: 1; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.sdk-grid .c .d { position: absolute; right: 2px; bottom: 1px; font: 700 clamp(8px, 2.1vw, 11px) / 1 Consolas, "SFMono-Regular", monospace; color: var(--faint); pointer-events: none; }
.sdk-grid .c.giv { background: #232c4a; }
.sdk-grid .c.giv .d { color: var(--muted); }
.sdk-grid .c.usr .coinlogo { box-shadow: 0 0 0 2px var(--cool2), 0 1px 4px rgba(0, 0, 0, 0.45); }
.sdk-grid .c.usr .d { color: var(--cool1); }
.sdk-grid .c.hnt::after { content: "💡"; position: absolute; left: 1px; top: 0; font-size: clamp(7px, 1.8vw, 10px); line-height: 1; }
.sdk-grid .c.peer { background: #26304f; }
.sdk-grid .c.giv.peer { background: #2b365a; }
.sdk-grid .c.same { background: rgba(255, 216, 77, 0.2); }
.sdk-grid .c.sel { background: rgba(255, 216, 77, 0.36); box-shadow: inset 0 0 0 2px var(--hot1); z-index: 1; }
.sdk-grid .c.bad { background: rgba(246, 84, 96, 0.3); }
.sdk-grid .c.bad .coinlogo { box-shadow: 0 0 0 2px var(--down); }
.sdk-grid .c.bad .d { color: #ff9aa2; }
.sdk-grid .c.flash { animation: sdkflash 0.8s ease-out; }
@keyframes sdkflash { 0% { background: rgba(46, 204, 135, 0.6); } 100% { } }
.sdk-grid.win { animation: sdkwin 1.4s ease; }
@keyframes sdkwin { 25% { box-shadow: 0 0 0 4px var(--up), 0 0 44px rgba(46, 204, 135, 0.65); } 100% { box-shadow: none; } }
.sdk-grid .c .nt { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none;
  font: 700 clamp(7px, 1.9vw, 11px) / 1 Consolas, "SFMono-Regular", monospace; }
.sdk-grid .c .nt i { display: grid; place-items: center; font-style: normal; color: var(--nc, var(--muted)); }
/* 只看币 / 只看数字 */
.sdk.v1 .sdk-grid .c .d { display: none; }
.sdk.v2 .sdk-grid .c .coinlogo { display: none; }
.sdk.v2 .sdk-grid .c .d { position: static; font-size: clamp(16px, 5vw, 24px); color: var(--text); }
.sdk.v2 .sdk-grid .c.usr .d { color: var(--cool1); }
.sdk.v2 .sdk-grid .c.bad .d { color: #ff9aa2; }
.sdk-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: min(100%, 468px); margin: 0 auto; }
.sdk-pad button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 0 4px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; }
.sdk-pad button:hover:not(:disabled) { border-color: var(--hot1); }
.sdk-pad .coinlogo { width: 72%; max-width: 30px; height: auto; aspect-ratio: 1; pointer-events: none; }
.sdk-pad b { font: 700 13px / 1 Consolas, "SFMono-Regular", monospace; }
.sdk-pad small { font-size: 10px; line-height: 1; color: var(--faint); }
.sdk-pad button.full { opacity: 0.38; }
.sdk.notes .sdk-pad button { border-style: dashed; border-color: var(--cool2); }
.sdk.v2 .sdk-pad .coinlogo { display: none; }
.sdk.v2 .sdk-pad b { font-size: 18px; }
.sdk-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 468px); margin: 0 auto; }
.sdk-tools .btn { padding: 8px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
  .sdk-tools { gap: 4px; }
  .sdk-tools .btn { font-size: 12px; padding: 8px 0; }
  .sdk-status { gap: 6px; }
  .sdk-status .sdk-tl { display: none; }
  .sdk-status .btn.sm { padding: 4px 8px; font-size: 12px; }
}
.sdk-tools .btn.on { border-color: var(--cool2); color: var(--cool1); background: rgba(92, 182, 255, 0.14); }
.sdk-msg { min-height: 18px; text-align: center; }
/* nothing started yet: the choice over the empty board (a game's clock starts only when it is picked) */
.sdk-gridwrap { position: relative; width: min(100%, 468px); margin: 0 auto; }
.sdk-gridwrap .sdk-grid { width: 100%; }
.sdk-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px;
  border-radius: 10px; background: rgba(11, 15, 28, 0.86); text-align: center; z-index: 2; }
.sdk-start .btn.hot { font-size: 16px; padding: 10px 18px; }
.sdk-start-lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 300px); }
.sdk-start-lv .btn { padding: 9px 6px; }
.sdk.done .sdk-grid .c { cursor: default; }
.sdk-res { text-align: center; align-items: center; }
.sdk-res .big { font-size: 22px; font-weight: 800; color: var(--hot1); }
.sdk-again { justify-content: center; }
.sdk-lvnote { display: inline-block; margin-inline-end: 12px; }

/* 热币雷达 (2026-10-07, web/radar.js): the whole market on one page - a wider page (a dashboard on a computer, one column on
   a phone), the market's pulse, the alerts with how each went, scored breakouts, a heat map; green up, red down */
main.single.rd-wide { max-width: 1280px; }
.rd-page { min-width: 0; }
.rd-card { min-width: 0; scroll-margin-top: 110px; }
.rd-card h2 { margin-bottom: 4px; }
.rd-card h3 { margin: 6px 0 4px; font-size: 14px; }
.rd-hero h1 { margin: 0; white-space: nowrap; min-width: max-content; } /* the chip and the button go to the next line on a phone, not the title */
.rd-hero { background: linear-gradient(120deg, rgba(92, 182, 255, 0.10), rgba(255, 162, 61, 0.07)); border-color: rgba(92, 182, 255, 0.35); }
.rd-health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.rd-health i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.rd-health.ok i { background: var(--up); box-shadow: 0 0 0 0 rgba(46, 204, 135, 0.6); animation: pulse 1.8s infinite; }
.rd-health.slow i { background: var(--warn); } .rd-health.stale i { background: var(--down); }
.rd-health.ok { color: var(--up); border-color: rgba(46, 204, 135, 0.45); }
.rd-nav { position: sticky; top: 52px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px;
  background: rgba(11, 15, 28, 0.88); backdrop-filter: blur(10px); border-radius: 12px; }
.rd-nav::-webkit-scrollbar { display: none; }
.rd-nav .chip { flex: none; cursor: pointer; }
.rd-nav .chip:hover { color: var(--text); border-color: var(--cool2); }
.rd-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.rd-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rd-grid > * { margin-top: 0 !important; }
.rd-grid > .rd-fill { align-self: stretch; } /* (set by radar.js balance once the columns are fitted: both end together) */
.rd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rd-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .rd-grid, .rd-grid.even { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) and (max-width: 1100px) { .rd-grid.even .rd-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rd-cols, .rd-cols3 { grid-template-columns: minmax(0, 1fr); } .rd-nav { top: 50px; } }

/* the pulse */
.rd-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.rd-kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.rd-big { font: 800 20px / 1.25 Consolas, "SFMono-Regular", monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--panel2); margin-top: 6px; }
.rd-split i { display: block; height: 100%; }
.rd-split i.up { background: var(--up); } .rd-split i.down { background: var(--down); }
.rd-gauge { display: block; width: 100px; height: 56px; margin-top: 2px; }
.rd-gauge path { fill: none; stroke-width: 9; stroke-linecap: round; }
.rd-gauge .bg { stroke: var(--panel2); } .rd-gauge.up .fg { stroke: var(--up); } .rd-gauge.down .fg { stroke: var(--down); }
.rd-majors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rd-major { text-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; color: var(--text); min-width: 0; }
.rd-major:hover { border-color: var(--cool2); }
.rd-major .row { flex-wrap: nowrap; gap: 6px; }
.rd-px { font: 700 16px / 1.3 Consolas, "SFMono-Regular", monospace; margin: 2px 0; }

/* lines */
.rd-spark { display: block; flex: none; overflow: visible; }
.rd-spark .ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rd-spark .ar { fill: currentColor; opacity: 0.12; stroke: none; }
.rd-spark.up { color: var(--up); } .rd-spark.down { color: var(--down); }
.rd-spark.big { width: 100%; height: 90px; }

/* numbers and coins */
.rd-pct { font-family: Consolas, "SFMono-Regular", monospace; font-weight: 700; white-space: nowrap; unicode-bidi: isolate; }
.rd-pct.w { min-width: 64px; text-align: end; display: inline-block; }
.rd-coin { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; color: var(--text); font-weight: 700; min-width: 0; }
.rd-coin:hover b { color: var(--cool1); }
.rd-coin b { white-space: nowrap; }
.rd-coin .badge { margin-inline-start: 2px; }
.rd-star { color: var(--hot1); font-size: 12px; }
.rd-list { display: flex; flex-direction: column; }
.rd-li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; flex-wrap: wrap; }
.rd-li:first-child { border-top: none; }
.rd-cols > div > .rd-li:nth-child(2), .rd-cols3 > div > .rd-li:nth-child(2) { border-top: none; }

/* the alerts */
.rd-filter .chip { cursor: pointer; }
.rd-alerts { display: flex; flex-direction: column; gap: 8px; }
.rd-alert { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); border-inline-start: 3px solid var(--line); }
.rd-alert.lv2 { border-inline-start-color: var(--cool2); }
.rd-alert.lv3 { border-inline-start-color: var(--hot2); background: linear-gradient(90deg, rgba(255, 162, 61, 0.08), var(--panel) 40%); }
.rd-alert.fresh { box-shadow: 0 0 0 1px rgba(255, 216, 77, 0.45), 0 0 18px rgba(255, 216, 77, 0.12); }
.rd-when { display: flex; flex-direction: column; line-height: 1.3; }
.rd-when b { font-family: Consolas, monospace; }
.rd-abody { min-width: 0; }
.rd-abody .row { gap: 6px; }
.rd-msg { margin-top: 3px; overflow-wrap: anywhere; }
.rd-evt { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-after { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; align-items: center; }
.rd-af { display: inline-flex; gap: 4px; align-items: center; }
.rd-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rd-kind { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; color: var(--muted); }
.rd-kind.k-pump, .rd-kind.k-high { color: var(--up); border-color: rgba(46, 204, 135, 0.5); }
.rd-kind.k-dump, .rd-kind.k-low { color: var(--down); border-color: rgba(246, 84, 96, 0.5); }
.rd-kind.k-vol, .rd-kind.k-ev { color: var(--cool1); border-color: rgba(92, 182, 255, 0.5); }
.rd-kind.k-alt { color: var(--ink); background: linear-gradient(90deg, var(--hot1), var(--hot2)); border-color: transparent; }
.rd-kind.k-fund, .rd-kind.k-alpha { color: var(--gold); border-color: rgba(240, 185, 11, 0.5); }
.rd-kind.k-oi { color: #c9a7ff; border-color: rgba(201, 167, 255, 0.5); }
.rd-kind.k-liq { color: var(--hot3); border-color: rgba(255, 106, 43, 0.5); }
.rd-kind.k-live { color: #ff9ad5; border-color: rgba(255, 154, 213, 0.5); }
.rd-kind.k-mkt { color: var(--text); border-color: var(--text); }
.rd-lv { font-size: 9px; letter-spacing: 1px; color: var(--faint); }
.rd-lv.l2 { color: var(--cool2); } .rd-lv.l3 { color: var(--hot2); }
.rd-stats summary { cursor: pointer; font-weight: 700; color: var(--cool1); }
@media (max-width: 560px) {
  .rd-alert { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rd-when { flex-direction: row; gap: 8px; align-items: baseline; }
  .rd-aside { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* 小山寨爆发 */
.rd-bursts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rd-burst { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.rd-burst.gS { border-color: rgba(255, 162, 61, 0.7); background: linear-gradient(140deg, rgba(255, 106, 43, 0.14), var(--panel) 60%); }
.rd-burst.gA { border-color: rgba(255, 216, 77, 0.5); }
.rd-burst > * + * { margin-top: 6px; }
.rd-grade { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 900; color: var(--ink); background: var(--panel2); }
.rd-grade.gS { background: linear-gradient(135deg, var(--hot1), var(--hot3)); } .rd-grade.gA { background: linear-gradient(135deg, var(--hot1), var(--hot2)); }
.rd-grade.gB { background: linear-gradient(135deg, var(--cool1), var(--cool2)); }
.rd-score { display: flex; align-items: center; gap: 8px; }
.rd-score .num { font-size: 20px; min-width: 32px; }
.rd-parts { flex: 1; display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--panel2); }
.rd-parts i, .rd-legend i { display: block; height: 100%; }
.rd-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.rd-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rd-legend i { width: 10px; height: 10px; border-radius: 3px; }
.p-mv { background: var(--up); } .p-vol { background: var(--cool2); } .p-brk { background: var(--hot2); } .p-oi { background: #b48cff; } .p-att { background: #ff7ac6; }
/* Alpha 爆发's parts (2026-10-12): the move, holders added, on-chain activity, depth */
.ap-mv { background: var(--up); } .ap-hold { background: #4fd1c5; } .ap-act { background: var(--cool2); } .ap-depth { background: #b48cff; }
.rd-chain { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
/* 链上体检 (web/token.js, 2026-10-12) */
.tk-ca { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--panel2); overflow-wrap: anywhere; }
.tk-verdict { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); }
.tk-verdict b { font-size: 20px; }
.tk-verdict.v-avoid { border-color: var(--down); background: linear-gradient(140deg, rgba(246, 84, 96, 0.16), var(--panel2) 70%); }
.tk-verdict.v-high { border-color: var(--warn); background: linear-gradient(140deg, rgba(245, 166, 35, 0.14), var(--panel2) 70%); }
.tk-verdict.v-pass { border-color: rgba(46, 204, 135, 0.6); }
.tk-finds { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; }
.tk-finds .lv-avoid { color: var(--down); font-weight: 700; } .tk-finds .lv-high { color: var(--warn); } .tk-finds.notes { color: var(--muted); font-size: 13px; }
.tk-srcs { flex-wrap: wrap; gap: 4px 10px; }
.tk-src { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tk-src.ok { color: var(--up); border-color: rgba(46, 204, 135, 0.5); }
.tk-spark { width: 100%; height: 120px; display: block; }
.tk-spark polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tk-spark.up polyline { stroke: var(--up); } .tk-spark.down polyline { stroke: var(--down); }
.tk-loss { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
a.rd-coin { text-decoration: none; color: inherit; }

/* the heat map */
.rd-wins { flex-wrap: nowrap; overflow-x: auto; }
.rd-heat { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: var(--bg0); border: 1px solid var(--line); }
.rd-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 1px;
  border: 1px solid rgba(11, 15, 28, 0.85); border-radius: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); line-height: 1.15; min-width: 0; }
.rd-tile:hover { filter: brightness(1.18); z-index: 1; outline: 1px solid rgba(255, 255, 255, 0.6); }
.rd-tile b, .rd-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-tile b { font-size: 11px; } .rd-tile span { font: 600 10px / 1.1 Consolas, monospace; }
.rd-tile.big b { font-size: 18px; } .rd-tile.big span { font-size: 14px; }
.rd-tile.mid b { font-size: 13px; } .rd-tile.mid span { font-size: 11px; }
.rd-tile.xs span, .rd-tile.xxs b, .rd-tile.xxs span { display: none; } .rd-tile.xs b { font-size: 9px; }

/* sectors */
.rd-secs { display: flex; flex-direction: column; }
.rd-secrow { display: grid; grid-template-columns: minmax(70px, 1.1fr) 64px minmax(60px, 1.4fr) 70px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); padding: 7px 0; text-align: start; }
.rd-sec:first-child .rd-secrow { border-top: none; }
.rd-secrow:hover .rd-secname { color: var(--cool1); }
.rd-secname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar { position: relative; height: 8px; background: var(--panel2); border-radius: 999px; }
.rd-bar i { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; border-radius: 999px; }
.rd-bar i.up { background: var(--up); } .rd-bar i.down { background: var(--down); transform: translateX(-100%); }
[dir="rtl"] .rd-bar i.down { transform: translateX(100%); }
.rd-lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end; }
.rd-secopen { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
.rd-secopen .chip { cursor: pointer; font-family: Consolas, monospace; }
.chip.up { color: var(--up); } .chip.down { color: var(--down); }
@media (max-width: 560px) { .rd-secrow { grid-template-columns: minmax(64px, 1fr) minmax(50px, 1fr) 64px; } .rd-secrow .faint, .rd-lead { display: none; } }

/* liquidations, announcements */
.rd-side { font-size: 12px; font-weight: 700; }
.rd-ev { padding: 8px 0; border-top: 1px solid var(--line); }
.rd-ev:first-child { border-top: none; }
.rd-hist { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; align-items: center; }

/* every perp */
.rd-search { flex: 1; min-width: 160px; max-width: 260px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.rd-table td { vertical-align: middle; }
.rd-table td.hot { color: var(--hot1); font-weight: 700; }
.rd-sort { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rd-sort.on { color: var(--cool1); }
.rd-pos { position: relative; display: inline-block; width: 56px; height: 6px; border-radius: 999px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(246, 84, 96, 0.55), rgba(111, 120, 144, 0.4), rgba(46, 204, 135, 0.55)); }
.rd-pos i { position: absolute; top: -3px; width: 4px; height: 12px; margin-inline-start: -2px; border-radius: 2px; background: #fff; }
.rd-pos.wide { width: 100%; height: 8px; margin-top: 6px; }

/* one coin up close */
.sheet.rd-sheet { width: min(100%, 460px); }
.rd-sheet .rd-pxbig { font: 800 28px / 1.2 Consolas, "SFMono-Regular", monospace; }
.rd-mvs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.rd-mv { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.rd-mv b { font-family: Consolas, monospace; font-size: 13px; }
.rd-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 10px; align-items: baseline; font-size: 14px; }
.rd-kv b { font-family: Consolas, monospace; }
.rd-line { margin-top: 6px; }
.btn.on { border-color: var(--hot1); color: var(--hot1); }

/* the pulse, second version (the user: "可视化不足"): the mood dial and the moves' histogram on top, small dials under them */
.rd-pulse-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 12px; }
.rd-mood, .rd-dist, .rd-mini { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.rd-mood { display: flex; flex-direction: column; }
.rd-dial { display: block; width: 100%; max-width: 300px; margin: 2px auto 0; height: auto; }
.rd-band { fill: none; stroke-width: 14; }
.rd-band.m0 { stroke: #f65460; } .rd-band.m1 { stroke: #ff8f5a; } .rd-band.m2 { stroke: #f5c542; } .rd-band.m3 { stroke: #8fd690; } .rd-band.m4 { stroke: #2ecc87; }
.rd-band.bg { stroke: rgba(255, 255, 255, 0.08); }
.rd-needle { stroke: #eef1f8; stroke-width: 3.5; stroke-linecap: round; }
.rd-hub { fill: #eef1f8; }
.rd-dial-v { fill: var(--text); font: 800 28px Consolas, "SFMono-Regular", monospace; }
.rd-mood-l { text-align: center; font-size: 22px; font-weight: 900; letter-spacing: 3px; margin-top: -2px; }
.rd-mood-l.rd_mood_0 { color: #f65460; } .rd-mood-l.rd_mood_1 { color: #ff8f5a; } .rd-mood-l.rd_mood_2 { color: #f5c542; }
.rd-mood-l.rd_mood_3 { color: #8fd690; } .rd-mood-l.rd_mood_4 { color: #2ecc87; }
.rd-mood-n { text-align: center; }
.rd-mood .rd-wins button { padding: 3px 10px; font-size: 12px; }
.rd-mood .rd-wins button:disabled { opacity: 0.4; cursor: default; }
.rd-histo { display: block; width: 100%; height: auto; max-height: 220px; margin-top: 6px; }
.rd-bar-dn { fill: rgba(246, 84, 96, 0.45); } .rd-bar-dn.k1 { fill: rgba(246, 84, 96, 0.62); } .rd-bar-dn.k2 { fill: rgba(246, 84, 96, 0.8); } .rd-bar-dn.k3 { fill: #f65460; }
.rd-bar-up { fill: rgba(46, 204, 135, 0.45); } .rd-bar-up.k1 { fill: rgba(46, 204, 135, 0.62); } .rd-bar-up.k2 { fill: rgba(46, 204, 135, 0.8); } .rd-bar-up.k3 { fill: #2ecc87; }
.rd-hist-n { fill: var(--text); font: 700 11px system-ui, sans-serif; }
.rd-hist-x { fill: var(--muted); font: 10px system-ui, sans-serif; }
.rd-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.rd-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.rd-mini > .faint:first-child { align-self: stretch; text-align: start; }
.rd-mini-v { font: 800 18px / 1.25 Consolas, "SFMono-Regular", monospace; }
.rd-mini-v span { font: 600 12px / 1.4 system-ui, sans-serif; color: var(--muted); }
.rd-donut { width: 96px; height: 96px; }
.rd-donut circle { fill: none; stroke-width: 12; }
.rd-donut .bg { stroke: rgba(255, 255, 255, 0.08); } .rd-donut .l { stroke: #f65460; } .rd-donut .s { stroke: #2ecc87; }
.rd-donut-v { fill: var(--text); font: 800 13px Consolas, "SFMono-Regular", monospace; }
.rd-speed { width: 126px; height: 76px; }
.rd-speed .rd-band { stroke-width: 10; }
.rd-speed-t { fill: var(--faint); font: 9px system-ui, sans-serif; }
.rd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline: 2px 4px; }
.rd-dot.l { background: #f65460; } .rd-dot.s { background: #2ecc87; }
.rd-fbar { display: flex; width: 100%; height: 12px; border-radius: 999px; overflow: hidden; margin: 26px 0 18px; background: rgba(255, 255, 255, 0.08); }
.rd-fbar .pos { background: linear-gradient(90deg, #ffa23d, #ffd84d); } .rd-fbar .neg { background: linear-gradient(90deg, #5cb6ff, #a6ecff); }
.rd-ext { display: flex; gap: 18px; font: 800 26px / 1 Consolas, "SFMono-Regular", monospace; margin: 22px 0 14px; }
.rd-spark.wide { width: 100%; height: 34px; margin: 2px 0; }
.rd-majors { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* the six majors on one row: none left alone below */
/* the six dials above them in the same columns (2026-10-08: five on an auto-filled grid left a hole at the end) */
.rd-minis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rd-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rd-sbar .spot { background: #f0b90b; }
.rd-sbar .fut { background: rgba(140, 150, 175, 0.45); }
@media (max-width: 1000px) { .rd-majors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rd-majors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rd-pulse-top { grid-template-columns: minmax(0, 1fr); } }
/* 场外 (2026-10-11): fear & greed and the US futures, a third card on the pulse's top row (under the two on narrower screens) */
.rd-pulse-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 0.95fr); }
.rd-out { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.rd-out-part { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rd-out-part + .rd-out-part { padding-top: 10px; border-top: 1px solid var(--line); }
.rd-out-fng { display: flex; align-items: center; gap: 12px; }
.rd-out-fng .rd-speed { width: 136px; height: 82px; flex: none; }
.rd-out-v { font: 800 30px / 1 Consolas, "SFMono-Regular", monospace; }
.rd-mood-l.rd-out-c { font-size: 16px; letter-spacing: 1px; text-align: start; margin-top: 4px; }
.rd-out-us { display: flex; flex-direction: column; gap: 4px; }
.rd-out-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 14px; }
.rd-out-row b { font-family: Consolas, "SFMono-Regular", monospace; text-align: end; }
@media (max-width: 1100px) {
  .rd-pulse-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .rd-out { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .rd-out-part { flex: 1 1 240px; }
  .rd-out-part + .rd-out-part { padding-top: 0; border-top: 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .rd-pulse-top { grid-template-columns: minmax(0, 1fr); }
  .rd-out-part + .rd-out-part { padding-inline-start: 0; border-inline-start: 0; padding-top: 10px; border-top: 1px solid var(--line); }
}
.ch-fp-all { margin-inline-start: 22px; }
.ch-w-nm { display: inline-block; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* 2026-10-11 (the user: 并不需要三行，两行够了; 多周期的横轴滚动没必要): the side's ten section chips in two rows of five; the
   多周期 table fitted to the side (the site's table minimums - 56px a heading, 200px a text cell - are what made it scroll) */
.ch-side-nav.ch-side-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ch-side-nav .chipbtn { padding: 4px 2px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
table.lab-table.ch-nest { table-layout: fixed; width: 100%; }
table.lab-table.ch-nest th, table.lab-table.ch-nest td, table.lab-table.ch-nest td.txt { min-width: 0; padding: 5px 3px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.lab-table.ch-nest th { font-size: 11px; padding: 4px 2px; text-align: center; }
table.lab-table.ch-nest td { text-align: center; }
table.lab-table.ch-nest th:first-child, table.lab-table.ch-nest td:first-child { width: 13%; text-align: start; }
table.lab-table.ch-nest th:last-child, table.lab-table.ch-nest td:last-child { width: 21%; text-align: end; }
.ch-nest-wrap.lab-scroll { overflow-x: visible; }
/* COT's group names on one line (the whole name on hover) */
.pro-crow { grid-template-columns: minmax(0, 1.3fr) 1fr 0.8fr 0.9fr 44px; }
.pro-crow > :first-child { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the radar's section strip: every section in view on a wide screen (wrapping), a fade at the edge where it scrolls */
.rd-nav { padding: 8px 10px; }
/* 公告雷达's list fitted beside the alerts (radar.js balance): it scrolls in its card, a thin bar, a fade at the foot */
.rd-list-fit { overflow-y: auto; scrollbar-width: thin; padding-inline-end: 4px; }
.rd-list-fit.rd-list-clip { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
@media (min-width: 900px) { .rd-nav { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; } }
@media (max-width: 899px) { .rd-nav { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } }
@media (max-width: 420px) { .rd-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rd-mini-v { font-size: 15px; } }

/* any coin from the top, and my coins (☆) */
.rd-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); }
.rd-findbox { flex: none; width: min(300px, 100%); }
.rd-wins button.cold { opacity: 0.5; }
.rd-secn { white-space: nowrap; }
.rd-loading { padding: 36px 16px; font-size: 15px; }
/* the estimated map's coin picker: the desk's coins, the most liquidated alts, TradFi, any coin by name */
.rd-em-picker { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.rd-em-group { display: flex; gap: 10px; align-items: center; min-width: 0; }
.rd-em-gl { flex: none; width: 72px; }
.rd-em-group .chips { flex-wrap: wrap; min-width: 0; }
.rd-em-group .chip { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.rd-em-find { width: min(280px, 100%); max-width: none; }
.rd-em-title { gap: 8px; align-items: center; font-size: 16px; }
@media (max-width: 560px) {
  .rd-em-group { flex-direction: column; align-items: stretch; gap: 4px; } .rd-em-gl { width: auto; }
  .rd-em-group .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } /* a phone: one swipeable row a group */
}
/* 成交分析: candles, volume by price, POC / value area, large prints, live liquidations, CVD */
.rd-fl { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); }
.rd-fl .rd-fl-va { fill: rgba(166, 236, 255, 0.06); }
.rd-fl .rd-fl-w { stroke-width: 1; } .rd-fl .rd-fl-w.up { stroke: #2ecc87; } .rd-fl .rd-fl-w.dn { stroke: #f65460; }
.rd-fl .rd-fl-b.up { fill: #2ecc87; } .rd-fl .rd-fl-b.dn { fill: #f65460; }
.rd-fl .rd-fl-vb, .rd-em-k.fvb { fill: rgba(46, 204, 135, 0.55); background: rgba(46, 204, 135, 0.55); }
.rd-fl .rd-fl-vs, .rd-em-k.fvs { fill: rgba(246, 84, 96, 0.5); background: rgba(246, 84, 96, 0.5); }
.rd-fl .rd-fl-vb.poc, .rd-fl .rd-fl-vs.poc { stroke: #f0b90b; stroke-width: 1; }
.rd-fl .rd-fl-poc { stroke: #f0b90b; stroke-width: 1.4; stroke-dasharray: 6 4; }
.rd-em-k.fpoc { height: 3px; background: #f0b90b; } .rd-em-k.fva { background: rgba(166, 236, 255, 0.25); }
.rd-fl .rd-em-ax.poc { fill: #f0b90b; font-weight: 700; }
.rd-fl .rd-fl-p { stroke-width: 1; } .rd-fl .rd-fl-p.b { fill: rgba(46, 204, 135, 0.28); stroke: #2ecc87; } .rd-fl .rd-fl-p.s { fill: rgba(246, 84, 96, 0.28); stroke: #f65460; }
.rd-fl .rd-fl-lq { fill: none; stroke-width: 2.2; } .rd-fl .rd-fl-lq.l { stroke: #ff6a3d; } .rd-fl .rd-fl-lq.s { stroke: #a6ecff; }
.rd-fl .rd-fl-cvdbg { fill: rgba(255, 255, 255, 0.02); stroke: var(--line); }
.rd-fl .rd-fl-cf { fill: none; stroke: #5cb6ff; stroke-width: 1.8; } .rd-fl .rd-fl-cs { fill: none; stroke: #ffa23d; stroke-width: 1.6; }
.rd-fl .rd-em-ax.cf { fill: #5cb6ff; } .rd-fl .rd-em-ax.cs { fill: #ffa23d; }
.rd-fl.narrow .rd-em-ax { font-size: 15px; }
.rd-em-k.fcf { height: 3px; background: #5cb6ff; } .rd-em-k.fcs { height: 3px; background: #ffa23d; }
.rd-fl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rd-fl-dot.b { background: rgba(46, 204, 135, 0.35); border: 1px solid #2ecc87; } .rd-fl-dot.s { background: rgba(246, 84, 96, 0.35); border: 1px solid #f65460; }
.rd-fl-ctl { gap: 8px; flex-wrap: wrap; align-items: center; }
.rd-fl-facts { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(240, 185, 11, 0.06); border: 1px solid rgba(240, 185, 11, 0.25); }
.rd-fl-tape { max-height: 330px; overflow-y: auto; }
.rd-live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #2ecc87; }
.rd-live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2ecc87; box-shadow: 0 0 0 3px rgba(46, 204, 135, 0.2); }
.rd-live-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: rgba(46, 204, 135, 0.06); }
.rd-deskoff { padding: 8px 10px; border-radius: 8px; color: var(--muted); background: rgba(92, 182, 255, 0.07); border: 1px solid rgba(92, 182, 255, 0.25); }
/* 现货市场 and the TradFi references */
.rd-coin.plain { cursor: default; }
.rd-spotline { gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: rgba(46, 204, 135, 0.06); }
.rd-tf-ref { flex-wrap: nowrap; gap: 6px; }
.rd-tf-sess { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.rd-tf-sess i { width: 7px; height: 7px; border-radius: 50%; background: #6f7890; }
.rd-tf-sess.open i { background: #2ecc87; box-shadow: 0 0 0 3px rgba(46, 204, 135, 0.2); }
.rd-tf-sess.pre i, .rd-tf-sess.post i { background: #f0b90b; }
.rd-tf-sess.open { color: #2ecc87; }
/* 做单计划 (web/plans_card.js) */
.rd-pl-cap { gap: 8px; flex-wrap: wrap; align-items: center; }
.rd-pl-cap input { width: 120px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line, #2a3140); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; }
.rd-pl { border: 1px solid var(--line, #2a3140); border-left: 4px solid #6f7890; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(255, 255, 255, 0.02); }
.rd-pl.long { border-left-color: #2ecc87; }
.rd-pl.short { border-left-color: #f6465d; }
.rd-pl.gone { opacity: 0.72; }
.rd-pl-head { gap: 8px; flex-wrap: wrap; align-items: center; }
.rd-pl-head > b { font-size: 1.05em; }
.rd-pl-stage { font-size: 0.78em; padding: 2px 8px; }
.rd-pl-stage.candidate { color: #2ecc87; border-color: rgba(46, 204, 135, 0.45); background: rgba(46, 204, 135, 0.08); }
.rd-pl-stage.experiment { color: #f0b90b; border-color: rgba(240, 185, 11, 0.45); background: rgba(240, 185, 11, 0.08); }
.rd-pl-stage.explore { color: #5aa9ff; border-color: rgba(90, 169, 255, 0.45); background: rgba(90, 169, 255, 0.08); }
.rd-pl-live { gap: 8px; flex-wrap: wrap; }
.rd-pl-steps { margin: 0; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.rd-pl details summary { cursor: pointer; color: var(--muted, #8a93a6); }
.rd-pl-w { border-top: 1px dashed var(--line, #2a3140); padding-top: 8px; }
.rd-pl-w p { margin: 4px 0; }
.rd-pl-focus { gap: 8px; flex-wrap: wrap; align-items: baseline; }
.rd-pl-legacy { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line, #2a3140); }
.rd-pl-tabs { flex-wrap: wrap; overflow-x: visible; } /* long labels (en, th, fr) take a second row on a phone, never a squeezed pill */
.rd-pl-tabs button { white-space: nowrap; padding: 6px 10px; }
.rd-pl-warn { border-inline-start: 3px solid #f0b90b; padding-inline-start: 8px; }
/* 做单计划 as cards (2026-10-09): the ground rules, a card a coin, its trades side by side as small tables */
.pl-rules { border: 1px solid rgba(240, 185, 11, 0.35); background: rgba(240, 185, 11, 0.05); border-radius: 12px; padding: 10px 14px; }
.pl-rules b { color: #f0b90b; }
.pl-rules ul { margin: 6px 0 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.pl-coin { border: 1px solid var(--line, #2a3140); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: rgba(255, 255, 255, 0.02); }
.pl-coinhead { gap: 10px; align-items: center; flex-wrap: wrap; }
.pl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pl-col { border: 1px solid var(--line, #2a3140); border-top: 3px solid #6f7890; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-col.long { border-top-color: #2ecc87; } .pl-col.short { border-top-color: #f6465d; }
.pl-col.gone { opacity: 0.75; } .pl-col.off { opacity: 0.6; border-style: dashed; }
.pl-colhead { gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-colhead > b { font-size: 1.05em; }
table.pl-tbl { width: 100%; border-collapse: collapse; }
table.pl-tbl th { text-align: start; font-weight: 600; color: var(--muted, #8a93a6); white-space: nowrap; padding: 4px 10px 4px 0; vertical-align: top; width: 1%; }
table.pl-tbl td { padding: 4px 0; font-family: Consolas, "SFMono-Regular", monospace; overflow-wrap: anywhere; }
table.pl-tbl tr + tr th, table.pl-tbl tr + tr td { border-top: 1px dashed rgba(255, 255, 255, 0.06); }
table.pl-tbl td.warn { color: #f0b90b; }
.pl-float { margin-inline-start: 8px; }
.pl-col details summary { cursor: pointer; color: var(--muted, #8a93a6); }
.pl-cond .pl-col p { margin: 2px 0 0; }
/* 做单助手 (web/trade_helper.js) */
.th-box { min-width: 0; }
.th { border: 1px solid rgba(0, 200, 255, 0.25); background: rgba(0, 200, 255, 0.03); border-radius: 14px; padding: 12px; gap: 10px; }
.co-card > .th-box > .th { border: 0; background: none; padding: 0; }
.th-ctl { gap: 8px; }
.th-row { gap: 8px 12px; flex-wrap: wrap; align-items: flex-end; }
.th-side button.long.on { background: #2ecc87; color: #04150d; }
.th-side button.short.on { background: #f6465d; color: #fff; }
.th-in { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 110px; max-width: 180px; }
.th-in input, .th-in select { width: 100%; min-width: 0; box-sizing: border-box; }
table.th-tbl td { font-family: inherit; line-height: 1.5; }
table.th-tbl td b { font-family: Consolas, "SFMono-Regular", monospace; }
.th-tgts { display: flex; flex-direction: column; gap: 2px; }
.th-warn { border: 1px solid rgba(240, 185, 11, 0.4); background: rgba(240, 185, 11, 0.06); border-radius: 10px; padding: 8px 12px; }
.th-warn b { color: #f0b90b; }
.th-warn ul { margin: 4px 0 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }
.th-rulew { margin: 0; color: #f0b90b; }
.rd-tf-bs { margin-top: 4px; }
.rd-tf-bs .rd-li { gap: 6px; }
.rd-tf-bs .rd-li > .faint.small:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* TradFi */
.rd-tf-ctl { gap: 10px; flex-wrap: wrap; }
.rd-tf-boards { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } /* the boards on one row */
.rd-tf-board { flex: 1 0 128px; text-align: start; display: grid; gap: 4px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.rd-tf-board:hover, .rd-tf-board.on { border-color: var(--cool2); }
.rd-tf-board .row { flex-wrap: nowrap; gap: 6px; }
.rd-tf-m .rd-pct { font-size: 18px; font-weight: 800; }
.rd-tf-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tf-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } /* 12 names: whole rows at every width */
@media (max-width: 1000px) { .rd-tf-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rd-tf-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-tf-key { text-align: start; display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--text); }
.rd-tf-key:hover { border-color: var(--cool2); }
.rd-tf-key .row { flex-wrap: nowrap; gap: 6px; }
.rd-find { width: 100%; max-width: none; }
.rd-watch { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; align-items: center; }
.rd-watch::-webkit-scrollbar { display: none; }
.rd-watch-t { flex: none; }
.rd-wchip { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.rd-wchip:hover { border-color: var(--cool2); }
.rd-lvkey { font-size: 12px; }
.rd-tile .coinlogo { margin-bottom: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.rd-scale { display: flex; align-items: center; gap: 6px; font: 11px Consolas, monospace; color: var(--muted); }
.rd-scale i { flex: 1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #f65460, rgba(246, 84, 96, 0.18)); }
.rd-scale i.up { background: linear-gradient(90deg, rgba(46, 204, 135, 0.18), #2ecc87); }

/* 爆仓地图: one coin's price with each liquidation on it, and its 24 h liquidations by price level (the column on the right) */
.rd-lm { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); }
.rd-lm .rd-lm-col { fill: rgba(255, 255, 255, 0.025); }
.rd-lm .rd-lm-line { fill: none; stroke: #a6ecff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.rd-lm .rd-lm-bl { fill: rgba(246, 84, 96, 0.5); stroke: rgba(246, 84, 96, 0.95); stroke-width: 1; }
.rd-lm .rd-lm-bs { fill: rgba(46, 204, 135, 0.45); stroke: rgba(46, 204, 135, 0.95); stroke-width: 1; }
.rd-lm .rd-lm-l { fill: rgba(246, 84, 96, 0.8); }
.rd-lm .rd-lm-s { fill: rgba(46, 204, 135, 0.8); }
.rd-lm-legend { gap: 14px; }
.rd-lm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rd-lm-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rd-lm-dl { background: rgba(246, 84, 96, 0.85); } .rd-lm-ds { background: rgba(46, 204, 135, 0.85); }
/* the estimated levels: 清算地图 (bars by leverage + cumulative curves) and 清算热力图 (time x price) */
.rd-lviews { flex-wrap: wrap; }
.rd-lviews button { font-weight: 600; }
.rd-em-head { gap: 8px; flex-wrap: wrap; }
.rd-est-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #f0b90b; background: rgba(240, 185, 11, 0.12); border: 1px solid rgba(240, 185, 11, 0.4); }
.rd-em-coins .chip { display: inline-flex; align-items: center; gap: 5px; }
.rd-em-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd-em-kpis .rd-big { font-size: 17px; }
.rd-em-box { position: relative; }
.rd-em { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--bg0); border: 1px solid var(--line); touch-action: manipulation; }
.rd-em .rd-em-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.rd-em .rd-em-hit { fill: transparent; cursor: crosshair; }
.rd-em g:hover .rd-em-hit { fill: rgba(255, 255, 255, 0.05); }
.rd-em .rd-em-t0, .rd-em-k.k0 { fill: #4f7cff; background: #4f7cff; }
.rd-em .rd-em-t1, .rd-em-k.k1 { fill: #a46bff; background: #a46bff; }
.rd-em .rd-em-t2, .rd-em-k.k2 { fill: #f0b90b; background: #f0b90b; }
.rd-em .rd-em-t3, .rd-em-k.k3 { fill: #ff6a3d; background: #ff6a3d; }
.rd-em .rd-em-al { fill: rgba(246, 84, 96, 0.08); stroke: none; }
.rd-em .rd-em-as { fill: rgba(46, 204, 135, 0.08); stroke: none; }
.rd-em .rd-em-cl { fill: none; stroke: #f65460; stroke-width: 2; stroke-linejoin: round; }
.rd-em .rd-em-cs { fill: none; stroke: #2ecc87; stroke-width: 2; stroke-linejoin: round; }
.rd-em .rd-em-now { stroke: #e9edf5; stroke-width: 1.2; stroke-dasharray: 4 4; }
.rd-em .rd-em-ax { fill: var(--muted); font: 11px Consolas, monospace; }
.rd-em .rd-em-ax.mid { text-anchor: middle; }
.rd-em .rd-em-ax.end { text-anchor: end; }
.rd-em .rd-em-ax.now { fill: #e9edf5; font-weight: 700; }
.rd-em .rd-em-ax.faint { opacity: 0.7; }
.rd-em.narrow .rd-em-ax { font-size: 15px; }
.rd-em-info { min-height: 1.4em; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.rd-em-legend { gap: 12px; flex-wrap: wrap; }
.rd-em-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rd-em-k { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.rd-em-k.cl { height: 3px; background: #f65460; } .rd-em-k.cs { height: 3px; background: #2ecc87; }
.rd-em-check { padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--line); color: var(--muted); }
.rd-hm-ctl { gap: 10px; flex-wrap: wrap; }
.rd-hm-ctl input[type="range"] { width: 120px; accent-color: #f0b90b; }
.rd-hm-wrap { position: relative; padding: 0 64px 22px 0; }
.rd-hm { position: relative; height: 340px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0c0720; cursor: crosshair; touch-action: pan-y; }
.rd-hm-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.rd-hm-sv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rd-hm-sv .rd-hm-w { stroke-width: 1; vector-effect: non-scaling-stroke; }
.rd-hm-sv .rd-hm-w.up { stroke: rgba(255, 255, 255, 0.85); } .rd-hm-sv .rd-hm-w.dn { stroke: rgba(255, 120, 130, 0.9); }
.rd-hm-sv .rd-hm-b.up { fill: rgba(255, 255, 255, 0.85); } .rd-hm-sv .rd-hm-b.dn { fill: rgba(255, 120, 130, 0.9); }
.rd-hm-sv .rd-hm-pl { stroke: #e9edf5; stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.rd-hm-dot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; }
.rd-hm-dot.l { background: rgba(246, 84, 96, 0.55); border: 1px solid #f65460; }
.rd-hm-dot.s { background: rgba(46, 204, 135, 0.5); border: 1px solid #2ecc87; }
.rd-hm-now { position: absolute; right: 0; transform: translateY(-50%); padding: 1px 6px; border-radius: 4px; font: 700 11px Consolas, monospace;
  color: #0c0720; background: #e9edf5; pointer-events: none; }
.rd-hm-y { position: absolute; top: 0; right: 0; bottom: 22px; width: 62px; }
.rd-hm-py { position: absolute; left: 4px; transform: translateY(-50%); font: 11px Consolas, monospace; color: var(--muted); }
.rd-hm-x { position: absolute; left: 0; right: 64px; bottom: 0; height: 20px; }
.rd-hm-tx { position: absolute; transform: translateX(-50%); font: 11px Consolas, monospace; color: var(--muted); white-space: nowrap; }
.rd-hm-tip { position: absolute; display: none; max-width: 300px; padding: 6px 9px; border-radius: 8px; font-size: 12px; line-height: 1.4;
  color: #e9edf5; background: rgba(10, 12, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.15); pointer-events: none; z-index: 2; }
.rd-hm-tip.on { display: block; }
.rd-hm-bar { display: inline-block; width: 120px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #0c0720, #311164, #26469c, #18889e, #2eba76, #b0dc2c, #fde725); }
@media (max-width: 700px) {
  .rd-em-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-hm { height: 260px; }
  .rd-hm-wrap { padding-right: 54px; }
  .rd-hm-y { width: 52px; }
  .rd-hm-x { right: 54px; }
  .rd-hm-py, .rd-hm-tx { font-size: 10px; }
}

/* alerts popping up while the page is open */
.rd-toasts { position: fixed; top: 64px; inset-inline-end: 12px; z-index: 45; /* over a sheet too (the test button is in one) */ display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 24px)); pointer-events: none; }
.rd-toast { pointer-events: auto; display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 10px 12px; border-radius: 12px; color: var(--text);
  background: rgba(23, 29, 51, 0.97); border: 1px solid var(--line); border-inline-start: 4px solid var(--cool2); box-shadow: var(--shadow); animation: rdin 0.25s ease-out; }
.rd-toast.lv3 { border-inline-start-color: var(--hot2); }
.rd-toast span { font-size: 13px; color: var(--muted); }
@keyframes rdin { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .rd-toast { animation: none; } .rd-health.ok i { animation: none; } }

/* 头盔冲浪 (2026-10-07, web/games/surf.js): trading made a game on the live market - the wave on a canvas, the rider's
   numbers, the result card, the intuition map; the show's colours; a phone at 375 px never scrolls sideways */
.sf-page { min-width: 0; }
.sf-top { align-items: center; justify-content: space-between; gap: 10px; }
.sf-top h2 { margin: 0; white-space: nowrap; flex: none; }
.sf-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; min-width: 0; }
.sf-tabs::-webkit-scrollbar { display: none; }
.sf-tabs button { white-space: nowrap; flex: none; }
.sf-card { min-width: 0; }
.sf-head { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.sf-k { display: flex; flex-direction: column; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.sf-k b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the lobby: a card per coin */
.sf-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sf-coin { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px; text-align: start; border-radius: 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); transition: transform 0.15s ease, border-color 0.15s ease; }
.sf-coin:hover { border-color: var(--cool2); transform: translateY(-1px); }
.sf-coin .row { flex-wrap: nowrap; gap: 6px; }
.sf-px, .sf-livepx { font: 700 16px / 1.3 Consolas, "SFMono-Regular", monospace; color: var(--text); unicode-bidi: isolate; transition: color 0.25s ease; }
.sf-px.up, .sf-livepx.up { color: var(--up); } .sf-px.down, .sf-livepx.down { color: var(--down); }
/* where the prices come from: Binance's stream (a live dot), or the server's every few seconds (amber) */
.sf-feed { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.sf-feed i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.sf-feed.on i { background: var(--up); animation: sfpulse 2s ease-out infinite; }
.sf-feed.off { color: #ffc65c; } .sf-feed.off i { background: #ffc65c; }
@keyframes sfpulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 135, 0.6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(46, 204, 135, 0); } }
.sf-chg { font-family: Consolas, monospace; font-weight: 700; white-space: nowrap; }
.sf-mini { height: 32px; }
.sf-spark { display: block; width: 100%; height: 32px; }
.sf-spark path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sf-spark.up { color: var(--up); } .sf-spark.down { color: var(--down); }
/* a coin's bar: (back,) the coin and its feed, (the ride,) the live price and its 24 h */
.sf-coinbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sf-cname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-cname b { font-size: 18px; line-height: 1.1; }
.sf-pxbox { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; }
.sf-pxbox .sf-livepx { font-size: 21px; }
.sf-backbtn { padding: 4px 11px; font-size: 16px; line-height: 1.2; }
/* the wave (drawn on the canvas at the box's own size; one canvas kept across redraws) */
.sf-wave { position: relative; width: 100%; height: 320px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #060a16;
  box-shadow: inset 0 0 40px rgba(92, 182, 255, 0.07); }
.sf-canvas { display: block; width: 100%; height: 100%; }
/* the conditions, the direction, the hearts and the pace, the plan */
.sf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-pill { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; padding: 5px 11px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; cursor: help; }
.sf-pill b { font-weight: 700; overflow-wrap: anywhere; }
.sf-pill.good { border-color: rgba(46, 204, 135, 0.55); } .sf-pill.good b { color: var(--up); }
.sf-pill.bad { border-color: rgba(246, 84, 96, 0.5); } .sf-pill.bad b { color: var(--down); }
.sf-dirs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sf-dirbtn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--muted); font-size: 16px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.sf-dirbtn:active { transform: scale(0.98); }
.sf-dirico { font-size: 22px; line-height: 1; }
.sf-dirbtn.sf-up.on { border-color: var(--up); background: rgba(46, 204, 135, 0.16); color: var(--up); }
.sf-dirbtn.sf-down.on { border-color: var(--down); background: rgba(246, 84, 96, 0.15); color: #ff9aa2; }
.sf-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sf-opt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-seg { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.sf-seg button { flex: 1 1 0; min-width: 0; padding: 7px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sf-seg button.on { background: linear-gradient(90deg, var(--cool1), var(--cool2)); color: var(--ink); }
.badge.sf-up { background: rgba(46, 204, 135, 0.16); color: var(--up); border: 1px solid rgba(46, 204, 135, 0.5); }
.badge.sf-down { background: rgba(246, 84, 96, 0.14); color: #ff9aa2; border: 1px solid rgba(246, 84, 96, 0.5); }
.sf-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sf-plan > div { display: flex; flex-direction: column; min-width: 0; padding: 6px 9px; border-radius: 10px; background: var(--panel2); }
.sf-plan b { font-family: Consolas, monospace; overflow-wrap: anywhere; }
.sf-stake { margin: 0; }
.sf-go { width: 100%; padding: 13px; font-size: 18px; border-radius: 14px; }
.btn.hot.sf-go.dive { background: linear-gradient(90deg, #ff8a94, #f65460); color: #fff; }
/* riding: the scoreboard, the wave, the way from the helmet to the flag, the buttons */
.sf-score { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.sf-score > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.sf-score b { overflow-wrap: anywhere; }
.sf-pnlnow { font: 800 26px / 1.15 Consolas, "SFMono-Regular", monospace; white-space: nowrap; }
.sf-clock { font: 700 18px / 1.2 Consolas, monospace; }
.sf-trackrow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sf-end { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-family: Consolas, monospace; }
.sf-end.stop { color: #ff8a94; } .sf-end.flag { color: #ffd84d; }
.sf-track { position: relative; flex: 1; min-width: 60px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 84, 96, 0.8), rgba(166, 236, 255, 0.25) 33.3%, rgba(255, 216, 77, 0.85)); }
.sf-track i { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.sf-mark { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #5cb6ff; box-shadow: 0 0 10px rgba(92, 182, 255, 0.8); transition: left 0.2s linear; }
.sf-one { width: 2px; height: 16px; background: rgba(46, 204, 135, 0.85); }
.sf-be { width: 4px; height: 18px; border-radius: 2px; background: var(--up); }
.sf-acts { gap: 8px; }
.sf-acts .btn { padding: 10px 16px; font-size: 15px; }
.sf-acts .sf-cash { min-width: 120px; font-size: 16px; }
.sf-real { padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(255, 216, 77, 0.45); background: rgba(255, 216, 77, 0.05); }
.sf-real .small { overflow-wrap: anywhere; }
.sf-realrisk { width: 90px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
/* the result */
.sf-result { padding: 14px 8px; text-align: center; border-radius: 14px; }
.sf-result.win { background: linear-gradient(140deg, rgba(46, 204, 135, 0.16), transparent 70%); }
.sf-result.loss { background: linear-gradient(140deg, rgba(246, 84, 96, 0.14), transparent 70%); }
.sf-big { font-size: 22px; font-weight: 800; }
.sf-pnl { margin-top: 4px; font-size: 26px; font-weight: 800; }
.sf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sf-facts > div { display: flex; flex-direction: column; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--panel2); }
.sf-facts b { overflow-wrap: anywhere; }
.sf-lessons, .sf-rules { display: flex; flex-direction: column; gap: 5px; margin: 0; padding-inline-start: 20px; }
/* my intuition map, the board */
.sf-curve { display: block; width: 100%; height: 90px; }
.sf-curve path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sf-curve.up { color: var(--up); } .sf-curve.down { color: var(--down); }
.sf-ins td { white-space: nowrap; }
.sf-li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 0; flex-wrap: wrap; border-top: 1px solid var(--line); }
.sf-li:first-child { border-top: none; }
.sf-rank { width: 24px; text-align: center; color: var(--hot1); }
@media (max-width: 560px) {
  .sf-top h2 { font-size: 18px; }
  .sf-tabs { flex: 1 1 100%; }
  .sf-wave { height: 250px; }
  .sf-plan, .sf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-score { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sf-score > .sf-pnlbox { grid-column: 1 / -1; }
  .sf-opts { grid-template-columns: minmax(0, 1fr); }
  .sf-pnlnow { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-coin, .sf-dirbtn, .sf-mark, .sf-px, .sf-livepx { transition: none; } .sf-coin:hover { transform: none; } .sf-feed.on i { animation: none; }
}

/* 资金驱动地图 (web/driver_map.js): the canvas, its tooltip, the four corners' chips */
.dm-ctl { flex-wrap: wrap; gap: 8px; align-items: center; }
.dm-ctl .tabs { flex: none; }
.dm-wrap { position: relative; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #0b0f1c; }
.dm-canvas { display: block; touch-action: manipulation; }
.dm-tip { position: absolute; z-index: 2; min-width: 190px; max-width: 240px; padding: 8px 10px; border-radius: 10px; pointer-events: none;
  background: rgba(17, 22, 38, 0.96); border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.dm-tip .row { gap: 8px; align-items: center; margin-bottom: 4px; }
.dm-kv { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin-bottom: 4px; }
.dm-kv b { text-align: end; font-family: Consolas, "SFMono-Regular", monospace; }
.dm-qtag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.q-spot_up { --q: 46, 204, 135; } .q-perp_up { --q: 255, 162, 61; } .q-perp_down { --q: 92, 182, 255; } .q-spot_down { --q: 246, 84, 96; } .q-flat { --q: 138, 147, 168; }
.dm-qtag { color: rgb(var(--q)); background: rgba(var(--q), 0.14); }
.dm-quads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dm-quad { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--q), 0.35); background: rgba(var(--q), 0.06); min-width: 0; }
.dm-quad > b { color: rgb(var(--q)); }
.dm-quad .chips { margin-top: 6px; }
.dm-chip { cursor: pointer; font-family: Consolas, "SFMono-Regular", monospace; font-size: 12px; padding: 2px 8px; }
.dm-chip:hover { border-color: rgb(var(--q, 138, 147, 168)); color: var(--text); }
.dm-how ul { margin: 6px 0 0; }
/* 现货选币 (web/pick.js) and 一币全景 (web/coin.js) */
.stack0 { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pk-head h1, .co-head h1 { margin: 0; font-size: 22px; }
.pk-searchrow { flex-wrap: wrap; gap: 8px; }
.pk-search { flex: 1 1 260px; min-width: 0; font-size: 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.pk-search:focus { outline: none; border-color: var(--hot1); }
.pk-fl { flex-wrap: wrap; gap: 8px; align-items: center; }
.pk-scroll { margin: 0 -4px; }
table.pk-table { border-collapse: collapse; width: 100%; font-size: 13px; }
table.pk-table th { white-space: nowrap; font-size: 12px; }
table.pk-table th.sortable button { color: inherit; font: inherit; font-weight: 700; padding: 0; }
table.pk-table th.on button { color: var(--hot1); }
table.pk-table td { vertical-align: middle; white-space: nowrap; }
table.pk-table td.num { font-family: Consolas, "SFMono-Regular", monospace; text-align: end; }
table.pk-table th.pk-f, table.pk-table td.pk-f { text-align: center; min-width: 46px; }
table.pk-table td.pk-coin, table.pk-table th.pk-coin { position: sticky; inset-inline-start: 0; background: var(--panel); z-index: 1; min-width: 150px; }
tr.pk-row { cursor: pointer; }
tr.pk-row:hover td { background: rgba(255, 255, 255, 0.03); }
tr.pk-row:focus-visible { outline: 2px solid var(--hot1); outline-offset: -2px; }
.pk-flag { display: inline-block; margin-inline-start: 6px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  color: #ffb3b8; background: rgba(246, 84, 96, 0.14); border: 1px solid rgba(246, 84, 96, 0.45); }
.pk-flag.seed { color: #ffd84d; background: rgba(255, 216, 77, 0.1); border-color: rgba(255, 216, 77, 0.4); }
.pk-flag.soft { color: var(--muted); background: var(--panel2); border-color: var(--line); }
.sc { display: inline-block; min-width: 34px; padding: 2px 6px; border-radius: 7px; font: 800 12px/1.3 Consolas, "SFMono-Regular", monospace; text-align: center; }
.sc0 { background: rgba(246, 84, 96, 0.2); color: #ff9aa2; } .sc1 { background: rgba(255, 140, 70, 0.18); color: #ffb47a; }
.sc2 { background: rgba(240, 185, 11, 0.16); color: #f5d36b; } .sc3 { background: rgba(120, 214, 120, 0.16); color: #9fe3a0; }
.sc4 { background: rgba(46, 204, 135, 0.22); color: #5ff0ad; } .sc-none { color: var(--faint); background: transparent; }
.pk-spark { width: 90px; height: 26px; display: block; }
.pk-spark path { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.pk-spark.up path { stroke: var(--up); } .pk-spark.down path { stroke: var(--down); }
.pk-method .steps li { margin-bottom: 6px; }
.co-head .co-title { gap: 12px; align-items: center; }
.co-px { display: flex; flex-direction: column; align-items: flex-end; font-family: Consolas, "SFMono-Regular", monospace; }
.co-px b { font-size: 24px; }
.co-acts { flex-wrap: wrap; gap: 8px; }
.co-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr) minmax(90px, auto)); gap: 6px 12px; align-items: baseline; font-size: 14px; }
/* 导入币安广场资料 (2026-10-12): the code to put in their Square bio; a member's bio on their page; the mainland-China notice */
.bn-code { font: 700 20px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; padding: 6px 12px; border-radius: 10px; background: var(--panel2); border: 1px dashed var(--line); }
.member-bio { white-space: pre-line; margin: 6px 0; }
.region-off { max-width: 560px; margin: 40px auto; text-align: center; }
/* the first screen while the app's first request is out (seo/build.mjs #boot, app.js loadSite) */
.seo-boot { display: flex; align-items: center; gap: 8px; min-height: 18px; margin: 0; color: var(--muted); font-size: 13px; }
.seo-boot::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--cool2); animation: bootspin 0.9s linear infinite; }
@keyframes bootspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seo-boot::before { animation: none; } }
.co-alpha { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); display: grid; gap: 8px; }
.co-kv b { font-family: Consolas, "SFMono-Regular", monospace; }
.co-rep { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: center; }
.co-spider { width: 100%; max-width: 300px; height: auto; overflow: visible; margin: 0 auto; display: block; }
.co-spider .ring { fill: none; stroke: rgba(255, 255, 255, 0.08); } .co-spider .mid { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 3 3; }
.co-spider .axis { stroke: rgba(255, 255, 255, 0.08); }
.co-spider .shape { fill: rgba(79, 195, 247, 0.22); stroke: #4fc3f7; stroke-width: 2; stroke-linejoin: round; }
.co-spider .dot { fill: #4fc3f7; } .co-spider .none { fill: none; stroke: var(--faint); stroke-dasharray: 2 2; }
.co-spider .lbl { fill: #c8cfdc; font-size: 11.5px; font-weight: 700; }
.co-flist { gap: 10px; }
.co-frow .row { align-items: center; }
.co-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin: 4px 0 2px; }
.co-bar i { display: block; height: 100%; border-radius: 999px; padding: 0; min-width: 0; }
.co-bar i.sc0 { background: #f65460; } .co-bar i.sc1 { background: #ff8c46; } .co-bar i.sc2 { background: #f0b90b; }
.co-bar i.sc3 { background: #78d678; } .co-bar i.sc4 { background: #2ecc87; }
.co-phase { font-weight: 700; margin: 0; }
.co-chart { width: 100%; height: 200px; display: block; }
.co-chart path { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.co-chart .px.up { stroke: var(--up); } .co-chart .px.down { stroke: var(--down); }
.co-chart .ma { stroke: #ffd84d; stroke-dasharray: 5 4; stroke-width: 1.4; }
.co-chart .inv { stroke: var(--muted); stroke-dasharray: 4 4; } .co-chart .val.up { stroke: var(--up); } .co-chart .val.down { stroke: var(--down); }
.co-dchart { height: 160px; }
.co-key::before { content: ""; display: inline-block; width: 16px; height: 0; border-top: 2px dashed currentColor; vertical-align: middle; margin-inline-end: 6px; }
.co-key.ma { color: #ffd84d; } .co-key.inv { color: var(--muted); } .co-key.val { color: var(--up); margin-inline-start: 14px; }
.co-key.val::before { border-top-style: solid; }
.co-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-ncol { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); min-width: 0; }
.co-ncol h3 { margin: 0 0 6px; font-size: 15px; }
.co-ncol ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.co-ncol.bull { border-color: rgba(46, 204, 135, 0.4); } .co-ncol.bull h3 { color: var(--up); }
.co-ncol.bear { border-color: rgba(246, 84, 96, 0.4); } .co-ncol.bear h3 { color: var(--down); }
.co-ncol.risk { border-color: rgba(245, 166, 35, 0.45); } .co-ncol.risk h3 { color: var(--warn); }
.co-amt { width: 90px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.co-cmp { margin: 4px 0 0; padding-inline-start: 18px; }
.co-drv { padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(var(--q, 138, 147, 168), 0.4); background: rgba(var(--q, 138, 147, 168), 0.07); }
.co-drv > b { color: rgb(var(--q, 200, 207, 220)); }
.co-dbar { height: 8px; border-radius: 999px; background: rgba(246, 84, 96, 0.55); overflow: hidden; }
.co-dbar i.b { display: block; height: 100%; background: rgba(46, 204, 135, 0.75); }
.co-copybox { position: fixed; top: -1000px; left: 0; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 760px) {
  .co-rep { grid-template-columns: minmax(0, 1fr); }
  .co-notes { grid-template-columns: minmax(0, 1fr); }
  .co-kv { grid-template-columns: minmax(0, 1fr) auto; }
  .co-px b { font-size: 20px; }
}
.pk-week { border-color: rgba(255, 216, 77, 0.35); }
.pk-wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pk-wcoin { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); min-width: 0; }
.pk-wcoin:hover { border-color: rgba(255, 216, 77, 0.5); }
.pk-wsc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.pk-wsc .sc { min-width: 0; padding: 2px 0; font-size: 11px; }
table.pk-hist td { white-space: nowrap; }
.dm-trails { cursor: pointer; }
.dm-trails.on { border-color: rgba(255, 216, 77, 0.6); color: #ffd84d; background: rgba(255, 216, 77, 0.08); }
.rd-nav .chip.rd-nav-new { border-color: rgba(255, 216, 77, 0.6); color: #ffd84d; }
@media (max-width: 760px) {
  .dm-quads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the live show's stage (web/stage.html + stage_site.js, 2026-10-10): the page laid over the program's scene area */
body.stage { background: var(--bg0, #0b0f1c); scrollbar-width: none; }
body.stage::-webkit-scrollbar { display: none; }
.stg-bar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 8px 14px; font-size: 15px;
  background: var(--bg0, #0b0f1c); border-bottom: 1px solid var(--line, #2a3140); }
.stg-brand { color: #f0b90b; }
.stg-sep { color: var(--muted, #8a93a6); }
.stg-coin { display: inline-flex; gap: 6px; align-items: center; margin-inline-start: 4px; }
main.stg { display: block; padding: 10px 14px 60px; max-width: none; margin: 0; } /* one column: not main's grid with its 300px side */
main.stg > * + * { margin-top: 12px; }
html.stage { scrollbar-width: none; }
html.stage::-webkit-scrollbar { display: none; }
body.stage .co-acts .btn, body.stage .pl-coinhead .btn { display: none; } /* copy / star buttons: nothing to press on air */

/* 实证看盘 (web/chart/page.js, 2026-10-10): the charting workspace */
main.single.ch-wide { max-width: 1680px; }
.ch-card { gap: 10px; }
.ch-row { flex-wrap: wrap; gap: 8px; align-items: center; }
.ch-symbox { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.ch-brick { gap: 4px; align-items: center; } /* a price-only type's box / lines / turn */
/* the symbols' dropdown */
.ch-sugg.ch-sugg { min-width: min(420px, 92vw); max-height: 440px; display: flex; flex-direction: column; gap: 6px; padding: 8px; overflow: hidden; }
.ch-sugg.ch-sugg[hidden] { display: none; }
.ch-sym-tabs { gap: 4px; }
.ch-sym-head, .ch-sym-row { display: grid; grid-template-columns: minmax(0, 1.7fr) 1fr 0.8fr 0.8fr; gap: 8px; align-items: center; padding: 4px 8px; }
.ch-sym-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ch-sym-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-sym-list { overflow-y: auto; max-height: 340px; }
.ch-sym-row { width: 100%; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 13px; text-align: start; font-variant-numeric: tabular-nums; }
.ch-sym-row:hover, .ch-sym-row.on { background: var(--panel2); }
.ch-sym-head .n, .ch-sym-row .n { text-align: end; }
.ch-sym { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-weight: 700; text-transform: uppercase; }
.ch-sugg { position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline-start: 0; min-width: 200px; max-height: 320px; overflow-y: auto;
  background: var(--bg1); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.ch-sugg-i { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--text); cursor: pointer; font: inherit; }
.ch-sugg-i:hover { background: var(--panel2); }
.ch-menu { position: relative; }
.ch-menu > summary { list-style: none; cursor: pointer; }
.ch-menu > summary::-webkit-details-marker { display: none; }
.ch-menu-body { position: absolute; z-index: 30; top: calc(100% + 4px); inset-inline-start: 0; min-width: 260px; padding: 10px 12px; gap: 6px;
  background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ch-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; border-block: 1px solid rgba(255, 255, 255, 0.06); }
.ch-tools input.ch-note { width: 140px; max-width: 40vw; flex: 0 0 auto; margin: 0; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); }
.ch-symbox input.ch-sym { width: 120px; margin: 0; }
.ch-side > a { display: block; }
.ch-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.ch-shell.noside { grid-template-columns: minmax(0, 1fr); }
.ch-shell.noside .ch-side { display: none; }
/* the charts: the layout's grid (set by page.js) fills the workspace's height; each chart takes its share */
.ch-grid { display: grid; gap: 6px; height: clamp(520px, calc(100vh - 250px), 1600px); }
.ch-grid.n1 { height: clamp(520px, calc(100vh - 250px), 1100px); }
.ch-ind { max-height: 70vh; overflow-y: auto; }
.ch-ind input[type="text"] { width: 120px; }
.ch-watch { gap: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ch-watch h3 { margin: 0; }
.ch-w-row { gap: 8px; align-items: center; padding: 3px 6px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.ch-w-row.on { background: var(--panel2); }
.ch-w-row > span { min-width: 64px; text-align: end; }
.ch-cell { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0c1120; min-width: 0; min-height: 0; }
.ch-cell.on { border-color: rgba(79, 195, 247, 0.75); box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.35); }
.ch-head { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex: 0 0 auto; }
.ch-head .ch-cell-sym { font-weight: 700; color: var(--text); }
.ch-host { position: relative; flex: 1 1 auto; min-height: 120px; min-width: 0; }
.ch-wait-btn { position: absolute; left: 50%; top: calc(50% + 42px); transform: translateX(-50%); z-index: 2; }
/* 布局 menu: the arrangements as small pictures */
.ch-lay-menu { min-width: 300px; max-height: 70vh; overflow-y: auto; }
.ch-lay-grp { gap: 6px; align-items: center; flex-wrap: wrap; }
.ch-lay-grp > b { width: 18px; }
.ch-lay-btn { padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); cursor: pointer; }
.ch-lay-btn.on { border-color: #4fc3f7; }
.ch-lay-pic { display: grid; gap: 1px; width: 30px; height: 20px; }
.ch-lay-pic i { display: block; background: rgba(160, 170, 190, 0.45); border-radius: 1px; min-width: 0; min-height: 0; }
.ch-lay-btn.on .ch-lay-pic i { background: #4fc3f7; }
/* intervals: favourites as buttons, the rest in a grouped menu with stars */
.ch-favs { gap: 4px; }
.ch-iv-menu { min-width: 170px; max-height: 70vh; overflow-y: auto; gap: 6px; }
.ch-iv-row { gap: 6px; align-items: center; padding: 1px 4px; border-radius: 6px; }
.ch-iv-row.on { background: var(--panel2); }
.ch-star { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 14px; padding: 0 2px; }
.ch-star.on { color: #ffd84d; }
/* 指标库: the active list (inputs, colour, show / hide), the search, the categories */
.ch-lib { min-width: 360px; max-width: 460px; max-height: 72vh; overflow-y: auto; }
.ch-lib hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 4px 0; }
.ch-lib input[type="text"] { width: 100%; }
.ch-lib-row { gap: 6px; align-items: center; flex-wrap: wrap; padding: 2px 0; }
.ch-lib-row > span.grow { flex: 1 0 auto; } /* the name whole (its numbers go to the next line when they do not fit) */
.ch-lib-row.off { opacity: 0.5; }
.ch-lib-n { width: 58px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-variant-numeric: tabular-nums; }
.ch-lib-col { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
.ch-lib-cat > summary { cursor: pointer; padding: 3px 0; color: var(--muted); }
.ch-lib-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 4px 0 6px; }
.ch-lib-item { border: 0; background: none; color: var(--text); text-align: start; padding: 3px 4px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; }
.ch-lib-item:hover { background: var(--panel2); }
.ch-lib-item[hidden], .ch-lib-cat[hidden] { display: none; }
/* drawing tools: the menus by kind, the selected drawing's style bar */
.ch-tool-menu { min-width: 300px; max-height: 70vh; overflow-y: auto; gap: 1px; }
.ch-tool-menu .ch-ctx-i.on { background: var(--panel2); color: #4fc3f7; }
.ch-tool-menu .ch-ctx-i .faint { max-width: 170px; text-align: end; }
.ch-style { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 2px 6px; border: 1px solid rgba(255, 216, 77, 0.45); border-radius: 999px; }
.ch-sw { width: 16px; height: 16px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; }
.ch-sw.on { outline: 2px solid #ffd84d; outline-offset: 1px; }
/* 图表设置 (a dialog), the light charts, ⭐ lists' flags and menu, the multi-timeframe dial */
.ch-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 16, 0.55); padding: 16px; }
.ch-modal-body { width: min(460px, 100%); max-height: 88vh; overflow-y: auto; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg1); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); }
.ch-modal-body h3 { margin: 0; }
.ch-grid.light .ch-cell { background: #ffffff; border-color: #c9cfdc; }
.ch-grid.light .ch-cell.on { border-color: #1c7ed6; }
.ch-flag { width: 12px; height: 12px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; flex: 0 0 auto; }
.ch-wl-menu { min-width: 280px; }
.ch-wl-menu textarea { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-size: 13px; resize: vertical; }
.ch-watch .ch-menu-body { inset-inline-start: auto; inset-inline-end: 0; }
.ch-mtf { gap: 10px; align-items: center; }
.ch-mtf-txt { gap: 4px; line-height: 1.4; }
/* 新手上手 */
.ch-guide { max-width: 640px; }
.ch-guide-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 10px; }
.ch-guide-steps p { margin: 2px 0 0; line-height: 1.55; }
.ch-guide-new { animation: chGuide 2.4s ease-in-out infinite; }
@keyframes chGuide { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 77, 0.0); } 50% { box-shadow: 0 0 0 4px rgba(255, 216, 77, 0.25); } }
@media (prefers-reduced-motion: reduce) { .ch-guide-new { animation: none; } }
/* the words typed on the chart (文字 / 注释) */
.ch-ted { position: absolute; z-index: 25; width: min(330px, calc(100% - 8px)); display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--bg1); border: 1px solid var(--hot1); border-radius: 10px; box-shadow: var(--shadow); }
.ch-ted-in { width: 100%; min-height: 54px; resize: vertical; font: inherit; font-size: 14px; padding: 6px 8px; margin: 0; }
.ch-ted-bar { gap: 4px; flex-wrap: wrap; align-items: center; }
/* icons (icons.js): the tools' pictures, the indicators' thumbnails */
.ic { flex: 0 0 auto; vertical-align: middle; }
.ic-tool { width: 18px; height: 18px; }
.ic-tool path, .ic-tool rect, .ic-tool ellipse { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ic-tool circle { fill: currentColor; stroke: none; }
.ic-tool .ic-up { fill: rgba(46, 204, 135, 0.45); stroke: #2ecc87; stroke-width: 1; }
.ic-tool .ic-dn { fill: rgba(246, 84, 96, 0.45); stroke: #f65460; stroke-width: 1; }
.ic-tool .ic-dash { stroke-dasharray: 2 2; }
.ic-tool .ic-thin { stroke-width: 1; }
.ic-ind { width: 44px; height: 22px; border-radius: 4px; background: var(--bg1); border: 1px solid var(--line); }
.ic-ind .ic-price { fill: none; stroke: var(--muted); stroke-width: 0.8; opacity: 0.55; }
.ic-ind .ic-l { fill: none; stroke-width: 1.2; }
.ic-ind .ic-dash { stroke-dasharray: 2 1.5; }
.ic-ind .ic-band { fill: rgba(79, 195, 247, 0.16); stroke: none; }
.ic-ind .ic-hu { stroke: #2ecc87; stroke-width: 0.9; }
.ic-ind .ic-hd { stroke: #f65460; stroke-width: 0.9; }
.ic-ind .ic-dot { fill: #ffd84d; }
.ic-ind .ic-path { stroke: #ffd84d; }
.ic-ind .ic-mu { fill: #2ecc87; } .ic-ind .ic-md { fill: #f65460; }
.ic-ind .ic-bu { fill: rgba(46, 204, 135, 0.3); } .ic-ind .ic-bd { fill: rgba(246, 84, 96, 0.3); }
.ic-ind .ic-zone { fill: rgba(79, 195, 247, 0.12); stroke: rgba(79, 195, 247, 0.6); stroke-width: 0.8; }
.ic-ind .ic-txt { fill: var(--muted); font: bold 8px system-ui, sans-serif; }
.ic-ind .ic-poc { fill: none; stroke: #ffd84d; stroke-width: 0.8; }
.ch-ratio-row { gap: 6px; align-items: center; flex-wrap: wrap; }
/* 新手引导 (tour.js): the lit control and its bubble */
.tour-dim { position: fixed; z-index: 999; background: rgba(2, 4, 10, 0.74); pointer-events: none; }
.tour-hole { position: fixed; z-index: 1000; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 2px #ffd84d inset, 0 0 18px rgba(255, 216, 77, 0.35);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease; }
.tour-tip { position: fixed; z-index: 1001; padding: 12px 14px; border-radius: 14px; background: var(--bg1); border: 1px solid #ffd84d; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; transition: left 0.25s ease, top 0.25s ease; }
.tour-tip::before { content: ""; position: absolute; left: var(--arrow-x, 50%); width: 12px; height: 12px; margin-left: -6px; background: var(--bg1); transform: rotate(45deg); }
.tour-tip[data-side="below"]::before { top: -7px; border-top: 1px solid #ffd84d; border-left: 1px solid #ffd84d; }
.tour-tip[data-side="above"]::before { bottom: -7px; border-bottom: 1px solid #ffd84d; border-right: 1px solid #ffd84d; }
.tour-tip[data-side="over"]::before { display: none; }
.tour-try { color: #ffd84d; }
.tour-btns { gap: 6px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-tip { transition: none; } }
/* 市场全景 (pro_panel.js) */
.pro-card { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); gap: 6px; }
.pro-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; }
.pro-fng { gap: 12px; align-items: center; }
.pro-gauge { width: 110px; height: 58px; color: var(--text); }
.pro-big { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
/* the tape as tiles (two or more a row, as the side's width allows): name, price, change, the line under them */
.pro-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.pro-g { grid-column: 1 / -1; margin-top: 4px; }
.pro-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "p c" "s s"; gap: 0 6px; align-items: baseline;
  padding: 6px 8px; border-radius: 10px; background: var(--bg1); border: 1px solid var(--line); }
.pro-row > :nth-child(1) { grid-area: n; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro-row > :nth-child(2) { grid-area: p; text-align: start; }
.pro-row > :nth-child(3) { grid-area: c; }
.pro-row > :nth-child(4) { grid-area: s; width: 100%; margin-top: 2px; }
.pro-vrow { display: grid; grid-template-columns: minmax(0, 1.35fr) 1fr 0.9fr 1fr; gap: 6px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pro-vrow > :first-child { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pro-crow { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 0.8fr 0.9fr 56px; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--line); }
.pro-vhead { border-bottom: 1px solid var(--line); }
.pro-vrow .n, .pro-crow .n, .pro-row .n { text-align: end; font-variant-numeric: tabular-nums; }
.pro-spark { width: 84px; height: 22px; display: block; }
.pro-rank { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(246,84,96,0.5), rgba(160,170,190,0.4), rgba(46,204,135,0.5)); }
.pro-rank-dot { position: absolute; top: -3px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--text); }
/* 快讯 (news_panel.js) */
.nw-list { display: flex; flex-direction: column; }
.nw-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.nw-row:last-child { border-bottom: 0; }
.nw-title { color: var(--text); font-size: 13px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.nw-title:hover { text-decoration: underline; }
.nw-row .link { align-self: flex-start; }
.ch-ratio-in { width: 72px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); text-transform: uppercase; }
.ch-tgroup { display: inline-flex; align-items: center; }
.ch-tgroup > .ch-tg-main { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px 0 0 999px; }
.ch-tgroup .ch-tg-more { border-radius: 0 999px 999px 0; padding: 4px 8px 4px 6px; margin-left: -1px; list-style: none; }
.ch-tgroup .ch-tg-more::-webkit-details-marker { display: none; }
.ch-tgroup.on > .ch-tg-main, .ch-tgroup.on .ch-tg-more { border-color: var(--hot1); color: var(--hot1); }
.ch-tool-menu .ch-ctx-i { display: flex; align-items: center; gap: 8px; }
.ch-lib-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; }
.ch-ind .check { display: flex; align-items: center; gap: 6px; }
/* 市场气泡 (bubbles.js) */
.bb-stage { min-height: 320px; }
.bb-svg { width: 100%; height: auto; max-height: 76vh; display: block; }
.bb-node circle { stroke-width: 1; }
.bb-node circle.bb-up { stroke: rgba(46, 204, 135, 0.9); }
.bb-node circle.bb-dn { stroke: rgba(246, 84, 96, 0.9); }
.bb-node:hover circle { stroke-width: 2.5; }
.bb-sym { fill: var(--text); font-weight: 700; pointer-events: none; }
.bb-chg { fill: var(--text); opacity: 0.85; pointer-events: none; }
.bb-breadth { gap: 10px; align-items: center; }
.bb-bar { position: relative; height: 8px; min-width: 80px; border-radius: 4px; background: rgba(246, 84, 96, 0.55); overflow: hidden; }
.bb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(46, 204, 135, 0.8); }
/* 训练模式 / 条件回测 */
.ch-train, .ch-bt { border-color: rgba(79, 195, 247, 0.35); }
.ch-tr-in { width: 64px; padding: 3px 6px; }
.ch-tr-kv { grid-template-columns: auto 1fr auto 1fr; }
.ch-tr-pos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--panel2); }
.ch-tr-long { background: rgba(46, 204, 135, 0.18); border-color: #2ecc87; color: #2ecc87; }
.ch-tr-short { background: rgba(246, 84, 96, 0.16); border-color: #f65460; color: #ff9aa2; }
.bt-curve { width: 100%; height: 70px; }
.bt-curve polyline { fill: none; stroke-width: 1.6; }
.bt-curve polyline.up { stroke: #2ecc87; }
.bt-curve polyline.down { stroke: #f65460; }
.bt-curve .bt-base { stroke: var(--line); stroke-dasharray: 3 3; }
/* 宏观日历 (macro_panel.js) */
.mc-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; max-height: 340px; overflow-y: auto; }
.mc-day { padding: 4px 8px 2px; background: var(--panel2); }
.mc-row { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 6px; align-items: baseline; padding: 4px 8px; font-size: 12px; }
.mc-row.past { opacity: 0.55; }
.mc-time { font-variant-numeric: tabular-nums; }
.mc-imp { display: inline-flex; gap: 2px; align-self: center; }
.mc-imp i { width: 5px; height: 9px; border-radius: 1px; background: var(--line); }
.mc-imp i.on.i3 { background: #f65460; }
.mc-imp i.on.i2 { background: #ffa23d; }
.mc-imp i.on.i1 { background: #8a93a8; }
.mc-cc { font-size: 11px; }
.mc-title { min-width: 0; overflow-wrap: anywhere; }
.mc-left { white-space: nowrap; }
/* 提醒历史 */
.ch-al-hist { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: start; color: inherit; font: inherit; cursor: pointer; }
/* 盘口与资金 (flow_panel.js) */
.ch-flow .chips { gap: 4px; }
.fl-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.fl-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; padding: 3px 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.fl-row:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.fl-row .n { text-align: right; }
.fl-big { color: #ffd84d; }
.fl-imb { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.fl-bar { position: relative; height: 8px; border-radius: 4px; background: var(--panel2); overflow: hidden; }
.fl-bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted); }
.fl-bar i { position: absolute; top: 0; bottom: 0; }
.fl-bar i.up { background: rgba(46, 204, 135, 0.75); }
.fl-bar i.down { background: rgba(246, 84, 96, 0.75); }
.fl-pos { display: grid; grid-template-columns: 1fr auto 80px; gap: 2px 8px; align-items: center; }
.fl-pos > .tiny { grid-column: 1 / -1; margin-top: -2px; }
.fl-spark { width: 80px; height: 20px; }
.fl-spark polyline { fill: none; stroke: #4fc3f7; stroke-width: 1.4; }
.fl-oi { width: 100%; height: auto; max-height: 160px; }
.fl-oi .fl-c { fill: rgba(46, 204, 135, 0.8); }
.fl-oi .fl-p { fill: rgba(246, 84, 96, 0.8); }
.fl-oi .fl-axis { stroke: var(--line); stroke-width: 1; }
.fl-oi .fl-spot { stroke: var(--text); stroke-width: 1.2; }
.fl-oi .fl-pain { stroke: #ffd84d; stroke-width: 1.2; stroke-dasharray: 4 3; }
.fl-oi .fl-lab { fill: var(--muted); font-size: 9px; }
.ch-gauge { width: 120px; height: 66px; flex: 0 0 auto; color: var(--text); }
.ch-gauge path { fill: none; stroke-width: 9; }
.ch-gauge .g-dn { stroke: rgba(246, 84, 96, 0.75); }
.ch-gauge .g-mid { stroke: rgba(160, 170, 190, 0.45); }
.ch-gauge .g-up { stroke: rgba(46, 204, 135, 0.75); }
.ch-gauge .g-needle { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.ch-gauge .g-hub { fill: currentColor; }
/* the chart's own menu (right click) and the keys */
.ch-ctx { position: fixed; z-index: 60; min-width: 240px; max-width: 320px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 1px; }
.ch-ctx hr { width: 100%; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); margin: 3px 0; }
.ch-ctx-i { display: flex; gap: 12px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.ch-ctx-i:hover { background: var(--panel2); }
.ch-ctx kbd { font: 11px ui-monospace, monospace; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.ch-keys { max-height: 80vh; overflow-y: auto; cursor: default; }
.ch-cv { display: block; touch-action: none; outline: none; cursor: crosshair; }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ch-dot.on { background: var(--up); box-shadow: 0 0 6px var(--up); }
.ch-dot.retry { background: var(--warn); }
.ch-dot.poll { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.ch-side { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); gap: 8px; }
/* the side scrolls in its own box, as tall as the charts, and stays in view (the user, 2026-10-11: 右侧栏太长) */
@media (min-width: 1101px) {
  .ch-side { position: sticky; top: 64px; max-height: clamp(520px, calc(100vh - 250px), 1100px); overflow-y: auto; overscroll-behavior: contain; padding-top: 0; }
}
.ch-side-nav { position: sticky; top: 0; z-index: 3; margin: 0 -10px; padding: 8px 10px; background: var(--bg1); border-bottom: 1px solid var(--line); gap: 4px; }
.ch-side [data-sec] { scroll-margin-top: 52px; }
.ch-side h3 { margin: 6px 0 0; }
.ch-nest td, .ch-nest th { padding: 4px 6px; font-size: 12px; }
.ch-side .steps li { margin-bottom: 6px; }
.ch-side b.warn { color: var(--warn); } .ch-side b.faint { color: var(--muted); }
.ch-card:fullscreen { overflow: auto; background: var(--bg0); padding: 12px; }
.ch-card:fullscreen .ch-grid { height: calc(100vh - 200px); }
/* 价格提醒 and 保存布局 (2026-10-10) */
.ch-alerts { gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ch-alerts h3 { margin: 0; }
.ch-alerts .chipbtn.hot { border-color: #ffa23d; color: #ffa23d; }
/* 模拟交易 (paper_panel.js, 2026-10-12): the account, the order form from a drawn position, the orders */
.ch-paper { gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ch-paper h3 { margin: 0; }
.ch-pp-form { padding: 8px; border: 1px solid rgba(79, 195, 247, 0.5); border-radius: 10px; background: var(--panel); }
.ch-pp-form[hidden] { display: none; }
.ch-pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.ch-pp-grid label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.ch-pp-num, .ch-pp-noteIn { width: 100%; margin: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text);
  font-variant-numeric: tabular-nums; box-sizing: border-box; }
.ch-pp-noteIn { resize: vertical; font: inherit; font-size: 12px; }
.ch-pp-preview { margin: 4px 0; }
.ch-pp-row { padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ch-pp-row.live { padding-left: 6px; border-left: 2px solid var(--cool); }
.ch-pp-row .row { gap: 6px; align-items: baseline; }
.ch-pp-note { white-space: pre-wrap; }
/* 画线下单 (paper_dock.js, 2026-10-12): the floating panel over the charts, dragged by its grip */
.ch-shell { position: relative; }
.ch-dock { position: absolute; z-index: 30; width: min(430px, calc(100% - 16px)); display: flex; flex-direction: column; gap: 6px; padding: 8px 10px;
  border: 1px solid rgba(79, 195, 247, 0.45); border-radius: 12px; background: rgba(23, 29, 51, 0.96); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); }
.ch-dock[hidden], .ch-dock [hidden] { display: none; }
.ch-dock.min > :not(.ch-dock-head) { display: none; }
.ch-dock.min { width: auto; }
.ch-dock-head { display: flex; align-items: center; gap: 6px; }
.ch-dock-grip { cursor: grab; color: var(--faint); padding: 0 2px; user-select: none; touch-action: none; }
.ch-dock-acct, .ch-dock-lev { width: auto; flex: 0 1 auto; min-width: 0; margin: 0; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--text); font-size: 12px; }
.ch-dock-acct { max-width: 55%; }
.ch-dock-head b { white-space: nowrap; }
.ch-dock-help { color: var(--faint); cursor: help; }
.ch-dock-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.ch-dock-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-dock-sizebox { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 8px; background: #0c1120; border: 1px solid var(--line); }
.ch-dock-size { width: 54px; margin: 0; border: 0; background: none; color: var(--text); font-weight: 700; font-size: 15px; text-align: center; }
.ch-dock-btn { flex: 1 1 46px; padding: 7px 4px; border: 0; border-radius: 8px; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap; }
.ch-dock-btn.long { background: var(--up); }
.ch-dock-btn.short { background: var(--down); }
.ch-dock-btn.flat { background: #3a4566; color: var(--text); }
.ch-dock-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ch-dock-presets { display: flex; gap: 4px; }
.ch-dock-pre { flex: 1; padding: 3px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer; }
.ch-dock-pre.on { border-color: var(--cool); color: var(--cool); }
.ch-dock-lv { flex: 1 1 120px; min-width: 0; margin: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 12px; }
.ch-dock-out { color: var(--muted); }
/* the chips on an order's line on the chart: 平 / 反手 / 止损 / 止盈 / 撤单 */
.ch-pp-chips { position: absolute; z-index: 12; display: flex; gap: 3px; pointer-events: auto; }
.ch-pp-chip { padding: 1px 7px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; background: rgba(12, 17, 32, 0.9); color: var(--text);
  font-size: 11px; line-height: 18px; cursor: pointer; }
.ch-pp-chip:hover { border-color: var(--cool); }
.ch-pp-chip.sl { color: #f65460; }
.ch-pp-chip.tp { color: #2ecc87; }
/* 加仓 / 减仓 (§182): their chips, the share menu, a waiting one's bar, the panel's 持仓 */
.ch-pp-chip.add { color: #7fe3b6; }
.ch-pp-chip.cut { color: #ffd166; }
.ch-pp-chips.leg.add .ch-pp-chip { border-color: rgba(127, 227, 182, 0.55); }
.ch-pp-chips.leg.cut .ch-pp-chip { border-color: rgba(255, 209, 102, 0.55); }
.ch-pp-pop { position: fixed; z-index: 60; min-width: 220px; }
.ch-pp-pop-hint { margin: 4px 8px 2px; max-width: 260px; }
.ch-dock-pos { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.ch-dock-posrow { display: flex; flex-direction: column; gap: 3px; }
.ch-dock-posrow .row { gap: 6px; align-items: center; flex-wrap: wrap; }
.ch-dock-posrow b { font-variant-numeric: tabular-nums; }
.ch-dock-posbtns { gap: 3px; }
.ch-dock-mini { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 11px; cursor: pointer; }
.ch-dock-mini.add { color: #7fe3b6; }
.ch-dock-mini.cut { color: #ffd166; }
.ch-dock-mini.close { margin-left: auto; }
.ch-dock-mini:hover { border-color: var(--cool); }
/* 交易台 (§183): the panel's tabs, sizing mode, 参考止损 / 止损噪音, 止盈方案, 区间分批, 下单前体检, 风控护栏 */
.ch-dock-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ch-dock-tab { flex: 1; padding: 3px 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.ch-dock-tab.on { background: var(--panel2); color: var(--cool); font-weight: 700; }
.ch-dock-page { display: flex; flex-direction: column; gap: 6px; }
.ch-dock-seg { display: flex; gap: 4px; }
.ch-dock-segb { flex: 1; padding: 3px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer; }
.ch-dock-segb.on { border-color: var(--cool); color: var(--cool); }
.ch-dock-ideas { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ch-dock-noise.warn, .ch-dock-ck.warn { color: #ffb347; }
.ch-dock-tpl { flex: 1 1 auto; min-width: 0; margin: 0; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-size: 12px; }
.ch-dock-tpledit { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px dashed var(--line); border-radius: 8px; }
.ch-dock-lv.mini { flex: 0 1 64px; width: 64px; padding: 3px 6px; }
.ch-dock-check { display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 8px; background: rgba(12, 17, 32, 0.6); }
.ch-dock-check[hidden] { display: none; }
.ch-dock-ck.info { color: var(--muted); }
.ch-dock-mini.on { border-color: var(--cool); color: var(--cool); }
.ch-dock-mini.even { color: #f65460; }
.ch-dock-guard { display: flex; flex-direction: column; gap: 4px; }
.ch-dock-guard hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.ch-dock-guard .warn { color: #ffb347; }
.ch-dock { max-height: calc(100% - 16px); overflow-y: auto; }
/* the side's 记录 / 复盘 / 全部持仓 */
.ch-pp-tabs { gap: 4px; }
.ch-pp-detail { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 6px; border-radius: 8px; background: rgba(12, 17, 32, 0.5); }
.ch-pp-detail .row { gap: 8px; }
.ch-pp-rv { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.ch-pp-warn { padding: 8px; border: 1px solid rgba(255, 179, 71, 0.45); border-radius: 10px; }
.ch-pp-warn .warn { color: #ffb347; }
.pl-paper { margin-top: 6px; }
/* a phone: the panel a sheet at the bottom of the screen, scrolled inside */
@media (max-width: 700px) {
  .ch-dock { position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 62vh; border-radius: 14px 14px 0 0; background: #171d33; }
  .ch-dock.min { width: auto; left: auto !important; right: 8px; bottom: 8px; border-radius: 12px; }
  .ch-dock-grip { display: none; }
  .ch-pp-pop { min-width: 0; max-width: calc(100vw - 16px); }
  .ch-pp-chips { flex-wrap: wrap; max-width: 60vw; }
}
.ch-al-card { gap: 6px; padding: 10px; border-color: rgba(255, 162, 61, 0.45); }
.ch-al-card input[type="text"], .ch-menu-body input[type="text"] { margin: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); min-width: 0; }
.ch-al-card input.ch-al-px { flex: 1 1 120px; font-variant-numeric: tabular-nums; }
.ch-al-card select { padding: 3px 6px; }
.ch-al-list { gap: 6px; }
.ch-al-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.ch-al-row.on { border-color: rgba(255, 162, 61, 0.55); }
.ch-al-row.off, .ch-al-row.expired { opacity: 0.6; }
.ch-al-row .row { gap: 8px; align-items: center; flex-wrap: wrap; }
.ch-al-go { display: block; padding: 0; border: 0; background: none; color: var(--text); text-align: start; cursor: pointer; font: inherit; }
.ch-al-go:hover b { color: #ffa23d; }
.ch-rings { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid #ffa23d; border-radius: 12px; background: rgba(255, 162, 61, 0.12); }
.ch-rings[hidden] { display: none; }
.ch-ring { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.ch-rings > .btn { align-self: flex-end; }
.ch-lay-row { gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
/* 指标提醒: the research colour of a condition (passed / failed / untested), as the chart's marks */
.ch-al-card select.ch-sig-sel { max-width: 220px; }
.ch-al-card input.ch-al-n { width: 52px; flex: 0 0 auto; }
.ch-sig-st { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); }
.ch-sig-st.pass { border-color: var(--up); color: var(--up); }
.ch-sig-st.fail { color: var(--muted); }
.ch-sig-st.none { color: var(--faint); }
.ch-sig-dot { display: inline-block; width: 8px; height: 8px; margin-inline-start: 6px; border-radius: 50%; background: var(--faint); vertical-align: middle; }
.ch-sig-dot.pass { background: var(--up); }
.ch-sig-dot.fail { background: rgba(160, 170, 190, 0.55); }
.ch-menu-body .row { gap: 6px; align-items: center; }
@media (max-width: 1100px) { .ch-shell { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ch-grid, .ch-grid.n1 { height: auto; grid-auto-rows: 460px; } /* a phone: the charts one under another */
  .ch-symbox input.ch-sym { width: 96px; }
}