/* ============ Tun Bot — hệ thiết kế: xanh biển + đen, dark/light ============ */
/* Montserrat (SIL OFL 1.1) tự lưu trong chương trình — không gọi Google lúc chạy. Font biến thiên 400–800. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/montserrat-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --nav-w: 252px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ocean: linear-gradient(135deg, #0b5fff 0%, #0a8bf0 55%, #00c2ff 100%);

  /* Light */
  --bg: #e6effa;
  --bg-glow: radial-gradient(1000px 480px at 82% -10%, rgba(0,150,255,.26), transparent 62%),
             radial-gradient(760px 420px at -6% 2%, rgba(11,95,255,.14), transparent 60%),
             radial-gradient(900px 500px at 50% 118%, rgba(0,170,230,.14), transparent 62%);
  --surface: #ffffff; --surface-2: #f4f8fd; --surface-3: #e7eff9;
  --line: #d8e3f1; --line-strong: #bfd0e6;
  --text: #09142a; --text-2: #34486a; --muted: #586d8c;
  --brand: #0a64e8; --brand-2: #0095d9; --brand-weak: rgba(10,100,232,.10); --brand-ink: #fff;
  --up: #0c8f50; --up-weak: rgba(12,143,80,.12);
  --down: #d93a45; --down-weak: rgba(217,58,69,.11);
  --warn: #b87500; --warn-weak: rgba(217,138,0,.14);
  --nav-bg: radial-gradient(240px 260px at 0% 0%, rgba(0,120,255,.26), transparent 70%), linear-gradient(180deg, #040a16 0%, #061226 100%);
  --nav-text: #cddcf2; --nav-muted: #7d93b6; --nav-hover: rgba(80,160,255,.10); --nav-active: rgba(31,143,255,.20);
  --shadow: 0 1px 2px rgba(9,20,42,.05), 0 10px 30px -12px rgba(9,40,90,.16);
  --glow: 0 0 0 1px rgba(10,100,232,.18), 0 18px 50px -18px rgba(0,120,255,.40);
  --chart-grid: rgba(9,20,42,.07); --chart-text: #586d8c; --chart-ema1: #0a64e8; --chart-ema2: #d98a00;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #030813;
  --bg-glow: radial-gradient(1100px 560px at 82% -14%, rgba(0,128,255,.38), transparent 62%),
             radial-gradient(820px 470px at -8% 4%, rgba(0,196,230,.16), transparent 60%),
             radial-gradient(1000px 640px at 55% 120%, rgba(8,70,190,.24), transparent 62%);
  --surface: #071326; --surface-2: #0b1b34; --surface-3: #112848;
  --line: #12294a; --line-strong: #1d3e6c;
  --text: #e8effb; --text-2: #b6c6e0; --muted: #8196b8;
  --brand: #2f9fff; --brand-2: #22d3ff; --brand-weak: rgba(47,159,255,.15); --brand-ink: #03101f;
  --up: #2bcb8a; --up-weak: rgba(43,203,138,.14);
  --down: #ff6372; --down-weak: rgba(255,99,114,.14);
  --warn: #f0b429; --warn-weak: rgba(240,180,41,.14);
  --nav-bg: radial-gradient(240px 260px at 0% 0%, rgba(0,120,255,.22), transparent 70%), linear-gradient(180deg, #02060f 0%, #030a16 100%);
  --nav-muted: #6f86ab;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.6);
  --glow: 0 0 0 1px rgba(47,159,255,.25), 0 20px 60px -20px rgba(0,140,255,.5);
  --chart-grid: rgba(150,180,230,.08); --chart-text: #8196b8; --chart-ema1: #2f9fff; --chart-ema2: #f0b429;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 14.5px/1.55 var(--font); color: var(--text);
  background-color: var(--bg); background-image: var(--bg-glow); background-repeat: no-repeat; background-attachment: fixed;
  min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--brand); }
