/* Hallmark · genre: modern-minimal · macrostructure: bespoke app console (side-rail workbench)
 * theme: Cobalt (light only — chủ shop 13/10/2026: «luôn nền sáng») · tone: utilitarian / instrument panel
 * anchor hue: cobalt 264 · nav: N3 side-rail (thanh đáy dưới 760px) · footer: none (app) · enrichment: none
 * design-system: api/admin_web/design.md · designed-as-app
 * pre-emit critique: P4 H4 E4 S4 R5 V4
 */

/* ── phông: tự chứa (fonts/), có bộ chữ tiếng Việt, không gọi Google ──────── */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fonts/grotesk-600-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: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fonts/grotesk-600-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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-var-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-var-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/jb-var-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: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/jb-var-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; }

/* ── token — mọi màu / phông / khoảng cách bên dưới đọc từ đây ───────────── */
:root {
  --paper: oklch(98.3% 0.004 255);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96.7% 0.006 255);
  --ink: oklch(23% 0.025 262);
  --ink-2: oklch(40% 0.02 262);
  --muted: oklch(54% 0.018 262);
  --rule: oklch(91.6% 0.008 258);
  --rule-strong: oklch(84% 0.012 258);
  --accent: oklch(52% 0.2 264);
  --accent-hover: oklch(47% 0.2 264);
  --accent-ink: oklch(99% 0.003 264);
  --accent-soft: oklch(95.2% 0.03 264);
  --focus: oklch(60% 0.2 264);
  --good: oklch(52% 0.13 152);
  --good-soft: oklch(95.4% 0.04 152);
  --good-glow: oklch(52% 0.13 152 / 0.45);
  --good-clear: oklch(52% 0.13 152 / 0);
  --warn: oklch(58% 0.13 62);
  --warn-soft: oklch(96% 0.045 80);
  --bad: oklch(55% 0.19 27);
  --bad-soft: oklch(95.6% 0.03 27);
  --plan-happy: oklch(72% 0.15 78);
  --plan-pro: oklch(56% 0.17 245);
  --plan-promax: oklch(52% 0.2 300);
  --plan-vip: oklch(28% 0.03 262);
  --plan-vip-gold: oklch(78% 0.13 85);
  --shade: oklch(23% 0.025 262 / 0.12);
  --shade-soft: oklch(23% 0.025 262 / 0.08);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem;
  --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem;

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem;
  --text-lg: 1rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-stat: 3.25rem;

  --radius-control: 6px; --radius-panel: 10px; --radius-pill: 999px;
  --rail-width: 232px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 140ms;
  --shadow-pop: 0 10px 30px var(--shade), 0 1px 3px var(--shade-soft);
  color-scheme: light;
}

