:root {
  color-scheme: dark;
  --bg: #14171d;
  --panel: #1b1f27;
  --raised: #232834;
  --line: #2c313d;
  --text: #eef1f6;
  --muted: #8b93a3;
  --accent: #5fb3c9;
  --accent-soft: rgba(95, 179, 201, 0.14);
  --good: #6fcf97;
  --warn: #f2b866;
  --bad: #e8778a;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Roboto Mono", "Fira Code", Consolas, monospace;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); margin: 0; min-height: 100%; }
body { color: var(--text); font: 14px var(--sans); letter-spacing: 0; }

.instrument { display: grid; grid-template-rows: auto minmax(0, 1fr) 2.4rem; min-height: 100vh; }

.topbar {
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(24rem, 1fr) minmax(28rem, .9fr) auto;
  padding: 1rem 1.2rem;
}
.brand p { color: var(--accent); font: 600 .68rem var(--sans); letter-spacing: .12em; margin: 0 0 .3rem; text-transform: uppercase; }
.brand h1 { color: var(--text); font: 600 clamp(1.2rem, 2vw, 1.55rem) var(--sans); letter-spacing: -.01em; margin: 0; }
.brand span { color: var(--muted); display: block; font: .74rem var(--sans); margin-top: .3rem; }

.health { display: grid; gap: .5rem; grid-template-columns: repeat(4, 1fr); margin: 0; }
.health div, .metrics article {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .75rem;
}
.health dt, .metrics h2 { color: var(--muted); font: 600 .62rem var(--sans); letter-spacing: .08em; margin-bottom: .3rem; text-transform: uppercase; }
.health dd { align-items: center; display: flex; font: .84rem var(--mono); gap: .42rem; margin: 0; white-space: nowrap; }

#engine-light { background: var(--muted); border-radius: 50%; height: .5rem; width: .5rem; }
#engine-light.online { background: var(--good); }
#engine-light.busy { background: var(--warn); }
#engine-light.failed { background: var(--bad); }

nav { display: flex; gap: .5rem; }
button {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: 600 .74rem var(--sans);
  height: 2.5rem;
  padding: 0 .9rem;
  transition: border-color .12s ease, color .12s ease;
}
button:hover { border-color: var(--accent); color: var(--accent); }

.layout { display: grid; gap: .75rem; grid-template-columns: 20rem minmax(50rem, 1fr) 21rem; min-height: 0; padding: .75rem; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  overflow: hidden;
}
.panel header {
  align-items: center;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: .6rem .85rem;
}
.panel h2 { color: var(--text); font: 600 .74rem var(--sans); letter-spacing: .02em; margin: 0; }
.panel header span { color: var(--muted); font: .68rem var(--sans); }

.controls { overflow: auto; }
fieldset { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: .9rem .95rem; }
legend { color: var(--accent); font: 600 .68rem var(--sans); letter-spacing: .06em; padding: 0; text-transform: uppercase; }
label { color: var(--muted); display: grid; font: .78rem var(--sans); gap: .35rem; margin-top: .8rem; }
output { color: var(--text); float: right; font: .78rem var(--mono); }

.dataset {
  background: var(--accent-soft);
  border: 1px solid rgba(95, 179, 201, .3);
  border-radius: 8px;
  color: var(--accent);
  font: .74rem/1.5 var(--sans);
  margin: .8rem 0 .35rem;
  padding: .55rem .65rem;
}
.toggle { align-items: center; column-gap: .6rem; display: grid; grid-template-columns: 1fr auto auto; margin-top: .6rem; }
.toggle input { accent-color: var(--accent); height: 1rem; margin: 0; width: 1rem; }
.model-parameters { opacity: .5; transition: opacity .16s ease; }
.model-parameters.active { opacity: 1; }

input[type=range] { accent-color: var(--accent); appearance: none; background: var(--line); border-radius: 3px; height: 4px; width: 100%; }
input[type=range]::-webkit-slider-thumb { appearance: none; background: var(--accent); border-radius: 50%; height: .85rem; width: .85rem; }
input[type=range]::-moz-range-thumb { background: var(--accent); border: 0; border-radius: 50%; height: .85rem; width: .85rem; }
select {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: .78rem var(--sans);
  height: 2.2rem;
  width: 100%;
}

.formula { padding: .9rem .95rem; }
.formula h2 { color: var(--accent); font: 600 .68rem var(--sans); letter-spacing: .06em; margin: 0 0 .5rem; text-transform: uppercase; }
.formula p { color: var(--muted); font: .78rem/1.6 var(--mono); margin: .4rem 0; }

.science { display: grid; gap: .75rem; grid-template-rows: auto minmax(24rem, .64fr) minmax(17rem, .36fr); min-height: 0; }
.metrics { display: grid; gap: .6rem; grid-template-columns: repeat(5, 1fr); }
.metrics strong { color: var(--accent); display: block; font: 600 clamp(1rem, 1.1vw, 1.25rem) var(--mono); white-space: nowrap; }
.metrics span { color: var(--muted); display: block; font: .62rem var(--sans); letter-spacing: .04em; margin-top: .3rem; text-transform: uppercase; }

.upper { display: grid; gap: .75rem; grid-template-columns: minmax(19rem, .44fr) minmax(26rem, .56fr); min-height: 0; }
.map, .spectrum, .lv { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
canvas { contain: strict; display: block; height: 100%; min-height: 0; width: 100%; }

.right { display: grid; gap: .75rem; grid-template-rows: minmax(14rem, .48fr) minmax(8rem, .34fr) auto minmax(9rem, .8fr); min-height: 0; }
table { border-collapse: collapse; font: .74rem var(--mono); width: 100%; }
th { color: var(--muted); font: 600 .68rem var(--sans); text-align: left; text-transform: uppercase; }
td, th { border-bottom: 1px solid var(--line); padding: .5rem .6rem; }
td:nth-child(n+3) { color: var(--accent); text-align: right; }
.peaks table { table-layout: fixed; }
.peaks td.origin { color: var(--muted); font: .72rem var(--sans); text-align: left; white-space: normal; }
.peaks th:last-child, .peaks td.origin { width: 46%; }
.samples td.empty { color: var(--muted); line-height: 1.7; padding: 1rem .6rem; text-align: left; }

.notes p { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 0; padding: .8rem; }
.log { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.log ol { color: var(--muted); font: .74rem/1.7 var(--mono); list-style: none; margin: 0; overflow: auto; padding: .6rem .8rem; }
.log li { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.log li::before { color: var(--accent); content: "> "; }

footer {
  align-items: center;
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font: .72rem var(--sans);
  gap: 1rem;
  justify-content: space-between;
  padding: 0 1.2rem;
}
footer span { color: var(--accent); }
.site-links { display: flex; gap: 1rem; }
.site-links a { color: var(--muted); text-decoration: none; }
.site-links a:hover { color: var(--accent); }

/* Import-observed-spectrum panel */
.file-input { position: relative; }
.file-input input[type=file] {
  background: var(--raised);
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: .72rem var(--sans);
  padding: .5rem;
  width: 100%;
}
.import-readout { display: grid; font: .74rem var(--mono); gap: .3rem; margin: .6rem 0 0; }
.import-readout dt { color: var(--muted); font: .62rem var(--sans); text-transform: uppercase; }
.import-readout dd { color: var(--accent); margin: 0 0 .4rem; }

@media (max-width: 1400px) {
  .topbar { grid-template-columns: 1fr 1fr; }
  nav { grid-column: 1 / -1; }
  .layout { grid-template-columns: 19rem 1fr; }
  .right { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); grid-template-rows: 19rem; }
}
@media (max-width: 980px) {
  .topbar, .layout, .right, .upper { display: block; }
  .health, .metrics { grid-template-columns: repeat(2, 1fr); margin-top: .7rem; }
  .map canvas, .spectrum canvas, .lv canvas { height: 20rem; }
}