/* ══════════════════════════════════════════
   WF·AG 会员数据中心  ·  明亮大方主题
   调色盘: OKLCH 暖色系，琥珀主色
   字体: Manrope + JetBrains Mono
   ══════════════════════════════════════════ */

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

[hidden] { display: none !important; }

:root {
  /* 明亮色板 — 中性色微偏暖黄 */
  --bg-base:     oklch(98% 0.006 85);
  --bg-surface:  oklch(99.5% 0.003 85);
  --bg-raised:   oklch(95% 0.008 85);
  --bg-hover:    oklch(93% 0.012 85);

  --border:      oklch(88% 0.010 85);
  --border-dim:  oklch(92% 0.006 85);

  --txt-primary: oklch(18% 0.012 55);
  --txt-second:  oklch(40% 0.014 55);
  --txt-dim:     oklch(56% 0.010 55);

  --accent:      oklch(52% 0.16 55);    /* 温暖琥珀棕 */
  --accent-dim:  oklch(94% 0.04 55);
  --accent-glow: oklch(52% 0.16 55 / 0.10);

  --green:       oklch(52% 0.14 155);
  --red:         oklch(55% 0.18 25);
  --amber:       oklch(65% 0.16 75);

  /* 间距 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px;

  /* 尺寸 */
  --sidebar-w: 280px;
  --radius: 10px;
}

html, body {
  height: 100%;
  background: var(--bg-base);
  color: var(--txt-primary);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.auth-locked {
  overflow: hidden;
}

body.auth-locked .sidebar,
body.auth-locked .main {
  pointer-events: none;
  user-select: none;
  filter: blur(3px) saturate(0.92);
}

/* ── AUTH SHELL ── */
.auth-shell {
  position: fixed;
  inset: 0;
  z-index: 220;
  background:
    radial-gradient(circle at var(--auth-spot-x, 22%) var(--auth-spot-y, 34%), oklch(86% 0.08 78 / 0.72), transparent 24%),
    linear-gradient(90deg, oklch(95% 0.02 82) 0%, oklch(95% 0.02 82) 50%, oklch(99% 0.01 85) 50%, oklch(99% 0.01 85) 100%);
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.auth-shell.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auth-shell-backdrop {
  position: absolute;
  inset: 0;
}

.auth-shell-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, oklch(76% 0.02 80 / 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(76% 0.02 80 / 0.16) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 76%, transparent 100%);
}

.auth-rive-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  opacity: 0.88;
  pointer-events: none;
}

.auth-shell-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.auth-visual-spacer {
  min-height: 100vh;
}

.auth-panel-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px);
}

.auth-panel {
  width: min(420px, calc(50vw - 56px));
  padding: clamp(20px, 3vw, 28px);
  border-radius: 18px;
  border: 1px solid oklch(84% 0.02 84 / 0.9);
  background: oklch(99.5% 0.003 84 / 0.86);
  backdrop-filter: blur(22px);
  box-shadow: 0 20px 60px oklch(22% 0.01 50 / 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.auth-panel-head {
  display: flex;
  justify-content: flex-start;
  gap: var(--sp-2);
  align-items: flex-start;
}

.auth-panel-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 6px;
}

.auth-panel-head h2 {
  font-size: 24px;
  line-height: 1.05;
}

.auth-signin-mount {
  min-height: 150px;
  width: 100%;
}

.auth-signin-mount > * {
  width: 100%;
}

.auth-google-button {
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid oklch(84% 0.03 82);
  background: linear-gradient(180deg, oklch(100% 0 0), oklch(97% 0.01 84));
  color: var(--txt-primary);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 24px oklch(22% 0.01 50 / 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.auth-google-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px oklch(22% 0.01 50 / 0.12);
}

.auth-google-mark {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: oklch(98% 0.01 84);
  border: 1px solid oklch(86% 0.02 82);
  color: #db4437;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}

.auth-inline-note {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid oklch(86% 0.02 82);
  background: oklch(99% 0.01 84);
}

.auth-inline-note strong,
.auth-inline-note p,
.auth-inline-note code {
  display: block;
}

.auth-inline-note strong {
  font-size: 15px;
  margin-bottom: 8px;
}

.auth-inline-note p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt-second);
  margin-bottom: 10px;
}

.auth-inline-note code {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
  word-break: break-all;
}

.auth-preview-btn {
  width: 100%;
  justify-content: center;
}

.auth-status {
  min-height: 20px;
  font-size: 12px;
  color: var(--txt-dim);
  font-family: "JetBrains Mono", monospace;
}

.auth-status.error {
  color: var(--red);
}

.auth-status.ok {
  color: var(--green);
}

.auth-user-slot {
  display: flex;
  align-items: center;
  min-height: 56px;
  overflow: visible;
  flex: 0 0 auto;
  margin-left: var(--sp-2);
  padding-right: 8px;
}

.auth-user-slot[hidden] {
  display: none;
}

.auth-user-slot > * {
  transform: scale(1.18);
  transform-origin: right center;
}

/* ── LAYOUT ── */
body {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.3s ease;
}

body.sidebar-collapsed {
  grid-template-columns: 68px minmax(0, 1fr);
}

/* ── SIDEBAR ── */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 12px oklch(22% 0.01 55 / 0.05);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: 0 var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-text {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px oklch(52% 0.16 55 / 0.25), 0 1px 3px oklch(52% 0.16 55 / 0.1);
  flex-shrink: 0;
}

.brand-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--txt-second);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--txt-primary);
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Sidebar Collapsed State */
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .nav-divider,
body.sidebar-collapsed .fetch-panel,
body.sidebar-collapsed .sidebar-footer {
  display: none;
}

body.sidebar-collapsed .sidebar-brand {
  padding: 0 var(--sp-3) var(--sp-5);
  justify-content: center;
}

body.sidebar-collapsed .nav-item {
  padding: var(--sp-3) 0;
  justify-content: center;
}

body.sidebar-collapsed .nav-item:hover {
  transform: none;
}

body.sidebar-collapsed .nav-item svg {
  margin: 0;
  width: 20px;
  height: 20px;
}

body.sidebar-collapsed .nav-item em {
  display: none;
}

.brand-mark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--txt-primary) 0%, var(--txt-second) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Manrope", sans-serif;
}

.brand-sub {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 3px;
  opacity: 0.9;
}

/* NAV */
.sidebar-nav {
  padding: 0 var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.nav-group-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: var(--sp-3) var(--sp-3) var(--sp-1) var(--sp-3);
  margin-top: var(--sp-1);
}

.nav-divider {
  height: 1px;
  background: var(--border-dim);
  margin: var(--sp-3) var(--sp-4);
  opacity: 0.8;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--txt-second);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.nav-item em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  color: var(--txt-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.2s ease;
  border-radius: 0 4px 4px 0;
}

.nav-item svg {
  width: 18px; height: 18px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--txt-primary);
  transform: translateX(3px);
}

.nav-item:hover svg {
  transform: scale(1.1);
}

.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
}

.nav-item.active::before {
  transform: scaleY(1);
}

.nav-item-disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.nav-item-disabled:hover {
  background: transparent;
  color: var(--txt-second);
  transform: none;
}

.nav-item-disabled:hover svg {
  transform: none;
}