/* ── nền ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--text-md)/1.5 var(--font-body);
  font-feature-settings: "cv11";
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.error { color: var(--bad); }

/* ── khung: thanh dọc + vùng làm việc ──────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: var(--surface); border-right: 1px solid var(--rule);
}
.wordmark { display: flex; align-items: baseline; gap: var(--space-2xs); padding: 0 var(--space-2xs); }
.wordmark b { font: 700 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; }
.wordmark span { color: var(--muted); font-size: var(--text-sm); }
.rail nav { display: grid; gap: 2px; }
.rail nav a {
  display: flex; align-items: center; gap: var(--space-xs);
  height: 36px; padding: 0 var(--space-2xs);
  border-radius: var(--radius-control);
  color: var(--ink-2); font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.rail nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.rail nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rail nav a .count { margin-left: auto; font: 600 var(--text-xs)/1 var(--font-mono); color: var(--muted); }
.rail nav a.on .count { color: var(--accent); }
.rail nav .livebadge { margin-left: auto; }
.rail-foot { margin-top: auto; display: grid; justify-items: start; gap: var(--space-2xs); padding: var(--space-sm) var(--space-2xs) 0; border-top: 1px solid var(--rule); }
.rail-foot .who { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.livebadge { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--text-xs)/1 var(--font-mono); color: var(--good); }
.pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--good); animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--good-glow); }
  70% { box-shadow: 0 0 0 7px var(--good-clear); }
  100% { box-shadow: 0 0 0 0 var(--good-clear); }
}

.work { min-width: 0; padding: var(--space-lg) var(--space-xl) var(--space-2xl); }
.pagehead { display: flex; align-items: flex-end; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.pagehead > div:first-child { min-width: 0; }
.crumb { display: inline-block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.pagehead h1 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin: 0; font: 600 var(--text-2xl)/1.15 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; min-width: 0; }
.pagehead .meta { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-3xs); }
.pagehead .actions { margin-left: auto; display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* ── nút: đủ trạng thái ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  height: 34px; padding: 0 var(--space-sm);
  font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-control);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; opacity: 0.75; }
.btn[data-state="done"] { border-color: var(--good); color: var(--good); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: none; color: var(--ink-2); padding: 0 var(--space-2xs); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn .ico { width: 16px; height: 16px; stroke-width: 2; }

.iconbtn { width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-control); background: none; color: var(--muted); cursor: pointer; flex: none; }
.iconbtn:hover { border-color: var(--rule-strong); color: var(--ink); background: var(--surface); }
.iconbtn:active { transform: translateY(1px); }
.iconbtn[data-state="done"] { color: var(--good); }
.iconbtn .ico { width: 14px; height: 14px; stroke-width: 2; }

/* ── khối ──────────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); }
.section { margin-top: var(--space-xl); min-width: 0; }
.section > h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); margin: 0 0 var(--space-xs); font: 600 var(--text-lg)/1.3 var(--font-display); letter-spacing: -0.01em; }
.section > h2 small { font: 400 var(--text-sm)/1.3 var(--font-body); color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 var(--space-lg); }
.empty { margin: 0; padding: var(--space-sm); color: var(--muted); }
.loading { padding: var(--space-xl) 0; color: var(--muted); }

/* Đang live — số lớn bên trái, phòng bên phải */
.livebar { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
.livebar .big { padding: var(--space-md); border-right: 1px solid var(--rule); display: grid; align-content: center; gap: var(--space-3xs); }
.livebar .big b { font: 600 var(--text-stat)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.livebar .big span { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--ink-2); font-weight: 500; }
.livebar .big small { color: var(--muted); font-size: var(--text-sm); }
.livebar .empty { align-self: center; }

/* Dải số liệu ở trang chi tiết */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.facts div { padding: var(--space-sm); border-right: 1px solid var(--rule); min-width: 0; }
.facts div:last-child { border-right: 0; }
.facts dt { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.facts dd { margin: var(--space-3xs) 0 0; font: 600 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.facts dd small { display: block; margin-top: 2px; font: 400 var(--text-xs)/1.35 var(--font-body); color: var(--muted); letter-spacing: 0; }

/* Bảng */
.tablewrap { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px var(--space-xs); text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; }
th { font: 600 var(--text-xs)/1.2 var(--font-body); color: var(--muted); background: var(--surface); }
tbody tr { transition: background-color var(--dur-short) var(--ease-out); }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
th:first-child, td:first-child { padding-left: var(--space-sm); }
th:last-child, td:last-child { padding-right: var(--space-sm); }
td.wrap { white-space: normal; min-width: 180px; }
td .sub, .kv dd .sub { display: block; color: var(--muted); font-size: var(--text-xs); }
.handle { font-weight: 600; color: var(--ink); }
a.handle { color: var(--ink); }
a.handle:hover { color: var(--accent); }
.ledger td.num { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: -0.01em; }
.ledger td:first-child { color: var(--ink-2); font-weight: 500; }
.avatar { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; margin-right: var(--space-2xs); object-fit: cover; background: var(--surface-2); }

/* Chip trạng thái + nhãn gói */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2xs); border-radius: var(--radius-pill); font: 600 var(--text-xs)/1 var(--font-body); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.plan { --plan-c: var(--rule-strong); display: inline-flex; align-items: center; gap: 6px; font: 600 var(--text-xs)/1 var(--font-body); color: var(--ink-2); white-space: nowrap; vertical-align: middle; }
.plan::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--plan-c); }
.plan.happy { --plan-c: var(--plan-happy); }
.plan.pro { --plan-c: var(--plan-pro); }
.plan.promax { --plan-c: var(--plan-promax); }
.plan.vip { --plan-c: linear-gradient(135deg, var(--plan-vip-gold), var(--plan-vip) 75%); }
h1 .plan { font-size: var(--text-sm); }

