:root {
  color-scheme: dark;
  --bg: #07111d;
  --bg-accent: #123127;
  --ink: #edf5ff;
  --muted: #9eb0c6;
  --line: #294058;
  --panel: #0f1d2e;
  --panel2: #14263b;
  --field: #091728;
  --forest: #2fd4bf;
  --forest-contrast: #031713;
  --leaf: rgba(47, 212, 191, 0.16);
  --orange: #ffb52e;
  --danger: #ff6b76;
  --danger-ink: #ffc3c8;
  --danger-bg: rgba(255, 107, 118, 0.1);
  --success-ink: #9cedc8;
  --success-bg: rgba(66, 211, 146, 0.12);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f1e8;
  --bg-accent: #dcebc9;
  --ink: #17202a;
  --muted: #66717d;
  --line: #d8ddd9;
  --panel: #fffdf7;
  --panel2: #ffffff;
  --field: #fffefb;
  --forest: #174b42;
  --forest-contrast: #ffffff;
  --leaf: #d7e67a;
  --orange: #e87535;
  --danger: #bb3e2e;
  --danger-ink: #922d22;
  --danger-bg: #fff2ee;
  --success-ink: #123f37;
  --success-bg: #e6efba;
  --shadow: 0 18px 45px rgba(28, 42, 37, 0.12);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 0 0, var(--bg-accent) 0, transparent 27rem), var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
