/* ============================================================
   TailAdmin Design System — bet-api admin
   Source contract: DESIGN.md  ·  Outfit / brand #465FFF
   Light default + symmetric dark mode (html.dark)
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root {
  /* brand */
  --brand-25:#F2F7FF; --brand-50:#ECF3FF; --brand-100:#DDE9FF;
  --brand-200:#C2D6FF; --brand-300:#9CB9FF; --brand-400:#7592FF;
  --brand-500:#465FFF; --brand-600:#3641F5; --brand-700:#2A31D8;
  --brand-800:#252DAE; --brand-900:#262E89; --brand-950:#161950;
  /* gray */
  --gray-25:#FCFCFD; --gray-50:#F9FAFB; --gray-100:#F2F4F7;
  --gray-200:#E4E7EC; --gray-300:#D0D5DD; --gray-400:#98A2B3;
  --gray-500:#667085; --gray-600:#475467; --gray-700:#344054;
  --gray-800:#1D2939; --gray-900:#101828; --gray-950:#0C111D;
  --gray-dark:#1A2231;
  /* status */
  --success-25:#F6FEF9; --success-50:#ECFDF3; --success-100:#D1FADF;
  --success-500:#12B76A; --success-600:#039855; --success-700:#027A48;
  --error-25:#FFFBFA; --error-50:#FEF3F2; --error-100:#FEE4E2;
  --error-500:#F04438; --error-600:#D92D20; --error-700:#B42318;
  --warning-25:#FFFCF5; --warning-50:#FFFAEB; --warning-100:#FEF0C7;
  --warning-500:#F79009; --warning-600:#DC6803;
  --info-50:#F0F9FF; --info-500:#0BA5EC; --info-600:#0086C9;

  /* radius */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px;
  --r-3xl:24px; --r-full:9999px;

  /* shadow */
  --sh-xs:0 1px 2px 0 rgba(16,24,40,.05);
  --sh-sm:0 1px 3px 0 rgba(16,24,40,.10),0 1px 2px -1px rgba(16,24,40,.10);
  --sh-md:0 4px 8px -2px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.06);
  --sh-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
  --ring:0 0 0 3px rgba(70,95,255,.12);

  /* semantic surfaces (light) */
  --page-bg:var(--gray-50);
  --card-bg:#FFFFFF;
  --card-border:var(--gray-200);
  --sidebar-bg:#FFFFFF;
  --sidebar-border:var(--gray-200);
  --header-bg:#FFFFFF;
  --header-border:var(--gray-200);
  --text:var(--gray-800);
  --text-strong:var(--gray-900);
  --text-muted:var(--gray-500);
  --text-faint:var(--gray-400);
  --input-bg:#FFFFFF;
  --input-border:var(--gray-300);
  --hover-bg:var(--gray-50);
  --table-head-bg:var(--gray-50);
  --row-border:var(--gray-100);
  --divider:var(--gray-200);

  --sidebar-w:290px;
  --header-h:72px;

  --font-sans:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ── Backward-compat aliases ──
     Older inline styles in page JS reference these names; map them to
     the design-system tokens so colours stay correct in both modes. */
  --accent:var(--brand-500);
  --accent-hover:var(--brand-600);
  --ok:var(--success-600);
  --err:var(--error-600);
  --warn:var(--warning-600);
  --fg:var(--text);
  --fg-muted:var(--text-muted);
  --bg:var(--page-bg);
  --bg-elev:var(--card-bg);
  --bg-elev-2:var(--hover-bg);
  --border:var(--card-border);
}

html.dark {
  /* brighten status aliases for legibility on dark surfaces */
  --ok:#3DDC97;
  --err:#FF7B72;
  --warn:#FDB022;
}

html.dark {
  --page-bg:var(--gray-950);
  --card-bg:var(--gray-900);
  --card-border:rgba(255,255,255,.08);
  --sidebar-bg:var(--gray-900);
  --sidebar-border:rgba(255,255,255,.08);
  --header-bg:var(--gray-900);
  --header-border:rgba(255,255,255,.08);
  --text:var(--gray-100);
  --text-strong:var(--gray-25);
  --text-muted:var(--gray-400);
  --text-faint:var(--gray-500);
  --input-bg:var(--gray-800);
  --input-border:rgba(255,255,255,.10);
  --hover-bg:rgba(255,255,255,.04);
  --table-head-bg:rgba(255,255,255,.03);
  --row-border:rgba(255,255,255,.06);
  --divider:rgba(255,255,255,.08);
  --sh-xs:0 1px 2px 0 rgba(0,0,0,.30);
  --sh-sm:0 1px 3px 0 rgba(0,0,0,.4);
  --sh-md:0 4px 10px -2px rgba(0,0,0,.5);
  --sh-lg:0 16px 32px -8px rgba(0,0,0,.6);
}

