:root {
  color: var(--ink);
  background: var(--background);
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: #0b1219;
  --panel: #111c26;
  --panel-2: #172532;
  --input: #0d1720;
  --chart: #101923;
  --chart-line: #263646;
  --line: #2b3d4c;
  --control-line: #477087;
  --ink: #eaf2f8;
  --muted: #91a4b7;
  --accent: #27d3a2;
  --action: #0d7059;
  --warning: #ffc36b;
  --warning-bg: #2b2518;
  --error: #ff7e81;
  --error-bg: #2b1b22;
  --axis-x: #27d3a2;
  --axis-y: #68a7ff;
  --axis-z: #ffb85c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 20% -10%, #173249 0, transparent 35rem), var(--background); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, input, textarea, select { color: var(--ink); background: var(--input); border: 1px solid var(--control-line); border-radius: .55rem; padding: .65rem .8rem; }
textarea { min-height: 6rem; resize: vertical; }
button, .button { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.7rem; padding: .6rem 1rem; border-radius: .55rem; border: 1px solid var(--action); background: var(--action); color: white; }
button:hover, .button:hover { filter: brightness(1.12); }
button:disabled { opacity: .4; cursor: default; }
.button.secondary, button.secondary { background: transparent; border-color: var(--control-line); }
.page, .open-device { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 5rem; }
.open-device { max-width: 650px; padding-top: 12vh; }
.page-header, .section-title, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; text-decoration: none; }
h1 { margin: .25rem 0 .5rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; }
h2 { margin-top: 2.2rem; }
.lede { color: #b8c8d5; font-size: 1.15rem; }
.muted { color: var(--muted); }
.error { color: var(--error); }
.warnings { color: var(--warning); }
.warning-panel { padding: .5rem 1rem; border-left: 3px solid var(--warning); background: var(--warning-bg); border-radius: .35rem; margin: 1.5rem 0; }
.field { display: grid; gap: .35rem; }
.field-label { color: #cbd8e2; font-weight: 650; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.check { display: inline-flex; align-items: center; gap: .55rem; }
.check input { width: 1.1rem; height: 1.1rem; }
.log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; align-items: stretch; }
.log-card, .mount-card, .metadata-editor { display: block; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(145deg, var(--panel), #0e1821); text-decoration: none; }
.log-card:hover { border-color: var(--control-line); transform: translateY(-1px); }
.log-card-row { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.log-card-row .log-card { flex: 1 1 auto; min-width: 0; }
.log-card-actions { display: grid; gap: .35rem; min-width: 0; }
.baseline-action { width: 100%; min-width: 0; white-space: normal; line-height: 1.25; }
.log-card-title { font-weight: 750; font-size: 1.1rem; margin-bottom: .3rem; overflow-wrap: break-word; }
.log-card-meta { overflow-wrap: break-word; }
.log-card-time { font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: normal; }
.mount-card, .metadata-editor { margin: .75rem 0; }
summary { cursor: pointer; font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin: 1rem 0; }
.facts > div { display: grid; padding: .8rem; background: var(--panel); border-radius: .6rem; }
.analysis-panel { margin-top: 1.5rem; }
.chart { display: block; width: 100%; height: 270px; margin: 1rem 0; border: 1px solid var(--line); border-radius: .65rem; background: var(--chart); touch-action: none; }
.time-series-axis { height: 150px; margin: .45rem 0; cursor: crosshair; touch-action: pan-y; }
.spectrum-chart { height: 330px; image-rendering: pixelated; }
.spectrum-placeholder { padding: .75rem 1rem; margin: .35rem 0 1rem; }
.whole-log-navigator { height: 44px; margin-top: .35rem; cursor: ew-resize; }
.chart-label { color: var(--muted); font-size: .85rem; }
.synchronized-chart-stack { min-width: 0; margin-top: .35rem; }
.chart-lane { position: relative; width: 100%; margin: .45rem 0; }
.chart-lane .chart { margin: 0; }
.chart-cursor-overlay { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.spectrum-lane { min-height: 180px; margin: .45rem 0 .75rem; }
.spectrum-lane .spectrum-placeholder { min-height: 180px; margin: 0; }
.synchronized-chart-stack .chart { touch-action: pan-y; }
.shared-time-ruler { height: 52px; margin: .25rem 0 0; border-radius: .4rem; cursor: crosshair; }
.shared-time-scrollbar { height: 34px; margin: .2rem 0 .75rem; border-radius: .4rem; cursor: ew-resize; touch-action: none !important; }
.shared-time-ruler:focus-visible, .shared-time-scrollbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart-cursor-readout { display: block; min-height: 1.5rem; color: #cbd8e2; font-size: .8rem; font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.window-text { color: #cbd8e2; font-variant-numeric: tabular-nums; }
.gap-list { columns: 2; color: var(--warning); }
.empty { padding: 2rem; border: 1px dashed var(--line); color: var(--muted); }
.photo-preview { margin: 1rem 0; min-height: 4rem; }
.photo-preview img { display: block; max-width: min(100%, 720px); max-height: 30rem; border-radius: .65rem; border: 1px solid var(--line); object-fit: contain; }
.prototype-banner { display: grid; gap: .2rem; margin: 0 0 1.5rem; padding: .85rem 1rem; border: 1px solid #87652e; border-radius: .65rem; background: var(--warning-bg); color: var(--warning); }
.prototype-banner span { color: #ead6af; }
.global-prototype-banner { width: min(1180px, calc(100% - 2rem)); margin: 1rem auto 0; }
.fleet-login-card { width: min(100%, 21rem); margin: 1.5rem auto 1rem; padding: 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: .8rem; background: linear-gradient(145deg, var(--panel), #0e1821); }
.fleet-login-card h2 { margin: 0 0 .35rem; }
.fleet-login-card p { margin: 0 0 1rem; }
.google-signin { width: 240px; max-width: 100%; height: 44px; margin: 0 auto; overflow: hidden; contain: strict; }
.google-signin > div, .google-signin iframe { display: block; width: 240px !important; max-width: 100% !important; height: 44px !important; max-height: 44px !important; overflow: hidden !important; }
.firmware-upload-panel { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(10rem, .65fr) minmax(15rem, 1fr) auto; gap: .75rem; align-items: end; margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(145deg, var(--panel), #0e1821); }
.firmware-upload-panel h2, .firmware-upload-panel p { margin: 0; }
.firmware-upload-panel > p { grid-column: 1 / -1; min-height: 1.5rem; }
.fleet-list { display: grid; gap: .9rem; margin-top: 1.25rem; }
.fleet-device { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(20rem, 1.4fr) minmax(15rem, 1fr); gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(145deg, var(--panel), #0e1821); }
.fleet-identity { display: grid; gap: .35rem; align-content: start; }
.device-id { color: var(--accent); font: 700 .95rem/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.pill { justify-self: start; padding: .15rem .5rem; border: 1px solid currentColor; border-radius: 99rem; font-size: .78rem; }
.pill.ok { color: var(--accent); }
.pill.warning { color: var(--warning); }
.pill.error { color: var(--error); }
.fleet-facts { display: grid; gap: .45rem; margin: 0; }
.fleet-facts div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; }
.fleet-facts dt { color: var(--muted); }
.fleet-facts dd { margin: 0; overflow-wrap: anywhere; }
.fleet-actions { display: grid; grid-template-columns: minmax(8rem, 1fr) repeat(3, auto); gap: .45rem; align-items: center; }
.fleet-actions small { grid-column: 1 / -1; min-height: 1.4rem; }
.fleet-version { min-width: 0; }
button.small, .button.small { min-height: 2.35rem; padding: .4rem .65rem; }
button.danger { border-color: #934950; background: #702e36; }
@media (max-width: 680px) {
  .page, .open-device { width: min(100% - 1rem, 1180px); }
  .global-prototype-banner { width: min(100% - 1rem, 1180px); }
  .toolbar > * { flex: 1 1 auto; }
  .window-text { flex-basis: 100%; text-align: center; }
  .gap-list { columns: 1; }
  .fleet-device { grid-template-columns: 1fr; }
  .fleet-actions { grid-template-columns: 1fr 1fr; }
  .fleet-actions input, .fleet-actions small { grid-column: 1 / -1; }
  .firmware-upload-panel { grid-template-columns: 1fr; }
  .firmware-upload-panel > p { grid-column: auto; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  .fleet-device { grid-template-columns: minmax(12rem, .7fr) minmax(18rem, 1.3fr); }
  .fleet-actions { grid-column: 1 / -1; }
  .firmware-upload-panel { grid-template-columns: 1fr 1fr; }
  .firmware-upload-panel > p { grid-column: 1 / -1; }
}