:root {
  /* NTH-5: Gwen's yandere theme — dark plum with a hot-pink accent (was Strelok blue) */
  --bg: #1b131a; --fg: #f5ecf2; --accent: #ff6fb5;
  --muted: #b2a0ac; --card: #241a23; --border: #483341;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, sans-serif;
  background: var(--bg); color: var(--fg);
}
header {
  padding: 1rem 1.5rem; background: var(--card);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; border-bottom: 1px solid var(--border);
}
header h1 { font-size: 1.15rem; margin: 0; position: relative; padding-top: 13px; }
header h1 span { color: var(--accent); font-weight: 400; font-size: .85rem; }
/* NTH-5: little cat ears above the title */
header h1::before, header h1::after {
  content: ''; position: absolute; top: 0; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid var(--accent); opacity: .85;
}
header h1::before { left: 5px; transform: rotate(-20deg); }
header h1::after { left: 21px; transform: rotate(16deg); }
nav button {
  background: transparent; color: var(--fg); border: 1px solid var(--border);
  padding: .4rem .7rem; border-radius: 6px; cursor: pointer;
}
nav button:hover, nav button.active { border-color: var(--accent); color: var(--accent); }
main { padding: 1.5rem; max-width: 1100px; }
.view { }
.hidden { display: none; }
h2 { color: var(--accent); margin-top: 0; }
h3 { color: var(--accent); margin-bottom: .5rem; }
.muted { color: var(--muted); }
/* NTH-UI: the calculator form. A 6-column grid laid out 2-wide (the two tall cards:
   Projectile, Zero & Target) then 3-wide (the three shorter cards: Rifle Profile,
   Atmosphere, Corrections) — balanced AND deterministic. (CSS multi-column was fragile
   here: the uneven card heights don't pack into 3 equal columns, so a few px of height
   change made it jump 3->2 columns and strand the third one empty.) Collapses to
   2 columns on tablets, 1 on phones. */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem; margin: 1rem 0;
}
.grid > fieldset:nth-child(1),
.grid > fieldset:nth-child(2) { grid-column: span 3; }   /* Projectile, Zero & Target */
.grid > fieldset:nth-child(3),
.grid > fieldset:nth-child(4),
.grid > fieldset:nth-child(5) { grid-column: span 2; }   /* Rifle Profile, Atmosphere, Corrections */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid > fieldset:nth-child(n + 1) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .grid > fieldset:nth-child(n + 1) { grid-column: span 1; }
}
fieldset {
  border: 1px solid var(--border); border-radius: 8px; padding: .8rem;
  background: var(--card);
}
fieldset legend {
  color: var(--accent); font-weight: 600; font-size: .85rem;
  padding: 0 .4rem;
}
/* NTH-UI: labels are BLOCKS, not column-flex. A column flex split the inline label
   text — e.g. "Zero range (m)" = text + <span> + text — into separate stacked flex
   items, so it wrapped across 2-3 lines. As a block the text stays on one line and
   the field sits full-width beneath it (restoring what flex-stretch used to give). */
label {
  display: block;
  font-size: .8rem; margin-bottom: .55rem;
}
label input, label select {
  display: block; width: 100%; margin-top: .25rem;
}
label input[type=checkbox] {
  display: inline-block; width: auto; margin-top: 0;   /* checkbox + its text stay inline */
}
label > button { display: block; width: 100%; }         /* keep the Save/Delete bars full-width */
input, select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  padding: .4rem .5rem; border-radius: 4px; font-size: .9rem;
}
/* NTH-2: type-and-pick comboboxes (cartridge / bullet / scope). The visible input +
   dropdown drive a hidden <select> (`.combo-src`) kept as the source of truth. */
.combo { position: relative; }
.combo-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  margin: .15rem 0 0; padding: 0; list-style: none;
  max-height: 14rem; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.combo-list[hidden] { display: none; }