/* ---- Base -------------------------------------------------- */
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font-sans);
  background:var(--page-bg); color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:var(--r-full); border:2px solid transparent; background-clip:content-box; }
html.dark ::-webkit-scrollbar-thumb { background:var(--gray-700); background-clip:content-box; }

/* ============================================================
   App shell
   ============================================================ */
.app-shell { display:flex; min-height:100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex; flex-direction:column;
  position:fixed; inset:0 auto 0 0; z-index:40;
  transition:transform .25s ease;
}
.sidebar-brand {
  height:var(--header-h); display:flex; align-items:center; gap:10px;
  padding:0 24px; flex-shrink:0;
}
.sidebar-brand .logo {
  width:34px; height:34px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  display:grid; place-items:center; color:#fff; flex-shrink:0;
  box-shadow:0 4px 10px -2px rgba(70,95,255,.45);
}
.sidebar-brand .logo svg { width:18px; height:18px; }
.sidebar-brand .name { font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--text-strong); }
.sidebar-brand .name small { display:block; font-size:11px; font-weight:500; color:var(--text-faint); letter-spacing:.02em; }

.sidebar-nav { flex:1; overflow-y:auto; padding:8px 16px 24px; }
.nav-section { margin-top:18px; }
.nav-section:first-child { margin-top:6px; }
.nav-label {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-faint);
  padding:8px 12px 6px;
}
.nav-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--r-lg);
  color:var(--gray-600); font-weight:500; font-size:14px;
  margin-bottom:2px; transition:background .15s,color .15s;
}
html.dark .nav-item { color:var(--gray-400); }
.nav-item svg { width:20px; height:20px; flex-shrink:0; color:var(--gray-400); transition:color .15s; }
.nav-item:hover { background:var(--hover-bg); color:var(--text-strong); }
.nav-item:hover svg { color:var(--gray-600); }
html.dark .nav-item:hover svg { color:var(--gray-300); }
.nav-item.active { background:var(--brand-50); color:var(--brand-600); font-weight:600; }
.nav-item.active svg { color:var(--brand-500); }
html.dark .nav-item.active { background:rgba(70,95,255,.15); color:var(--brand-300); }
html.dark .nav-item.active svg { color:var(--brand-400); }

/* off-canvas backdrop (mobile) */
.sidebar-backdrop {
  position:fixed; inset:0; background:rgba(16,24,40,.55);
  z-index:35; opacity:0; visibility:hidden; transition:opacity .2s;
}
.sidebar-backdrop.show { opacity:1; visibility:visible; }

/* ---- Main column ---- */
.main-col {
  flex:1; min-width:0; margin-left:var(--sidebar-w);
  display:flex; flex-direction:column;
}

/* ---- Header ---- */
.header {
  height:var(--header-h); flex-shrink:0;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  display:flex; align-items:center; gap:16px;
  padding:0 24px; position:sticky; top:0; z-index:30;
}
.menu-btn {
  display:none; width:40px; height:40px; border-radius:var(--r-lg);
  background:transparent; border:1px solid var(--card-border);
  align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted);
}
.menu-btn:hover { background:var(--hover-bg); }
.header .search {
  position:relative; flex:1; max-width:430px;
}
.header .search svg {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-faint);
}
.header .search input {
  width:100%; height:42px; padding:0 14px 0 42px;
  background:var(--page-bg); border:1px solid var(--input-border);
  border-radius:var(--r-lg); color:var(--text); font-family:inherit; font-size:14px;
}
.header .search input::placeholder { color:var(--text-faint); }
.header .search input:focus { outline:none; border-color:var(--brand-300); box-shadow:var(--ring); }
.header .spacer { flex:1; }
.icon-btn {
  width:42px; height:42px; border-radius:var(--r-full);
  background:transparent; border:1px solid var(--card-border);
  display:grid; place-items:center; cursor:pointer; color:var(--text-muted);
  transition:background .15s,color .15s;
}
.icon-btn:hover { background:var(--hover-bg); color:var(--text-strong); }
.icon-btn svg { width:20px; height:20px; }
.theme-toggle .sun { display:none; }
html.dark .theme-toggle .sun { display:block; }
html.dark .theme-toggle .moon { display:none; }