/* Thanh đo: phần đã dùng / phần của tổng */
.planrows { display: grid; }
.planrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 150px; align-items: center; gap: var(--space-sm); padding: 12px var(--space-sm); border-bottom: 1px solid var(--rule); color: inherit; }
.planrow:last-child { border-bottom: 0; }
a.planrow:hover { background: var(--surface-2); text-decoration: none; }
.meter { --plan-c: var(--accent); height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; min-width: 0; background: var(--plan-c); border-radius: inherit; }
.meter.happy { --plan-c: var(--plan-happy); }
.meter.pro { --plan-c: var(--plan-pro); }
.meter.promax { --plan-c: var(--plan-promax); }
.meter.vip { --plan-c: linear-gradient(90deg, var(--plan-vip-gold), var(--plan-vip)); }
.meter.good { --plan-c: var(--good); }
.meter.warn { --plan-c: var(--warn); }
.meter.bad { --plan-c: var(--bad); }
.planrow .counts { text-align: right; font: 500 var(--text-sm)/1.2 var(--font-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.planrow .counts b { color: var(--ink); font: 600 var(--text-md)/1 var(--font-display); }
.planfoot { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); padding: 10px var(--space-sm); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--text-sm); }
.planfoot b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Hệ thống: hàng có chấm trạng thái */
.health { margin: 0; }
.health div { display: flex; align-items: center; gap: var(--space-xs); padding: 10px var(--space-sm); border-bottom: 1px solid var(--rule); }
.health div:last-child { border-bottom: 0; }
.health dt, .health dd { margin: 0; }
.health dd { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.state { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.state.bad { background: var(--bad); }
.state.warn { background: var(--warn); }
.state.off { background: var(--rule-strong); }

/* Bảng thông tin (dl) */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: 0; padding: var(--space-sm); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hint { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--muted); max-width: 52ch; }

/* Công tắc «cho nhập lại key» */
.switch { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0; border: 0; background: none; font: 600 var(--text-md)/1 var(--font-body); color: var(--ink-2); cursor: pointer; }
.switch .track { position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--rule-strong); transition: background-color var(--dur-short) var(--ease-out); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px var(--shade); transition: transform var(--dur-short) var(--ease-out); }
.switch[aria-checked="true"] { color: var(--good); }
.switch[aria-checked="true"] .track { background: var(--good); }
.switch[aria-checked="true"] .track::after { transform: translateX(16px); }
.switch:hover .track { filter: brightness(0.96); }
.switch:disabled { cursor: progress; opacity: 0.6; }

/* Thanh lọc */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; padding: var(--space-xs); border-bottom: 1px solid var(--rule); }
.toolbar form { display: contents; }
.field { height: 34px; padding: 0 var(--space-xs); font: 400 var(--text-md)/1 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-control); min-width: 0; }
.field:hover { border-color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.field[aria-invalid="true"] { border-color: var(--bad); }
.search { flex: 1 1 200px; max-width: 320px; }
.field.short { width: 120px; }
.toolbar label { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--muted); font-size: var(--text-sm); }
.seg { display: inline-flex; flex-wrap: wrap; padding: 2px; gap: 2px; background: var(--surface-2); border-radius: var(--radius-control); }
.seg button { height: 30px; padding: 0 var(--space-xs); border: 0; border-radius: 4px; background: none; font: 500 var(--text-sm)/1 var(--font-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px var(--shade); }
.pager { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; justify-content: flex-end; padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--text-sm); }
.pager .btn { height: 30px; }

