/* ============================================================
   style.css — Meter Lab: Simulator Litar + Meter Analog Realistik
   Gaya "radas makmal": kad gelap, dail krim gading klasik, komponen
   litar dilukis realistik (bukan simbol skematik).
============================================================ */
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --line:#2b3342;
  --text:#e6edf3; --muted:#8b98a8;
  --dial-face:#f3ecd9; --scale-ink:#1a1a1a;
  --red-zone:#c0392b; --needle:#8b1a1a;
  --amm-accent:#f1c40f; --volt-accent:#5dade2;
  --good:#3fb950; --bad:#f85149; --lcd:#c8f7c5;
  --case-body:#26303e; --case-edge:#3a4657;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Segoe UI',Roboto,Arial,sans-serif;}
h1,h2,h3{font-weight:600;margin:0;}

header.appbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#0a0e14;padding:12px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
header.appbar h1{font-size:17px;color:#f0f4f8;}
header.appbar .sub{font-size:11px;color:var(--muted);margin-top:2px;}
.innovation-badge{
  display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:#ffe9a8;background:#3a2c0d;border:1px solid #6b4f14;border-radius:20px;padding:3px 11px;
}
.power-switch{display:flex;align-items:center;gap:8px;}
.power-switch button{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;
}
.power-switch button.on{background:var(--good);color:#04170a;border-color:var(--good);}
.power-switch button.off{background:var(--bad);color:#2a0605;border-color:var(--bad);}

.warnbar{max-width:1500px;margin:0 auto;padding:10px 18px 0;}
.warnbar-inner{background:#3a0d0d;border:1px solid var(--bad);color:#ffd7d3;padding:8px 14px;border-radius:9px;font-size:12.5px;display:none;text-align:center;}
.warnbar-inner.show{display:block;}
.warnbar-inner.ok{background:#0c2b14;border-color:var(--good);color:#c9f2d1;}

main{max-width:1500px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:18px;}

/* ================= LAYOUT UTAMA: PALET + CANVAS + PANEL ================= */
.workshop{display:grid;grid-template-columns:180px 1fr 300px;gap:14px;align-items:start;}
@media (max-width:1100px){ .workshop{grid-template-columns:1fr;} }

.palette{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;}
.palette h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;}
.palette-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:10px 6px;border-radius:9px;cursor:pointer;font-size:11px;margin-bottom:8px;
  transition:border-color .15s;
}
.palette-btn:hover{border-color:var(--amm-accent);}
.palette-btn .ico{font-size:20px;}
.palette-hint{font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:6px;}

.canvas-wrap{background:#0a0e14;border:1px solid var(--line);border-radius:12px;overflow:hidden;position:relative;}
.canvas-toolbar{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;}
.canvas-toolbar button{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:6px 11px;border-radius:7px;cursor:pointer;font-size:12px;}
.canvas-toolbar button:hover{border-color:#6b7686;}
.canvas-toolbar button.danger{border-color:var(--bad);color:#ffb4af;}
.canvas-toolbar .spacer{flex:1;}
.canvas-toolbar .tip{font-size:10.5px;color:var(--muted);}
#circuitCanvas{width:100%;height:640px;display:block;background:
  linear-gradient(#11161f 1px,transparent 1px) 0 0/26px 26px,
  linear-gradient(90deg,#11161f 1px,transparent 1px) 0 0/26px 26px,
  #0a0e14;
  cursor:default;
}

.prop-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:200px;}
.prop-panel h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px;}
.prop-empty{font-size:12px;color:var(--muted);line-height:1.6;}
.ctrl-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12px;}
.ctrl-row label{flex:0 0 100px;color:var(--muted);}
.ctrl-row select, .ctrl-row input[type=number]{
  flex:1;background:#0d1117;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px 7px;font-size:12px;
}
.ctrl-row input[type=range]{flex:1;accent-color:var(--amm-accent);}
.ctrl-row .val{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-size:12px;}
.ctrl-row.toggle{justify-content:space-between;}
.togglebtns{display:flex;gap:4px;}
.togglebtns button{flex:1;padding:5px 8px;font-size:11px;border-radius:5px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);cursor:pointer;}
.togglebtns button.on{background:var(--amm-accent);color:#332600;border-color:var(--amm-accent);font-weight:700;}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
button.small{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:7px 12px;border-radius:7px;cursor:pointer;font-size:12px;}
button.small:hover{border-color:#6b7686;}
button.small.primary{background:#3fb950;color:#04170a;border-color:#3fb950;font-weight:700;}
button.small.danger{background:#3a0d0d;color:#ffb4af;border-color:var(--bad);}
.hint-small{font-size:10.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
.prop-title{font-size:13px;font-weight:700;margin-bottom:8px;color:#f0f4f8;}

.readbox{background:#04140a;border:1px solid #163a22;border-radius:9px;padding:10px;margin-top:10px;}
.readbox .rq{font-size:11.5px;color:#c9f2d1;margin-bottom:6px;}
.readbox .rrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.readbox input[type=number]{width:100px;padding:6px;border-radius:6px;border:1px solid var(--line);background:#0d1117;color:var(--text);}
.readbox .feedback{font-size:12px;font-weight:700;margin-top:6px;min-height:16px;}
.readbox .feedback.betul{color:var(--good);}
.readbox .feedback.salah{color:var(--bad);}

/* ================= KOMPONEN LITAR SVG (realistik) ================= */
.compRoot{cursor:grab;}
.compRoot:active{cursor:grabbing;}
.cell-body{fill:#3a4657;stroke:#556074;stroke-width:1.5;}
.cell-body.selected{stroke:var(--amm-accent);stroke-width:2.5;}
.cell-highlight{fill:#4c5a6e;opacity:.55;}
.cell-nub{fill:#8f98a6;stroke:#556074;}
.cell-sign{font-size:15px;font-weight:800;fill:#e6edf3;}
.ac-wave{fill:none;stroke:#e6edf3;stroke-width:2;}
.lead{stroke:#9aa7b8;stroke-width:3;}
.comp-label{font-size:10.5px;fill:#aab4c2;text-anchor:middle;}

.resistor-body{fill:#e9dcc0;stroke:#8a7a55;stroke-width:1;}
.resistor-body.selected{stroke:var(--amm-accent);stroke-width:2.5;}

.bulb-base{fill:#6b6f76;stroke:#3a3d42;}

.cap-plate{stroke:#dfe7ee;stroke-width:3.5;stroke-linecap:butt;}
.cap-plate.selected{stroke:var(--amm-accent);}
.ind-coil{fill:none;stroke:#dfe7ee;stroke-width:2.6;}
.ind-coil.selected{stroke:var(--amm-accent);}

.switch-base{fill:#3a4657;stroke:#556074;stroke-width:1.5;}
.switch-base.selected{stroke:var(--amm-accent);stroke-width:2.5;}
.switch-pivot{fill:#c9a227;}
.switch-lever{stroke:#e6edf3;stroke-width:3.5;stroke-linecap:round;}
.switch-lever.on{stroke:#3fb950;}
.switch-lever.off{stroke:#f85149;}

.meter-case{fill:var(--case-body);stroke:var(--case-edge);stroke-width:2;}
.meter-case.selected{stroke:var(--amm-accent);stroke-width:3;}
.meter-termstrip{fill:#2f6b3a;stroke:#1e4a26;}
.jack-label{font-size:8.5px;fill:#dfe7ee;font-weight:600;}
.term{fill:#8f98a6;stroke:#454f5e;stroke-width:1;cursor:crosshair;}
.term.connected{fill:#3fb950;}
.jack{fill:#d9d9d9;stroke:#333;stroke-width:1.2;cursor:crosshair;}
.jack.jack-common{fill:#2b2b2b;stroke:#111;}
.jack.jack-range{fill:#c0392b;stroke:#6b1c12;}
.jack.connected{stroke:#3fb950;stroke-width:2.5;}
.brand-label{font-size:6.5px;fill:#8a8468;letter-spacing:.06em;}

.mm-knob{fill:#3a4657;stroke:#8f98a6;stroke-width:2;cursor:pointer;}
.mm-pointer{stroke:#f1c40f;stroke-width:3;stroke-linecap:round;pointer-events:none;}
.mm-funclabel{font-size:7.5px;fill:#8ea0b8;pointer-events:none;}
.mm-funclabel.active{fill:#f1c40f;font-weight:700;}

.meter-screen{fill:var(--dial-face);stroke:#00000033;}
.dial-face{ fill:var(--dial-face); stroke:#00000022; }
.mirror-arc{ fill:none; stroke:#ffffff; stroke-opacity:.35; stroke-width:1.2; }
.red-zone{ fill:none; stroke:var(--red-zone); stroke-width:5; stroke-linecap:round; }
.tick-major{ stroke:var(--scale-ink); stroke-width:1.6; }
.tick-minor{ stroke:var(--scale-ink); stroke-width:.8; opacity:.55; }
.scale-num{ font-size:7px; fill:#8a8468; font-family:Georgia,'Times New Roman',serif; text-anchor:middle;}
.scale-num.active{ fill:var(--scale-ink); font-weight:700; font-size:9.5px; }
.scale-rowlabel{ font-size:6.5px; fill:#a19c86; font-family:Georgia,serif; font-style:italic; }
.scale-rowlabel.active{ fill:#000; font-weight:700; font-size:7.5px; }
.scale-other{ font-size:6px; fill:#a19c86; font-style:italic; }
.unit-label{ font-size:12px; font-family:Georgia,'Times New Roman',serif; font-weight:700; fill:#1a1a1a; }
.needle{ stroke:var(--needle); stroke-width:2; stroke-linecap:round; }
.needle.neg{ stroke:#b91c1c; }
.pivot{ fill:#222; stroke:#666; stroke-width:1; }
.broken-flag{ font-size:9px; font-weight:800; fill:var(--bad); }
.noconn-flag{ font-size:6.3px; fill:#8a7a55; }

.digital-case{fill:#20262f;}
.lcd-screen{fill:var(--lcd);stroke:#0006;stroke-width:1;}
.lcd-main{font-family:'Courier New',monospace;font-weight:700;fill:#0d3b12;dominant-baseline:middle;}
.lcd-main.lcd-err{fill:#8a1f14;}
.lcd-sub{font-size:8px;font-family:'Courier New',monospace;font-weight:700;fill:#1c4a22;}
.lcd-unit{font-size:9.5px;font-family:'Courier New',monospace;font-weight:700;fill:#1c4a22;}

/* ================= SKALA DIPERBESAR (ZOOM) ================= */
.zoom-overlay{position:fixed;inset:0;background:rgba(4,7,12,.78);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px;}
.zoom-modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 20px 60px #000a;}
.zoom-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;font-size:13px;color:var(--muted);font-weight:600;}
#zoomSvg{width:min(70vw,520px);height:min(60vh,460px);display:block;}

.wire-path{fill:none;stroke-width:3.4;stroke-linecap:round;cursor:pointer;}
.wire-path.black{stroke:#2a2a2a;}
.wire-path.red{stroke:#b3261e;}
.wire-path.gray{stroke:#7d8797;}
.wire-path:hover{filter:brightness(1.5) drop-shadow(0 0 3px #f85149);}
.wire-draft{fill:none;stroke:#f1c40f;stroke-width:2.5;stroke-dasharray:5 4;pointer-events:none;}
.term-pending{stroke:var(--amm-accent) !important;stroke-width:3 !important;}

/* ================= LATIHAN ================= */
.exercise-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;}
.exercise-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;}
.ex-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.ex-controls select{background:#0d1117;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12px;}
.ex-body{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start;}
.ex-question{flex:1;min-width:260px;font-size:13px;line-height:1.6;color:#dbe4ee;background:#0d1117;padding:12px;border-radius:8px;border:1px solid var(--line);}
.ex-answer{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.ex-answer input[type=number]{width:120px;padding:7px;border-radius:6px;border:1px solid var(--line);background:#0d1117;color:var(--text);}
.ex-choices{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.ex-choices button{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:7px 12px;border-radius:7px;cursor:pointer;font-size:12px;}
.ex-choices button:hover{border-color:var(--amm-accent);}
.ex-feedback{font-size:13px;font-weight:700;margin-top:8px;min-height:18px;}
.ex-feedback.betul{color:var(--good);}
.ex-feedback.salah{color:var(--bad);}
#exMiniDial{width:220px;flex-shrink:0;background:#0a0e14;border-radius:10px;border:1px solid var(--line);}
.ex-score{font-size:11px;color:var(--muted);margin-top:10px;}

.footer-note{max-width:1500px;margin:0 auto;padding:0 18px 24px;font-size:11px;color:var(--muted);line-height:1.6;}

.app-footer{
  text-align:center;padding:16px 18px 22px;margin-top:4px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);
}
.app-footer b{color:#f0f4f8;}

/* ================= BREADBOARD ================= */
.breadboard-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;}
.breadboard-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;}
.bb-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.bb-toolbar .tip{font-size:10.5px;color:var(--muted);}
.bb-layout{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start;}
@media (max-width:900px){ .bb-layout{grid-template-columns:1fr;} }
.bb-canvas-wrap{background:#0a0e14;border:1px solid var(--line);border-radius:10px;overflow:auto;padding:6px;}
#breadboardSvg{width:100%;height:auto;display:block;min-width:520px;}
.bb-empty{font-size:12px;color:var(--muted);padding:20px;text-align:center;}

.bb-body{fill:#2e7d4f;stroke:#1e5636;stroke-width:2;}
.bb-rail-line{stroke-width:2.5;stroke-linecap:round;}
.bb-rail-line.plus{stroke:#e74c3c;}
.bb-rail-line.minus{stroke:#2c3e50;}
.bb-rail-line.dim{opacity:.35;}
.bb-rail-label{font-size:13px;font-weight:800;fill:#eafaf1;}
.bb-rail-label.plus{fill:#ffb3ab;}
.bb-rail-label.minus{fill:#aeb9c4;}
.bb-hole{fill:#0d3322;stroke:#0a2318;stroke-width:.6;}
.bb-hole.dim{opacity:.4;}
.bb-col-label{font-size:7px;fill:#bfe9d2;}
.bb-row-label{font-size:8px;fill:#dff5e8;font-style:italic;}
.bb-groove{stroke:#164a30;stroke-width:3;}
.bb-hint-inline{font-size:9px;fill:#bfe9d2;font-style:italic;}
.bb-lead{fill:none;stroke-width:2.4;opacity:.92;}
.bb-pin{stroke:#111;stroke-width:.6;}
.bb-badge{stroke:#0a0e14;stroke-width:1.2;}
.bb-badge-text{font-size:9px;font-weight:800;fill:#0a0e14;}

.bb-legend{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto;}
.bb-legend-row{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 9px;}
.bb-legend-badge{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#0a0e14;}
.bb-legend-text{font-size:12px;color:var(--text);}
.bb-legend-note{font-size:11px;color:var(--bad);background:#3a0d0d;border:1px solid var(--bad);border-radius:7px;padding:7px 9px;margin-top:4px;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#2b3342;border-radius:6px;}