:root {
  color-scheme: dark;
  color: #f7f9ff;
  background: #061424;
  --brand-red: #740000;
  --brand-blue: #002b5f;
  --surface: var(--brand-blue);
  --surface-strong: #093b72;
  --border: #28578a;
  --muted: #b9c9df;
  --accent: #ff8585;
  --chart-bars-height: clamp(225px, 36vh, 460px);
}

body, .app-shell { background: #061424; }
.topbar { background: var(--brand-red); border-bottom: 1px solid #a13939; }
.brand-mark { color: #fff; border-color: #f3b0b0; font: 700 12px 'DM Sans', system-ui, sans-serif; letter-spacing: -.03em; }
.brand-light { color: #d9eaff; }
.topbar nav a { color: #ebcaca; }
.topbar nav a.active { color: #fff; }
.topbar nav a.active:after { background: #82bbff; }
.mode-badge { border-color: #e0a6a6; color: #fff3f3; }
.mode-badge.test { border-color: #ffd399; color: #ffe1ae; }
.icon-button { color: #fff; }

.page { max-width: none; padding-left: clamp(24px, 4vw, 100px); padding-right: clamp(24px, 4vw, 100px); }
.eyebrow, .eyebrow.dark { color: #ff9595; }
.pulse { background: #ff8080; box-shadow: 0 0 0 4px #50202a; }
h1, .config-intro h1 { color: #fff; }
h1 em { color: #ff9292; }
.subtitle, .config-intro p { color: #bbcee4; }
.button-quiet { background: #0c315b; border-color: #3a6798; color: #dcecff; }
.button-primary { background: var(--brand-red); border-color: #b24646; color: #fff; }
.sync-note { color: #b8cce3; }

.kpi-card, .leaderboard-panel, .config-card { background: var(--surface); border-color: var(--border); box-shadow: 0 20px 50px rgba(0,0,0,.1); }
.kpi-card { min-height: 182px; }
.kpi-label { color: #c1d4ed; }
.kpi-icon { color: #ff9999; }
.kpi-value { color: #fff; }
.kpi-foot { color: #bbcee6; }
.text-button { color: #ffafaf; }
.text-button.subtle { color: #afc3df; }
.panel-heading h2, .section-content h2 { color: #fff; }
.panel-right { color: #c2d5ec; }
.legend-dot { background: #ff8585; }
.link-pill { background: #123f72; color: #e1edff; }
.leaderboard-panel { display: flex; flex-direction: column; }
.chart { height: calc(var(--chart-bars-height) + 66px); border-bottom-color: #47709e; }
.bar-column { width: 100%; }
.bar { max-width: 180px; background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color), white 14%), color-mix(in srgb, var(--bar-color), #061424 14%)); box-shadow: 0 0 23px color-mix(in srgb, var(--bar-color), transparent 82%); }
.bar-column:first-child .bar { background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color), white 14%), color-mix(in srgb, var(--bar-color), #061424 14%)); }
.bar-value { color: var(--bar-color); }
.bar-name { color: #e2ecfb; }
.empty-chart { display: flex; align-items: center; justify-content: center; min-height: 280px; padding: 24px; text-align: center; color: #fff; font: 700 clamp(26px, 3.5vw, 58px)/1.2 'Playfair Display', Georgia, serif; letter-spacing: -.025em; }
.empty-chart strong { color: #ff9d9d; }
.dashboard-footer { color: #a9bedb; }
.dashboard-footer a { color: #ff9d9d; }

.section-content p, .section-content label, .link-details, .fine-print { color: #bdcfea; }
.section-content label { color: #e3ecfb; }
.section-content input, .section-content select { background: #061d3d; border-color: #3c6b9f; color: #fff; }
.section-content input::placeholder { color: #95afd0; }
.section-content input:focus, .section-content select:focus { border-color: #ff9d9d; box-shadow: 0 0 0 3px #743744; }
.input-suffix span { background: #123f70; border-color: #3c6b9f; color: #d4e6ff; }
.callout { background: #103a69; border-left-color: #ff9a9a; color: #c7d9ef; }
.callout strong { color: #fff; }
.form-status, .config-save { color: #ffafaf; }
.form-status.error { color: #ffb39d; }
.section-number { color: #ffaaaa; }
.setup-guide { background: #520914; border: 1px solid #a54751; }
.guide-header { color: #ffd1d1; }
.setup-guide li { border-left-color: #bd6870; }
.setup-guide li:before { background: #75baff; color: #002b5f; }
.setup-guide li span { color: #f2cfd1; }
.guide-note { border-top-color: #af5961; color: #f3c9cd; }
.redirect-page { background: #061424; }
.redirect-page p { color: #c4d6ec; }

:fullscreen .topbar { display: none; }
:fullscreen .page { padding-top: clamp(22px, 3vh, 50px); }
:fullscreen .dashboard-page { display: flex; flex-direction: column; height: 100dvh; min-height: 550px; padding-bottom: clamp(18px, 2vh, 34px); }
:fullscreen .dashboard-page .hero-row { display: none; }
:fullscreen .kpi-grid { margin-top: 28px; }
:fullscreen .leaderboard-panel { flex: 1; min-height: 0; margin-top: 20px; padding-top: 25px; padding-bottom: 20px; }
:fullscreen .chart { flex: 1; height: auto; min-height: 220px; }
:fullscreen .empty-chart { flex: 1; min-height: 220px; }

@media (min-width: 1700px) {
  h1 { font-size: clamp(75px, 5vw, 110px); }
  .kpi-grid { gap: 22px; }
  .kpi-card { padding: 30px 34px; min-height: 205px; }
  .kpi-value { font-size: clamp(47px, 3.4vw, 67px); }
  .leaderboard-panel { padding: 40px 50px 42px; }
  .panel-heading h2 { font-size: 38px; }
  .bar-name, .bar-value { font-size: 14px; }
}

@media (max-width: 900px) {
  :root { --chart-bars-height: 225px; }
  .bar { max-width: 85px; }
}

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 590px) {
  .page { padding-left: 16px; padding-right: 16px; }
  .topbar { background: var(--brand-red); }
  .kpi-card { min-height: 135px; }
  .kpi-value.tabular { font-size: clamp(20px, 6vw, 30px); }
}