:root {
  --bg: #05080F;
  --pri: #0088FF;
  --sec: #FF8C00;
  --ok: #00ff91;
  --txt: rgba(0,255,145,.8);
  --txt2: rgba(0,210,130,.38);
  --mono: "Consolas","Cascadia Code","Cascadia Mono","Courier New",monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body {
  font-family:var(--mono);
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(0,255,145,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,145,.04) 1px, transparent 1px);
  background-size:32px 32px;
  color:var(--txt);
  display:flex; flex-direction:column; height:100%; overflow:hidden;
}

/* ── HEADER ─────────────────────────────────────── */
header {
  height:52px;
  background:linear-gradient(135deg, #060D1A 0%, #0C1C38 100%);
  border-bottom:2px solid var(--pri);
  box-shadow:0 2px 24px rgba(0,136,255,.28);
  display:flex; align-items:center; padding:0 16px; gap:14px; flex-shrink:0; z-index:10;
}
.hdr-icon { width:32px; height:32px; flex-shrink:0; }
.hdr-title { font-weight:700; font-size:14px; color:#fff; letter-spacing:5px; text-transform:uppercase; white-space:nowrap; }
.hdr-title em { font-style:normal; color:var(--pri); }
.hdr-div { width:1px; height:28px; background:rgba(255,255,255,.12); flex-shrink:0; }
.hdr-badge { font-size:7px; color:var(--pri); border:1px solid rgba(0,136,255,.5); padding:2px 8px; letter-spacing:2.5px; text-transform:uppercase; white-space:nowrap; }
.hdr-gap { flex:1; }
.hdr-status { font-size:8px; color:rgba(0,255,145,.55); letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
.hdr-back { color:rgba(0,255,145,.45); text-decoration:none; font-size:8px; letter-spacing:2px; text-transform:uppercase; }
.hdr-back:hover { color:rgba(0,255,145,.8); }
.hdr-clk { display:flex; flex-direction:column; align-items:flex-end; }
.hdr-clk-lbl { font-size:7px; color:rgba(255,255,255,.35); letter-spacing:2px; text-transform:uppercase; }
.hdr-clk-val { font-weight:700; font-size:14px; color:#fff; letter-spacing:3px; line-height:1.1; }

/* ── PANEL ──────────────────────────────────────── */
.panel {
  position:relative;
  background:
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/14px 1px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 0/1px 14px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/14px 1px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 0/1px 14px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/14px 1px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 0 100%/1px 14px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/14px 1px no-repeat,
    linear-gradient(rgba(0,255,145,.55),rgba(0,255,145,.55)) 100% 100%/1px 14px no-repeat,
    #070D18;
  border:1px solid rgba(0,255,145,.1);
  box-shadow:0 0 24px rgba(0,0,0,.5), inset 0 0 40px rgba(0,255,145,.018);
}
.p-hdr {
  display:flex; align-items:center; gap:7px; padding:7px 12px;
  border-bottom:1px solid rgba(0,255,145,.08);
  background:linear-gradient(90deg, rgba(0,255,145,.05) 0%, transparent 100%);
}
.p-dot { width:5px; height:5px; border-radius:50%; background:var(--ok); box-shadow:0 0 6px var(--ok); flex-shrink:0; }
.p-lbl { font-size:8px; letter-spacing:3px; color:rgba(0,255,145,.7); text-transform:uppercase; font-weight:bold; }
.p-tag { margin-left:auto; font-size:7px; color:rgba(0,255,145,.25); letter-spacing:1px; }

/* ── STATUS ROWS ────────────────────────────────── */
.sr { display:flex; align-items:center; padding:5px 12px; gap:8px; border-bottom:1px solid rgba(0,255,145,.04); }
.sr:last-child { border-bottom:none; }
.sr-led { width:6px; height:6px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,255,145,.15); background:#0a1408; }
.sr-led.led-ok   { background:#00ff91; border-color:#00ff91; box-shadow:0 0 5px #00ff91, 0 0 12px rgba(0,255,145,.55); }
.sr-led.led-blue { background:#0088FF; border-color:#0088FF; box-shadow:0 0 5px #0088FF, 0 0 12px rgba(0,136,255,.5); }
.sr-led.led-off  { background:#0d1208; border-color:rgba(0,255,145,.08); }
.sr-key { font-size:7px; letter-spacing:2px; color:rgba(0,210,130,.4); text-transform:uppercase; min-width:80px; flex-shrink:0; }
.sr-val { font-size:9px; font-weight:700; letter-spacing:.8px; margin-left:auto; color:rgba(0,255,145,.85); }
.state_active   { color:#00ff91; }
.state_inactive { color:#FF3333; }
.state_unknown  { color:#FF8C00; }

/* ── MAIN LAYOUT ────────────────────────────────── */
.admin-main {
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
  padding:12px; width:100%;
}
.admin-col { display:flex; flex-direction:column; gap:12px; }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (min-width:640px) {
  .admin-main { flex-direction:row; overflow:hidden; max-width:1200px; margin:0 auto; }
  .admin-col { flex:1; min-width:0; overflow-y:auto; min-height:0; }
  .admin-col:first-child { flex:0 0 320px; }
}
@media (min-width:1024px) {
  .admin-main { padding:16px; gap:16px; }
  .admin-col:first-child { flex:0 0 380px; }
}
@media (max-width:479px) {
  .hdr-badge, .hdr-clk { display:none; }
}

/* ── BUTTONS ────────────────────────────────────── */
.button {
  font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  padding:9px 12px; border:1px solid rgba(0,255,145,.2); background:rgba(0,255,145,.03);
  color:rgba(0,255,145,.6); cursor:pointer; transition:all .15s;
}
.button:hover { background:rgba(0,255,145,.08); color:var(--ok); }
.button:disabled { opacity:.3; cursor:not-allowed; }
.buttonA { border-color:rgba(0,136,255,.4); background:rgba(0,136,255,.06); color:rgba(0,136,255,.8); }
.buttonA:hover { background:rgba(0,136,255,.14); color:#55AAFF; border-color:rgba(0,136,255,.7); }
.buttonA:disabled { opacity:.3; }
.buttonX { border-color:rgba(0,255,145,.3); background:rgba(0,255,145,.04); color:rgba(0,255,145,.7); }
.buttonX:hover { background:rgba(0,255,145,.1); color:var(--ok); }
.buttonWarm { border-color:rgba(255,140,0,.35); background:rgba(255,140,0,.04); color:rgba(255,140,0,.7); }
.buttonWarm:hover { background:rgba(255,140,0,.12); color:#FF8C00; }
.buttonWarm:disabled { opacity:.3; }
.buttonDanger { border-color:rgba(255,51,51,.35); background:rgba(255,51,51,.04); color:rgba(255,51,51,.7); }
.buttonDanger:hover { background:rgba(255,51,51,.12); color:#FF3333; }

/* ── CONTAINER CONTROL ──────────────────────────── */
.container-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 12px; }
.container-grid .button { padding:10px 8px; }

/* ── COPY TEXT ──────────────────────────────────── */
.copy-text { font-size:8px; color:rgba(0,210,130,.45); letter-spacing:.5px; line-height:1.6; padding:8px 12px; border-bottom:1px solid rgba(0,255,145,.05); }

/* ── TAB BAR ────────────────────────────────────── */
.tab-bar { display:flex; gap:2px; padding:10px 12px 0; }
.motor_test_tab_button {
  font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 16px; border:1px solid rgba(0,255,145,.15); border-bottom:none;
  background:transparent; color:rgba(0,255,145,.3); cursor:pointer; transition:all .15s;
}
.motor_test_tab_button:hover { color:rgba(0,255,145,.6); border-color:rgba(0,255,145,.35); }
.motor_test_tab_button.is_active { background:rgba(0,255,145,.06); color:#00ff91; border-color:rgba(0,255,145,.4); }
.tab-content-wrap { border-top:1px solid rgba(0,255,145,.08); }

/* ── TAB PANELS ─────────────────────────────────── */
.motor_test_tab_panel { display:none; }
.motor_test_tab_panel.is_active { display:block; }

/* ── TWO-COLUMN TAB LAYOUT ──────────────────────── */
.tab-row { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.tab-box { padding:12px; }
.tab-box + .tab-box { border-left:1px solid rgba(0,255,145,.06); }
.tab-box-lbl { font-size:6px; letter-spacing:4px; color:rgba(0,255,145,.35); text-transform:uppercase; margin-bottom:8px; }

/* ── WHEEL SELECTOR ─────────────────────────────── */
.wheel_selector { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.wheel_option { display:flex; align-items:center; gap:6px; cursor:pointer; padding:6px 8px; border:1px solid rgba(0,255,145,.1); background:rgba(0,255,145,.02); transition:all .12s; }
.wheel_option:hover { border-color:rgba(0,255,145,.3); background:rgba(0,255,145,.05); }
.wheel_option input[type="radio"] { accent-color:var(--ok); width:12px; height:12px; flex-shrink:0; }
.wheel_option span { font-size:8px; letter-spacing:.8px; color:rgba(0,255,145,.6); }
.wheel_option:has(input:checked) { border-color:rgba(0,255,145,.5); background:rgba(0,255,145,.07); }
.wheel_option:has(input:checked) span { color:var(--ok); }

/* ── MOTOR TEST GRID ────────────────────────────── */
.motor_test_grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.motor_test_grid .button { padding:12px 8px; }

/* ── NEUTRAL TOOLBAR ────────────────────────────── */
.neutral-toolbar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid rgba(0,255,145,.05); }
.neutral-toolbar .button { padding:7px 14px; font-size:8px; }

/* ── NEUTRAL CARDS ──────────────────────────────── */
.steering_neutral_grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:6px; padding:12px; }
.steering_neutral_card { border:1px solid rgba(0,255,145,.12); background:rgba(0,255,145,.025); padding:10px; }
.steering_neutral_card.is_dirty { border-color:rgba(255,140,0,.4); background:rgba(255,140,0,.03); }
.steering_neutral_compact_row { display:flex; flex-direction:column; gap:8px; }
.steering_neutral_card_header_compact { }
.steering_neutral_title { font-size:8px; letter-spacing:1.5px; color:rgba(0,255,145,.7); text-transform:uppercase; display:block; }
.steering_neutral_value_row_compact { display:flex; align-items:center; gap:6px; }
.steering_neutral_value { font-size:14px; font-weight:700; color:rgba(0,255,145,.9); letter-spacing:2px; flex:1; text-align:center; }
.is_dirty .steering_neutral_value { color:#FF8C00; }
.steering_neutral_adjust { padding:4px 10px !important; font-size:12px !important; letter-spacing:0 !important; }

/* ── BACK LINKS ─────────────────────────────────── */
.back-row { display:flex; gap:12px; padding:10px 12px; }
.back-link { font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(0,255,145,.4); text-decoration:none; padding:7px 14px; border:1px solid rgba(0,255,145,.15); transition:all .15s; }
.back-link:hover { color:rgba(0,255,145,.8); border-color:rgba(0,255,145,.4); }