/* ── VIZ PANEL ── */
.export-viz {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.viz-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.viz-card-compact {
  padding: var(--sp-4);
}

.sankey-card {
  min-height: 282px;
}

.viz-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.viz-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--txt-primary);
  letter-spacing: -0.01em;
}

.viz-hint {
  font-size: 11px;
  color: var(--txt-dim);
}

/* Metric Tabs - like the financial report pill buttons */
.viz-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.viz-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--txt-second);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.viz-tab:hover {
  background: var(--bg-hover);
  color: var(--txt-primary);
  border-color: var(--txt-dim);
}

.viz-tab.active {
  background: oklch(82% 0.12 168 / 0.15);
  color: oklch(45% 0.16 168);
  border-color: oklch(72% 0.14 168 / 0.4);
  font-weight: 700;
}

.viz-tab[data-metric="deposit_amount"].active {
  background: oklch(82% 0.12 168 / 0.15);
  color: oklch(45% 0.16 168);
  border-color: oklch(72% 0.14 168 / 0.4);
}

.viz-tab[data-metric="new_registers"].active {
  background: oklch(82% 0.12 145 / 0.15);
  color: oklch(45% 0.14 145);
  border-color: oklch(72% 0.12 145 / 0.4);
}

.viz-tab[data-metric="deposit_count"].active {
  background: oklch(82% 0.10 250 / 0.15);
  color: oklch(48% 0.14 250);
  border-color: oklch(72% 0.10 250 / 0.4);
}

.viz-tab[data-metric="win_lose"].active {
  background: oklch(82% 0.10 25 / 0.15);
  color: oklch(48% 0.16 25);
  border-color: oklch(72% 0.12 25 / 0.4);
}

.viz-metric-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-3);
}

.viz-metric-hint strong {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--txt-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.viz-metric-hint span {
  font-size: 11px;
  color: var(--txt-dim);
  font-family: "JetBrains Mono", monospace;
}

.viz-metric-hint[data-metric="deposit_amount"] strong {
  border-color: oklch(72% 0.14 168 / 0.35);
  background: oklch(82% 0.12 168 / 0.12);
  color: oklch(45% 0.16 168);
}

.viz-metric-hint[data-metric="new_registers"] strong {
  border-color: oklch(72% 0.12 145 / 0.35);
  background: oklch(82% 0.12 145 / 0.12);
  color: oklch(45% 0.14 145);
}

.viz-metric-hint[data-metric="deposit_count"] strong {
  border-color: oklch(72% 0.10 250 / 0.35);
  background: oklch(82% 0.10 250 / 0.12);
  color: oklch(48% 0.14 250);
}

.viz-metric-hint[data-metric="win_lose"] strong {
  border-color: oklch(72% 0.12 25 / 0.35);
  background: oklch(82% 0.10 25 / 0.12);
  color: oklch(48% 0.16 25);
}

.flow-metric-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-2);
}

.flow-metric-hint strong {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid oklch(72% 0.09 145 / 0.35);
  background: oklch(82% 0.08 145 / 0.12);
  color: oklch(43% 0.12 145);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.flow-metric-hint span {
  font-size: 11px;
  color: var(--txt-dim);
  font-family: "JetBrains Mono", monospace;
}

/* KPI Row below tabs */
.viz-kpis {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  min-height: 0;
}

.viz-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: var(--bg-raised);
  border-radius: 8px;
  min-width: 0;
  flex: 1;
}

.viz-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viz-kpi-value {
  font-size: 18px;
  font-weight: 800;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.viz-kpi-delta {
  font-size: 10px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
}

.viz-kpi-delta.positive { color: oklch(55% 0.18 145); }
.viz-kpi-delta.negative { color: oklch(55% 0.18 25); }

/* Chart Container */
.viz-chart-container {
  width: 100%;
  min-height: 360px;
  flex: 1;
  min-width: 0;
}

.sankey-chart-container {
  width: 100%;
  min-height: 214px;
  min-width: 0;
}

.sankey-empty-state {
  min-height: 214px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
}

.sankey-empty-state strong {
  font-size: 16px;
  line-height: 1.1;
  color: var(--txt-primary);
}

.sankey-empty-state p {
  max-width: 28ch;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-second);
}

.trend-empty-state {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  text-align: center;
}

.trend-empty-state strong {
  font-size: 20px;
  line-height: 1.1;
  color: var(--txt-primary);
}

.trend-empty-state p {
  max-width: 30ch;
  font-size: 13px;
  color: var(--txt-second);
}

.trend-empty-badge {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.trend-empty-badge span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: oklch(74% 0.10 168 / 0.7);
  animation: trendEmptyPulse 1.8s ease-in-out infinite;
}

.trend-empty-badge span:nth-child(2) {
  animation-delay: 0.18s;
}

.trend-empty-badge span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes trendEmptyPulse {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-4px); opacity: 1; }
}

.trend-empty-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

.trend-empty-steps span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  font-size: 11px;
  color: var(--txt-dim);
  white-space: nowrap;
}

/* BACKFILL PANEL */
.backfill-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.backfill-progress-bar {
  height: 6px;
  background: var(--bg-raised);
  border-radius: 3px;
  overflow: hidden;
  margin-top: var(--sp-2);
}

.backfill-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(72% 0.14 168), oklch(82% 0.12 168));
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s ease;
}

.backfill-progress-text {
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

/* FETCH PANEL */
.fetch-panel {
  margin-top: auto;
  padding: var(--sp-4) var(--sp-4) 0;
  border-top: 1px solid var(--border-dim);
}

.fetch-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-3);
}

.fetch-title em {
  margin-left: 8px;
  font-style: normal;
  font-size: 10px;
  color: var(--txt-dim);
  letter-spacing: 0.08em;
}

.fetch-panel-disabled {
  opacity: 0.58;
}

.fetch-panel-disabled .fetch-select,
.fetch-panel-disabled .fetch-btn {
  cursor: not-allowed;
}

.fetch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.fetch-select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--txt-primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  width: 100%;
}

.fetch-select:focus { border-color: var(--accent); }

.fetch-btn {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent);
  color: oklch(99% 0.005 85);
  border: none;
  border-radius: var(--radius);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: opacity 0.15s, transform 0.1s;
}

.fetch-btn svg { width: 14px; height: 14px; fill: currentColor; }
.fetch-btn:hover { opacity: 0.88; }
.fetch-btn:active { transform: scale(0.98); }
.fetch-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.fetch-btn-all {
  margin-top: var(--sp-2);
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  font-size: 12px;
  padding: var(--sp-1) var(--sp-3);
}
.fetch-btn-all:hover { background: var(--accent-dim); opacity: 1; }

.fetch-btn-force {
  margin-top: var(--sp-1);
  background: transparent;
  color: var(--txt-dim);
  border: 1px dashed var(--border);
  font-size: 11px;
  padding: 3px var(--sp-3);
  font-weight: 500;
}
.fetch-btn-force:hover { color: var(--amber); border-color: var(--amber); background: oklch(78% 0.18 80 / 0.06); opacity: 1; }

.fetch-status {
  margin-top: var(--sp-2);
  font-size: 11px;
  color: var(--txt-second);
  font-family: "JetBrains Mono", monospace;
  min-height: 16px;
  word-break: break-all;
}

.fetch-status.error { color: var(--red); }
.fetch-status.ok    { color: var(--green); }

