:root {
  --bg: #eef1f4;
  --panel: #ffffff;
  --ink: #18222e;
  --muted: #5f6b7a;
  --line: #d5dbe2;
  --honey: #c9860f;
  --honey-soft: #fbefd6;
  --gain: #17845a;
  --loss: #c23b33;
  --signal: #2f5fd0;
  --signal-soft: #e3eafb;
  --up: #17845a;
  --down: #c23b33;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131a22; --panel: #1b2430; --ink: #e6ebf1; --muted: #93a0b0; --line: #2c3846;
    --honey: #e7a93a; --honey-soft: #3a2e17; --gain: #3dbb85; --loss: #ee6b62;
    --signal: #7d9ef0; --signal-soft: #1f2b47; --up: #3dbb85; --down: #ee6b62;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131a22; --panel: #1b2430; --ink: #e6ebf1; --muted: #93a0b0; --line: #2c3846;
  --honey: #e7a93a; --honey-soft: #3a2e17; --gain: #3dbb85; --loss: #ee6b62;
  --signal: #7d9ef0; --signal-soft: #1f2b47; --up: #3dbb85; --down: #ee6b62;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; border-radius: 3px; }
code { font-size: .9em; background: var(--bg); padding: .1em .35em; border-radius: 4px; word-break: break-all; }

/* ---------- Dau trang ---------- */
.top { background: var(--panel); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 8px 28px; align-items: center; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--ink); }
.brand svg { width: 22px; height: 22px; fill: var(--honey); }
.brand:hover { text-decoration: none; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: var(--muted); padding: 6px 12px; border-radius: 6px; font-weight: 500; }
nav a:hover { color: var(--ink); background: var(--bg); text-decoration: none; }
nav a[aria-current="page"] { color: var(--ink); background: var(--honey-soft); }
.refresh { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; }
.paper-note { max-width: 1240px; margin: 0 auto; padding: 8px 16px 0; color: var(--muted); font-size: 13px; }

main { max-width: 1240px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { font-size: 28px; line-height: 1.2; margin: 12px 0 8px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
.lead { max-width: 75ch; color: var(--muted); margin: 0 0 20px; }
.sub { color: var(--muted); font-size: 13px; margin: 8px 0 20px; }
.muted { color: var(--muted); font-weight: 400; }
.empty { color: var(--muted); margin: 4px 0; max-width: 65ch; }
.more { margin: 12px 0 0; font-size: 14px; }

/* ---------- Trang thai Hive ---------- */
.status { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); }
.status .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.status.ok .dot { background: var(--gain); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gain) 20%, transparent); }
.status.bad { border-color: var(--loss); }
.status.bad .dot { background: var(--loss); }

