:root {
  --ink: #17211d;
  --paper: #f2f0e8;
  --panel: #fbfaf4;
  --line: #c9c9bd;
  --muted: #69736d;
  --accent: #c8ff3d;
  --accent-dark: #263800;
  --danger: #a93427;
  --danger-bg: #fff0e8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: linear-gradient(135deg, rgba(23, 33, 29, .035) 25%, transparent 25%) 0 0 / 18px 18px, var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 80px; }
header { border-top: 8px solid var(--ink); padding-top: 22px; margin-bottom: 34px; }
.eyebrow { margin: 0 0 12px; font: 700 .72rem/1.2 ui-monospace, monospace; letter-spacing: .18em; }
h1 { max-width: 850px; margin: 0; font-size: clamp(3rem, 8vw, 6.8rem); line-height: .86; letter-spacing: -.075em; }
.intro { margin: 24px 0 0; color: var(--muted); font-size: 1.05rem; }
.panel { background: var(--panel); border: 1px solid var(--line); box-shadow: 6px 6px 0 var(--ink); padding: clamp(20px, 4vw, 42px); margin-top: 28px; }
.section-title { display: flex; align-items: baseline; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.section-title span { font: 700 .75rem ui-monospace, monospace; color: var(--muted); }
h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.035em; }
label, .choice-heading strong { font-weight: 700; font-size: .88rem; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 8px 0 30px; }
input[type="text"], #quote { width: 100%; min-height: 48px; border: 1px solid var(--ink); background: white; padding: 10px 14px; text-transform: uppercase; font: 700 1rem ui-monospace, monospace; }
.parallel-field { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 460px; margin: -8px 0 30px; }
.parallel-field span { display: flex; flex-direction: column; gap: 3px; }
.parallel-field small { color: var(--muted); font-weight: 500; }
.parallel-field input { width: 82px; min-height: 44px; border: 1px solid var(--ink); background: white; padding: 8px 10px; font: 700 1rem ui-monospace, monospace; }
button { border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 11px 15px; font-weight: 750; }
button:hover, button:focus-visible { background: var(--ink); color: white; }
button:focus-visible, input:focus-visible { outline: 3px solid #65a6ff; outline-offset: 2px; }
button.primary { background: var(--accent); color: var(--accent-dark); }
button.primary:hover, button.primary:focus-visible { background: var(--ink); color: white; }
.choice-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 20px 0 10px; }
.muted { margin-left: 8px; color: var(--muted); font: 500 .78rem ui-monospace, monospace; }
.link-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.link-controls button { padding: 6px 8px; border-color: transparent; color: var(--muted); font-size: .78rem; }
.link-controls button:hover, .link-controls button:focus-visible { color: white; }
.choices { border: 1px solid var(--line); background: white; padding: 12px; }
.pair-grid { min-height: 102px; max-height: 300px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); align-content: start; gap: 6px; }
.interval-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.choices label { position: relative; display: flex; min-width: 0; cursor: pointer; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label span { width: 100%; padding: 9px 10px; border: 1px solid transparent; font: 650 .78rem ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; }
.choices input:checked + span { background: var(--ink); color: white; }
.choices input:focus-visible + span { outline: 3px solid #65a6ff; }
.choices label:hover span { border-color: var(--ink); }
.empty { grid-column: 1 / -1; align-self: center; margin: 14px; color: var(--muted); }
.intervals-heading { margin-top: 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 30px; }
.warning { margin: 22px 0; border: 2px solid var(--danger); background: var(--danger-bg); color: #6c170f; padding: 16px 18px; font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stats div { min-width: 0; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats dt { color: var(--muted); font-size: .76rem; margin-bottom: 7px; }
.stats dd { margin: 0; font: 750 clamp(.92rem, 2vw, 1.2rem) ui-monospace, monospace; overflow-wrap: anywhere; }
.status { display: inline-block; padding: 5px 8px; background: #deded5; font-size: .78rem; text-transform: uppercase; }
.status[data-status="running"] { background: #ffe181; }
.status[data-status="completed"] { background: var(--accent); }
.status[data-status="rejected"], .status[data-status="failed"] { background: #ffb1a3; }
.timing-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 30px 0 10px; }
.timing-heading h3 { margin: 0; font-size: 1rem; }
.timing-heading p { margin: 0; color: var(--muted); font-size: .76rem; }
.batch-files { margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid var(--accent-dark); background: #eef7d8; font: 650 .72rem/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.timing-wrap { overflow-x: auto; border: 1px solid var(--line); background: white; }
.timings { width: 100%; border-collapse: collapse; font: 700 .78rem ui-monospace, monospace; }
.timings th, .timings td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.timings th { color: var(--muted); background: #efeee7; font: 700 .7rem Inter, ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.timings tbody tr:last-child td { border-bottom: 0; }
.timing-status { text-transform: uppercase; }
.timing-completed { color: #486c00; }
.timing-failed { color: var(--danger); }
.empty-cell { color: var(--muted); text-align: center !important; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 500; }
.error-detail { margin-top: 18px; border-left: 5px solid var(--danger); background: var(--danger-bg); padding: 14px 18px; }
.error-detail p { margin: 7px 0 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .shell { width: min(100% - 22px, 1180px); padding-top: 28px; }
  .panel { box-shadow: 3px 3px 0 var(--ink); }
  .input-row { grid-template-columns: 1fr; }
  .parallel-field { align-items: flex-start; }
  .choice-heading { align-items: flex-start; flex-direction: column; }
  .link-controls { justify-content: flex-start; }
  .interval-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .timing-heading { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  .panel { animation: enter .45s ease-out both; }
  .stats-panel { animation-delay: .08s; }
  @keyframes enter { from { opacity: 0; transform: translateY(10px); } }
}