.fetch-progress { margin-top: var(--sp-2); }
.progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
  border-radius: 2px;
}
.progress-label {
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
  margin-top: var(--sp-1);
}

.fetch-summary {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, oklch(99.5% 0.003 85), oklch(95% 0.025 55));
}

.fetch-summary-empty {
  font-size: 11px;
  color: var(--txt-dim);
}

.fetch-summary-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 10px;
  color: var(--txt-dim);
  margin-bottom: var(--sp-2);
}

.fetch-summary-head strong {
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-second);
  font-weight: 500;
}

.fetch-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.fetch-summary-grid div {
  padding: var(--sp-2);
  border-radius: 6px;
  background: oklch(99% 0.002 85 / 0.72);
}

.fetch-summary-grid b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--txt-primary);
  font-weight: 600;
}

.fetch-summary-grid span,
.fetch-summary-line,
.fetch-summary-note,
.fetch-summary-error {
  font-size: 10px;
  color: var(--txt-dim);
}

.fetch-summary-line {
  margin-top: 3px;
  line-height: 1.35;
}

.fetch-summary-note {
  margin-top: var(--sp-2);
  color: var(--txt-second);
}

.fetch-summary-error {
  margin-top: var(--sp-1);
  color: var(--red);
  font-weight: 700;
}

/* SIDEBAR FOOTER */
.sidebar-footer {
  padding: var(--sp-3) var(--sp-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stat-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
}

.last-updated {
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
}

/* ── MAIN ── */
.main {
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.view { display: none; flex-direction: column; flex: 1; }
.view { min-width: 0; }
.view.active { display: flex; }

/* VIEW HEADER */
.view-header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  background: var(--bg-base);
  z-index: 10;
}

.header-left { display: flex; align-items: baseline; gap: var(--sp-3); }

.view-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--txt-primary);
}

.filtered-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--txt-dim);
}

.header-right { display: flex; align-items: center; gap: var(--sp-3); }

.locale-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid oklch(86% 0.02 82 / 0.9);
  background:
    linear-gradient(180deg, oklch(99.8% 0.003 84), oklch(96.5% 0.01 82));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.9),
    0 10px 24px oklch(22% 0.01 50 / 0.08);
}

.locale-chip {
  border: none;
  background: transparent;
  color: var(--txt-dim);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.locale-chip:hover {
  color: var(--txt-primary);
  transform: translateY(-1px);
}

.locale-chip.active {
  background:
    linear-gradient(135deg, oklch(60% 0.16 65), oklch(52% 0.16 42));
  color: oklch(99% 0.004 85);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.32),
    0 8px 16px oklch(38% 0.08 52 / 0.22);
}

/* SEARCH */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  fill: var(--txt-dim);
  pointer-events: none;
}
.search-input {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--txt-primary);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 32px;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}
.search-input::placeholder { color: var(--txt-dim); }
.search-input:focus { border-color: var(--accent); }

/* GHOST BUTTON */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--txt-second);
  border-radius: var(--radius);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  transition: background 0.15s, color 0.15s;
}
.btn-ghost svg { width: 13px; height: 13px; fill: currentColor; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--txt-primary); }
.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* FILTER BAR */
.filter-bar {
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border-dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  background: var(--bg-surface);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-dim);
  white-space: nowrap;
}

.filter-chips { display: flex; gap: var(--sp-1); }

.chip {
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--txt-second);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent-dim); color: var(--txt-primary); }
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.filter-select {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--txt-primary);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
}

/* TABLE */
.table-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--bg-raised);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-dim);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--txt-second); }
.data-table th.sorted-asc::after  { content: " ↑"; color: var(--accent); }
.data-table th.sorted-desc::after { content: " ↓"; color: var(--accent); }
.data-table th.num { text-align: right; }

.data-table td {
  padding: var(--sp-2) var(--sp-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--txt-primary);
  border-bottom: 1px solid var(--border-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  transition: background 0.15s ease;
}

.data-table tr:hover td { background: var(--bg-hover); }

.data-table td.num { text-align: right; }

/* EMPTY STATE */
.empty-row td { padding: var(--sp-8) 0; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty-icon { font-size: 36px; color: var(--border); }
.empty-text { font-size: 16px; font-weight: 600; color: var(--txt-dim); }
.empty-hint { font-size: 12px; color: var(--txt-dim); font-family: "JetBrains Mono", monospace; }

/* BADGES */
.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.04em;
}
.badge-normal { background: oklch(68% 0.20 155 / 0.15); color: var(--green); }
.badge-locked { background: oklch(60% 0.22 25 / 0.15); color: var(--red); }
.badge-paused { background: oklch(78% 0.18 80 / 0.12); color: var(--amber); }
.badge-default { background: var(--bg-raised); color: var(--txt-second); }

.level-badge {
  font-size: 11px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: var(--txt-dim);
}

/* WIN/LOSE COLORS */
.pos { color: var(--green); }
.neg { color: var(--red); }

/* PAGINATION */
.pagination {
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border-dim);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-surface);
}

.page-btn {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--txt-second);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  min-width: 32px;
  text-align: center;
}
.page-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }
.page-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-info {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--txt-dim);
  margin-left: auto;
}

/* ── STATS VIEW ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-6);
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 2px 8px oklch(22% 0.01 55 / 0.02);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px oklch(22% 0.01 55 / 0.05);
  border-color: var(--border-dim);
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-2);
}

.stat-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
  font-weight: 500;
  color: var(--txt-primary);
}

.section-title {
  padding: 0 var(--sp-6) var(--sp-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* AGENT CHART */
.agent-chart {
  padding: 0 var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.agent-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: var(--sp-3);
}

.agent-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--txt-second);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-bar-track {
  height: 10px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.agent-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.agent-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--txt-dim);
}

/* LEVEL CHART */
.level-bars {
  padding: 0 var(--sp-6) var(--sp-6);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.level-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-width: 72px;
}

.level-bar-wrap {
  width: 40px;
  height: 120px;
  background: var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.level-bar {
  width: 100%;
  background: var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
  transition: height 0.6s ease;
}

.level-col-label {
  font-size: 11px;
  font-family: "Manrope", sans-serif;
  color: var(--txt-dim);
}

.level-col-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--txt-second);
}

/* ── EXPORT WORKBENCH ── */
.export-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.94fr) minmax(248px, 0.68fr);
  gap: var(--sp-5);
  padding: var(--sp-6);
  align-items: start;
}

.export-workbench > * {
  min-width: 0;
}

.export-builder,
.export-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 22px oklch(22% 0.01 55 / 0.04);
}

.export-builder {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.export-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.export-step-num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--txt-primary);
  color: var(--bg-surface);
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}

.export-step h2 {
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 3px;
}

.export-step p {
  font-size: 12px;
  color: var(--txt-dim);
  margin: 0;
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.export-grid-source {
  grid-template-columns: minmax(0, 1fr);
}

.export-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.export-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

.export-field select,
.export-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--txt-primary);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}

.export-field select:focus,
.export-field input:focus {
  border-color: var(--accent);
  background: var(--bg-surface);
}

.export-field-highlight span {
  color: oklch(48% 0.12 145);
}

.export-field-highlight select {
  border-color: oklch(72% 0.12 145 / 0.45);
  background: oklch(97% 0.02 145);
  color: oklch(36% 0.09 145);
  font-weight: 700;
}