button, input, select { font: inherit; color: inherit; }
.num, .tbl td.r, .kpi .v, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--warn); } .brand { color: var(--brand); }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------ Khung ứng dụng ------------------------------ */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100dvh; }
.nav {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px 16px; background: var(--nav-bg); color: var(--nav-text);
  border-right: 1px solid rgba(80,140,255,.10);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.brand svg { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 6px 14px rgba(0,140,255,.45)); }
.brand b { display: block; font-size: 18px; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
.brand small { color: var(--nav-muted); font-size: 12px; }
.nav a.item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--nav-text);
  text-decoration: none; font-weight: 520; transition: background .15s, color .15s;
}
.nav a.item:hover { background: var(--nav-hover); }
.nav a.item[aria-current="page"] { background: var(--nav-active); color: #fff; box-shadow: inset 0 0 0 1px rgba(60,160,255,.28); }
.nav a.item[aria-current="page"] svg { color: #4db4ff; }
.nav .spacer { flex: 1; }
.nav .foot { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(80,140,255,.12); }
.nav .foot .row { display: flex; gap: 8px; }
.iconbtn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); transition: background .15s, transform .1s;
}
.iconbtn:hover { background: var(--surface-2); } .iconbtn:active { transform: scale(.96); }
.nav .iconbtn { background: rgba(255,255,255,.04); border-color: rgba(120,170,255,.16); color: var(--nav-text); }
.nav .iconbtn:hover { background: rgba(255,255,255,.09); }
.nav .grow { flex: 1; width: auto; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 20px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .mbrand { display: none; align-items: center; gap: 10px; font-weight: 700; }
.topbar .mbrand svg { width: 30px; height: 30px; }
/* Thanh "đang quét ngầm" ở đầu mọi trang */
.scanbar { display: flex; align-items: flex-start; gap: 12px; padding: 10px 28px; background: var(--brand-weak); border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); font-size: 13px; }
.scanbar.hide { display: none; }
.scanbar .sb-dot { padding-top: 5px; }
.scanbar .sb-dot .dot { display: block; } /* span mặc định inline nên không có kích thước — chấm nhấp nháy trước đây không hiện */
.scanbar .sb-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.scanbar .sb-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scanbar .progress { height: 6px; }
.scanbar .sb-sub { color: var(--text-2); line-height: 1.45; word-break: break-word; }
.scanbar .btn { flex: none; }
@media (max-width: 760px) { .scanbar { padding: 10px 16px; } }
/* Nguồn cấp kết quả quét trực tiếp: mỗi cặp xong là một chip */
.sb-feed { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; font-size: 12px; }
.fchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.fchip small { font-weight: 500; opacity: .75; }
.fchip.ok { color: var(--up); background: var(--up-weak); border-color: transparent; }
.fchip.no { color: var(--muted); }
.fchip.nd { opacity: .6; }
@media (max-width: 760px) { .sb-feed .fchip:nth-child(n+7) { display: none; } }
/* Một dòng gọn khi không quét: bot còn sống, vừa làm gì, lần kế tiếp lúc nào */
.scanbar.quiet { align-items: center; padding: 7px 28px; background: transparent; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.scanbar.quiet .sb-dot { padding-top: 0; }
.scanbar.quiet .sb-main { display: block; }
.scanbar .dot { color: var(--brand); }
.scanbar .dot.ok { color: var(--up); }
@media (max-width: 760px) { .scanbar.quiet { padding: 7px 16px; } .scanbar.quiet .act-syms { display: none; } }
.page { width: 100%; max-width: 1320px; margin: 0 auto; padding: 24px 28px 48px; display: grid; gap: 18px; align-content: start; }
.tabbar { display: none; }

/* ------------------------------ Thành phần ------------------------------ */
.card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 62%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line)); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px; min-width: 0; }
.card.flat { box-shadow: none; }
.card.hero { box-shadow: var(--glow); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); position: relative; overflow: hidden; }
.card.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ocean); }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-h h2 { font-size: 15.5px; flex: 1; min-width: 0; }
.card-h .sub { color: var(--muted); font-size: 13px; }
.grid { display: grid; gap: 18px; }
.g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: grid; gap: 12px; } .stack-lg { display: grid; gap: 18px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.sb { justify-content: space-between; }

.kpi { display: grid; gap: 4px; }
.kpi .l { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 680; letter-spacing: -.02em; line-height: 1.15; }
.kpi .s { color: var(--muted); font-size: 12.5px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.35; background: var(--surface-3); color: var(--text-2); max-width: 100%; white-space: normal; }
.chip.up { background: var(--up-weak); color: var(--up); } .chip.down { background: var(--down-weak); color: var(--down); }
.chip.brand { background: var(--brand-weak); color: var(--brand); } .chip.warn { background: var(--warn-weak); color: var(--warn); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dot.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s, opacity .15s; min-height: 42px; text-decoration: none;
}
.btn:hover { background: var(--surface-2); } .btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ocean); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -8px rgba(0,120,255,.7); }
.btn.primary:hover { filter: brightness(1.07); background: var(--ocean); }
.btn.danger { background: var(--down-weak); color: var(--down); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--down) 20%, transparent); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 12px; min-height: 34px; font-size: 13.5px; border-radius: 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-3); border-radius: 12px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 600; color: var(--text-2); cursor: pointer; min-height: 34px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow); }

