:root {
  --tak-bg: #020509;
  --tak-surface: rgba(8, 13, 22, .92);
  --tak-surface-2: rgba(12, 18, 30, .72);
  --tak-card: rgba(15, 23, 42, .68);
  --tak-card-hover: rgba(20, 30, 48, .78);
  --tak-border: rgba(148, 163, 184, .12);
  --tak-border-strong: rgba(148, 163, 184, .22);
  --tak-text: #edf2f8;
  --tak-muted: #94a3b8;
  --tak-faint: #64748b;
  --tak-ready: #22c55e;
  --tak-watch: #38bdf8;
  --tak-alert: #f59e0b;
  --tak-critical: #ef4444;
  --tak-info: #818cf8;
  --tak-radius: 8px;
  --tak-radius-panel: 8px;
  --tak-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --tak-font: 'IBM Plex Sans Thai', sans-serif;
  --tak-mono: 'IBM Plex Mono', monospace;
  --tak-safe: var(--tak-ready);
  --tak-warn: var(--tak-alert);
  --tak-danger: var(--tak-critical);
  --tak-page-max: 1480px;
  --tak-page-readable: 1120px;
  --tak-page-pad: clamp(16px, 2vw, 28px);
  --tak-page-pad-tight: clamp(12px, 1.45vw, 20px);
  --tak-page-pad-mobile: 12px;
  --tak-page-top: 24px;
  --tak-page-bottom: 72px;
  --tak-topbar-h: 54px;
  --tak-topbar-pad: clamp(12px, 1.7vw, 28px);
  --tak-gap-1: 6px;
  --tak-gap-2: 8px;
  --tak-gap-3: 12px;
  --tak-gap-4: 16px;
  --tak-gap-5: 20px;
  --tak-gap-6: 24px;
  --tak-grid-gap: 14px;
  --tak-section-gap: 32px;
  --tak-card-pad: 18px;
}

[data-theme="light"] {
  --tak-bg: #f3f6fa;
  --tak-surface: rgba(255, 255, 255, .96);
  --tak-surface-2: rgba(255, 255, 255, .88);
  --tak-card: rgba(255, 255, 255, .9);
  --tak-card-hover: #ffffff;
  --tak-border: rgba(15, 23, 42, .1);
  --tak-border-strong: rgba(15, 23, 42, .18);
  --tak-text: #172033;
  --tak-muted: #475569;
  --tak-faint: #64748b;
  --tak-ready: #16a34a;
  --tak-watch: #0284c7;
  --tak-alert: #d97706;
  --tak-critical: #dc2626;
  --tak-info: #6366f1;
  --tak-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

.tak-card,
.tak-panel {
  background: var(--tak-card);
  border: 1px solid var(--tak-border);
  border-radius: var(--tak-radius-panel);
  color: var(--tak-text);
  box-shadow: none;
}

.tak-card:hover {
  background: var(--tak-card-hover);
  border-color: var(--tak-border-strong);
}

.tak-section {
  width: 100%;
  color: var(--tak-text);
}

html[data-tak-registry] {
  --bg: var(--tak-bg);
  --bg2: var(--tak-surface);
  --surface: var(--tak-surface);
  --card: var(--tak-card);
  --card2: var(--tak-surface-2);
  --card-h: var(--tak-card-hover);
  --card-hover: var(--tak-card-hover);
  --border: var(--tak-border);
  --border2: var(--tak-border-strong);
  --border-h: var(--tak-border-strong);
  --line: var(--tak-border);
  --line-2: var(--tak-border-strong);
  --hair: var(--tak-border);
  --hairline: var(--tak-border);
  --frame: var(--tak-border);
  --frame-h: var(--tak-border-strong);
  --b1: var(--tak-border);
  --b2: var(--tak-border-strong);
  --s1: var(--tak-surface);
  --s2: var(--tak-surface-2);
  --t1: var(--tak-text);
  --t2: var(--tak-muted);
  --t3: var(--tak-faint);
  --t4: color-mix(in srgb, var(--tak-faint) 55%, transparent);
  --dim: var(--tak-faint);
  --faint: var(--tak-muted);
  --green: var(--tak-ready);
  --safe: var(--tak-ready);
  --nominal: var(--tak-ready);
  --cyan: var(--tak-watch);
  --cool: var(--tak-watch);
  --blue: #38bdf8;
  --amber: var(--tak-alert);
  --ember: var(--tak-alert);
  --orange: #fb923c;
  --fire: #fb923c;
  --fire2: #f97316;
  --fire3: #ea580c;
  --red: var(--tak-critical);
  --heat: var(--tak-critical);
  --violet: var(--tak-info);
  --indigo: var(--tak-info);
  --radius: var(--tak-radius);
  --r: var(--tak-radius);
  --top: var(--tak-topbar-h);
  --sans: var(--tak-font);
  --h: var(--tak-font);
  --b: var(--tak-font);
  --mono: var(--tak-mono);
  --m: var(--tak-mono);
}

:where(.topbar, .top) {
  min-height: var(--tak-topbar-h);
  padding-inline: var(--tak-topbar-pad) !important;
  gap: var(--tak-gap-3) !important;
}

:where(.top-r, .top-actions, .tb-right, .tnav, .nav, .hero-actions, .source-line) {
  gap: var(--tak-gap-2) !important;
}

:where(.analytics-page, .shell, .main, .wrap, .content, .sections) {
  width: min(var(--tak-page-max), 100%) !important;
  max-width: var(--tak-page-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--tak-page-pad) !important;
}

:where(.analytics-page, .shell, .main, .wrap) {
  padding-block-start: var(--tak-page-top) !important;
  padding-block-end: var(--tak-page-bottom) !important;
}

body.tknav-pad :where(.analytics-page, .shell, .main, .wrap, .content) {
  margin-block-start: 0 !important;
  padding-block-start: var(--tak-page-top) !important;
  padding-block-end: var(--tak-page-bottom) !important;
}

:where(.analytics-hero, .report-head, .hero, .hgrid, .grid-2, .grid-3, .kpi-grid, .stats, .stats-row, .status-grid, .info-grid, .impact-grid, .sys-grid, .know-grid, .ops-grid, .flow, .timeline, .team-board, .mission-list, .source-health-grid) {
  gap: var(--tak-grid-gap) !important;
}

:where(.section-title, .section + .section, .tak-section + .tak-section) {
  margin-block-start: var(--tak-section-gap) !important;
}

:where(.tak-card, .tak-panel, .panel, .card, .kpi, .action-card, .asset-card, .gate, .stat-box, .hz, .rec, .stn, .source-card, .team-unit, .mission-row, .ops-card, .summary-card, .foehn-card, .threat-card) {
  border-radius: var(--tak-radius-panel) !important;
}

@media (max-width: 760px) {
  :where(.topbar, .top) {
    min-height: 48px;
    padding-inline: var(--tak-page-pad-mobile) !important;
    gap: var(--tak-gap-2) !important;
  }

  :where(.analytics-page, .shell, .main, .wrap, .content, .sections) {
    padding-inline: var(--tak-page-pad-mobile) !important;
  }

  :where(.analytics-page, .shell, .main, .wrap),
  body.tknav-pad :where(.analytics-page, .shell, .main, .wrap, .content) {
    padding-block-start: var(--tak-gap-4) !important;
    padding-block-end: 48px !important;
  }

  :where(.analytics-hero, .report-head, .hero, .hgrid, .grid-2, .grid-3, .kpi-grid, .stats, .stats-row, .status-grid, .info-grid, .impact-grid, .sys-grid, .know-grid, .ops-grid, .flow, .timeline, .team-board, .mission-list, .source-health-grid) {
    gap: var(--tak-gap-3) !important;
  }
}

.tak-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tak-faint);
  font: 600 10px var(--tak-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tak-status,
.tak-chip,
.tak-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid var(--tak-border);
  border-radius: var(--tak-radius);
  background: rgba(255, 255, 255, .035);
  color: var(--tak-muted);
  font: 700 10px var(--tak-mono);
  letter-spacing: .03em;
  white-space: nowrap;
}