.export-mode-row,
.quick-range-row,
.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.export-mode {
  flex: 1;
  min-width: 156px;
  min-height: 60px;
  border: 1px solid oklch(86% 0.02 82 / 0.95);
  border-radius: 14px;
  background:
    radial-gradient(circle at top, oklch(100% 0 0 / 0.92), transparent 52%),
    linear-gradient(180deg, oklch(99.6% 0.004 84), oklch(95.8% 0.012 78));
  color: var(--txt-primary);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.85),
    0 14px 28px oklch(22% 0.01 50 / 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.export-mode::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.36), transparent 58%);
  pointer-events: none;
}

.export-mode:hover:not(.disabled) {
  transform: translateY(-2px);
  border-color: oklch(78% 0.06 68 / 0.95);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.9),
    0 18px 34px oklch(22% 0.01 50 / 0.12);
}

.export-mode-label {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 oklch(100% 0 0 / 0.48);
}

.export-mode.active {
  border-color: oklch(68% 0.12 62 / 0.95);
  background:
    radial-gradient(circle at top, oklch(100% 0 0 / 0.22), transparent 50%),
    linear-gradient(135deg, oklch(59% 0.18 66), oklch(50% 0.16 38));
  color: oklch(99% 0.004 85);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.26),
    0 18px 36px oklch(40% 0.08 46 / 0.22);
}

.export-mode.disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.quick-range {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt-second);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

.quick-range.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
}

.export-action-secondary,
.export-action-primary {
  min-width: 140px;
  justify-content: center;
}

.export-action-primary {
  width: auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.export-status {
  min-height: 20px;
  font-size: 12px;
  color: var(--txt-dim);
  font-family: "JetBrains Mono", monospace;
}

.export-status.ok { color: var(--green); }
.export-status.warn { color: var(--amber); }
.export-status.error { color: var(--red); }

.workbench-refresh-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.workbench-refresh-modal[hidden] {
  display: none;
}

.workbench-refresh-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.workbench-refresh-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(16% 0.01 40 / 0.42);
  backdrop-filter: blur(6px);
}

.workbench-refresh-dialog {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px oklch(18% 0.01 50 / 0.22);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.workbench-refresh-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--txt-second);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.workbench-refresh-head h2 {
  margin: 2px 0 6px;
  font-size: 24px;
  line-height: 1.12;
}

#workbenchRefreshTitle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

#workbenchRefreshTitle::before {
  content: "!";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(82% 0.12 76 / 0.18);
  color: var(--amber);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.workbench-refresh-head p {
  margin: 0;
  font-size: 14px;
  color: var(--txt-second);
}

.workbench-refresh-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

.workbench-refresh-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workbench-refresh-chip {
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: var(--bg-raised);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.workbench-refresh-chip.is-wide {
  grid-column: 1 / -1;
}

.workbench-refresh-chip-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(88% 0.06 178 / 0.30);
  color: oklch(43% 0.10 176);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.workbench-refresh-chip-body {
  min-width: 0;
}

.workbench-refresh-chip-body span,
.workbench-refresh-chip-body strong {
  display: block;
}

.workbench-refresh-chip-body span {
  font-size: 12px;
  font-weight: 750;
  color: var(--txt-dim);
  margin-bottom: 5px;
}

.workbench-refresh-chip-body strong {
  font-size: 16px;
  line-height: 1.25;
  color: var(--txt-primary);
  overflow-wrap: anywhere;
}

.workbench-refresh-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.workbench-refresh-bar {
  height: 12px;
  border-radius: 999px;
  background: oklch(93% 0.01 90);
  overflow: hidden;
}

.workbench-refresh-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(74% 0.13 165), oklch(64% 0.15 188));
  transition: width 0.25s ease;
}

.workbench-refresh-fill.indeterminate {
  width: 38%;
  animation: workbenchRefreshSlide 1.1s ease-in-out infinite;
}

@keyframes workbenchRefreshSlide {
  0% { transform: translateX(-90%); }
  100% { transform: translateX(240%); }
}

.workbench-refresh-status {
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-second);
}

.workbench-refresh-note {
  font-size: 13px;
  color: var(--txt-dim);
  line-height: 1.5;
}

.workbench-refresh-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.workbench-refresh-actions .btn-ghost {
  width: 168px;
  min-width: 168px;
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}

.workbench-refresh-actions .fetch-btn {
  width: auto;
  flex: 1 1 auto;
}

.export-thai-modal {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.export-thai-modal[hidden] {
  display: none;
}

.export-thai-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.export-thai-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(16% 0.01 40 / 0.46);
  backdrop-filter: blur(6px);
}

.export-thai-dialog {
  position: relative;
  width: min(1120px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 70px oklch(18% 0.01 50 / 0.26);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.export-thai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-right: 34px;
}

.export-thai-head h2 {
  margin: 2px 0 6px;
  font-size: 24px;
  line-height: 1.1;
}

.export-thai-head p,
.export-thai-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-second);
}

.export-thai-actions,
.export-thai-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.export-thai-actions {
  justify-content: flex-end;
}

.export-thai-controls {
  align-items: flex-end;
}

.export-thai-controls .export-field {
  min-width: 160px;
}

.export-thai-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
}

.export-thai-tab {
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--txt-second);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.export-thai-tab:hover {
  background: var(--bg-hover);
  color: var(--txt-primary);
}

.export-thai-tab.active {
  border-color: oklch(72% 0.12 145 / 0.36);
  background: oklch(82% 0.08 145 / 0.16);
  color: oklch(42% 0.12 145);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.62);
}

.export-thai-tab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: var(--bg-raised);
  margin-bottom: var(--sp-3);
}

.export-thai-tab-head strong,
.export-thai-tab-head span {
  display: block;
}

.export-thai-tab-head strong {
  font-size: 15px;
  line-height: 1.2;
  color: var(--txt-primary);
}

.export-thai-tab-head span {
  margin-top: 4px;
  font-size: 12px;
  color: var(--txt-second);
}

.export-thai-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.export-thai-panel .export-panel-title {
  margin-bottom: 0;
}

.export-thai-open-btn {
  justify-content: center;
  width: 100%;
}

.export-thai-body {
  max-height: none;
}

.export-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: sticky;
  top: 92px;
  min-width: 0;
}

.export-panel {
  padding: var(--sp-4);
}

.export-preview-panel {
  padding: var(--sp-3);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.export-preview-panel.is-updated {
  border-color: var(--green);
  box-shadow: 0 0 0 3px oklch(52% 0.14 155 / 0.12);
}

.export-preview-panel .export-panel-title {
  margin-bottom: var(--sp-2);
}

.export-preview-panel .export-kpis div {
  padding: 10px;
}

.export-preview-panel .export-kpis strong {
  font-size: 16px;
}

.export-panel-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-3);
}

.export-panel-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  cursor: pointer;
  text-align: left;
}

.export-panel-toggle .export-panel-title {
  margin-bottom: 0;
}

.export-panel-toggle-icon {
  font-size: 13px;
  color: var(--txt-dim);
  transition: transform 0.2s ease;
}

.export-history-panel.collapsed .export-panel-toggle-icon {
  transform: rotate(-90deg);
}

.export-preview-empty {
  font-size: 12px;
  color: var(--txt-dim);
}