.field { display: grid; gap: 6px; align-content: start; }
.field .seg { justify-self: start; } .field > label, .lbl { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, select.input {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); min-height: 42px;
}
.input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); background: var(--surface); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .2s; }
.switch input:checked + i { background: var(--ocean); } .switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.setting:first-child { border-top: 0; padding-top: 0; }
.setting .t { font-weight: 600; } .setting .d { color: var(--muted); font-size: 13px; margin-top: 2px; }

.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--brand-weak); color: var(--text); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); font-size: 14px; }
.callout.warn { background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.callout.down { background: var(--down-weak); border-color: color-mix(in srgb, var(--down) 35%, transparent); }
.callout.up { background: var(--up-weak); border-color: color-mix(in srgb, var(--up) 35%, transparent); }
.callout svg { margin-top: 1px; } .callout b { font-weight: 650; }

/* Bảng */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r, .tbl th.r { text-align: right; }
.tbl.nf td:first-child, .tbl.nf th:first-child { white-space: nowrap; }
.tbl td.wrap { min-width: 220px; color: var(--text-2); }
.tbl tr.has-tried > td { border-bottom: 0; padding-bottom: 4px; }
.tbl tr.tried > td { padding-top: 0; padding-bottom: 12px; white-space: normal; }
.tbl tr.tried > td > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 760px; }
.tbl.nf tr.tried > td:first-child { white-space: normal; }
.tbl tr.tried .chip { font-size: 11.5px; padding: 2px 8px; }
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }

/* Verdict AI */
.verdict { display: grid; gap: 16px; }
.vhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vbadge { font-size: 22px; font-weight: 750; letter-spacing: .02em; padding: 10px 18px; border-radius: 14px; background: var(--brand-weak); color: var(--brand); line-height: 1; }
.vbadge.long { background: var(--up-weak); color: var(--up); } .vbadge.short { background: var(--down-weak); color: var(--down); }
.vreason { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.meter { display: grid; gap: 6px; }
.meter .top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.meter .top b { font-weight: 600; } .meter .top span { color: var(--muted); }
.track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: visible; }
.track .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ocean); min-width: 4px; transition: width .4s; }
.track .fill.up { background: var(--up); } .track .fill.down { background: var(--down); }
.track .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 2px; opacity: .65; }
.track .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--muted); opacity: .6; }
.track.div .fill { background: var(--up); }
.mlabels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

.drivers { display: grid; gap: 10px; }
.drv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13.5px; }
.drv .n { color: var(--text-2); min-width: 0; }
.drv .bar { position: relative; height: 12px; background: var(--surface-3); border-radius: 6px; }
.drv .bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); opacity: .7; }
.drv .bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.drv .bar i.up { left: 50%; background: var(--up); } .drv .bar i.down { right: 50%; background: var(--down); }