/* user menu */
.user-menu { position:relative; }
.user-chip {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:5px 8px 5px 5px; border-radius:var(--r-full);
  border:1px solid transparent;
}
.user-chip:hover { background:var(--hover-bg); }
.user-chip .avatar {
  width:36px; height:36px; border-radius:var(--r-full);
  background:var(--brand-50); color:var(--brand-600);
  display:grid; place-items:center; font-weight:600; font-size:14px; flex-shrink:0;
}
html.dark .user-chip .avatar { background:rgba(70,95,255,.18); color:var(--brand-300); }
.user-chip .uname { font-weight:500; color:var(--text); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .caret { color:var(--text-faint); width:16px; height:16px; transition:transform .2s; }
.user-menu.open .caret { transform:rotate(180deg); }
.user-dropdown {
  position:absolute; right:0; top:calc(100% + 8px); min-width:200px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--r-xl); box-shadow:var(--sh-md); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s; z-index:50;
}
.user-menu.open .user-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.user-dropdown .du-head { padding:10px 12px; border-bottom:1px solid var(--divider); margin-bottom:6px; }
.user-dropdown .du-head .n { font-weight:600; color:var(--text-strong); }
.user-dropdown .du-head .r { font-size:12px; color:var(--text-muted); }
.user-dropdown button {
  width:100%; display:flex; align-items:center; gap:10px;
  background:transparent; border:none; color:var(--text); cursor:pointer;
  padding:10px 12px; border-radius:var(--r-lg); font-size:14px; font-family:inherit; text-align:left;
}
.user-dropdown button:hover { background:var(--hover-bg); }
.user-dropdown button svg { width:18px; height:18px; color:var(--text-muted); }
.user-dropdown button.danger { color:var(--error-600); }
.user-dropdown button.danger svg { color:var(--error-500); }

/* ---- Content ---- */
main { padding:28px 24px 48px; max-width:1472px; width:100%; margin:0 auto; }

/* page title (content <h1>) */
h1 {
  margin:0 0 22px; font-size:22px; font-weight:600;
  letter-spacing:-.01em; color:var(--text-strong);
}
/* a paragraph directly after h1 = page subtitle */
h1 + p.muted { margin-top:-16px; margin-bottom:24px; max-width:760px; }

h2 { margin:0 0 16px; font-size:16px; font-weight:600; color:var(--text-strong); }

/* ============================================================
   Page header (list screens): title block left, actions right
   ============================================================ */
.page-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:24px; flex-wrap:wrap;
}
.page-head .page-title { min-width:0; }
.page-head h1 { margin:0; }
.page-head h1 + p.muted, .page-head .page-sub {
  margin:6px 0 0; max-width:680px; font-size:14px;
}
.page-head .page-actions { display:flex; gap:10px; flex-shrink:0; }

/* filters bar — a card holding a form-row of filter inputs */
.filters-card { padding:18px 22px; }

/* ============================================================
   Pagination footer (under a table)
   ============================================================ */
.pager {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:16px; margin-top:4px; flex-wrap:wrap;
  border-top:1px solid var(--card-border);
}
.pager:empty { display:none; }
.pager .pager-info { color:var(--text-muted); font-size:13px; }
.pager .pager-controls { display:flex; align-items:center; gap:4px; }
.pager button {
  min-width:36px; height:36px; padding:0 10px; margin:0;
  background:transparent; border:1px solid var(--card-border);
  border-radius:var(--r-lg); color:var(--text);
  font-size:13px; font-weight:500; cursor:pointer; line-height:1;
}
.pager button:hover:not(:disabled):not(.active) { background:var(--gray-50); }
html.dark .pager button:hover:not(:disabled):not(.active) { background:rgba(255,255,255,.05); }
.pager button.active { background:var(--brand-500); border-color:var(--brand-500); color:#fff; }
.pager button:disabled { opacity:.4; cursor:default; }
.pager .pager-gap { padding:0 4px; color:var(--text-muted); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--r-2xl); padding:22px; margin-bottom:24px;
  box-shadow:var(--sh-xs);
}
.card > h2:first-child { margin-bottom:18px; }
.card-row { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:0; }
.card-row > .card { flex:1; min-width:260px; }