.export-preview-loading {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.export-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.export-kpis div {
  padding: var(--sp-3);
  background: var(--bg-raised);
  border-radius: 8px;
}

.export-kpi {
  min-width: 0;
  border: 1px solid transparent;
}

.export-kpis span {
  display: block;
  font-size: 11px;
  color: var(--txt-dim);
  margin-bottom: 4px;
}

.export-kpis strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
}

.export-kpi-value {
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.export-kpi em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
}

.export-kpi.tone-neutral {
  border-color: oklch(88% 0.04 240);
  background: oklch(97% 0.02 240);
}

.export-kpi.tone-neutral .export-kpi-value {
  color: oklch(42% 0.09 245);
}

.export-kpi.tone-positive {
  border-color: oklch(88% 0.05 155);
  background: oklch(97% 0.02 155);
}

.export-kpi.tone-positive .export-kpi-value {
  color: oklch(45% 0.11 155);
}

.export-kpi.tone-accent {
  border-color: oklch(90% 0.05 88);
  background: oklch(98% 0.02 88);
}

.export-kpi.tone-accent .export-kpi-value {
  color: oklch(48% 0.09 84);
}

.export-kpi.tone-negative {
  border-color: oklch(88% 0.05 28);
  background: oklch(98% 0.02 28);
}

.export-kpi.tone-negative .export-kpi-value {
  color: oklch(52% 0.13 28);
}

.export-preview-line {
  margin-top: var(--sp-3);
  color: var(--txt-second);
  font-size: 12px;
}

.export-platform-bars {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.export-platform-row,
.export-source-card,
.export-history-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border-dim);
}

.export-source-card div,
.export-history-item {
  min-width: 0;
}

.export-source-card strong,
.export-history-item strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.export-source-card span,
.export-history-item span {
  display: block;
  font-size: 11px;
  color: var(--txt-dim);
  margin-top: 2px;
}

.export-source-card b,
.export-platform-row strong {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent);
  white-space: nowrap;
}

.export-platform-name {
  color: var(--txt-second);
  font-weight: 700;
}

.export-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.export-history-card {
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: var(--bg-raised);
  overflow: hidden;
}

.export-history-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.export-history-summary::-webkit-details-marker {
  display: none;
}

.export-history-card[open] .export-history-summary {
  padding-bottom: 12px;
}

.export-history-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: flex-start;
}

.export-history-head strong {
  display: block;
  font-size: 13px;
  color: var(--txt-primary);
  line-height: 1.45;
  word-break: break-word;
}

.export-history-head b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  color: var(--accent);
  white-space: nowrap;
  font-size: 12px;
}

.export-history-sub {
  font-size: 11px;
  color: var(--txt-dim);
  line-height: 1.5;
}

.export-history-subrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.export-history-caret {
  color: var(--txt-dim);
  font-size: 12px;
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}

.export-history-card[open] .export-history-caret {
  transform: rotate(180deg);
}

.export-history-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}

.export-history-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--border-dim);
}

.export-history-fact span {
  font-size: 10px;
  color: var(--txt-dim);
}

.export-history-fact strong {
  font-size: 12px;
  color: var(--txt-second);
  text-align: right;
  word-break: break-word;
}

.export-history-fact:first-child strong {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── THAI AA VIEW ── */
.date-compact {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--txt-primary);
  padding: 7px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.thai-fetch-btn {
  width: auto;
  padding: 8px 18px;
}

#view-thai .view-title {
  font-size: 30px;
}

#view-thai .filtered-badge {
  font-size: 13px;
}

#view-thai .date-compact,
#view-thai .filter-select,
#view-thai .btn-ghost,
#view-thai .thai-fetch-btn {
  font-size: 14px;
}

#view-thai .filter-select {
  padding: 7px 10px;
}

.thai-workspace {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: 15px;
}

.thai-builder {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, oklch(92% 0.05 150 / 0.22), transparent 34%),
    linear-gradient(180deg, oklch(100% 0 0 / 0.95), oklch(97% 0.01 140));
  box-shadow: 0 10px 30px oklch(22% 0.01 55 / 0.05);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.thai-builder-copy h2 {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.thai-builder-copy p {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--txt-second);
}

.thai-builder-row,
.thai-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.thai-builder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.thai-dataset-preview {
  padding: var(--sp-4);
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  background: oklch(100% 0 0 / 0.58);
}

.ku-flow-panel {
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ku-flow-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: flex-end;
}

.ku-flow-head h2 {
  margin: var(--sp-1) 0 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.ku-flow-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
  gap: var(--sp-2);
  align-items: end;
}

.ku-flow-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ku-flow-summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  background: oklch(98% 0.006 95);
}

.ku-flow-summary strong,
.ku-flow-summary span,
.ku-flow-basis {
  display: block;
}

.ku-flow-summary span,
.ku-flow-basis,
.ku-flow-note {
  color: var(--txt-dim);
  font-size: 12px;
}

.ku-flow-note.warn {
  color: var(--amber);
}

.ku-flow-chart {
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: var(--sp-4);
  background:
    linear-gradient(180deg, oklch(99% 0.004 95), oklch(96.5% 0.008 95));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.ku-flow-chart-head,
.ku-flow-chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.ku-flow-chart-head strong {
  display: block;
  font-size: 18px;
}

.ku-flow-chart-head span,
.ku-flow-chart-total span,
.ku-flow-chart-footer {
  color: var(--txt-dim);
  font-size: 12px;
}

.ku-flow-chart-total {
  text-align: right;
}

.ku-flow-chart-total b {
  display: block;
  color: var(--accent);
  font-size: 24px;
  line-height: 1.1;
}

.ku-flow-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  min-height: 260px;
}

.ku-flow-chart-item {
  min-width: 0;
  display: grid;
  grid-template-rows: 150px auto auto;
  gap: var(--sp-2);
}

.ku-flow-bar-stage {
  height: 150px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      to top,
      oklch(91% 0.006 95),
      oklch(91% 0.006 95) 1px,
      transparent 1px,
      transparent 30px
    );
  display: flex;
  align-items: flex-end;
  padding: 0 14px;
}

.ku-flow-bar {
  width: 100%;
  min-height: 5px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, oklch(66% 0.15 254), oklch(45% 0.12 254));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.28);
}

.ku-flow-chart-label strong,
.ku-flow-chart-label span,
.ku-flow-chart-facts em {
  display: block;
}

.ku-flow-chart-label strong {
  font-size: 14px;
}

.ku-flow-chart-label span {
  color: var(--txt-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ku-flow-chart-facts {
  min-width: 0;
  color: var(--txt-dim);
  font-size: 11px;
  line-height: 1.6;
}

.ku-flow-chart-facts em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.ku-flow-chart .neg,
.ku-flow-chart-footer .neg {
  color: var(--red);
}

.ku-flow-chart .pos,
.ku-flow-chart-footer .pos {
  color: var(--green);
}

.ku-flow-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}

.ku-flow-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.ku-flow-table th,
.ku-flow-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-dim);
  text-align: left;
  white-space: nowrap;
}

.ku-flow-table th {
  background: oklch(49% 0.12 254);
  color: white;
  font-weight: 800;
}

.ku-flow-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ku-flow-table .neg {
  color: var(--red);
}

.ku-flow-table .pos {
  color: var(--green);
}

.ku-flow-total td {
  background: oklch(93% 0.028 255);
  font-weight: 900;
}