/* ---------- Pheu: hanh trinh cua token ---------- */
.funnel { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stage { position: relative; padding: 18px 20px 16px 30px; display: flex; flex-direction: column; gap: 2px; }
.stage:first-child { padding-left: 20px; }
.stage + .stage::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 18px;
  background: var(--panel); border-right: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(var(--line), var(--line));
}
.stage + .stage::after {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 17px; background: var(--panel);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.stage .n { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.stage .l { color: var(--muted); font-size: 13px; }
.stage.honey { background: var(--honey-soft); }
.stage.honey .n { color: var(--honey); }
.stage.signal .n { color: var(--signal); }
.stage.gain .n, .gain { color: var(--gain); }
.stage.loss .n, .loss { color: var(--loss); }
.stage.honey + .stage::after { background: var(--honey-soft); }

/* ---------- Khoi so lieu ---------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.figures > div { background: var(--panel); padding: 14px 18px; display: flex; flex-direction: column; }
.figures .n { font-size: 22px; font-weight: 700; }
.figures .l { color: var(--muted); font-size: 13px; }

/* ---------- Khung noi dung ---------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cols > .panel { margin-top: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-top: 16px; min-width: 0; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 13px; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tfoot td { border-top: 2px solid var(--line); background: var(--bg); }
th:first-child, td:first-child { padding-left: 0; }
.r { text-align: right; white-space: nowrap; }
.num { font-size: 13px; }
td .muted { font-size: 13px; }

.tag { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: var(--honey-soft); color: var(--honey); margin-right: 4px; font-weight: 600; }
.st { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: var(--bg); color: var(--muted); }
.st-approved, .st-survivor { background: var(--honey-soft); color: var(--honey); }
.st-new, .st-watching { background: var(--signal-soft); color: var(--signal); }
.st-rejected, .st-unsafe, .st-dead { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); }
.side { font-weight: 600; }
.side.buy { color: var(--signal); }
.side.sell { color: var(--honey); }

/* ---------- Hoat dong ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 12px; padding: 7px 0 7px 12px; border-left: 3px solid var(--line); margin-bottom: 2px; }
.feed time { color: var(--muted); font-size: 13px; white-space: nowrap; min-width: 82px; }
.feed .k-survivor { border-color: var(--honey); }
.feed .k-signal, .feed .k-buy { border-color: var(--signal); }
.feed .k-sell { border-color: var(--honey); }
.feed .k-gain { border-color: var(--gain); }
.feed .k-loss { border-color: var(--loss); }

.bar { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; margin: 4px 0 10px; }
.bar span { display: block; height: 100%; background: var(--honey); }

/* ---------- Trang token ---------- */
.token-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.token-head h1 { margin-bottom: 4px; }
.mint { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; font-size: 14px; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding: 4px 0 4px 22px; position: relative; }
.checks li::before { position: absolute; left: 0; font-weight: 700; }
.checks .ok::before { content: "✓"; color: var(--gain); }
.checks .no::before { content: "✕"; color: var(--loss); }
.checks .warn::before { content: "!"; color: var(--honey); left: 4px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 12px 0 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .day { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .wick { stroke-width: 1; }
.chart .wick.up, .chart .body.up { stroke: var(--up); fill: var(--up); }
.chart .wick.down, .chart .body.down { stroke: var(--down); fill: var(--down); }
.chart .vol { opacity: .35; }
.chart .vol.up { fill: var(--up); } .chart .vol.down { fill: var(--down); }
.chart .lvl { stroke-width: 1.2; stroke-dasharray: 6 4; }
.chart .lvl.range { stroke: var(--honey); }
.chart .lvl.entry { stroke: var(--signal); }
.chart .lvl-t, .chart .mark-t { font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.chart .lvl-t.range { fill: var(--honey); } .chart .lvl-t.entry { fill: var(--signal); }
.chart .mark { stroke-width: 1.5; }
.chart .mark.signal, .chart .mark.buy { stroke: var(--signal); }
.chart .mark.sell { stroke: var(--honey); }
.chart .mark-t { fill: var(--signal); }
.chart .mark-t.sell { fill: var(--honey); }
.legend { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.lg { display: inline-block; width: 18px; height: 0; border-top: 2px dashed; vertical-align: middle; margin: 0 6px 0 12px; }
.lg:first-child { margin-left: 0; }
.lg.range { border-color: var(--honey); } .lg.signal { border-color: var(--signal); border-top-style: solid; } .lg.entry { border-color: var(--signal); }

/* ---------- Nghien cuu ---------- */
.gate { display: flex; flex-direction: column; padding: 18px 22px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 12px; border-left: 6px solid var(--muted); }
.gate .n { font-size: 30px; font-weight: 700; line-height: 1.2; }
.gate .l { color: var(--muted); font-size: 13px; }
.gate-dat { border-left-color: var(--gain); } .gate-dat .n { color: var(--gain); }
.gate-chua-dat { border-left-color: var(--loss); } .gate-chua-dat .n { color: var(--loss); }
.gate-chua-du-du-lieu { border-left-color: var(--honey); } .gate-chua-du-du-lieu .n { color: var(--honey); }

/* ---------- Man hinh hep ---------- */
@media (max-width: 900px) {
  .funnel { grid-template-columns: 1fr 1fr; }
  .stage, .stage:first-child { padding-left: 18px; }
  .stage + .stage::before, .stage + .stage::after { display: none; }
  .stage { border-bottom: 1px solid var(--line); }
  .cols { grid-template-columns: 1fr; }
  .refresh { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .funnel { grid-template-columns: 1fr; }
  h1 { font-size: 23px; }
}