:root {
  color-scheme: dark;
  --bg: rgba(8, 10, 14, 0.78);
  --panel: rgba(14, 18, 24, 0.78);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f4f6f8;
  --muted: #9aa3ad;
  --accent: #ef1a2d;
  --accent-2: #ff5a64;
  --good: #40df9b;
  --warn: #ffb44c;
  --danger: #ff4a5f;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05070a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); }
button, select, input { font: inherit; }
button { color: var(--text); background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: pointer; transition: .16s ease; letter-spacing: .04em; font-size: 11px; font-weight: 700; }
button:hover, button:focus-visible { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); transform: translateY(-1px); outline: none; }
button.primary { background: linear-gradient(135deg, var(--accent), #9e0a18); border-color: rgba(255,255,255,.25); }
button.active { border-color: var(--accent-2); box-shadow: 0 0 0 1px rgba(239,26,45,.3) inset; background: rgba(239,26,45,.15); }

#app, #viewport { position: fixed; inset: 0; width: 100%; height: 100%; }
#viewport { display: block; touch-action: none; }
.hud { position: fixed; z-index: 5; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.topbar { top: 16px; left: 16px; right: 16px; height: 70px; border-radius: 12px; background: linear-gradient(90deg, rgba(9,12,17,.9), rgba(13,16,22,.55)); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; pointer-events: none; }
.eyebrow { color: var(--accent-2); font-size: 10px; letter-spacing: .22em; font-weight: 800; }
h1 { margin: 3px 0 0; font-size: 22px; letter-spacing: .07em; line-height: 1; }
.timing { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.timing span { font-size: 10px; color: var(--muted); letter-spacing: .18em; }
.timing strong { font-variant-numeric: tabular-nums; font-size: 22px; }

.panel { top: 102px; width: 240px; border-radius: 12px; background: var(--panel); padding: 14px; }
.left-panel { left: 16px; }
.right-panel { right: 16px; }
.panel-title { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .18em; margin-bottom: 10px; }
.gap { margin-top: 16px; }
.button-grid, .preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.control-row, .switch-row { display: flex; align-items: center; justify-content: space-between; color: #d4d8dd; font-size: 11px; margin: 12px 1px 6px; }
.control-row output { color: var(--muted); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
input[type="checkbox"] { appearance: none; width: 34px; height: 19px; border-radius: 999px; background: #343a43; position: relative; cursor: pointer; transition: .18s ease; }
input[type="checkbox"]::after { content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .18s ease; }
input[type="checkbox"]:checked { background: var(--accent); }
input[type="checkbox"]:checked::after { transform: translateX(15px); }
select { width: 100%; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 8px; padding: 9px; font-size: 11px; outline: none; }
.legend { display: flex; flex-direction: column; gap: 7px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.legend div { display: flex; align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px currentColor; }
.green { color: var(--good); background: var(--good); }
.amber { color: var(--warn); background: var(--warn); }
.red { color: var(--danger); background: var(--danger); }
.inspection-card { margin-top: 17px; padding: 12px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.inspection-card .panel-title { margin-bottom: 6px; }
.inspection-card strong { font-size: 13px; }
.inspection-card p { margin: 7px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.48; }

#labelsLayer { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.part-label { position: absolute; transform: translate(-50%, -50%); font-size: 9px; letter-spacing: .08em; font-weight: 800; color: #f6f7f9; text-transform: uppercase; background: rgba(7,9,13,.78); border: 1px solid rgba(255,255,255,.15); border-radius: 5px; padding: 5px 7px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .2s ease; }
.part-label::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 18px; background: linear-gradient(rgba(255,255,255,.35), transparent); }
.footerbar { left: 16px; right: 16px; bottom: 16px; min-height: 38px; border-radius: 10px; background: rgba(8,10,14,.75); display: flex; align-items: center; gap: 18px; padding: 8px 13px; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
kbd { color: white; border: 1px solid rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); border-radius: 4px; padding: 3px 5px; font-size: 9px; }
#renderStats { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .panel { width: 205px; }
  .footerbar div:not(:first-child):not(#renderStats) { display: none; }
}
@media (max-width: 680px) {
  .right-panel { display: none; }
  .left-panel { width: 190px; top: 94px; }
  h1 { font-size: 17px; }
  .timing strong { font-size: 17px; }
}
body.hide-ui .hud, body.hide-ui #labelsLayer { display: none; }

.independent-note{margin-left:auto;color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.independent-note + #renderStats{margin-left:0}@media(max-width:900px){.independent-note{display:none}}