.shell { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 18px; padding: 0 4px 30px; }
.hero-copy { display: contents; }
.brand-line { grid-column: 1; grid-row: 1; display: grid; gap: 3px; min-width: 0; }
.eyebrow { margin: 0 0 6px; color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.brand-line .eyebrow { margin-bottom: 0; font-size: clamp(0.58rem, 1.4vw, 0.72rem); }
h1 { min-width: 0; margin-bottom: 0; font-size: clamp(1.2rem, 3.2vw, 2.6rem); line-height: 0.95; letter-spacing: -0.045em; }
h2 { margin-bottom: 0; font-size: 1.35rem; line-height: 1; letter-spacing: -0.035em; }
.lede { grid-column: 1 / -1; max-width: 510px; margin-bottom: 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.5; }
.header-tools { grid-column: 2; grid-row: 1; display: grid; gap: 5px; width: clamp(116px, 17vw, 160px); }
.portal-link { justify-self: start; color: var(--forest); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.72rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.portal-link:hover, .portal-link:focus-visible { text-decoration: underline; }
.clock { padding: 6px 8px; border: 1px solid var(--forest); border-radius: 999px; color: var(--ink); background: var(--leaf); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(0.66rem, 2.5vw, 0.76rem); font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; }
.hero-add { min-height: 31px; border: 1px solid var(--orange); border-radius: 8px; padding: 6px 8px; color: #241600; background: var(--orange); font-size: clamp(0.66rem, 2.5vw, 0.76rem); }
.planner-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); align-items: start; gap: 22px; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.output-panel { position: sticky; top: 18px; }
.panel-heading, .panel-actions, .rally-topline, .output-card header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-heading { margin-bottom: 20px; }
.panel-heading-actions { display: flex; gap: 8px; }
.timing-heading .panel-heading-actions { align-self: flex-start; margin-top: 2px; }
.rally-heading-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.timing-start-preview { display: inline-block; padding: 4px 6px; border: 1px solid var(--danger); border-radius: 4px; color: var(--danger-ink); background: var(--danger-bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.panel-actions { margin-top: 16px; }
.stack { display: grid; gap: 12px; }
.rally-card, .output-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
.rally-card { padding: 14px; }
.rally-topline input { flex: 1; }
.field-label { display: block; margin: 14px 0 7px; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.field-label-line { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.field-label-line .field-label { margin: 0; }
.info-tip { position: relative; display: inline-grid; width: 19px; height: 19px; padding: 0; place-items: center; border: 1px solid var(--forest); border-radius: 50%; color: var(--forest); background: var(--field); cursor: help; font-family: Georgia, "Times New Roman", serif; font-size: 0.75rem; font-style: italic; font-weight: 700; line-height: 1; }
.info-tip::after { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; width: min(280px, 75vw); padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel2); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3); content: attr(data-tooltip); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.72rem; font-style: normal; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-align: left; text-transform: none; transform: translate(-50%, 4px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; }
.info-tip:hover::after, .info-tip:focus-visible::after { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.option-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.preset-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.lead-list { display: grid; gap: 8px; margin-top: 14px; }
.lead-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 48px; gap: 8px; align-items: center; }
.lead-remove { display: grid; min-height: 44px; place-items: center; align-content: center; gap: 1px; border: 1px solid var(--danger); border-radius: 9px; color: var(--danger-ink); background: var(--danger-bg); cursor: pointer; font-family: ui-sans-serif, system-ui, sans-serif; }
.lead-remove span { font-size: 1.35rem; font-weight: 700; line-height: 0.75; }
.lead-remove small { font-size: 0.58rem; font-weight: 700; line-height: 1; }
.lead-remove:disabled { cursor: not-allowed; opacity: 0.4; }
.arrival { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8rem; }
.arrival input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--forest); }
.arrival-offset { width: 86px; min-height: 34px; padding: 7px 8px; }
input, textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: var(--ink); background: var(--field); font-family: ui-sans-serif, system-ui, sans-serif; }
input:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--orange) 25%, transparent); border-color: var(--orange); }
textarea { min-height: 285px; resize: vertical; line-height: 1.45; }
.button, .choice, .language-switch button { min-height: 42px; border: 1px solid transparent; border-radius: 9px; padding: 9px 11px; cursor: pointer; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.84rem; font-weight: 750; }
.button-primary { color: var(--forest-contrast); background: var(--forest); }
.button-secondary { color: var(--forest); border-color: var(--forest); background: transparent; }
.button-quiet { color: var(--muted); background: transparent; }
.button-danger { min-width: 42px; color: var(--danger-ink); background: var(--danger-bg); }
.choice, .language-switch button { color: var(--muted); border-color: var(--line); background: var(--field); }
.choice.active, .language-switch button.active { color: var(--ink); border-color: var(--forest); background: var(--leaf); }
.choice.invalid { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); color: var(--danger-ink); background: var(--danger-bg); }
.choice.active.invalid { color: var(--danger-ink); border-color: var(--danger); background: var(--danger-bg); }
.add-lead { width: 100%; margin-top: 12px; }
.output-card { padding: 14px; }
.output-card h3 { margin-bottom: 0; font-size: 1rem; }
.output-card header { margin-bottom: 10px; }
.output-card .button { min-height: 38px; padding: 7px 9px; }
.output-card .button.copied { color: var(--ink); background: var(--leaf); }
.copy-status { margin: -8px 0 14px; padding: 9px 10px; border-radius: 9px; color: var(--muted); background: var(--field); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.78rem; line-height: 1.35; }
.copy-status.success { color: var(--success-ink); background: var(--success-bg); font-weight: 700; }
.live-timing { margin: -2px 0 8px; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.7rem; line-height: 1.35; }
.language-switch { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.language-switch button { min-height: 38px; border: 0; border-radius: 0; }
.saved, .empty { margin: 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8rem; line-height: 1.5; }

@media (max-width: 780px) {
  .shell { width: min(100% - 20px, 620px); padding: 26px 0 42px; }
  .hero { column-gap: 10px; padding-bottom: 22px; }
  .brand-line { gap: 2px; }
  .brand-line .eyebrow { font-size: clamp(0.58rem, 2.7vw, 0.68rem); letter-spacing: 0.1em; white-space: nowrap; }
  h1 { font-size: clamp(1rem, 5.2vw, 1.45rem); }
  .header-tools { width: clamp(116px, 36vw, 160px); }
  .clock, .hero-add { padding: 6px 7px; }
  .planner-layout { grid-template-columns: 1fr; gap: 14px; }
  .output-panel { position: static; }
  .panel { padding: 16px; border-radius: 16px; }
  .panel-heading { align-items: start; }
  .timing-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .timing-heading > div:first-child { width: auto; min-width: 0; }
  .rally-heading-line { gap: 5px; }
  .timing-start-preview { padding: 3px 5px; font-size: clamp(0.58rem, 2.5vw, 0.68rem); }
  .timing-heading .panel-heading-actions { display: flex; width: auto; gap: 5px; }
  .timing-heading .panel-heading-actions .button { min-height: 34px; padding: 6px 8px; border-radius: 7px; font-size: clamp(0.62rem, 2.8vw, 0.74rem); }
  .panel-heading .button { min-height: 44px; }
  .rally-card { padding: 12px; }
  .rally-topline { align-items: stretch; }
  .lead-row { grid-template-columns: minmax(0, 1fr) 58px 58px 46px; }
  .option-row, .preset-row { gap: 6px; }
  .choice { min-height: 46px; padding: 8px 4px; }
  textarea { min-height: 230px; }
}

@media (max-width: 350px) {
  .hero { grid-template-columns: 1fr; row-gap: 12px; }
  .header-tools { grid-column: 1; grid-row: 2; justify-self: end; width: min(100%, 150px); }
  .lede { grid-row: 3; }
  .timing-heading { gap: 5px; }
  .timing-heading h2 { font-size: 1.15rem; }
  .timing-heading .button { padding: 6px; }
}

/* Shared two-level navigation used by Redeemer, Rally, and Events. */
.suite-header { position: sticky; top: 0; z-index: 60; color: #edf5ff; background: rgba(7, 17, 29, 0.95); border-bottom: 1px solid #294058; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); backdrop-filter: blur(18px); font-family: ui-sans-serif, system-ui, sans-serif; }
.suite-global, .suite-local { width: min(100%, 1280px); margin: 0 auto; padding-inline: 18px; }
.suite-global { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.suite-local { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid rgba(158, 176, 198, 0.12); }
.suite-wordmark { flex: 0 0 auto; color: #edf5ff; font-size: 0.9rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.suite-wordmark span { margin-right: 5px; color: #ffc857; font-size: 0.69rem; letter-spacing: 0.13em; text-transform: uppercase; }
.suite-apps, .suite-sections { display: flex; min-width: 0; align-items: center; gap: 4px; }
.suite-sections { justify-content: flex-end; margin-left: auto; overflow-x: auto; scrollbar-width: none; }.suite-sections::-webkit-scrollbar { display: none; }
.suite-apps a, .suite-sections a { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 7px; color: #9eb0c6; font-size: 0.78rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.suite-apps a:hover, .suite-sections a:hover { color: #edf5ff; background: #14263b; }
.suite-apps a.active { color: #031713; background: #2fd4bf; }
.suite-sections a.active { color: #edf5ff; background: rgba(47, 212, 191, 0.16); }
.theme-toggle { min-height: 30px; padding: 0 10px; border: 1px solid #294058; border-radius: 7px; color: #9eb0c6; background: #14263b; font: 750 0.78rem ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: #edf5ff; border-color: #2fd4bf; }
#planner, #output { scroll-margin-top: 100px; }

@media (max-width: 620px) {
  .suite-global, .suite-local { padding-inline: 8px; }
  .suite-global { min-height: 44px; gap: 6px; }
  .suite-wordmark { font-size: 0; }.suite-wordmark span { margin: 0; font-size: 0.62rem; }
  .suite-apps { flex: 1 1 auto; justify-content: flex-end; }
  .suite-apps a, .suite-sections a, .theme-toggle { min-height: 28px; padding-inline: 8px; font-size: 0.7rem; }
  .suite-local { min-height: 37px; }
  .shell { padding-top: 20px; }
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .suite-global { min-height: 38px; }
  .suite-local { min-height: 34px; }
  .suite-apps a, .suite-sections a, .theme-toggle { min-height: 25px; font-size: 0.66rem; }
}

/* Public KVK snapshots. Data is published from the authenticated Redeemer admin. */
.kvk-shell { width: min(1380px, calc(100% - 28px)); margin: 0 auto; padding: 30px 0 64px; }
.kvk-hero { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 0 2px; }
.kvk-hero h1 { font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1; }
.kvk-hero h1 span { color: var(--muted); font-size: 0.55em; text-transform: uppercase; }
.kvk-hero > p { max-width: 520px; margin: 0; color: var(--muted); }
.kvk-published { display: grid; justify-items: end; color: var(--muted); font-size: 0.75rem; }
.kvk-published strong { color: var(--ink); font-size: 0.86rem; }
.kvk-published small { margin-top: 3px; }
.kvk-summary { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.kvk-summary-head, .kvk-stat { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(80px, 0.45fr) minmax(80px, 0.45fr); align-items: center; }
.kvk-summary-head { padding: 9px 14px; color: var(--muted); background: var(--field); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.kvk-summary-head strong, .kvk-stat strong { text-align: right; }
.kvk-stat { min-height: 46px; padding: 8px 14px; border-top: 1px solid var(--line); }
.kvk-stat span { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.kvk-stat strong { font-size: 1rem; }
.kvk-stat strong.is-winner { color: var(--forest); }
.kvk-boards { display: grid; gap: 14px; }
.kvk-board { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.kvk-board h2 { padding: 14px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.kvk-board-head, .kvk-board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kvk-board-head { background: var(--field); }
.kvk-board-head strong { padding: 8px 12px; color: var(--muted); font-size: 0.76rem; text-align: center; }
.kvk-board-head strong + strong, .kvk-board-grid > ol + ol { border-left: 1px solid var(--line); }
.kvk-board ol { min-width: 0; margin: 0; padding: 0; list-style: none; }
.kvk-board li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 46px; padding: 7px 10px; border-top: 1px solid var(--line); font-size: 0.78rem; }
.kvk-rank { color: var(--muted); font-size: 0.68rem; }
.kvk-player { display: grid; min-width: 0; line-height: 1.15; }
.kvk-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kvk-player small { color: var(--muted); }
.kvk-board li > b { font-size: 0.72rem; font-variant-numeric: tabular-nums; text-align: right; }
.kvk-no-data { grid-template-columns: 1fr !important; color: var(--muted); text-align: center; }
.kvk-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kvk-index-card { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--panel); box-shadow: var(--shadow); text-decoration: none; }
.kvk-index-card:hover, .kvk-index-card:focus-visible { border-color: var(--forest); transform: translateY(-1px); }
.kvk-index-label { color: var(--orange); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.kvk-index-card strong { font-size: 1.45rem; }.kvk-index-card strong span { color: var(--muted); font-size: 0.65em; text-transform: uppercase; }
.kvk-index-card small { color: var(--muted); }
.kvk-empty { padding: 24px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); background: var(--panel); }
.kvk-not-found { max-width: 560px; margin: 12vh auto; text-align: center; }.kvk-not-found .button { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 620px) {
  .kvk-shell { width: min(100% - 14px, 620px); padding-top: 18px; }
  .kvk-hero { align-items: start; }.kvk-published { justify-items: start; text-align: left; }
  .kvk-comparison-hero { display: grid; }
  .kvk-summary-head, .kvk-stat { grid-template-columns: minmax(105px, 1fr) 62px 62px; }
  .kvk-summary-head, .kvk-stat { padding-inline: 9px; }
  .kvk-board h2 { padding: 11px; font-size: 0.88rem; }
  .kvk-board li { grid-template-columns: 25px minmax(0, 1fr) auto; gap: 4px; min-height: 40px; padding: 5px 6px; font-size: 0.68rem; }
  .kvk-rank, .kvk-board li > b { font-size: 0.6rem; }
}