:root {
  --tech-blue: #0866ff;
  --tech-blue-deep: #073b8f;
  --navy: #0c2340;
  --surface: #ffffff;
  --surface-soft: #f4f8ff;
  --surface-blue: #eaf2ff;
  --line-blue: #d8e5f5;
  --ink: #10233f;
  --muted: #667b96;
  --mint: var(--tech-blue);
  --cyan: #00a6d8;
  --amber: #e99a18;
  --red: #e54b4b;
  --radius: 12px;
  color-scheme: light;
}

body {
  min-width: 1024px;
  background:
    linear-gradient(rgba(8, 102, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 102, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% -20%, #dceaff 0, #f5f9ff 42%, #eef4fb 100%);
  background-size: 28px 28px, 28px 28px, auto;
  color: var(--ink);
}

.topbar {
  height: 80px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line-blue);
  box-shadow: 0 8px 30px rgba(20, 68, 126, .08);
  backdrop-filter: blur(14px);
}

.topbar h1 { color: var(--navy); letter-spacing: -.02em; }
.eyebrow, .section-kicker { color: var(--tech-blue); }
.clock { color: var(--muted); }

.data-badge {
  color: var(--tech-blue-deep);
  background: var(--surface-blue);
  border-color: #b9d2fa;
}

.button {
  background: var(--tech-blue);
  border-color: var(--tech-blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(8, 102, 255, .18);
}

.button:hover { background: #0058e7; }
.button.ghost { background: #fff; color: var(--tech-blue-deep); border-color: #bfd2ea; box-shadow: none; }

.notice {
  color: #29527f;
  background: #f0f6ff;
  border: 1px solid #cfe0f8;
  border-left: 4px solid var(--tech-blue);
  border-radius: 8px;
}

.kpi-strip article,
.panel {
  background: var(--surface);
  border-color: var(--line-blue);
  box-shadow: 0 10px 28px rgba(23, 65, 116, .08);
}

.kpi-strip article {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.kpi-strip article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tech-blue);
}

.kpi-strip strong { color: var(--navy); }
.kpi-strip span, .kpi-strip small, .panel-head > span { color: var(--muted); }
.panel h2 { color: var(--navy); }

.segmented { border-color: #cbdcf0; background: var(--surface-soft); }
.segmented button { color: #58708e; background: transparent; border-color: #d9e5f3; }
.segmented button:hover { color: var(--tech-blue); background: #edf4ff; }
.segmented button.active { color: #fff; background: var(--tech-blue); }

.grid-line { stroke: #dce7f4; }
.actual-line { stroke: var(--tech-blue); }
.forecast-line { stroke: var(--cyan); }
.interval-band { fill: rgba(8, 102, 255, .12); }
.chart text { fill: #71849b; }
.chart-legend .actual::before { background: var(--tech-blue); }
.chart-legend .forecast::before { background: var(--cyan); }
.timeline { accent-color: var(--tech-blue); }

.island-map {
  border: 1px solid #c6d9ee;
  background:
    radial-gradient(ellipse at center, rgba(8, 102, 255, .17) 0, rgba(8, 102, 255, .08) 48%, transparent 66%),
    linear-gradient(140deg, #f7fbff, #eaf3ff);
  box-shadow: inset 0 0 35px rgba(8, 102, 255, .08);
}

.island-core span, .island-core small { color: var(--muted); }
.island-core b { color: var(--tech-blue-deep); }

.map-node {
  color: #214367;
  background: rgba(255, 255, 255, .94);
  border-color: #a9c7e8;
  box-shadow: 0 5px 14px rgba(23, 74, 137, .10);
}

.map-node:hover, .map-node.active {
  color: #fff;
  background: var(--tech-blue);
  border-color: var(--tech-blue);
}

.n8 { right: 7%; top: 69%; }

.image-slot {
  color: var(--ink);
  background: #f7faff center / cover;
  border-color: #aac7e6;
}

.image-slot:hover { border-color: var(--tech-blue); background-color: #edf4ff; }

.bar { background: #e5edf7; }
.bar i { background: var(--tech-blue); }
.budget-control input { accent-color: var(--tech-blue); }

.component-card {
  color: var(--ink);
  background: #f7faff;
  border-color: #d5e2f1;
}

.component-card:hover, .component-card.active {
  background: #eaf2ff;
  border-color: var(--tech-blue);
}

.component-card strong { color: var(--tech-blue-deep); }
.text-button { color: var(--tech-blue); }

.alert-item { background: #fff8e8; border-left-color: var(--amber); }
.alert-item.high { background: #fff0ef; border-left-color: var(--red); }

.decision-card {
  color: var(--ink);
  background: #edf5ff;
  border-color: #bad2f1;
}

.decision-card span { color: var(--tech-blue-deep); }
.empty { background: #f8fbff; border-color: #cddceb; }

th { color: #5c708a; background: #f3f7fc; }
th, td { border-color: #e3ebf4; }
tbody tr:hover { background: #f1f6ff; }

@media (max-width: 1399px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 1180px) {
  .topbar { padding-inline: 18px; }
  .screen { padding-inline: 14px; }
  .main-grid {
    grid-template-columns: 1.12fr .88fr;
    grid-template-areas:
      "trend island"
      "capacity components"
      "alerts models";
  }
}