/* stat card */
.stat-card { position:relative; }
.stat-card .stat-icon {
  width:48px; height:48px; border-radius:var(--r-xl);
  display:grid; place-items:center; margin-bottom:18px;
}
.stat-card .stat-icon svg { width:24px; height:24px; }
.stat-icon.brand { background:var(--brand-50); color:var(--brand-600); }
.stat-icon.success { background:var(--success-50); color:var(--success-600); }
.stat-icon.warning { background:var(--warning-50); color:var(--warning-600); }
.stat-icon.info { background:var(--info-50); color:var(--info-600); }
html.dark .stat-icon.brand { background:rgba(70,95,255,.15); color:var(--brand-300); }
html.dark .stat-icon.success { background:rgba(18,183,106,.15); color:#3DDC97; }
html.dark .stat-icon.warning { background:rgba(247,144,9,.15); color:#FDB022; }
html.dark .stat-icon.info { background:rgba(11,165,236,.15); color:#53B9F3; }
.stat-card .stat-label { font-size:14px; color:var(--text-muted); margin-bottom:4px; }
.stat-card .stat-value { font-size:28px; font-weight:700; letter-spacing:-.02em; color:var(--text-strong); }
.stat-card .stat-body { font-size:13px; color:var(--text-muted); }
.stat-card .stat-body > div { margin-top:4px; }

/* ============================================================
   Tables
   ============================================================ */
.table-wrap { overflow-x:auto; margin:0 -22px -22px; padding:0; }
.card > .table-wrap:last-child { border-bottom-left-radius:var(--r-2xl); border-bottom-right-radius:var(--r-2xl); }
table { width:100%; border-collapse:collapse; }
thead th {
  background:var(--table-head-bg); color:var(--text-muted);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  text-align:left; padding:12px 16px; white-space:nowrap;
  border-top:1px solid var(--row-border); border-bottom:1px solid var(--row-border);
}
tbody td { padding:14px 16px; border-bottom:1px solid var(--row-border); color:var(--text); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:var(--hover-bg); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ============================================================
   Buttons
   ============================================================ */
button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--brand-500); color:#fff; border:1px solid var(--brand-500);
  padding:10px 18px; border-radius:var(--r-lg); cursor:pointer;
  font-size:14px; font-weight:500; font-family:inherit; line-height:1.2;
  transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s; white-space:nowrap;
}
button:hover, .btn:hover { background:var(--brand-600); border-color:var(--brand-600); }
button:focus-visible, .btn:focus-visible { outline:none; box-shadow:var(--ring); }
button:disabled, .btn:disabled { opacity:.5; cursor:not-allowed; }

button.secondary, .btn.secondary {
  background:var(--card-bg); color:var(--gray-700); border:1px solid var(--input-border);
}
html.dark button.secondary, html.dark .btn.secondary { color:var(--gray-200); }
button.secondary:hover, .btn.secondary:hover { background:var(--hover-bg); border-color:var(--gray-300); }
html.dark button.secondary:hover { border-color:rgba(255,255,255,.18); }

button.danger, .btn.danger { background:var(--error-500); border-color:var(--error-500); }
button.danger:hover, .btn.danger:hover { background:var(--error-600); border-color:var(--error-600); }

button.ghost { background:transparent; border-color:transparent; color:var(--text-muted); }
button.ghost:hover { background:var(--hover-bg); color:var(--text-strong); }

button.small, .btn.small { padding:6px 12px; font-size:13px; border-radius:var(--r-md); }

/* button cluster in table cells */
td .small + .small, td button + button, td button + .btn { margin-left:6px; }

/* ============================================================
   Forms
   ============================================================ */
input, select, textarea {
  width:100%; background:var(--input-bg); color:var(--text);
  border:1px solid var(--input-border); border-radius:var(--r-lg);
  padding:10px 14px; font-size:14px; font-family:inherit; line-height:1.4;
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--brand-300); box-shadow:var(--ring);
}
input:disabled, select:disabled, textarea:disabled { background:var(--gray-100); color:var(--text-faint); cursor:not-allowed; }
html.dark input:disabled, html.dark select:disabled { background:rgba(255,255,255,.04); }
select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:40px;
}
textarea { min-height:96px; resize:vertical; }

