:root {
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  color: #171b17;
  background: #d8dbc5;
  --paper: #d8dbc5;
  --ink: #171b17;
  --muted: #5c6455;
  --panel: #293027;
  --line: #707764;
  --accent: #e9231b;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
.shell { padding: 0 clamp(16px, 3vw, 44px) 32px; }
.masthead { min-height: 88px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 0; }
.brand { font-size: 28px; font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.project-name { font-size: 14px; color: var(--muted); font-weight: 700; }
.guide-link { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; }
.guide-link:hover { background: var(--ink); color: var(--paper); }
.primary-nav { display: flex; overflow-x: auto; background: var(--panel); border-bottom: 4px solid var(--ink); }
nav a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.primary-nav a { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; color: var(--paper); font-size: 16px; font-weight: 800; border-right: 1px solid #51584b; position: relative; }
.primary-nav a[aria-current] { background: var(--ink); color: #fff; }
.primary-nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--accent); }
.primary-nav svg { width: 22px; height: 22px; flex-shrink: 0; }
.primary-nav a:hover { background: #3b4437; }
.config-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.config-nav[hidden] { display: none; }
.config-nav a { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px 18px; color: var(--muted); border: 1px solid transparent; font-size: 14px; font-weight: 700; }
.config-nav a:hover { color: var(--ink); border-color: var(--line); }
.config-nav a[aria-current] { color: var(--ink); border-color: var(--ink); background: #efeedb; }
#page { min-height: 240px; padding: 30px 0; }
#page-placeholder { margin: 0; color: var(--muted); font-size: 16px; }
.data-page h1 { margin: 0; font-size: 24px; }
.data-page p { color: var(--muted); line-height: 1.5; }
.data-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; margin-top: 24px; }
.data-panels section { padding: 24px; border: 1px solid var(--line); }
.data-panels h2 { margin: 0; font-size: 20px; }
.data-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.data-actions button, .data-upload { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--ink); background: #efeedb; color: var(--ink); font: 700 14px Arial, sans-serif; cursor: pointer; }
.data-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.data-actions button:hover, .data-upload:hover { background: var(--ink); color: var(--paper); }
.data-upload:focus-within { outline: 3px solid #ed6b24; outline-offset: 3px; }
.data-actions button:disabled, .data-upload:has(input:disabled) { opacity: .4; cursor: default; }
.data-page .data-error { color: #981b15; }
.general-config h1 { margin: 0 0 24px; font-size: 24px; }
.general-config h2 { font-size: 20px; }
.general-config p { color: var(--muted); line-height: 1.5; }
.category-scroll { overflow-x: auto; padding: 4px; }
.category-costs { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 20px 16px; }
.equipment-category-costs { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 16px; max-width: 720px; }
.equipment-category-costs label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.staff-group-costs { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 16px; max-width: 960px; }
.uniform-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; max-width: 1200px; }
.uniform-costs label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; align-content: start; }
.uniform-costs input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: #efeedb; color: var(--ink); font: inherit; }
.uniform-costs small { font-weight: 400; }
.uniform-config { margin-top: 24px; }
.staff-group-costs label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.staff-rank-costs { display: grid; max-width: 460px; gap: 12px; }
.staff-rank-costs label { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 16px; font-weight: 700; }
.staff-group-costs input, .staff-rank-costs input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: #efeedb; color: var(--ink); font: inherit; }
.equipment-category-costs input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); background: #efeedb; color: var(--ink); font: inherit; }
.equipment-fallback { position: absolute; left: 16px; top: 24px; width: 40px; text-align: center; font-size: 32px; color: var(--muted); }
.category-costs label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.category-costs input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: #efeedb; color: var(--ink); font: inherit; }
.category-costs input::placeholder { color: var(--muted); opacity: 1; }
.category-costs input[aria-invalid] { border-color: #981b15; }
.general-config .data-error { color: #981b15; }
.general-config .overall-payout-costs { max-width: 240px; grid-template-columns: 1fr; }
.general-config .completion-rank-costs { max-width: 960px; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); }
.payout-pool-options { display: grid; gap: 12px; margin: 20px 0; }
.payout-pool-options label { display: flex; align-items: center; gap: 10px; min-height: 32px; font-weight: 700; }
.payout-pool-options input { width: 20px; height: 20px; accent-color: var(--accent); }
.payout-pool-options label:has(input:disabled) { opacity: .55; }
.payout-pool-options p { margin: 0; max-width: 800px; }
@media (min-width: 1600px) { .category-costs { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.weapon-config h1 { margin: 0 0 20px; font-size: 24px; }
.weapon-config > p { color: var(--muted); }
.weapon-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 20px; }
.weapon-count { color: var(--muted); padding-bottom: 12px; }
.weapon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 24px; }
.weapon-card { position: relative; text-align: left; min-height: 112px; padding: 16px; border: 1px solid var(--line); background: #e5e5ce; color: var(--ink); cursor: pointer; font: inherit; }
.weapon-card[hidden] { display: none; }
.weapon-card:hover { background: #efeedb; border-color: var(--accent); }
.weapon-card h2 { margin: 12px 0 0; font-size: 17px; }
.weapon-card-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.weapon-category { color: var(--accent); font: 800 11px ui-monospace, monospace; text-transform: uppercase; }
.weapon-price { margin-left: auto; text-align: right; font: 700 12px ui-monospace, monospace; overflow-wrap: anywhere; }
.weapon-card.has-icon { padding-left: 72px; }
.weapon-sprite { position: absolute; left: 16px; top: 22px; width: 40px; height: 80px; background-image: url('./weapon-icons.png'); background-size: 4650px 4410px; background-repeat: no-repeat; filter: url(#weapon-ink-filter); pointer-events: none; image-rendering: pixelated; }
.mission-edit.weapon-edit { width: min(1080px, calc(100vw - 32px)); }
.weapon-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.weapon-cost-field { min-width: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.weapon-cost-field:first-child, .weapon-fields > p { grid-column: 1 / -1; }
.weapon-cost-field:first-child label { max-width: 280px; }
.weapon-fields > p { margin: 0; }
.weapon-cost-field .payout-input { margin-top: 8px; }
.weapon-cost-field p, .weapon-fields > p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.weapon-edit-error { color: #981b15; }
a:focus-visible { outline: 3px solid #ed6b24; outline-offset: 3px; z-index: 1; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--ink); color: white; z-index: 5; }
.skip-link:focus { top: 12px; }
@media (max-width: 680px) {
  .primary-nav a { flex: 1; padding: 12px 4px; gap: 6px; flex-direction: column; font-size: 14px; min-width: 0; }
  .primary-nav { width: 100%; }
  .config-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .config-nav a { padding: 10px 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  nav a { transition: background-color 120ms, color 120ms; }
}
.analysis-toggles, .analysis-legend { display:flex; flex-wrap:wrap; gap:16px; margin:20px 0; }
.analysis-toggles button { padding:12px 20px; background:var(--panel); color:white; border:1px solid var(--ink); font:inherit; cursor:pointer; }
.analysis-toggles button[aria-pressed=true] { background:var(--accent); }
.analysis-legend > span { display:flex; align-items:center; gap:8px; }
.analysis-legend i { display:inline-block; width:32px; }
.analysis-chart { overflow-x:auto; border:1px solid var(--line); background:#e5e5ce; }
.analysis-chart svg { display:block; width:100%; min-width:700px; font:13px system-ui,sans-serif; fill:var(--ink); }
.analysis-chart circle:focus { outline:2px solid var(--ink); }
.analysis-page details { margin:20px 0; overflow-x:auto; }
.analysis-page summary { cursor:pointer; font-weight:700; }
.analysis-page table { width:100%; border-collapse:collapse; margin-top:12px; }
.analysis-page th, .analysis-page td { text-align:left; padding:10px; border-bottom:1px solid var(--line); }