.thai-detail-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-dim);
  padding-top: var(--sp-2);
}

.thai-range-hero {
  background:
    radial-gradient(circle at 12% 12%, oklch(89% 0.08 55 / 0.30), transparent 32%),
    linear-gradient(135deg, oklch(99% 0.004 90), oklch(95% 0.026 150));
}

.thai-status {
  min-height: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--txt-dim);
}

.thai-status.ok { color: var(--green); }
.thai-status.warn { color: var(--amber); }
.thai-status.error { color: var(--red); }

.thai-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.thai-hero,
.thai-empty {
  background:
    linear-gradient(135deg, oklch(99% 0.004 90), oklch(95% 0.026 150));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-5);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-5);
  align-items: flex-end;
}

.thai-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-2);
}

.thai-hero h2,
.thai-empty h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
}

.thai-hero p,
.thai-empty p,
.thai-empty-note {
  margin: var(--sp-2) 0 0;
  color: var(--txt-dim);
  font-size: 13px;
}

.thai-net {
  min-width: 190px;
  text-align: right;
}

.thai-net span {
  display: block;
  font-size: 12px;
  color: var(--txt-dim);
  margin-bottom: 4px;
}

.thai-net strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 28px;
}

.thai-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: var(--sp-3);
}

.thai-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.thai-trend-grid .trend-panel {
  background:
    radial-gradient(circle at top right, oklch(92% 0.05 150 / 0.22), transparent 34%),
    linear-gradient(180deg, oklch(100% 0 0 / 0.94), oklch(97% 0.01 140));
}

.thai-trend-grid .trend-panel h3 {
  font-size: 24px;
}

.thai-kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-4);
}

.thai-kpi span {
  display: block;
  color: var(--txt-dim);
  font-size: 12px;
  margin-bottom: var(--sp-2);
}

.thai-kpi strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
}

.thai-kpi em {
  font-style: normal;
  font-size: 12px;
  color: var(--txt-dim);
  margin-left: 4px;
}

.thai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.thai-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--sp-4);
  overflow: hidden;
}

.thai-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-3);
}

.thai-bars,
.thai-buckets {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.thai-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 96px;
  gap: var(--sp-3);
  align-items: center;
  font-size: 13px;
}

.thai-bar-row span,
.thai-platform-row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thai-track {
  height: 10px;
  background: var(--bg-raised);
  border-radius: 999px;
  overflow: hidden;
}

.thai-track div {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--amber));
  border-radius: 999px;
}

.thai-bar-row strong,
.thai-bucket strong,
.thai-bucket small {
  font-family: "JetBrains Mono", monospace;
}

.thai-bucket-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 13px;
}

.thai-bucket small {
  display: block;
  color: var(--txt-dim);
  margin-top: 4px;
}

.thai-table-wrap {
  overflow: auto;
}

.thai-table {
  width: 100%;
  border-collapse: collapse;
}

.thai-table th,
.thai-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-dim);
  text-align: left;
  white-space: nowrap;
}

.thai-table th {
  color: var(--txt-dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thai-table td {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

.thai-table td span {
  display: block;
  color: var(--txt-dim);
  font-family: "Manrope", sans-serif;
  font-size: 12px;
}

.metric-focus {
  color: var(--accent);
  font-weight: 800;
}

.thai-history {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.thai-history-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}

.thai-history-item strong,
.thai-history-item span {
  display: block;
}

.thai-history-item strong {
  font-family: "JetBrains Mono", monospace;
}

.thai-history-item span {
  color: var(--txt-dim);
  font-size: 12px;
  margin-top: 2px;
}

#view-thai .verify-idle-text {
  font-size: 20px;
}

#view-thai .verify-idle-hint {
  font-size: 13px;
}

/* ── ANALYTICS VIEW ── */
.analytics-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.analytics-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-surface);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.7);
}

.analytics-tab {
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--txt-second);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  padding: 6px 12px;
  transition: background 0.16s, color 0.16s, transform 0.16s;
}

.analytics-tab:hover {
  color: var(--txt-primary);
}

.analytics-tab.active {
  background: var(--accent);
  color: oklch(99% 0.005 85);
  transform: translateY(-1px);
}

.analytics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid oklch(72% 0.06 55);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 12%, oklch(88% 0.08 55 / 0.55), transparent 32%),
    radial-gradient(circle at 90% 8%, oklch(83% 0.13 76 / 0.34), transparent 28%),
    linear-gradient(135deg, oklch(99% 0.004 85), oklch(93% 0.04 55));
  box-shadow: 0 18px 50px oklch(30% 0.06 55 / 0.10);
  overflow: hidden;
  position: relative;
}

.analytics-hero::after {
  content: "";
  position: absolute;
  inset: auto -60px -80px auto;
  width: 220px;
  height: 220px;
  border: 1px solid oklch(50% 0.12 55 / 0.20);
  border-radius: 50%;
}

.analytics-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

.analytics-title {
  font-size: clamp(32px, 5vw, 64px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: oklch(20% 0.02 55);
}

.analytics-sub {
  margin-top: var(--sp-4);
  max-width: 760px;
  color: var(--txt-second);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.analytics-share {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  z-index: 1;
}

.analytics-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
}

.share-row,
.analytics-bar-row {
  display: grid;
  grid-template-columns: 84px minmax(80px, 1fr) 72px;
  align-items: center;
  gap: var(--sp-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.share-row span,
.analytics-bar-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--txt-second);
}

.share-row b,
.analytics-bar-row b {
  color: var(--txt-primary);
  font-weight: 600;
  text-align: right;
}

.share-track,
.analytics-bar-track {
  height: 10px;
  border-radius: 999px;
  background: oklch(89% 0.015 55);
  overflow: hidden;
}

.share-track div,
.analytics-bar-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), oklch(62% 0.16 30));
}

.analytics-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.analytics-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--sp-4);
  box-shadow: 0 8px 24px oklch(22% 0.01 55 / 0.04);
}

.analytics-card-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

.analytics-card-value {
  margin-top: var(--sp-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--txt-primary);
  letter-spacing: -0.04em;
}

.analytics-card-hint {
  margin-top: var(--sp-1);
  font-size: 11px;
  color: var(--txt-dim);
}

.analytics-card.tone-risk .analytics-card-value { color: var(--amber); }
.analytics-card.tone-money .analytics-card-value { color: var(--green); }
.analytics-card.tone-ag .analytics-card-value,
.analytics-card.tone-mg .analytics-card-value,
.analytics-card.tone-active .analytics-card-value { color: var(--accent); }

.analytics-cards-secondary .analytics-card {
  border-radius: 14px;
}

.trend-capability-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.trend-cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: oklch(100% 0 0 / 0.56);
  backdrop-filter: blur(8px);
}

.trend-cap-chip span,
.trend-cap-chip strong {
  font-size: 11px;
  line-height: 1;
}

.trend-cap-chip span {
  color: var(--txt-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.trend-cap-chip strong {
  color: var(--txt-primary);
  font-family: "JetBrains Mono", monospace;
}

.trend-cap-chip.mode-actual {
  border-color: oklch(70% 0.10 155);
  background: oklch(97% 0.03 155 / 0.82);
}

.trend-cap-chip.mode-cohort {
  border-color: oklch(78% 0.07 75);
  background: oklch(98% 0.025 75 / 0.84);
}

.trend-cap-chip.mode-unavailable {
  border-style: dashed;
  background: oklch(98% 0.004 85 / 0.80);
}

.trend-pulse-card {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid oklch(100% 0 0 / 0.60);
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.80), oklch(97% 0.012 55 / 0.80));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.7);
}