.kv { display: grid; gap: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kv > div:first-child { border-top: 0; } .kv span:first-child { color: var(--muted); flex: none; white-space: nowrap; } .kv span:last-child { text-align: right; font-weight: 550; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; cursor: pointer; font-size: 13.5px; color: var(--text-2); }
.tab[aria-pressed="true"] { background: var(--ocean); color: #fff; border-color: transparent; }

.chart { position: relative; width: 100%; height: 360px; }
.chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.chart .tip { position: absolute; pointer-events: none; z-index: 2; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow); white-space: nowrap; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.logs { display: grid; gap: 2px; max-height: 420px; overflow: auto; font-size: 13px; }
.logline { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: 8px; }
.logline:hover { background: var(--surface-2); }
.logline .t { color: var(--muted); font-family: var(--mono); font-size: 12px; padding-top: 1px; }
.logline.ai .m { color: var(--text); } .logline.order .m { color: var(--brand); font-weight: 560; }
.logline.warn .m { color: var(--warn); } .logline.error .m { color: var(--down); font-weight: 560; } .logline.info .m { color: var(--text-2); }
.logline .m { overflow-wrap: anywhere; }

.skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 10px; min-height: 18px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Toast + modal */
#toasts { position: fixed; z-index: 100; right: 18px; bottom: calc(18px + var(--safe-b)); display: grid; gap: 10px; max-width: min(420px, calc(100vw - 36px)); }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow), 0 20px 40px -20px rgba(0,0,0,.5); font-size: 14px; animation: rise .25s ease-out; border-left: 4px solid var(--brand); }
.toast.ok { border-left-color: var(--up); } .toast.err { border-left-color: var(--down); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-bg { position: fixed; inset: 0; z-index: 90; background: rgba(2,6,14,.62); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 18px; }
.modal { width: min(520px, 100%); max-height: calc(100dvh - 36px); overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 20px; padding: 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); display: grid; gap: 14px; animation: rise .2s ease-out; }
.modal h3 { font-size: 18px; }

/* Đăng nhập / thiết lập */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth .box { width: min(440px, 100%); display: grid; gap: 18px; }
.auth .logo { display: grid; justify-items: center; gap: 10px; text-align: center; }
.auth .logo svg { width: 64px; height: 64px; filter: drop-shadow(0 12px 28px rgba(0,140,255,.55)); }
.auth .logo h1 { font-size: 28px; letter-spacing: -.03em; } .auth .logo p { color: var(--muted); }
.err { color: var(--down); font-size: 13.5px; min-height: 20px; }

.steps { counter-reset: s; display: grid; gap: 18px; }
.step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step-h .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ocean); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.step-h h2 { font-size: 16.5px; }
.chips-in { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: 12px; min-height: 46px; align-items: center; }
.chips-in input { flex: 1; min-width: 110px; border: 0; background: transparent; padding: 4px; outline: none; }
.chips-in .chip button { all: unset; cursor: pointer; padding: 0 2px; opacity: .7; } .chips-in .chip button:hover { opacity: 1; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.pos-grid .l { color: var(--muted); font-size: 12.5px; } .pos-grid .v { font-weight: 650; font-size: 16px; }
details.expl summary { cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; display: flex; align-items: center; gap: 8px; }
details.expl summary::-webkit-details-marker { display: none; }
details.expl ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); font-size: 14px; }