.tak-status::before,
.tak-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.tak-status.ready,
.tak-status.ok,
.tak-badge.ready,
.tak-badge.ok {
  color: var(--tak-ready);
  border-color: color-mix(in srgb, var(--tak-ready) 28%, transparent);
  background: color-mix(in srgb, var(--tak-ready) 9%, transparent);
}

.tak-status.watch,
.tak-status.monitor,
.tak-status.loading,
.tak-badge.watch,
.tak-badge.monitor,
.tak-badge.loading {
  color: var(--tak-watch);
  border-color: color-mix(in srgb, var(--tak-watch) 28%, transparent);
  background: color-mix(in srgb, var(--tak-watch) 9%, transparent);
}

.tak-status.alert,
.tak-status.warn,
.tak-badge.alert,
.tak-badge.warn {
  color: var(--tak-alert);
  border-color: color-mix(in srgb, var(--tak-alert) 30%, transparent);
  background: color-mix(in srgb, var(--tak-alert) 10%, transparent);
}

.tak-status.critical,
.tak-status.danger,
.tak-status.error,
.tak-status.err,
.tak-badge.critical,
.tak-badge.danger,
.tak-badge.error,
.tak-badge.err {
  color: var(--tak-critical);
  border-color: color-mix(in srgb, var(--tak-critical) 32%, transparent);
  background: color-mix(in srgb, var(--tak-critical) 11%, transparent);
}

.tak-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  flex: 0 0 auto;
}

.tak-risk-bar {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
}

.tak-risk-bar > i,
.tak-risk-bar > span {
  display: block;
  height: 100%;
  width: var(--tak-value, 0%);
  border-radius: inherit;
  background: var(--tak-level-color, var(--tak-watch));
  transition: width .8s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}

.tak-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tak-metric strong {
  color: var(--tak-text);
  font: 800 24px/1.1 var(--tak-font);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tak-metric small {
  color: var(--tak-faint);
  font: 600 10px/1.4 var(--tak-mono);
}

.tak-grid-2,
.tak-grid-3,
.tak-grid-4 {
  display: grid;
  gap: 12px;
}

.tak-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tak-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tak-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tak-loading {
  position: relative;
  overflow: hidden;
}

.tak-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.08) 45%, transparent 58% 100%);
  transform: translateX(-100%);
  animation: takScan 1.6s infinite;
}

@keyframes takScan {
  to { transform: translateX(100%); }
}

@media (max-width: 760px) {
  .tak-grid-2,
  .tak-grid-3,
  .tak-grid-4 {
    grid-template-columns: 1fr;
  }

  .tak-status,
  .tak-chip,
  .tak-badge {
    min-height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tak-loading::after,
  .tak-risk-bar > i,
  .tak-risk-bar > span {
    animation: none !important;
    transition: none !important;
  }
}