:root {
  --bg: #071012;
  --panel: rgba(13, 28, 31, 0.88);
  --line: rgba(164, 209, 204, 0.14);
  --text: #ecf6f2;
  --muted: #8fa8a4;
  --accent: #c8ff4c;
  --cyan: #3ec6e0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 70% 0%, rgba(34, 101, 90, 0.24), transparent 34rem),
    radial-gradient(circle at 0% 42%, rgba(39, 74, 86, 0.18), transparent 32rem),
    var(--bg);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.noise {
  position: fixed;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.topbar, main, footer {
  width: min(1420px, calc(100% - 48px));
  margin-inline: auto;
}

.topbar {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.eyebrow, .kicker, .section-number {
  color: var(--accent);
  font: 600 11px/1.4 ui-monospace, "Cascadia Mono", monospace;
  letter-spacing: 0.18em;
}

h1 { margin: 5px 0 0; font-size: 19px; letter-spacing: 0.08em; }
.status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.divider { height: 14px; width: 1px; background: var(--line); }

.hero {
  min-height: 410px;
  padding: 76px 4vw 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.hero h2 {
  max-width: 840px;
  margin: 15px 0 20px;
  font-size: clamp(42px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.hero h2 span { color: transparent; -webkit-text-stroke: 1px #89a49f; }
.intro { max-width: 650px; color: var(--muted); font-size: 16px; line-height: 1.8; }

.hero-metric {
  width: 210px;
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 255, 76, 0.28);
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(200, 255, 76, 0.045);
}

.hero-metric span, .hero-metric small { color: var(--muted); font-size: 12px; }
.hero-metric strong { margin: 7px 0 2px; color: var(--accent); font: 500 58px/1 ui-monospace, monospace; }

.demo-banner {
  margin: 0 0 18px;
  padding: 13px 18px;
  border: 1px solid rgba(246, 196, 83, 0.28);
  background: rgba(246, 196, 83, 0.06);
  color: #d5c99e;
  font-size: 13px;
}
.demo-banner strong { margin-right: 10px; color: #f6c453; }

.panel {
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(14, 31, 33, 0.94), rgba(8, 19, 21, 0.94));
}

.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.panel-heading > div { display: flex; align-items: center; gap: 15px; }
.panel-heading h3 { margin: 0; font-size: 19px; }
.section-number { padding: 5px 7px; border: 1px solid rgba(200, 255, 76, 0.25); }
.muted { color: var(--muted); font-size: 12px; }

.period-switch { padding: 3px; border: 1px solid var(--line); }
.period-switch button {
  min-width: 58px;
  padding: 7px 12px;
  color: var(--muted);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.period-switch button.active { color: #09100e; background: var(--accent); }

.chart-wrap { position: relative; height: 360px; }
#timelineChart { display: block; width: 100%; height: 100%; }
.chart-tooltip {
  position: absolute;
  display: none;
  padding: 7px 9px;
  color: var(--text);
  background: #071012;
  border: 1px solid var(--line);
  font-size: 11px;
  pointer-events: none;
}

.scrubber { margin-top: 6px; }
.scrubber-labels { display: flex; justify-content: space-between; color: var(--muted); font: 11px ui-monospace, monospace; }
.scrubber-labels strong { color: var(--accent); }
input[type="range"] {
  width: 100%;
  margin: 13px 0 2px;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.legend { display: flex; flex-wrap: wrap; gap: 9px 17px; margin-top: 16px; }
.legend button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: var(--muted);
  border: 0;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.legend button.off { opacity: 0.3; }
.legend i { width: 15px; height: 2px; }

.partition-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.partition-card { min-height: 176px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partition-title { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.partition-title i { width: 7px; height: 7px; border-radius: 50%; }
.partition-value { display: flex; align-items: baseline; gap: 10px; margin: 17px 0; }
.partition-value strong { font: 500 42px/1 ui-monospace, monospace; }
.delta { font: 11px ui-monospace, monospace; }
.delta.up { color: #ff786d; }
.delta.down { color: #47dca5; }
.bar { height: 3px; background: rgba(255,255,255,0.08); }
.bar span { display: block; height: 100%; }
.card-meta { display: flex; justify-content: space-between; margin-top: 16px; color: var(--muted); font-size: 10px; }

.event-list { border-top: 1px solid var(--line); }
.event {
  display: grid;
  grid-template-columns: 108px 1fr auto;
  gap: 22px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.event-date { color: var(--accent); font: 11px ui-monospace, monospace; }
.event h4 { margin: 0 0 7px; font-size: 14px; font-weight: 600; }
.event p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.event a { color: var(--cyan); font-size: 11px; text-decoration: none; white-space: nowrap; }
.event-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.event-meta span {
  padding: 3px 6px;
  color: #a9c1bd;
  border: 1px solid var(--line);
  font: 9px ui-monospace, monospace;
}
.empty { padding: 28px 0; color: var(--muted); text-align: center; }

.coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.coverage-card {
  padding: 17px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}
.coverage-title { display: flex; align-items: center; gap: 8px; }
.coverage-title strong { flex: 1; font-size: 12px; }
.coverage-title em {
  color: var(--muted);
  font: normal 9px ui-monospace, monospace;
}
.coverage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #47dca5;
  box-shadow: 0 0 8px rgba(71, 220, 165, 0.55);
}
.coverage-card.failed .coverage-dot { background: #ff786d; box-shadow: none; }
.coverage-numbers { display: flex; gap: 18px; margin: 20px 0 11px; color: var(--muted); font-size: 10px; }
.coverage-numbers b { color: var(--text); font: 500 19px ui-monospace, monospace; }
.coverage-card small { color: #607975; font-size: 9px; }
.universe-items { display: flex; flex-wrap: wrap; gap: 7px; }
.universe-item {
  padding: 5px 7px;
  border: 1px solid var(--line);
  color: #718985;
  font-size: 9px;
}
.universe-item i {
  margin-right: 5px;
  color: #718985;
  font-style: normal;
}
.universe-item.production { color: #a9c7c1; border-color: rgba(71, 220, 165, 0.28); }
.universe-item.production i { color: #47dca5; }
.universe-item.viable_candidate { color: #a6dce6; border-color: rgba(62, 198, 224, 0.3); }
.universe-item.viable_candidate i { color: var(--cyan); }
.universe-item.access_limited { color: #e7c57e; border-color: rgba(246, 196, 83, 0.3); }
.universe-item.access_limited i { color: #f6c453; }
.universe-item.missing i { color: #ff786d; }

.automation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.automation-card {
  min-height: 142px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}
.automation-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.automation-card strong {
  display: block;
  margin: 12px 0 15px;
  color: var(--text);
  font: 500 38px/1 ui-monospace, monospace;
}
.automation-card small { color: #718985; font-size: 10px; line-height: 1.55; }
.automation-card.cyan strong { color: var(--cyan); }
.automation-card.yellow strong { color: #f6c453; }
.automation-card.green strong { color: #47dca5; }
.automation-card.muted strong { color: #8fa8a4; }

footer {
  display: flex;
  justify-content: space-between;
  padding: 32px 0 45px;
  color: #5f7774;
  font-size: 10px;
}

.admin-home { color: var(--cyan); text-decoration: none; }
.admin-main { padding-top: 48px; }
.admin-intro { padding: 34px 4vw 50px; }
.admin-intro h2 {
  margin: 14px 0 18px;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.admin-intro h2 span { color: transparent; -webkit-text-stroke: 1px #89a49f; }
.review-list { border-top: 1px solid var(--line); }
.review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}
.review-row h4 { margin: 6px 0 8px; font-size: 14px; }
.review-row p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.review-row a {
  display: block;
  overflow: hidden;
  max-width: 820px;
  margin-bottom: 8px;
  color: var(--cyan);
  font: 10px ui-monospace, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.review-row small, .review-kicker { color: var(--muted); font-size: 10px; }
.review-actions { display: flex; align-items: center; gap: 8px; }
.event-actions { min-width: 176px; align-items: stretch; flex-direction: column; }
.event-actions select {
  padding: 8px;
  color: var(--text);
  border: 1px solid var(--line);
  background: #0a1719;
}
.admin-action {
  padding: 8px 12px;
  color: var(--text);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}
.admin-action.primary, .admin-action.approve {
  color: #071012;
  border-color: var(--accent);
  background: var(--accent);
}
.admin-action.reject { color: #ff9188; border-color: rgba(255, 120, 109, 0.35); }

@media (max-width: 900px) {
  .topbar, main, footer { width: min(100% - 24px, 1420px); }
  .status .divider, #updatedAt { display: none; }
  .hero { min-height: auto; padding: 55px 8px 42px; grid-template-columns: 1fr; }
  .hero-metric { width: 150px; height: 150px; margin-top: 28px; }
  .hero-metric strong { font-size: 42px; }
  .panel { padding: 20px 14px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .partition-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .automation-grid { grid-template-columns: repeat(2, 1fr); }
  .event { grid-template-columns: 82px 1fr; }
  .event a { grid-column: 2; }
  footer { gap: 20px; flex-direction: column; }
  .review-row { grid-template-columns: 1fr; }
  .review-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .topbar { min-height: 84px; }
  .status { font-size: 10px; }
  .hero h2 { font-size: 44px; }
  .partition-grid { grid-template-columns: 1fr; }
  .coverage-grid { grid-template-columns: 1fr; }
  .automation-grid { grid-template-columns: 1fr; }
  .chart-wrap { height: 290px; }
}