/* AI Models admin dashboard and its sign-in page: every style of both (docs/ADMIN_DASHBOARD.md).

   The page runs under a strict Content-Security-Policy (style-src 'self' and Google Fonts): no <style> element and no
   style="" attribute anywhere, so every rule lives here.  Values that only the data knows (a model's colour, a bar's
   share) are set by aim_admin.js as CSS custom properties through element.style.setProperty, which CSP allows.

   The look is the Claude dashboard's (AI Models/templates/claude_dashboard.html): its design tokens verbatim, its
   cards, glows, tables, buttons, badges and reconciliation banner; then what that page lacked: a header that really
   sticks, section chips, real breakpoints (1024 iPad landscape, 768 iPad portrait, 600 and 420 phones), tables that
   become cards on phones, filters behind a disclosure, full-screen dialogs on phones, skeletons, and reduced motion. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens: the Claude dashboard's, verbatim (claude_dashboard.html :13-39) ─────────────────────────────── */
:root {
  --bg:        #f6f7fb;
  --bg-grad:   radial-gradient(1200px 600px at 0% -10%, rgba(124,58,237,.07), transparent 60%),
               radial-gradient(900px 500px at 100% -10%, rgba(59,130,246,.06), transparent 55%),
               linear-gradient(180deg, #f6f7fb 0%, #f1f3f9 100%);
  --surface:   #ffffff;
  --surf2:     #f7f8fc;
  --border:    #e7e9ef;
  --border2:   #eef0f5;
  --accent:    #6d28d9;
  --acc2:      #7c3aed;
  --acc-grad:  linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  --text:      #0f172a;
  --muted:     #64748b;
  --muted2:    #94a3b8;
  --green:     #059669;
  --green-grad:linear-gradient(135deg, #10b981 0%, #059669 100%);
  --yellow:    #d97706;
  --yellow-grad:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --red:       #dc2626;
  --red-grad:  linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --blue:      #2563eb;
  --blue-grad: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.02);
  --shadow-md: 0 4px 16px -2px rgba(15,23,42,.06), 0 2px 6px -2px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px -6px rgba(109,40,217,.18), 0 4px 12px -2px rgba(15,23,42,.06);

  /* AI Models additions: the group colours the Claude page hard-coded (free #f97316, bonus/offer #a855f7, paid users
     #10b981, API #0ea5e9), with a deeper "ink" for values so large numbers keep a 3:1 contrast on white. */
  --free:        #f97316;
  --free-grad:   linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  --offer:       #a855f7;
  --offer-grad:  linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  --paidusers:   #10b981;
  --paidusers-grad: linear-gradient(135deg, #059669 0%, #047857 100%);
  --api:         #0ea5e9;
  --muted-on-bg: #5b6b80;   /* --muted is 4.45:1 on --bg; this keeps notes on the page background at AA */
  --mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --topbar-h:    68px;      /* measured by aim_admin.js; the fallback is the desktop height */
  --nav-h:       50px;
  --gutter:      24px;
  --chart-h:     280px;
}

html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* clip, never hidden: hidden makes <body> a scroll container, and position:sticky then never sticks (the Claude
   page's header scrolls away for that reason). */
body {
  background: var(--bg); background-image: var(--bg-grad);
  color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11','ss01'; -webkit-font-smoothing: antialiased;
  overflow-x: clip; min-height: 100vh; line-height: 1.45;
}
html.modal-open { overflow: hidden; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ── Header (sticky, frosted: the Claude header) ───────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1320px; margin: 0 auto; padding: 14px var(--gutter);
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: var(--acc-grad); box-shadow: 0 4px 12px rgba(109,40,217,.32); display: inline-block;
}
.brand-title { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
.badge {
  background: var(--acc-grad); color: #fff; font-size: .68rem; padding: 3px 10px;
  border-radius: 999px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(109,40,217,.28);
}
.badge-dev { background: var(--yellow-grad); box-shadow: 0 2px 8px rgba(217,119,6,.28); }
.topbar-meta {
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-left: auto;
  font-size: .78rem; color: var(--muted); font-weight: 500;
}
.ist-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-sep { color: var(--border); }
.data-at { white-space: nowrap; }
.data-at.is-stale { color: var(--yellow); font-weight: 700; }
.admin-ref {
  font-family: var(--mono); font-size: .7rem; color: var(--muted); background: var(--surf2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.hbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 4px 11px; font-size: .76rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.hbtn:hover { border-color: var(--accent); color: var(--accent); }
.hbtn-danger:hover { border-color: var(--red); color: var(--red); }
.hbtn[aria-busy="true"] .hbtn-icon { animation: spin 1s linear infinite; }
.hbtn-icon { display: inline-block; line-height: 1; }
.signout-form { display: inline-flex; }
.lbl-short { display: none; }

/* A switch built on a real checkbox: keyboard and screen readers get the native control. */
.switch {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; cursor: pointer; user-select: none;
  font-size: .76rem; font-weight: 600; color: var(--muted); padding: 0 4px;
}
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; width: 30px; height: 18px; border-radius: 999px; background: #d5d9e2;
  transition: background .15s; flex: 0 0 auto;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .15s;
}
.switch-input:checked + .switch-track { background: var(--acc2); }
.switch-input:checked + .switch-track::after { transform: translateX(12px); }
.switch-input:focus-visible + .switch-track { outline: 2px solid var(--acc2); outline-offset: 2px; }
.switch-input:checked ~ .switch-text { color: var(--accent); }

/* ── Section chips (sticky under the header; scroll-spy marks the current one) ─────────────────────────────────── */
.section-nav {
  position: sticky; top: var(--topbar-h); z-index: 29;
  background: rgba(246,247,251,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-list {
  list-style: none; display: flex; gap: 6px; max-width: 1320px; margin: 0 auto; padding: 8px var(--gutter);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-list li { flex: 0 0 auto; scroll-snap-align: start; }
.chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.chip:hover { border-color: rgba(124,58,237,.35); color: var(--accent); }
.chip.active {
  background: var(--acc-grad); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(109,40,217,.28);
}

/* ── Layout ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
main { max-width: 1320px; margin: 0 auto; padding: 28px var(--gutter) 48px; outline: none; }
.page-section { margin-bottom: 32px; scroll-margin-top: calc(var(--topbar-h) + var(--nav-h) + 14px); }
.section-title {
  font-size: .75rem; color: var(--muted-on-bg); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 12px;
}
.subsection-title {
  font-size: .72rem; color: var(--muted-on-bg); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin: 22px 0 10px;
}
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head .section-title { margin-bottom: 0; }
.section-note { font-size: .74rem; color: var(--muted-on-bg); margin: -4px 0 12px; line-height: 1.5; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-sm); min-width: 0;
}
.panel h3, .chart-box h3 {
  font-size: .75rem; color: var(--muted); margin-bottom: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.panel-row { display: flex; flex-wrap: wrap; gap: 16px; }
.panel-row > .panel { flex: 1 1 320px; }
.panel-row > .panel.wide { flex: 2 1 420px; }
.panel-row > div:not(.panel) { flex: 1 1 160px; min-width: 0; }
.day-table { margin-top: 12px; }
.day-table summary {
  cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; font-size: .76rem; font-weight: 700;
  color: var(--accent);
}
.day-table .drill-scroll { max-height: 300px; overflow: auto; margin-top: 6px; }
#api-tops { margin-top: 16px; }
#api-keys-stats { margin-top: 12px; }
.lazy-hint { font-size: .8rem; color: var(--muted); }

/* ── KPI cards (the Claude .card: white, 16px radius, blurred corner glow, hover lift) ──────────────────────────── */
.kpi-group { margin-bottom: 26px; }
.cards-group-label {
  font-size: .72rem; font-weight: 700; color: var(--muted-on-bg); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 10px;
}
.group-free .cards-group-label { color: #c2410c; }
.group-offer .cards-group-label { color: #7e22ce; }
.group-paidusers .cards-group-label { color: #047857; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.card {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-sm); min-width: 0;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 80px; height: 80px;
  border-radius: 50%; opacity: .08; filter: blur(20px);
  transform: translate(30%, -30%); pointer-events: none;
  background: var(--glow, var(--accent));
}
.card-clickable { cursor: pointer; }
.card-clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg); border-color: rgba(124,58,237,.35);
}
.card-clickable:hover::after { opacity: .14; }
.card-clickable.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109,40,217,.14), var(--shadow-md);
}
.card-label {
  display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 10px; font-weight: 600;
}
.card-value {
  display: block; font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.card-value.green  { background: var(--green-grad);  -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.accent { background: var(--acc-grad);    -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.yellow { background: var(--yellow-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.red    { background: var(--red-grad);    -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.blue   { background: var(--blue-grad);   -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.free   { background: var(--free-grad);   -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.offer  { background: var(--offer-grad);  -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.paidusers { background: var(--paidusers-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card-value.small { font-size: 1.5rem; }
.card-sub { display: block; font-size: .73rem; color: var(--muted); margin-top: 7px; font-weight: 500; line-height: 1.4; }
.card-hint { display: block; font-size: .65rem; color: var(--muted); margin-top: 6px; }
/* Each card's glow tinted with its own accent (the Claude rule, by data-filter) */
.card[data-filter="all"]       { --glow: var(--green); }
.card[data-filter="week"]      { --glow: var(--accent); }
.card[data-filter="today"]     { --glow: var(--yellow); }
.card[data-filter="yesterday"] { --glow: var(--blue); }
.card[data-filter="users"]     { --glow: var(--blue); }
.card[data-filter="avg"]       { --glow: var(--accent); }
.card[data-filter="abandoned"] { --glow: var(--red); }
.card[data-filter="repeat"]    { --glow: var(--accent); border-top: 3px solid var(--accent); }
.group-free .card      { border-top: 3px solid var(--free);      --glow: var(--free); }
.group-offer .card     { border-top: 3px solid var(--offer);     --glow: var(--offer); }
.group-paidusers .card { border-top: 3px solid var(--paidusers); --glow: var(--paidusers); }

.switch-state {
  display: inline-flex; align-items: center; gap: 8px; font-size: 1.5rem; font-weight: 800; letter-spacing: .02em;
}
.switch-state::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--muted2); }
.switch-state.on { color: #15803d; }
.switch-state.on::before { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.switch-state.off { color: var(--muted); }
.switch-state.missing, .switch-state.unknown { color: #b45309; }
.switch-state.missing::before, .switch-state.unknown::before { background: #f59e0b; }

/* Notes under group labels (the Claude internal-exclusion pointer and its incomplete warning) */
.internal-excluded-note { font-size: .72rem; color: var(--muted-on-bg); margin: -4px 0 10px; line-height: 1.5; }
.internal-excluded-note a { color: var(--accent); }

/* ── Skeletons (shimmer; still under prefers-reduced-motion) ────────────────────────────────────────────────────── */
.sk {
  display: block; position: relative; overflow: hidden; background: var(--border2); border-radius: 6px;
}
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.3s ease-in-out infinite;
}
.sk-label { width: 55%; height: 10px; margin-bottom: 14px; }
.sk-value { width: 70%; height: 28px; margin-bottom: 10px; border-radius: 8px; }
.sk-sub   { width: 85%; height: 9px; }
.sk-line  { width: 100%; height: 12px; margin: 4px 0; }
.sk-line.short { width: 60%; }
.sk-block { width: 100%; height: 100%; min-height: 120px; border-radius: 12px; }
.skeleton-card { pointer-events: none; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Charts ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* minmax(0, ...) and min-width:0 keep a canvas from forcing a phone-width overflow (claude_dashboard.html :180-185) */
.charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.chart-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; box-shadow: var(--shadow-sm); min-width: 0;
}
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-head h3 { margin-bottom: 0; }
.chart-canvas-wrap { position: relative; height: var(--chart-h); min-width: 0; }
.chart-canvas-wrap.short { height: calc(var(--chart-h) - 60px); }
.chart-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.chart-fallback {
  display: flex; align-items: center; justify-content: center; text-align: center; height: 100%;
  font-size: .82rem; color: var(--muted); padding: 12px; border: 1px dashed var(--border); border-radius: 12px;
}
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.legend-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: .7rem; font-weight: 600; color: var(--text);
}
.legend-btn:hover { border-color: var(--accent); }
.legend-btn.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.swatch { --c: var(--accent); width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: 0 0 auto; display: inline-block; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.seg-btn {
  border: 0; background: transparent; padding: 5px 12px; font-size: .72rem; font-weight: 700; color: var(--muted);
  min-height: 30px;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--acc-grad); color: #fff; }

/* Revenue by model: the Claude "Revenue by Plan Category" bar and legend tiles */
.cat-bar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; margin-bottom: 8px; background: var(--border2); }
.cat-seg { --c: var(--accent); --share: 1; height: 100%; flex: var(--share) 1 0; background: var(--c); transition: flex .4s ease; }
.cat-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }
.cat-item {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 4px 6px;
  border-radius: 10px; min-height: 40px;
}
.cat-item:hover { background: var(--surf2); }
.cat-item.active { background: #f5f3ff; box-shadow: inset 0 0 0 1px rgba(109,40,217,.35); }
.cat-item .swatch { width: 12px; height: 12px; }
.cat-amount { display: block; font-size: .82rem; font-weight: 700; color: var(--text); }
.cat-meta { display: block; font-size: .7rem; color: var(--muted); }

/* ── Token cards (per model; tokens never add across models, so the total card is in rupees) ───────────────────── */
.token-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.token-card {
  --c: var(--accent);
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow-sm); min-width: 0;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
button.token-card { cursor: pointer; }
button.token-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(124,58,237,.3); border-left-color: var(--c); }
.token-card.active { border-color: var(--accent); border-left-color: var(--c); box-shadow: 0 0 0 3px rgba(109,40,217,.14), var(--shadow-md); }
.token-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.token-card-label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; overflow-wrap: anywhere; }
.token-card-value { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.token-card-sub { display: block; font-size: .72rem; color: var(--muted); margin-top: 5px; }
.token-card-lines { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin-top: 10px; font-size: .74rem; }
.token-card-lines dt { color: var(--muted); }
.token-card-lines dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.token-card-hint { display: block; font-size: .65rem; color: var(--muted); margin-top: 8px; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.data-table .tags { flex-wrap: nowrap; }  /* one line per row on wide screens; phones (cards) let them wrap */

/* ── Tables (the Claude table: sticky header, sticky first column, hover bar) ──────────────────────────────────── */
.table-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.table-header {
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fafbfd 0%, #f6f7fb 100%);
}
/* Title and exports share the first row; the filters take a full row under them (the Claude header squeezed the
   title beside several rows of filters). */
.th-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.table-title {
  font-size: .82rem; color: var(--text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.row-count { color: var(--accent); margin-left: 4px; }
.filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 1 1 100%; min-width: 0; order: 3; }
.th-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; align-items: center; order: 2; }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.field-check { flex-direction: row; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); min-height: 32px; cursor: pointer; user-select: none; }
.field-check input { width: 16px; height: 16px; accent-color: var(--acc2); cursor: pointer; }
.search-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 10px; color: var(--text); font-size: .8rem; outline: none; width: 220px; min-height: 32px;
  transition: border-color .15s, box-shadow .15s;
}
select.search-box, input[type="date"].search-box { width: auto; cursor: pointer; }
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.search-box::placeholder { color: var(--muted2); }
.search-box[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.filter-error { flex-basis: 100%; font-size: .75rem; color: var(--red); font-weight: 600; }
.filters-toggle {
  display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .78rem; font-weight: 700;
}
.filters-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.filter-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--acc-grad); color: #fff; font-size: .65rem;
}
.filter-count:empty { display: none; }

.table-scroll { overflow: auto; max-height: 640px; overscroll-behavior: contain; }
.table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: var(--border2); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--acc2); }
/* No global min-width (the Claude page forced 1100px on every table): each wide table sets its own. */
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#orders-table { min-width: 1240px; }
#paid-users-table { min-width: 1560px; }
#free-users-table { min-width: 1180px; }
#usage-table { min-width: 1120px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 3; background: var(--surf2);
  padding: 11px 16px; text-align: left; color: var(--muted); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
.data-table thead th.r, .data-table td.r { text-align: right; }
.data-table thead th:first-child { left: 0; z-index: 4; }
.data-table tbody tr { border-top: 1px solid var(--border2); transition: background .12s; }
.data-table tbody td { padding: 12px 16px; white-space: nowrap; color: var(--text); vertical-align: top; }
.data-table tbody td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  box-shadow: 2px 0 6px -2px rgba(15,23,42,.06);
}
.data-table tbody tr:hover { background: #faf7ff; }
.data-table tbody tr:hover td:first-child { background: #faf7ff; box-shadow: inset 3px 0 0 var(--accent), 2px 0 6px -2px rgba(15,23,42,.06); }
.data-table tbody tr.row-highlight td { background: #fef9c3; }
.data-table tbody tr.row-highlight td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.data-table.compact { font-size: .8rem; }
.data-table.compact thead th { padding: 8px 12px; }
.data-table.compact tbody td { padding: 8px 12px; }
.data-table.plain tbody td:first-child, .data-table.plain thead th:first-child { position: static; box-shadow: none; }
.data-table tfoot td { padding: 11px 16px; font-weight: 700; border-top: 2px solid var(--border); background: var(--surf2); white-space: nowrap; }
.no-rows { text-align: center; padding: 36px 16px !important; color: var(--muted); font-size: .86rem; white-space: normal !important; }
.no-rows.error { color: var(--red); }
.cell-sub { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.uid  { font-family: var(--mono); font-size: .76rem; color: var(--text); }
.oid  { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.amount { font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.amount.unpaid { color: var(--red); }
.neg { color: var(--red); }
.link-btn {
  border: 0; background: none; padding: 0; color: var(--accent); font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(109,40,217,.3); text-underline-offset: 2px;
}
.link-btn:hover { text-decoration-color: var(--accent); }
.list-cell { display: flex; flex-direction: column; gap: 3px; }
.list-line { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .78rem; }

.table-footer {
  padding: 10px 22px; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--muted); background: var(--surf2); font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.footer-text { min-width: 0; overflow-wrap: anywhere; }
.footer-warning { color: #b45309; font-weight: 700; }
.pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-label { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* The live filtered-total bar (claude_dashboard.html :1031-1047) */
.filtered-total {
  display: flex; gap: 14px 32px; align-items: center; flex-wrap: wrap;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
}
.ft-metric { min-width: 0; }
.ft-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.ft-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ft-value.green { color: var(--green); }
.ft-value.accent { color: var(--accent); }
.ft-rule { width: 1px; height: 40px; background: var(--border); flex-shrink: 0; }
.ft-desc { font-size: .78rem; color: var(--muted); margin-left: auto; font-style: italic; max-width: 360px; text-align: right; line-height: 1.4; white-space: pre-line; }

/* Group-by-user rows (claude_dashboard.html :293-304, with a caret that really turns) */
.group-row td { background: linear-gradient(90deg, #f8f5ff 0%, #fbf9ff 100%); font-weight: 600; }
.group-row:hover td { background: linear-gradient(90deg, #f1eaff 0%, #f6f1ff 100%); }
.data-table tbody tr.group-row td:first-child { background: #f8f5ff; }
.caret-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; font: inherit;
  color: var(--text); font-weight: 600; text-align: left; min-height: 28px;
}
.caret { display: inline-block; color: var(--accent); transition: transform .15s; }
.caret-btn[aria-expanded="true"] .caret { transform: rotate(90deg); }
.group-count {
  background: var(--acc-grad); color: #fff; font-size: .68rem; padding: 2px 9px;
  border-radius: 999px; font-weight: 700; margin-left: 8px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(109,40,217,.25);
}
.child-row td { background: #fdfcff; }
.data-table tbody tr.child-row td:first-child { padding-left: 38px; color: var(--muted); background: #fdfcff; }

/* ── Badges, chips, pills ───────────────────────────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
  background: #f1f5f9; color: #475569;
}
.pill-beta     { background: #dbeafe; color: #1d4ed8; }
.pill-internal { background: #fef3c7; color: #92400e; }
.pill-offer    { background: #f3e8ff; color: #7e22ce; }
.pill-disabled { background: #fee2e2; color: #991b1b; }
.pill-ok       { background: #dcfce7; color: #15803d; }
.pill-warn     { background: #fef3c7; color: #92400e; }
.pill-bad      { background: #fee2e2; color: #b91c1c; }
.pill-info     { background: #e0f2fe; color: #0369a1; }
.status-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; white-space: nowrap; background: #f1f5f9; color: #475569;
}
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.st-completed, .st-active, .st-ok, .st-settled { background: #dcfce7; color: #15803d; }
.st-pending, .st-never_used, .st-held, .st-streaming, .st-admitted, .st-draining { background: #fef3c7; color: #92400e; }
.st-expired, .st-expired_unverified, .st-cancelled, .st-released, .st-revoked { background: #f1f5f9; color: #475569; }
.st-failed, .st-error, .st-refused { background: #fee2e2; color: #b91c1c; }
.st-refund_pending, .st-rejected { background: #ffedd5; color: #9a3412; }
.st-refunded { background: #fee2e2; color: #991b1b; }
.st-disputed { background: #fce7f3; color: #9d174d; }
.st-dormant { background: #e0f2fe; color: #0369a1; }
.model-badge {
  --c: var(--accent);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
  background: #f3f4f6; background: color-mix(in srgb, var(--c) 13%, #ffffff);
  color: var(--text); color: color-mix(in srgb, var(--c) 72%, #000000);
}
.model-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.plan-badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; letter-spacing: .01em; background: #f3f4f6; color: #374151; white-space: nowrap;
}
.plan-badge.custom { background: #fdf4ff; color: #86198f; }
.sev-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--muted2); }
.sev-high .sev-dot { background: var(--red); }
.sev-medium .sev-dot { background: #f59e0b; }
.sev-low .sev-dot { background: var(--blue); }
.sev-info .sev-dot { background: var(--muted2); }

/* ── Contact cells ──────────────────────────────────────────────────────────────────────────────────────────────── */
.contact { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; min-width: 0; }
.contact-line { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.contact-line a { color: var(--accent); text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }
.contact.masked .contact-line { font-family: var(--mono); font-size: .74rem; color: var(--muted); }
.contact-none { color: var(--muted); font-size: .76rem; }
.wa-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text) !important; }
.wa-icon { width: 14px; height: 14px; flex: 0 0 auto; fill: #25D366; }

/* ── Buttons (claude_dashboard.html :307-342) ───────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px;
  border: none; border-radius: 10px; padding: 7px 16px; font-size: .8rem; text-decoration: none;
  cursor: pointer; white-space: nowrap; font-weight: 600; letter-spacing: .01em;
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"]::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff; animation: spin .8s linear infinite;
}
.btn-csv  { background: var(--green-grad);  color: #fff; box-shadow: 0 3px 10px rgba(5,150,105,.28); }
.btn-pdf  { background: var(--acc-grad);    color: #fff; box-shadow: 0 3px 10px rgba(109,40,217,.28); }
.btn-xlsx { background: var(--blue-grad);   color: #fff; box-shadow: 0 3px 10px rgba(37,99,235,.28); }
.btn-md   { background: var(--yellow-grad); color: #fff; box-shadow: 0 3px 10px rgba(217,119,6,.28); }
.btn-primary { background: var(--acc-grad); color: #fff; box-shadow: 0 3px 10px rgba(109,40,217,.28); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 10px; font-size: .75rem; border-radius: 8px; white-space: nowrap; font-weight: 600;
}
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.btn-small {
  display: inline-flex; align-items: center; justify-content: center; min-height: 28px;
  background: none; border: 1px solid var(--border); color: var(--accent);
  border-radius: 7px; padding: 2px 10px; font-size: .74rem; font-weight: 600;
  transition: background .12s, color .12s;
}
.btn-small:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.section-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 30px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 12px; font-size: .75rem; font-weight: 600; border-radius: 8px;
}
.section-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.section-toggle-btn .chevron { display: inline-block; font-size: .68rem; transition: transform .15s ease; }
.section-toggle-btn[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.collapsible-content.collapsed { display: none; }

/* ── States: errors with Retry, warnings, toast ─────────────────────────────────────────────────────────────────── */
.error-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid var(--red); border-radius: 10px;
  padding: 12px 16px; color: #991b1b; font-size: .84rem; margin-bottom: 16px;
}
.error-box .btn-ghost { border-color: #fca5a5; color: #991b1b; background: #fff; }
.warn-box {
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 12px;
  color: #92400e; font-size: .8rem; font-weight: 600; margin: 0 0 12px; overflow-wrap: anywhere;
}
.info-box {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 16px;
  color: #1e40af; font-size: .84rem; line-height: 1.5;
}
.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 1200; transform: translate(-50%, 20px);
  max-width: min(520px, calc(100vw - 32px)); background: #0f172a; color: #fff; border-radius: 12px;
  padding: 11px 16px; font-size: .82rem; font-weight: 600; box-shadow: 0 10px 30px rgba(15,23,42,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.error { background: #991b1b; }
.toast.warn { background: #92400e; }
.toast.ok { background: #065f46; }

/* ── Key/value grids (drill-down summary, e-mail panel) ─────────────────────────────────────────────────────────── */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kv {
  background: var(--surf2); border: 1px solid var(--border2); border-radius: 12px; padding: 10px 12px; min-width: 0;
}
.kv-k { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.kv-v { display: block; font-size: .95rem; font-weight: 700; margin-top: 3px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv-v.small { font-size: .8rem; font-weight: 600; }
.meter { height: 8px; border-radius: 999px; background: var(--border2); overflow: hidden; margin-top: 8px; }
.meter-fill { --pct: 0%; width: var(--pct); height: 100%; background: var(--green-grad); border-radius: 999px; transition: width .4s; }
.meter-fill.warn { background: var(--yellow-grad); }
.meter-fill.bad { background: var(--red-grad); }
.stat-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; }
.stat-list li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border2); padding-bottom: 5px; }
.stat-list li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.05rem; }

/* ── Anomalies ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.anomaly-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.anomaly-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm);
  padding: 14px 16px; min-width: 0;
}
.anomaly-card.has-rows.sev-high { border-left: 4px solid var(--red); }
.anomaly-card.has-rows.sev-medium { border-left: 4px solid #f59e0b; }
.anomaly-card.has-rows.sev-low { border-left: 4px solid var(--blue); }
.anomaly-card.wide { grid-column: 1 / -1; }
.anomaly-head { display: flex; align-items: center; gap: 8px; }
.anomaly-title { font-size: .86rem; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.anomaly-count {
  font-size: .78rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: #dcfce7; color: #15803d;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
.anomaly-card.has-rows .anomaly-count { background: #fee2e2; color: #b91c1c; }
.anomaly-card.sev-low.has-rows .anomaly-count, .anomaly-card.sev-info.has-rows .anomaly-count { background: #e0f2fe; color: #0369a1; }
.anomaly-card.sev-medium.has-rows .anomaly-count { background: #fef3c7; color: #92400e; }
.anomaly-help { font-size: .76rem; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.anomaly-error { font-size: .78rem; color: var(--red); font-weight: 700; margin-top: 6px; }
.anomaly-rows { margin-top: 10px; border: 1px solid var(--border2); border-radius: 10px; overflow: auto; max-height: 360px; }

/* ── Reconciliation banner (claude_dashboard.html :147-177) ─────────────────────────────────────────────────────── */
.internal-reconciliation {
  background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
  border-radius: 10px; padding: 14px 18px; box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
}
body.stale-banner-open main { padding-bottom: 240px; }
.internal-reconciliation-body { flex: 1 1 420px; min-width: 0; overflow-wrap: anywhere; }
.internal-reconciliation-title { font-weight: 700; font-size: .88rem; color: #1e40af; margin-bottom: 6px; line-height: 1.4; }
.internal-reconciliation-detail { font-size: .78rem; color: #1d4ed8; line-height: 1.5; }
.internal-reconciliation-sources { font-size: .74rem; color: #1e40af; margin-top: 6px; }
.internal-reconciliation-warning {
  margin-top: 8px; font-size: .8rem; font-weight: 700; color: #b45309;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 10px; overflow-wrap: anywhere;
}
.internal-reconciliation-warning a { color: inherit; }
.internal-reconciliation-warning.top { margin: 0 0 12px; }
.internal-reconciliation-export {
  flex: 0 0 auto; background: #2563eb; color: #ffffff; text-decoration: none; font-weight: 600;
  font-size: .78rem; padding: 8px 16px; border-radius: 6px; white-space: nowrap; transition: background .15s;
}
.internal-reconciliation-export:hover { background: #1d4ed8; }
.internal-reconciliation-export:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

/* ── Dialog (user drill-down): centred on desktop and iPad, a full-screen sheet on phones ───────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 960px; max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden; outline: none;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: .95rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.modal-close {
  flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; font-size: 1.4rem; line-height: 1;
  color: var(--muted); border-radius: 10px;
}
.modal-close:hover { background: var(--surf2); color: var(--text); border-color: var(--border); }
.modal-body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; min-width: 0; overscroll-behavior: contain; }
.modal-footer { padding: 10px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.drill-section { margin-top: 20px; }
.drill-section:first-child { margin-top: 0; }
.drill-section h3 {
  font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.drill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.drill-scroll { overflow-x: auto; border: 1px solid var(--border2); border-radius: 10px; }

/* ── Stale-data notice (claude_dashboard.html :3620-3630) ───────────────────────────────────────────────────────── */
.stale-notice {
  position: fixed; bottom: 20px; right: 20px; z-index: 100; background: #fff; border: 1px solid var(--yellow);
  border-radius: 12px; padding: 12px 18px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  max-width: min(320px, calc(100vw - 40px));
}
.stale-title { font-size: .82rem; color: var(--yellow); font-weight: 700; margin-bottom: 6px; }
.stale-text { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.stale-actions { display: flex; gap: 8px; }
.btn-stale {
  background: var(--yellow-grad); color: #fff; border: none; border-radius: 8px; padding: 6px 14px;
  font-size: .78rem; font-weight: 700; min-height: 32px;
}

/* ════════════════════════════════════════ Responsive ══════════════════════════════════════════════════════════════ */

/* iPad landscape and small laptops */
@media (max-width: 1024px) {
  :root { --gutter: 20px; --chart-h: 240px; }
  main { padding-top: 22px; }
  .brand-title { font-size: 1.05rem; }
  .cards { gap: 14px; }
  .card { padding: 18px 18px; }
  .card-value { font-size: 1.9rem; }
  .table-header { padding: 14px 18px; }
  .table-scroll { max-height: 70vh; }
  .anomaly-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* iPad portrait */
@media (max-width: 768px) {
  .topbar-inner { padding-top: 12px; padding-bottom: 12px; }
  .topbar-meta { margin-left: 0; order: 3; width: 100%; }
  .topbar-actions { margin-left: auto; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .charts { grid-template-columns: minmax(0, 1fr); }
  .card-value { font-size: 1.7rem; }
  .search-box { width: 190px; }
  .ft-desc { margin-left: 0; text-align: left; max-width: none; flex-basis: 100%; }
  .modal { max-width: 94vw; }
}

/* Phones: two KPI columns, tables as cards, filters behind a disclosure, dialogs full screen.  The header scrolls
   away here and the section chips stay pinned, so the sticky strip is one row (~56px) on a small screen. */
@media (max-width: 600px) {
  :root { --gutter: 16px; --chart-h: 220px; }
  .topbar { position: relative; }
  .section-nav { top: 0; }
  .page-section { scroll-margin-top: calc(var(--nav-h) + 10px); }
  .topbar-inner { gap: 8px 10px; }
  .brand-title { font-size: 1rem; }
  .brand .badge { display: none; }
  .brand .badge-dev { display: inline-block; }
  .topbar-meta { font-size: .72rem; gap: 4px 10px; }
  .meta-sep { display: none; }
  .topbar-actions { width: 100%; margin-left: 0; gap: 6px; }
  .hbtn, .switch { min-height: 40px; }
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .chip { height: 40px; padding: 0 14px; }
  .nav-list { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  main { padding: 16px var(--gutter) 40px; }
  .page-section { margin-bottom: 26px; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 14px 14px; border-radius: 14px; }
  .card-label { font-size: .64rem; letter-spacing: .06em; margin-bottom: 8px; }
  .card-value { font-size: clamp(1.1rem, 5.6vw, 1.5rem); }
  .card-value.small, .switch-state { font-size: 1.2rem; }
  .card-sub { font-size: .68rem; }
  .card::after { width: 60px; height: 60px; }
  .token-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .token-card { padding: 12px 12px; }
  .token-card-value { font-size: 1.15rem; }
  .token-card-lines { grid-template-columns: 1fr; }
  .token-card-lines dd { text-align: left; margin-bottom: 4px; }
  .chart-box, .panel { padding: 16px; border-radius: 14px; }

  /* filters: a "Filters (n)" disclosure; touch-size controls */
  .filters-toggle { display: inline-flex; }
  .filters { display: none; flex-basis: 100%; }
  .filters.open { display: flex; }
  .filters .field { flex: 1 1 140px; }
  .search-box, select.search-box, input[type="date"].search-box { width: 100%; min-height: 40px; font-size: .9rem; }
  .field-check { min-height: 40px; }
  .th-actions { margin-left: 0; width: 100%; }
  .th-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .btn-ghost, .section-toggle-btn, .btn-small, .seg-btn, .legend-btn { min-height: 40px; }
  .table-header { padding: 12px 14px; }

  /* tables become cards: each row a card, each cell "label  value", the first cell the card's title */
  .table-scroll { max-height: none; overflow: visible; }
  .data-table.cards-on-phone { min-width: 0 !important; }
  .data-table.cards-on-phone thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .data-table.cards-on-phone tbody { display: block; padding: 10px 10px 2px; }
  .data-table.cards-on-phone tbody tr {
    display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 10px; padding: 4px 0 6px; box-shadow: var(--shadow-sm);
  }
  .data-table.cards-on-phone tbody td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 14px;
    white-space: normal; text-align: right; overflow-wrap: anywhere; position: static; box-shadow: none;
  }
  .data-table.cards-on-phone tbody td::before {
    content: attr(data-label); flex: 0 0 auto; max-width: 46%; text-align: left; color: var(--muted);
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px;
  }
  .data-table.cards-on-phone tbody td:first-child {
    display: block; text-align: left; font-weight: 700; font-size: .9rem; padding: 8px 14px 9px;
    border-bottom: 1px solid var(--border2); margin-bottom: 4px; background: transparent;
  }
  .data-table.cards-on-phone tbody td > .cell { min-width: 0; text-align: right; }
  .data-table.cards-on-phone tbody td:first-child > .cell { text-align: left; }
  .data-table.cards-on-phone tbody td:first-child::before,
  .data-table.cards-on-phone tbody td.no-rows::before,
  .data-table.cards-on-phone tbody td[data-label=""]::before { content: none; }
  .data-table.cards-on-phone tbody td.no-rows { display: block; text-align: center; border: 0; }
  .data-table.cards-on-phone tbody tr:hover td:first-child { box-shadow: none; background: transparent; }
  .data-table.cards-on-phone tbody tr.child-row { margin-left: 14px; }
  .data-table.cards-on-phone tbody tr.child-row td:first-child { padding-left: 14px; }
  .data-table.cards-on-phone tbody tr.group-row { border-color: rgba(109,40,217,.35); }
  .data-table.cards-on-phone tbody tr.group-row td,
  .data-table.cards-on-phone tbody tr.child-row td { background: transparent; }
  .data-table.cards-on-phone tfoot { display: block; }
  .data-table.cards-on-phone tfoot tr { display: block; padding: 0 10px 10px; }
  .data-table.cards-on-phone tfoot td { display: flex; justify-content: space-between; white-space: normal; border-radius: 10px; }
  .data-table.cards-on-phone tfoot td::before { content: attr(data-label); color: var(--muted); font-size: .64rem; text-transform: uppercase; }
  .contact-line { white-space: normal; }
  .list-line { white-space: normal; justify-content: flex-end; }
  .data-table.cards-on-phone .tags { flex-wrap: wrap; justify-content: flex-end; }

  .table-footer { padding: 10px 14px; }
  .pager { width: 100%; justify-content: space-between; }
  .ft-rule { display: none; }
  .ft-value { font-size: 1.3rem; }
  .filtered-total { gap: 10px 22px; padding: 12px 14px; }

  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .modal-body { padding: 14px 16px; }

  .internal-reconciliation { padding: 12px 14px; }
  .internal-reconciliation-body { flex-basis: 100%; }
  .internal-reconciliation-export {
    flex: 1 1 100%; text-align: center; white-space: normal; padding: 10px 14px; font-size: .82rem;
    min-height: 44px; display: flex; align-items: center; justify-content: center; /* a full-size tap target */
  }
  .anomaly-grid { grid-template-columns: minmax(0, 1fr); }
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stale-notice { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .toast { bottom: 16px; }
}

/* Small phones (360-420px) */
@media (max-width: 420px) {
  :root { --gutter: 12px; }
  .brand-mark { width: 24px; height: 24px; border-radius: 7px; }
  .brand-title { font-size: .95rem; }
  .topbar-meta .data-at { font-size: .68rem; }
  .admin-ref { display: none; }
  .cards { gap: 8px; }
  .card { padding: 12px 12px; }
  .card-label { font-size: .6rem; }
  .card-sub { font-size: .64rem; }
  .chip { padding: 0 12px; font-size: .74rem; }
  .data-table.cards-on-phone tbody td { padding: 6px 12px; }
}

/* Only the narrowest screens get one card per row */
@media (max-width: 340px) {
  .cards, .token-cards, .kv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Hover lifts stay off on touch screens, where they stick after a tap */
@media (hover: none) {
  .card-clickable:hover, button.token-card:hover, .btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sk::after { animation: none; }
  .card-clickable:hover, button.token-card:hover, .btn:hover { transform: none; }
}

/* Print: the PDF button's fallback when jsPDF could not load prints the orders section alone */
@media print {
  .topbar, .section-nav, .stale-notice, .toast, .th-actions, .filters, .filters-toggle, .section-toggle-btn, .pager,
  .modal-backdrop, .skip-link, .no-print { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  body.print-orders main > *:not(#orders) { display: none !important; }
  body.print-orders #orders-body-wrap { display: block !important; }
  .table-wrap { box-shadow: none; border: 0; }
  .table-scroll { max-height: none; overflow: visible; }
  .data-table { min-width: 0 !important; font-size: 8pt; }
  .data-table thead th, .data-table tbody td { position: static !important; white-space: normal; padding: 3px 5px; box-shadow: none !important; }
  .data-table thead { display: table-header-group; }
  .data-table tr { break-inside: avoid; }
}

/* ════════════════════════════════════════ Sign-in page (light, like the dashboard) ════════════════════════════════ */
body.login-page { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-shell { width: 100%; max-width: 410px; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 34px 32px 26px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.login-card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 140px; height: 140px; border-radius: 50%;
  opacity: .1; filter: blur(30px); transform: translate(30%, -30%); background: var(--accent); pointer-events: none;
}
.login-brand { display: flex; justify-content: center; margin-bottom: 14px; }
.brand-mark-lg { width: 46px; height: 46px; border-radius: 13px; }
.login-title { font-size: 1.3rem; font-weight: 800; text-align: center; letter-spacing: -.01em; }
.login-sub { font-size: .84rem; color: var(--muted); text-align: center; margin: 6px 0 22px; line-height: 1.5; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label, .login-dev label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.login-input {
  width: 100%; min-height: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: .95rem; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,40,217,.12); }
.login-input::placeholder { color: var(--muted2); }
.login-input:disabled { background: var(--surf2); color: var(--muted); cursor: not-allowed; }
.password-wrap { position: relative; }
.password-wrap .login-input { padding-right: 50px; }
.eye-btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px;
  color: var(--muted);
}
.eye-btn:hover { color: var(--accent); background: var(--surf2); }
.eye-btn svg { width: 18px; height: 18px; }
.login-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px;
  border: 0; border-radius: 11px; background: var(--acc-grad); color: #fff; font-size: .98rem; font-weight: 700;
  box-shadow: 0 6px 16px rgba(109,40,217,.28); transition: transform .12s, filter .12s, opacity .12s;
}
.login-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.login-btn:disabled { opacity: .55; cursor: not-allowed; }
.login-btn .spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .8s linear infinite;
}
.login-btn[aria-busy="true"] .spinner { display: inline-block; }
.login-btn-secondary { background: var(--yellow-grad); box-shadow: 0 6px 16px rgba(217,119,6,.25); width: auto; padding: 0 16px; flex: 0 0 auto; }
.login-error {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px;
  color: #b91c1c; font-size: .84rem; font-weight: 600; line-height: 1.45;
}
.login-info { margin-bottom: 14px; }
.login-dev { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.login-dev-row { display: flex; gap: 8px; }
.login-dev-row .login-input { flex: 1 1 auto; min-width: 0; }
.login-dev-note { text-align: center; margin: -12px 0 16px; }
.login-foot { font-size: .72rem; color: var(--muted); text-align: center; margin-top: 18px; }
@media (max-width: 420px) {
  .login-card { padding: 26px 20px 20px; border-radius: 16px; }
  .login-dev-row { flex-direction: column; }
  .login-btn-secondary { width: 100%; }
}

/* iOS Safari zooms into any focused form field whose text is under 16px: keep fields at 16px on touch-size screens
   (phones and iPads, including the login page). */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .search-box, select.search-box, input[type="date"].search-box, .login-input { font-size: 16px; }
}