/* Mã: chữ đơn cách + nút chép */
.code { display: inline-flex; align-items: center; gap: var(--space-3xs); }
.code .mono { color: var(--ink); }

/* Tạo lô mã: khung mở ngay dưới tiêu đề */
.maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: var(--space-lg); }
.maker form { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-md); border-right: 1px solid var(--rule); min-width: 0; }
.maker fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.maker legend, .maker label { font: 600 var(--text-sm)/1.2 var(--font-body); color: var(--ink-2); }
.maker legend { margin-bottom: var(--space-2xs); }
.maker label { display: grid; gap: var(--space-2xs); min-width: 0; }
.maker .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.planpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); }
.planpick button { display: grid; gap: 6px; justify-items: start; align-content: start; padding: var(--space-xs); border: 1px solid var(--rule-strong); border-radius: var(--radius-control); background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.planpick button:hover { border-color: var(--muted); }
.planpick button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.planpick small { color: var(--muted); font-size: var(--text-xs); line-height: 1.3; }
.result { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-md); min-width: 0; }
.result h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin: 0; font: 600 var(--text-md)/1.3 var(--font-display); }
.result ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; counter-reset: c; }
.result li { display: flex; align-items: center; gap: var(--space-xs); padding: 4px var(--space-2xs); border-radius: var(--radius-control); background: var(--surface-2); counter-increment: c; }
.result li::before { content: counter(c); min-width: 1.75em; color: var(--muted); font: 500 var(--text-xs)/1 var(--font-mono); }
.result li .mono { flex: 1; min-width: 0; }
.result .acts { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* Biểu đồ xu theo thời gian */
.chart { padding: var(--space-xs) var(--space-sm) var(--space-3xs); }
.chart svg { width: 100%; height: 150px; display: block; }
.chart rect { fill: var(--accent); }
.chart text { fill: var(--muted); font: 10px var(--font-body); }

/* Đăng nhập */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-md) var(--space-sm); }
.login form { width: min(100%, 360px); display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.login .wordmark { padding: 0; margin-bottom: var(--space-2xs); }
.login h1 { margin: 0; font: 600 var(--text-xl)/1.2 var(--font-display); letter-spacing: -0.02em; }
.login label { display: grid; gap: var(--space-2xs); font: 600 var(--text-sm)/1 var(--font-body); color: var(--ink-2); }
.login .field { height: 40px; }
.login .btn { height: 40px; }

.mobile-only { display: none; }

/* ── điện thoại: thanh dọc thành thanh đáy ─────────────────────────────── */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; inset: auto 0 0 0; height: auto; z-index: 5; flex-direction: row; padding: var(--space-3xs) var(--space-2xs) calc(var(--space-3xs) + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--rule); box-shadow: 0 -4px 16px var(--shade-soft); }
  .rail .wordmark, .rail-foot { display: none; }
  .rail nav { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .rail nav a { flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0 2px; font-size: var(--text-2xs); }
  .rail nav a .count, .rail nav .livebadge { display: none; }
  .work { padding: var(--space-md) var(--space-sm) calc(var(--space-2xl) + 24px); }
  .split, .maker { grid-template-columns: minmax(0, 1fr); }
  .maker form { border-right: 0; border-bottom: 1px solid var(--rule); }
  .livebar { grid-template-columns: minmax(0, 1fr); }
  .livebar .big { border-right: 0; border-bottom: 1px solid var(--rule); }
  .planpick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planrow { grid-template-columns: 84px minmax(0, 1fr); }
  .planrow .counts { grid-column: 1 / -1; text-align: left; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div { border-bottom: 1px solid var(--rule); }
  .facts div:nth-child(2n) { border-right: 0; }
  .pagehead .actions { margin-left: 0; }
  .search { max-width: none; }
  th, td { padding: 9px var(--space-2xs); }
  th:first-child, td:first-child { padding-left: var(--space-xs); }
  th:last-child, td:last-child { padding-right: var(--space-xs); }
  .mobile-only { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}