:root {
  --ink: #eef4fb;
  --muted: #a9b7c8;
  --line: #2e3d51;
  --canvas: #0b1119;
  --card: #151e2a;
  --primary: #68b4ff;
  --primary-dark: #d7edff;
  --accent: #62e6d0;
}

body { background: var(--canvas); }
.hero .eyebrow { margin-bottom: 10px; color: #fff; font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 850; letter-spacing: .1em; }
.hero h1 { color: #fff; }
.hero > p:last-child { color: #a9b7c8; }
.result-card, .input-card { background: #fff; color: #172033; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 24%), 0 12px 30px rgb(0 0 0 / 28%); }
.result-card h2, .input-card h2 { color: #172033; }
.result-card .eyebrow, .input-card .eyebrow { color: #007c82; }
.result-card .result-message, .result-card .fine-print, .result-card .summary-grid dt, .input-card .panel-note, .input-card .field-label span, .input-card .counter-row output { color: #657089; }
.input-card .counter-row, .input-card .field-label, .input-card .games-input, .input-card .counter-control input { color: #172033; }
.tabs { gap: 6px; padding: 0 12px; border-top: 0; border-bottom: 0; background: #fff; }
.tab { border: 1px solid #d5e0ec; border-radius: 10px 10px 0 0; background: #edf3f9; color: #657089; }
.tab.is-active { z-index: 1; margin-bottom: -3px; border: 3px solid #55aaf0; border-bottom-color: #fff; color: #104e91; background: #fff; box-shadow: 0 -2px 10px rgb(25 109 194 / 18%); }
.tab-panel { margin: 0 12px 12px; border: 3px solid #55aaf0; border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 0 0 2px rgb(85 170 240 / 16%), 0 6px 18px rgb(25 109 194 / 12%); }
.tab-panel:focus-within { border-color: #1687de; box-shadow: 0 0 0 4px rgb(25 109 194 / 22%), 0 6px 18px rgb(25 109 194 / 14%); }
.details-summary { display: none; }
.has-summary > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title optional icon" "state state state"; gap: 3px 10px; min-height: 78px; padding: 11px 0 10px; }
.has-summary > summary > .summary-title { grid-area: title; margin: 0; color: #fff; }
.has-summary > summary > .summary-state { grid-area: state; margin: 0; padding: 6px 9px; border-radius: 7px; background: #223145; color: #cfe8ff; font-size: .76rem; line-height: 1.45; font-weight: 700; }
.has-summary > summary > .summary-optional { grid-area: optional; align-self: center; margin: 0; color: #a9b7c8; font-size: .76rem; font-weight: 500; }
.has-summary > summary::after { grid-area: icon; align-self: center; margin: 0; }
.constraint-card, .allocation-card, .info-card, .sources-card { background: #151e2a; border-color: #2e3d51; box-shadow: 0 8px 24px rgb(0 0 0 / 22%); }
.constraint-card > p, .allocation-card > p, .info-card > p, .sources-card p { color: #a9b7c8; }
.preset-grid button, .allocation-actions button, .outline-button { border-color: #4a607a; background: #1d2a3b; color: #d7edff; }
.preset-grid button:hover, .allocation-actions button:hover, .outline-button:hover { border-color: #68b4ff; background: #263b53; }
.allocation-total { color: #a9b7c8; }
.candidate-list, .allocation-list { border-color: #344860; }
.candidate-list label, .allocation-list label, .allocation-list legend, .candidate-list legend { color: #dbe8f5; }
.allocation-list input { color: #172033; background: #fff; }
.games-input:focus-visible, .counter-control input:focus-visible, .allocation-list input:focus-visible { position: relative; z-index: 1; outline: 3px solid rgb(25 109 194 / 36%); outline-offset: 1px; }
@media (max-width: 440px) {
  .tabs { gap: 3px; padding: 0 8px; }
  .tab-panel { margin-right: 8px; margin-left: 8px; }
}