label { display:block; margin-bottom:16px; }
label > span {
  display:block; color:var(--gray-700); margin-bottom:6px;
  font-size:14px; font-weight:500;
}
html.dark label > span { color:var(--gray-300); }

.form-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.form-row > label { flex:1; min-width:160px; margin-bottom:0; }
.form-row > button, .form-row > .btn { margin-bottom:0; height:42px; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:var(--r-full);
  font-size:12px; font-weight:500; line-height:1.4; white-space:nowrap;
}
.badge.ok   { background:var(--success-50); color:var(--success-700); }
.badge.warn { background:var(--warning-50); color:var(--warning-600); }
.badge.err  { background:var(--error-50);   color:var(--error-700); }
.badge.dim  { background:var(--gray-100);   color:var(--gray-600); }
.badge.primary { background:var(--brand-50); color:var(--brand-600); }
html.dark .badge.ok   { background:rgba(18,183,106,.15); color:#3DDC97; }
html.dark .badge.warn { background:rgba(247,144,9,.15);  color:#FDB022; }
html.dark .badge.err  { background:rgba(240,68,56,.15);  color:#FF7B72; }
html.dark .badge.dim  { background:rgba(255,255,255,.07); color:var(--gray-300); }
html.dark .badge.primary { background:rgba(70,95,255,.18); color:var(--brand-300); }
.badge.small { font-size:11px; padding:2px 8px; }

/* status dot inside badge (optional) */
.badge .dot { width:6px; height:6px; border-radius:var(--r-full); background:currentColor; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position:fixed; bottom:24px; right:24px;
  background:var(--card-bg); border:1px solid var(--card-border);
  border-left:4px solid var(--gray-400);
  padding:14px 18px; border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); z-index:1000; max-width:400px; color:var(--text);
  font-weight:500;
  animation:toast-in .25s ease;
}
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.toast.ok  { border-left-color:var(--success-500); }
.toast.err { border-left-color:var(--error-500); }
.toast[hidden] { display:none; }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(16,24,40,.6);
  display:flex; align-items:center; justify-content:center; z-index:500;
  padding:20px; backdrop-filter:blur(2px);
}
.modal-backdrop[hidden] { display:none; }
.modal {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--r-3xl); padding:28px; width:480px; max-width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--sh-lg); animation:toast-in .2s ease;
}
.modal.wide { width:840px; }
.modal h2 { margin:0 0 6px; font-size:18px; color:var(--text-strong); }
.modal .modal-hint { color:var(--text-muted); font-size:13px; margin:0 0 20px; }
.modal label { margin-bottom:16px; }
.modal .row-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
.modal .checkbox-line {
  display:flex; align-items:center; gap:10px;
  color:var(--text); font-size:14px; margin-bottom:18px;
}
.modal .checkbox-line input { width:18px; height:18px; accent-color:var(--brand-500); }
.modal .checkbox-line label { margin:0; }

/* ============================================================
   Utilities
   ============================================================ */
.mono { font-family:var(--font-mono); font-size:12.5px; }
.muted { color:var(--text-muted); }
.small { font-size:12.5px; }
code, code.mono { font-family:var(--font-mono); font-size:12.5px;
  background:var(--gray-100); padding:2px 6px; border-radius:var(--r-sm); color:var(--gray-700); }
html.dark code { background:rgba(255,255,255,.07); color:var(--gray-200); }

pre.json {
  background:var(--gray-900); color:#E6E8EC; padding:16px; border-radius:var(--r-lg);
  overflow-x:auto; font-size:12.5px; margin:0; font-family:var(--font-mono); line-height:1.6;
  border:1px solid var(--card-border); max-height:420px;
}
html.dark pre.json { background:#0B0E14; }

/* progress bar helper (used inline by auto_bet) */
.progress-track { background:var(--gray-100); border-radius:var(--r-full); overflow:hidden; }
html.dark .progress-track { background:rgba(255,255,255,.08); }

/* empty state row */
td.empty, .empty-row td {
  text-align:center; color:var(--text-faint); padding:32px 16px; font-size:14px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); box-shadow:var(--sh-lg); }
  .sidebar.open { transform:translateX(0); }
  .main-col { margin-left:0; }
  .menu-btn { display:flex; }
}
@media (max-width:640px) {
  .header { padding:0 16px; gap:12px; }
  .header .search { display:none; }
  main { padding:20px 16px 40px; }
  .card { padding:18px; }
  .table-wrap { margin:0 -18px -18px; }
}