/* ------------------------------ Cặp & tín hiệu (dễ đọc) ------------------------------ */
.cellstack { display: grid; gap: 2px; justify-items: start; min-width: 0; } .cellstack.r { justify-items: end; }
.cellstack small { font-size: 12px; line-height: 1.35; }
.sig { display: grid; gap: 4px; min-width: 150px; max-width: 320px; } .sig small { font-size: 12px; line-height: 1.4; }
.edge { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .edge i { display: block; height: 100%; background: var(--ocean); transition: width .3s; }
.when { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--text-2); } .when b { color: var(--text); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: 13px; }
.chk.ok { color: var(--up); font-weight: 600; } .chk.no { color: var(--down); font-weight: 600; }
.tbl tr.cash td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pick { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pick-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pick-name { display: flex; align-items: center; gap: 8px; font-size: 16px; flex-wrap: wrap; }
.pick-cap { text-align: right; display: grid; line-height: 1.25; } .pick-cap small { color: var(--muted); font-size: 12px; }
.pick-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pick .kv > div { padding: 7px 0; font-size: 13.5px; }
.kv.wrapkv > div { flex-wrap: wrap; gap: 4px 16px; } .kv.wrapkv span:first-child { white-space: normal; } .kv.wrapkv span:last-child { margin-left: auto; }
.pick .kv span:first-child { white-space: normal; }
.pick .kv .sigrow { align-items: flex-start; } .pick .kv .sigrow .sig { min-width: 0; max-width: none; justify-items: end; text-align: right; } .pick .kv .sigrow .edge { width: 160px; }
details.tried summary, details.more summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 13px; list-style: none; }
details.tried summary::-webkit-details-marker, details.more summary::-webkit-details-marker { display: none; }
details.tried summary::before, details.more summary::before { content: "▸ "; } details.tried[open] summary::before, details.more[open] summary::before { content: "▾ "; }
details.tried .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } details.tried .chip { font-size: 11.5px; padding: 2px 8px; }
details.adv > summary .sub-note { margin-left: 6px; font-weight: 500; }

.tbl.proj { table-layout: fixed; }
.tbl.proj th:first-child { width: 46%; } .tbl.proj th:not(:first-child) { width: 18%; }