.trend-pulse-card span,
.trend-pulse-card em {
  display: block;
}

.trend-pulse-card span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

.trend-pulse-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--txt-primary);
  font-family: "JetBrains Mono", monospace;
}

.trend-pulse-card em {
  margin-top: 8px;
  font-size: 11px;
  color: var(--txt-second);
  font-style: normal;
}

.analytics-trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.trend-panel {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--sp-5);
  background:
    radial-gradient(circle at top right, oklch(92% 0.05 55 / 0.35), transparent 32%),
    linear-gradient(180deg, oklch(100% 0 0 / 0.94), oklch(97% 0.008 55));
  box-shadow: 0 12px 36px oklch(24% 0.02 55 / 0.05);
  position: relative;
  overflow: hidden;
}

.trend-panel-wide {
  grid-column: 1 / -1;
}

.trend-panel-empty {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

.trend-panel-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: flex-start;
}

.trend-panel-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

.trend-panel h3 {
  margin-top: 8px;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.trend-panel-badge {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--txt-second);
}

.trend-panel-badge.mode-actual {
  color: var(--green);
  border-color: oklch(70% 0.10 155);
  background: oklch(96% 0.03 155);
}

.trend-panel-badge.mode-cohort {
  color: var(--amber);
  border-color: oklch(78% 0.08 75);
  background: oklch(98% 0.025 75);
}

.trend-panel-badge.mode-unavailable {
  color: var(--txt-dim);
  border-style: dashed;
}

.trend-panel-basis {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-second);
  max-width: 720px;
}

.trend-chart-shell {
  margin-top: var(--sp-4);
}

.trend-chart-stage {
  position: relative;
}

.trend-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--txt-second);
  font-family: "JetBrains Mono", monospace;
}

.trend-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.trend-svg {
  width: 100%;
  height: 260px;
  display: block;
}

.trend-point-dot {
  opacity: 0.88;
}

.trend-hit-dot {
  cursor: pointer;
}

.trend-hit-dot.active + .trend-last-dot,
.trend-hit-dot.active {
  outline: none;
}

.trend-hit-dot.active {
  filter: drop-shadow(0 0 0 transparent);
}

.trend-hit-dot.active ~ .trend-last-dot {
  opacity: 1;
}

.trend-grid-line {
  stroke: oklch(88% 0.012 55);
  stroke-width: 1;
}

.trend-zero-line {
  stroke: oklch(55% 0.02 55 / 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}

.trend-last-dot {
  filter: drop-shadow(0 4px 8px oklch(24% 0.02 55 / 0.18));
}

.trend-tooltip {
  position: absolute;
  z-index: 4;
  min-width: 112px;
  max-width: 180px;
  padding: 10px 12px;
  border-radius: 12px;
  background: oklch(20% 0.015 55 / 0.94);
  color: oklch(99% 0.005 85);
  box-shadow: 0 12px 28px oklch(20% 0.02 55 / 0.28);
  pointer-events: none;
}

.trend-tooltip strong,
.trend-tooltip span,
.trend-tooltip b {
  display: block;
}

.trend-tooltip strong {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(90% 0.02 85);
}

.trend-tooltip span {
  margin-top: 4px;
  font-size: 11px;
  color: oklch(84% 0.012 85);
  font-family: "JetBrains Mono", monospace;
}

.trend-tooltip b {
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.1;
  color: oklch(99% 0.005 85);
  font-family: "JetBrains Mono", monospace;
}

.trend-axis-labels {
  position: relative;
  height: 20px;
  margin-top: 2px;
}

.trend-axis-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
}

.trend-panel-foot {
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.trend-stat {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-dim);
}

.trend-stat.up b { color: var(--green); }
.trend-stat.down b { color: var(--red); }

.trend-stat-swatch {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  display: block;
  margin-bottom: 8px;
}

.trend-stat strong,
.trend-stat em {
  display: block;
}

.trend-stat strong {
  font-size: 12px;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.trend-stat b {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.05;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-primary);
}

.trend-stat em {
  margin-top: 6px;
  font-size: 11px;
  color: var(--txt-second);
  font-style: normal;
}

.trend-empty-copy {
  margin-top: auto;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--txt-second);
}

.analytics-platforms {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.platform-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 32px oklch(22% 0.01 55 / 0.045);
}

.platform-head {
  padding: var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background:
    linear-gradient(135deg, oklch(98% 0.005 85), oklch(94% 0.018 55));
  border-bottom: 1px solid var(--border-dim);
}

.platform-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.platform-source {
  margin-top: var(--sp-1);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--txt-dim);
}

.platform-total {
  font-family: "JetBrains Mono", monospace;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
}

.platform-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  border-bottom: 1px solid var(--border-dim);
}

.platform-metric {
  padding: var(--sp-4);
  border-right: 1px solid var(--border-dim);
}

.platform-metric:last-child { border-right: none; }

.platform-metric span,
.platform-metric em {
  display: block;
  font-size: 10px;
  color: var(--txt-dim);
  font-style: normal;
}

.platform-metric b {
  display: block;
  margin: 3px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 19px;
  color: var(--txt-primary);
}

.structure-metrics {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.analytics-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.chart-panel {
  border: 1px solid var(--border-dim);
  border-radius: 14px;
  padding: var(--sp-4);
  background:
    linear-gradient(180deg, oklch(99% 0.002 85), oklch(97% 0.008 55));
}

.chart-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-3);
}

.analytics-bars {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 360px;
  overflow: auto;
  padding-right: var(--sp-1);
}

.structure-grid .chart-panel {
  min-height: 240px;
}

.trend-chart {
  height: 190px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding-top: var(--sp-4);
}

.trend-col {
  flex: 1;
  min-width: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.trend-bar {
  width: 100%;
  min-height: 3px;
  border-radius: 5px 5px 2px 2px;
  background:
    linear-gradient(180deg, oklch(60% 0.14 55), oklch(50% 0.12 55));
  box-shadow: 0 8px 16px oklch(52% 0.16 55 / 0.12);
}

.trend-col span {
  height: 14px;
  text-align: center;
  color: var(--txt-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  transform: rotate(-45deg);
}

/* ── VERIFY VIEW ── */
.verify-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.verify-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) 0;
}
.verify-idle-icon {
  font-size: 48px;
  color: var(--border);
}
.verify-idle-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--txt-dim);
}
.verify-idle-hint {
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
  color: var(--txt-dim);
  text-align: center;
  max-width: 420px;
}

.verify-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-7) 0;
}
.verify-loading-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--txt-second);
}

/* SECTION HEADER */
.verify-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: var(--sp-3);
}

/* COUNT CHECKS */
.count-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.count-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  min-width: 240px;
  flex: 1;
}

.count-card-year {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--txt-dim);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.count-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.count-row-label { color: var(--txt-dim); }
.count-row-val   { color: var(--txt-primary); font-size: 20px; font-weight: 500; }
.count-row-src   { color: var(--txt-dim); font-size: 11px; }