.combo-list li {
  padding: .35rem .55rem; font-size: .85rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-list li:hover { background: rgba(255, 111, 181, .18); }
.combo-list li.combo-active { background: rgba(255, 111, 181, .3); }   /* NTH-UI: keyboard highlight */
.combo-list li.combo-empty { color: var(--muted); font-style: italic; cursor: default; }
.combo-src { display: none; }
/* NTH-UI: keyboard hint under each picker. The open dropdown (z-index 50) overlaps it,
   so the hint only reads when the list is closed. */
.combo-hint { display: block; margin-top: .15rem; font-size: .68rem; color: var(--muted); opacity: .8; }
input[type=checkbox] { width: auto; }
button#calc-btn {
  background: var(--accent); color: #111; border: 0; padding: .6rem 1.2rem;
  border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 1rem;
  margin: .5rem 0;
}
button#calc-btn:hover { opacity: .85; }
button.btn {
  background: var(--accent); color: #111; border: 0; padding: .4rem .9rem;
  border-radius: 6px; cursor: pointer; font-weight: 600; font-size: .85rem;
}
button.btn:hover { opacity: .85; }
pre { background: #10131a; padding: 1rem; border-radius: 8px; overflow: auto; white-space: pre-wrap; }

/* Results table */
.results-table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
}
.results-table td {
  padding: .4rem .6rem; border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.results-table td:first-child { color: var(--muted); width: 40%; }

/* Drop table */
.table-wrap { overflow-x: auto; }
.drop-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.drop-table th {
  background: var(--card); color: var(--accent); padding: .4rem .5rem;
  text-align: left; position: sticky; top: 0;
}
.drop-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
.drop-table tr:hover td { background: #1e2430; }

/* DB views */
.db-stats {
  display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: .8rem 1.2rem; text-align: center; min-width: 120px;
}
.stat-num { display: block; font-size: 1.5rem; color: var(--accent); font-weight: 700; }
.stat-label { font-size: .75rem; color: var(--muted); }
.db-row {
  padding: .5rem .6rem; border-bottom: 1px solid var(--border);
  font-size: .85rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center;
}
.db-results { max-height: 500px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }

/* Converters */
.converter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.converter-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: .8rem;
}
.converter-card h4 { margin: 0 0 .5rem 0; color: var(--accent); }
.converter-card p { margin: .25rem 0; font-size: .85rem; }
/* NTH: bidirectional converters — pick the source unit; the rest auto-fill */
.cv-src { display: flex; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.cv-src label { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.cv-src select {
  flex: 1; min-width: 0; padding: .35rem; border-radius: 6px;
  background: var(--bg); color: var(--fg); border: 1px solid #3a4250;
}
.cv-src input {
  width: 5.5rem; padding: .35rem; border-radius: 6px;
  background: var(--bg); color: var(--fg); border: 1px solid #3a4250;
}
.cv-outs { display: flex; flex-direction: column; gap: .3rem; }
.cv-out {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; padding: .18rem .4rem; border-radius: 4px;
}
.cv-out span { color: var(--muted); }
.cv-out output { font-weight: 700; color: var(--fg); font-family: ui-monospace, monospace; }

/* Ammo DB filters + compare */
.ammo-filters {
  display: flex; gap: .4rem; flex-wrap: wrap; margin: .4rem 0; padding: .5rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
}
.ammo-filters select, .ammo-filters input {
  padding: .35rem; border-radius: 6px; font-size: .8rem;
  background: var(--bg); color: var(--fg); border: 1px solid #3a4250;
}
.ammo-filters input { width: 6.2rem; }
.cmp-toggle { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; color: var(--muted); cursor: pointer; }
#ammo-compare { margin-top: 1rem; }
#ammo-compare .drop-table { width: 100%; }

/* Scopes tab: clickable rows + reticle preview */
.scope-row { cursor: pointer; }
.scope-row:hover { background: rgba(255, 111, 181, .12); }

canvas { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #10131a; }

/* Print — the range card: results + drop table only, paper-friendly.
   (Nice-to-have from STATUS M8 polish; the original app has no print mode.) */
@media print {
  @page { margin: 1.4cm; }
  body { background: #fff !important; color: #000 !important; }
  header, nav, #calc-form, #calc-btn, #csv-btn, .btn, canvas { display: none !important; }
  .view { display: none !important; }
  #view-calc { display: block !important; }
  #output { color: #000 !important; background: #fff !important; max-height: none !important; overflow: visible !important; }
  #output h3:has(+ canvas) { display: none; }   /* no chart on paper → no dangling heading */
  #output h3 { color: #000; font-size: 1.1rem; border-bottom: 1px solid #000; }
  #output table { width: 100%; border-collapse: collapse; font-size: 9.5pt; background: #fff !important; }
  #output th, #output td { border: 1px solid #888; padding: 2px 6px; background: #fff !important; color: #000; }
  #output th { background: #eee !important; }
  #output td:first-child { color: #333; }
}