/* Bảng thành thẻ trên màn hình hẹp: mỗi hàng một thẻ, nhãn cột hiện bên trái, không phải kéo ngang */
@media (max-width: 760px) {
  .tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td { display: block; width: 100%; }
  .tbl.cards thead { display: none; }
  .tbl.cards tr { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
  .tbl.cards td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; border: 0; padding: 6px 0; text-align: right; white-space: normal !important; }
  .tbl.cards td::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12.5px; text-align: left; flex: none; max-width: 42%; }
  .tbl.cards td[colspan]::before { content: none; }
  .tbl.cards td .cellstack, .tbl.cards td .sig { justify-items: end; text-align: right; }
  .tbl.cards .scroll-x { overflow: visible; }
  .sig { max-width: none; min-width: 0; }
  .picks { grid-template-columns: 1fr; }

  /* Tổng quan: mỗi cặp một thẻ gọn — tên + trạng thái ở dòng đầu, rồi vốn, tín hiệu, lần xét tiếp */
  .tbl.cards.live tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; }
  .tbl.cards.live td { display: block; padding: 0; text-align: left; }
  .tbl.cards.live td::before { content: none; }
  .tbl.cards.live td.c-name { grid-column: 1; grid-row: 1; }
  .tbl.cards.live td.c-st { grid-column: 2; grid-row: 1; justify-self: end; }
  .tbl.cards.live td.c-cap, .tbl.cards.live td.c-next { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  .tbl.cards.live td.c-cap::before, .tbl.cards.live td.c-next::before { content: attr(data-label); display: block; flex: none; min-width: 92px; max-width: none; }
  .tbl.cards.live td.c-cap .cellstack, .tbl.cards.live td.c-next .cellstack { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; justify-items: start; }
  .tbl.cards.live td.c-sig, .tbl.cards.live td.c-wide { grid-column: 1 / -1; }
  .tbl.cards.live td.c-sig .sig { justify-items: start; text-align: left; }
  .tbl.cards.live tr.cash td.c-name { grid-row: auto; }

  /* Tổng quan: tên cặp + backtest nằm bên trái như các dòng khác, không bị đẩy sang phải */
  .tbl.cards.live td.c-name .cellstack { justify-items: start; text-align: left; }

  /* Vị thế đang mở: tên + chiều; rồi 3 số; rồi 3 số */
  .tbl.cards.positions tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
  .tbl.cards.positions td { display: block; padding: 0; text-align: left; }
  .tbl.cards.positions td::before { display: block; content: attr(data-label); max-width: none; font-size: 11.5px; margin-bottom: 1px; }
  .tbl.cards.positions td.p-name { grid-column: 1 / 3; } .tbl.cards.positions td.p-side { grid-column: 3; justify-self: end; text-align: right; }
  .tbl.cards.positions td.p-name::before, .tbl.cards.positions td.p-side::before { content: none; }
  .tbl.cards.positions td.r { text-align: left; }

  /* Lãi/lỗ dự tính: kịch bản (cả dòng), rồi 3 số mỗi ngày/tuần/tháng */
  .tbl.cards.proj tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
  .tbl.cards.proj td { display: block; padding: 0; text-align: left; }
  .tbl.cards.proj td::before { display: block; content: attr(data-label); max-width: none; font-size: 11.5px; margin-bottom: 1px; }
  .tbl.cards.proj td.pj-name { grid-column: 1 / -1; } .tbl.cards.proj td.pj-name::before { content: none; }
  .tbl.cards.proj td.r { text-align: left; }

  /* Lãi/lỗ hàng ngày: ngày + đã chốt; rồi %, lệnh đóng, thắng; rồi phí, vốn cuối ngày */
  .tbl.cards.days tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
  .tbl.cards.days td { display: block; padding: 0; text-align: left; }
  .tbl.cards.days td::before { display: block; content: attr(data-label); max-width: none; font-size: 11.5px; margin-bottom: 1px; }
  .tbl.cards.days td.d-date { grid-column: 1 / 3; } .tbl.cards.days td.d-net { grid-column: 3; text-align: right; }
  .tbl.cards.days td.d-date::before { content: none; }
  .tbl.cards.days td.r { text-align: left; } .tbl.cards.days td.d-net { text-align: right; }

  /* Lịch sử lệnh: mỗi lệnh một thẻ — cặp + hành động; thời gian + chế độ; 4 con số; lý do */
  .tbl.cards.trades tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 10px; }
  .tbl.cards.trades td { display: block; padding: 0; text-align: left; }
  .tbl.cards.trades td::before { display: block; content: attr(data-label); max-width: none; font-size: 11.5px; margin-bottom: 1px; }
  .tbl.cards.trades td.t-sym::before, .tbl.cards.trades td.t-act::before, .tbl.cards.trades td.t-time::before, .tbl.cards.trades td.t-mode::before, .tbl.cards.trades td.t-why::before { content: none; }
  .tbl.cards.trades td.t-sym { grid-column: 1 / 3; grid-row: 1; font-size: 15px; }
  .tbl.cards.trades td.t-act { grid-column: 3 / 5; grid-row: 1; justify-self: end; text-align: right; }
  .tbl.cards.trades td.t-time { grid-column: 1 / 3; grid-row: 2; font-size: 12px; color: var(--muted); }
  .tbl.cards.trades td.t-mode { grid-column: 3 / 5; grid-row: 2; justify-self: end; }
  .tbl.cards.trades td.r { text-align: left; }
  .tbl.cards.trades td.t-why { grid-column: 1 / -1; font-size: 13px; color: var(--muted); padding-top: 2px; border-top: 1px dashed var(--line); }

  /* Danh sách cặp đã quét: 2 dòng mỗi cặp (tên + kết quả; rồi 3 con số) thay vì 5 dòng nhãn */
  .tbl.cards.pairs tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
  .tbl.cards.pairs td { display: block; padding: 0; text-align: left; }
  .tbl.cards.pairs td::before { display: block; content: attr(data-label); max-width: none; font-size: 11.5px; margin-bottom: 1px; }
  .tbl.cards.pairs td.c-name { grid-column: 1 / 3; } .tbl.cards.pairs td.c-res { grid-column: 3; text-align: right; }
  .tbl.cards.pairs td.c-name::before, .tbl.cards.pairs td.c-res::before { content: none; }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1180px) {
  .g-main { grid-template-columns: minmax(0, 1fr); }
  .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
  .topbar { padding: 10px 16px; } .topbar h1 { display: none; } .topbar .mbrand { display: flex; flex: 1; }
  .page { padding: 16px 16px calc(92px + var(--safe-b)); gap: 14px; }
  .card { padding: 16px; border-radius: 16px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 30; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b));
    background: var(--nav-bg); border: 1px solid rgba(90,150,255,.22); border-radius: 22px; padding: 6px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.65);
  }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 8px 2px; border-radius: 16px; color: var(--nav-muted); text-decoration: none; font-size: 11px; font-weight: 600; min-width: 0; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a[aria-current="page"] { background: var(--nav-active); color: #fff; } .tabbar a[aria-current="page"] svg { color: #4db4ff; }
  .chart { height: 280px; }
  .kpi .v { font-size: 22px; }
  .g-2, .g-3, .fgrid { grid-template-columns: minmax(0, 1fr); }
  #toasts { left: 16px; right: 16px; bottom: calc(96px + var(--safe-b)); max-width: none; }
  .vbadge { font-size: 19px; }
}
@media (max-width: 420px) {
  .g-kpi { gap: 10px; } .g-kpi .card { padding: 14px; }
  .kpi .v { font-size: 20px; }
  .drv { grid-template-columns: 1fr; gap: 6px; }
  .logline { grid-template-columns: 52px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===================== Ocean polish: hero, bộ não AI, gauge ===================== */
.heropanel {
  position: relative; overflow: hidden; border-radius: 26px; padding: 28px 30px 26px; color: #fff; display: grid; gap: 24px;
  background: radial-gradient(760px 280px at 88% -30%, rgba(0,225,255,.55), transparent 62%),
              radial-gradient(520px 240px at 0% 120%, rgba(0,60,200,.55), transparent 70%),
              linear-gradient(118deg, #031a50 0%, #0842bb 46%, #0b91e3 100%);
  box-shadow: 0 34px 80px -30px rgba(0,110,255,.7), inset 0 0 0 1px rgba(255,255,255,.12);
}
.heropanel .waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; pointer-events: none; }
.hp-top { position: relative; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.hp-label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; opacity: .82; }
.hp-big { font-size: 52px; font-weight: 780; letter-spacing: -.035em; line-height: 1.04; margin-top: 8px; font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0,30,120,.4); }
.hp-big small { font-size: 17px; font-weight: 600; opacity: .75; letter-spacing: 0; }
.hp-pnl { margin-top: 8px; font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }
.heropanel .up { color: #86ffc9; } .heropanel .down { color: #ffa3ad; }
.hp-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.heropanel .chip { background: rgba(255,255,255,.15); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.heropanel .chip .dot { background: #7dffc3; }
.hp-stats { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hp-stat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.17); border-radius: 18px; padding: 13px 16px; backdrop-filter: blur(10px); }
.hp-stat .l { font-size: 12.5px; opacity: .8; }
.hp-stat .v { font-size: 20px; font-weight: 720; margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.brainstrip { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--brand) 15%, var(--surface)), var(--surface) 70%); }
.brainstrip .ico, .ico-b { width: 46px; height: 46px; border-radius: 15px; background: var(--ocean); display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 12px 26px -10px rgba(0,120,255,.85); }
.brainstrip .ico svg, .ico-b svg { width: 24px; height: 24px; }
.brainstrip .t { min-width: 0; } .brainstrip b { display: block; font-size: 15.5px; }
.brainstrip .d { color: var(--text-2); font-size: 14px; }
.brainstrip .btn { margin-left: auto; flex: none; }

.steps-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sr-item { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.sr-item .b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--surface-3); color: var(--text-2); }
.sr-item.done { background: var(--up-weak); color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.sr-item.done .b { background: var(--up); color: #fff; }
.sr-item .b svg { width: 14px; height: 14px; stroke-width: 3; }

.gauge { display: grid; justify-items: center; gap: 2px; }
.gauge svg { width: 100%; max-width: 200px; overflow: visible; }
.gauge .gt { font-size: 13px; color: var(--muted); text-align: center; }
.vgrid { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 20px; align-items: center; }

.pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pstep { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 13px; display: grid; gap: 7px; align-content: start; }
.pstep .n { width: 26px; height: 26px; border-radius: 50%; background: var(--ocean); color: #fff; font-size: 12.5px; font-weight: 750; display: grid; place-items: center; }
.pstep b { font-size: 14px; line-height: 1.25; } .pstep span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pstep:not(:last-child)::after { content: "›"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: var(--brand); font-size: 24px; font-weight: 700; z-index: 1; }

.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.need { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.need h3 { font-size: 14.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.need li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.need li svg { margin-top: 2px; width: 18px; height: 18px; }
.need li.yes svg { color: var(--up); } .need li.no svg { color: var(--down); }
.need li b { color: var(--text); font-weight: 620; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--brand); font-weight: 700; margin-bottom: 6px; }
.lead { font-size: 15px; color: var(--text-2); line-height: 1.6; }
.lead b { color: var(--text); }

@media (max-width: 1180px) { .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pstep:nth-child(3n)::after { display: none; } }
@media (max-width: 860px) {
  .heropanel { padding: 22px 20px 20px; border-radius: 22px; gap: 18px; }
  .hp-big { font-size: 40px; } .hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-chips { justify-content: flex-start; }
  .brainstrip { flex-wrap: wrap; } .brainstrip .btn { margin-left: 0; width: 100%; }
  .need, .specs { grid-template-columns: minmax(0, 1fr); } .vgrid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px; }
}
@media (max-width: 560px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pstep::after { display: none; } .hp-stat .v { font-size: 17px; } }

.progress { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ocean); transition: width .3s; }
.hist { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; align-items: end; height: 150px; }
.hist i { display: block; border-radius: 4px 4px 0 0; min-height: 2px; }
.hist i.up { background: var(--up); } .hist i.down { background: var(--down); }
.bigstat .v { font-size: 30px; line-height: 1.15; }
.bigstat .v br + span { display: inline-block; margin-top: 4px; }

.sec-banner { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 9px 16px; background: var(--down-weak); color: var(--down); font-size: 13px; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--down) 35%, transparent); text-align: left; }
.sec-banner svg { flex: none; }
.auth .sec-banner { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--down) 35%, transparent); }