.count-verdict {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.count-verdict.ok    { background: oklch(68% 0.20 155 / 0.12); color: var(--green); }
.count-verdict.fail  { background: oklch(60% 0.22 25 / 0.12);  color: var(--red); }
.count-verdict.warn  { background: oklch(78% 0.18 80 / 0.10);  color: var(--amber); }

/* SPOT CHECKS */
.spot-checks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.spot-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.spot-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-raised);
}

.spot-account {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt-primary);
}

.spot-verdict {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 100px;
}
.spot-verdict.ok   { background: oklch(68% 0.20 155 / 0.15); color: var(--green); }
.spot-verdict.fail { background: oklch(60% 0.22 25 / 0.15);  color: var(--red); }
.spot-verdict.warn { background: oklch(78% 0.18 80 / 0.12);  color: var(--amber); }

.spot-fields {
  width: 100%;
  border-collapse: collapse;
}

.spot-fields th {
  padding: var(--sp-2) var(--sp-4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-dim);
  text-align: left;
  border-bottom: 1px solid var(--border-dim);
  background: var(--bg-raised);
}

.spot-fields td {
  padding: var(--sp-2) var(--sp-4);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  border-bottom: 1px solid var(--border-dim);
}

.spot-fields tr:last-child td { border-bottom: none; }

.spot-fields td.field-label { color: var(--txt-dim); font-size: 11px; }
.spot-fields td.field-local { color: var(--txt-primary); }
.spot-fields td.field-live  { color: var(--txt-primary); }
.spot-fields td.field-match { text-align: center; }

.match-ok   { color: var(--green); font-size: 14px; }
.match-fail { color: var(--red);   font-size: 14px; }

.verify-summary {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.verify-summary-icon { font-size: 28px; }
.verify-summary-text { flex: 1; }
.verify-summary-title { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-1); }
.verify-summary-sub   { font-size: 12px; font-family: "JetBrains Mono", monospace; color: var(--txt-dim); }
.verify-summary.all-ok   .verify-summary-title { color: var(--green); }
.verify-summary.has-fail .verify-summary-title { color: var(--red); }
.verify-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--txt-dim);
}

/* ── LOADING OVERLAY ── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: oklch(98% 0.006 85 / 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.loading-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .auth-shell-content {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  }
  .auth-rive-canvas {
    width: 54vw;
    height: 100vh;
    left: -2vw;
    top: 0;
    opacity: 0.78;
  }
  .analytics-cards { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .platform-metrics { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .analytics-trend-grid { grid-template-columns: 1fr; }
  .trend-panel-wide { grid-column: auto; }
  .export-workbench { grid-template-columns: 1fr; }
  .export-side { position: static; }
  .thai-kpis { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .thai-trend-grid { grid-template-columns: 1fr; }
  .thai-grid { grid-template-columns: 1fr; }
  .ku-flow-head { flex-direction: column; align-items: stretch; }
  .ku-flow-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .auth-shell-content {
    grid-template-columns: 1fr;
  }
  .auth-visual-spacer {
    min-height: 36vh;
  }
  .auth-rive-canvas {
    width: 100vw;
    height: 42vh;
    left: 0;
    top: 0;
    opacity: 0.5;
  }
  .auth-panel-wrap {
    min-height: auto;
    padding: 18px 18px 28px;
    align-items: flex-start;
  }
  .auth-panel {
    width: min(420px, calc(100vw - 36px));
  }
  body { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .analytics-hero,
  .analytics-grid-2 { grid-template-columns: 1fr; }
  .analytics-pulse-grid { grid-template-columns: 1fr; }
  .analytics-cards,
  .platform-metrics { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .view-header { position: relative; flex-direction: column; align-items: flex-start; }
  .export-grid { grid-template-columns: 1fr; }
  .workbench-refresh-dialog { width: min(100vw - 20px, 640px); padding: var(--sp-4); }
  .export-thai-dialog { width: min(100vw - 20px, 1120px); padding: var(--sp-4); }
  .export-thai-head { flex-direction: column; padding-right: 30px; }
  .export-thai-actions,
  .export-thai-controls { flex-direction: column; align-items: stretch; }
  .export-thai-tabs { grid-template-columns: 1fr; }
  .export-thai-controls .export-field,
  .export-thai-controls .btn-ghost,
  .export-thai-controls .fetch-btn,
  .export-thai-actions .btn-ghost { width: 100%; justify-content: center; }
  .workbench-refresh-actions { flex-direction: column; }
  .workbench-refresh-actions .btn-ghost,
  .workbench-refresh-actions .fetch-btn { width: 100%; justify-content: center; }
  .thai-builder-grid { grid-template-columns: 1fr; }
  .ku-flow-controls { grid-template-columns: 1fr; }
  .ku-flow-summary { flex-direction: column; align-items: flex-start; }
  .ku-flow-chart-head,
  .ku-flow-chart-footer { flex-direction: column; align-items: flex-start; }
  .ku-flow-chart-total { text-align: left; }
  .thai-kpis { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .thai-hero,
  .thai-empty { flex-direction: column; align-items: flex-start; }
  .thai-net { text-align: left; }
}

@media (max-width: 560px) {
  .analytics-body,
  .view-header { padding: var(--sp-4); }
  .analytics-cards,
  .platform-metrics { grid-template-columns: 1fr; }
  .analytics-title { font-size: 34px; }
  .analytics-bar-row { grid-template-columns: 72px 1fr 56px; }
  .trend-panel { padding: var(--sp-4); }
  .trend-panel h3 { font-size: 22px; }
  .trend-svg { height: 220px; }
  .trend-panel-foot { grid-template-columns: 1fr; }
  .export-workbench { padding: var(--sp-4); }
  .workbench-refresh-meta { grid-template-columns: 1fr; }
  .workbench-refresh-chip.is-wide { grid-column: auto; }
  .viz-card { padding: var(--sp-4); }
  .sankey-chart-container,
  .sankey-empty-state { min-height: 240px; }
  .export-kpis { grid-template-columns: 1fr; }
  .thai-workspace { padding: var(--sp-4); }
  .ku-flow-chart-grid { grid-template-columns: 1fr; }
  .thai-kpis { grid-template-columns: 1fr; }
  .thai-bar-row { grid-template-columns: 62px 1fr 82px; }
  .export-thai-body .thai-table-wrap { overflow: visible; }
  .export-thai-body .thai-table,
  .export-thai-body .thai-table tbody,
  .export-thai-body .thai-table tr,
  .export-thai-body .thai-table td {
    display: block;
    width: 100%;
  }
  .export-thai-body .thai-table thead { display: none; }
  .export-thai-body .thai-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-dim);
  }
  .export-thai-body .thai-table tr:last-child { border-bottom: 0; }
  .export-thai-body .thai-table td {
    border-bottom: 0;
    padding: 3px 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .export-thai-body .thai-table td:not(:first-child) {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .export-thai-body .thai-table td::before {
    display: block;
    flex: 0 0 auto;
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-dim);
  }
  .export-thai-body .thai-table td:nth-child(1)::before { content: "账号"; margin-bottom: 3px; }
  .export-thai-body .thai-table td:nth-child(2)::before { content: "代理"; }
  .export-thai-body .thai-table td:nth-child(3)::before { content: "存款"; }
  .export-thai-body .thai-table td:nth-child(4)::before { content: "输赢"; }
  .export-thai-body .thai-table td:nth-child(5)::before { content: "笔数"; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--txt-dim); }