/* ===================== Dấu ? chú thích, ô nhập đơn vị, cài đặt nâng cao ===================== */
.help { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--brand); background: var(--brand-weak); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); cursor: help; vertical-align: 1px; user-select: none; flex: none; }
.help:hover, .help:focus-visible { background: var(--brand); color: var(--brand-ink); }
.heropanel .help { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
#tip { position: fixed; z-index: 200; max-width: min(320px, calc(100vw - 16px)); padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; font-weight: 500;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow), 0 18px 40px -16px rgba(0,0,0,.55); pointer-events: none; }
#tip[hidden] { display: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.inwrap { position: relative; } .inwrap .input { padding-right: 56px; }
.inwrap .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
details.adv { padding: 0; } details.adv > summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 650; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: "▸"; color: var(--brand); transition: transform .15s; } details.adv[open] > summary::before { transform: rotate(90deg); }
details.adv > .adv-body { padding: 0 22px 22px; display: grid; gap: 16px; }
.sub-note { color: var(--muted); font-size: 12.5px; }
.hp-sub { margin-top: 6px; font-size: 13px; opacity: .8; font-variant-numeric: tabular-nums; }
.tbl .help { margin-left: 3px; }
@media (max-width: 860px) { .tabbar { grid-template-columns: repeat(5, 1fr); } details.adv > summary { padding: 16px; } details.adv > .adv-body { padding: 0 16px 18px; } }