@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Inter:wght@500;600;700;800&display=swap');
:root{
  --bg:#07101d;--bg2:#0b1628;--panel:#0f1d31;--panel2:#13243c;--line:#263b58;
  --text:#f7fbff;--muted:#98abc4;--cyan:#22d3ee;--violet:#8b5cf6;--lime:#a3e635;
  --orange:#fb923c;--red:#fb7185;--green:#34d399;--yellow:#facc15;
  --shadow:0 18px 50px rgba(0,0,0,.26);--radius:18px;
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:'Be Vietnam Pro','Inter','Segoe UI',Arial,sans-serif;background:radial-gradient(circle at 15% 0,#12365a 0,transparent 34%),radial-gradient(circle at 88% 0,#2d1b69 0,transparent 28%),var(--bg);color:var(--text)}
button,input,select{font:inherit}.lab-shell{height:100vh;display:grid;grid-template-rows:68px minmax(0,1fr)}
.lab-topbar{display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid rgba(76,105,140,.45);background:rgba(7,16,29,.9);backdrop-filter:blur(18px);z-index:20}
.lab-brand{display:flex;align-items:center;gap:11px;min-width:245px}.lab-brand img{width:40px;height:40px;border-radius:11px}.lab-brand strong{display:block;font-size:15px}.lab-brand small{display:block;color:var(--muted);margin-top:1px}
.mission-title{flex:1;min-width:0}.mission-title .eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--cyan)}.mission-title h1{font-size:18px;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:8px;align-items:center}.status-pill{border:1px solid var(--line);background:#0b192b;color:var(--muted);padding:8px 11px;border-radius:999px;font-size:12px;display:flex;align-items:center;gap:7px}.status-dot{width:8px;height:8px;border-radius:50%;background:#64748b}.status-pill.ok .status-dot{background:var(--green);box-shadow:0 0 14px var(--green)}
.icon-btn,.btn{border:0;cursor:pointer;border-radius:12px;font-weight:800}.icon-btn{width:40px;height:40px;color:#eaf7ff;background:#12243b;border:1px solid var(--line)}.btn{padding:11px 14px;background:var(--cyan);color:#03212a}.btn.secondary{background:#12243b;color:#f8fafc;border:1px solid var(--line)}.btn.violet{background:var(--violet);color:#fff}.btn.lime{background:var(--lime);color:#18270a}.btn.red{background:#3b1723;color:#fecdd3;border:1px solid #7a2e43}.btn:disabled{opacity:.48;cursor:not-allowed}
.lab-main{min-height:0;display:grid;grid-template-columns:260px minmax(430px,1fr) 365px;gap:12px;padding:12px}
.panel{min-height:0;background:rgba(15,29,49,.92);border:1px solid rgba(57,83,117,.74);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.panel-head{padding:15px 16px 12px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:15px;margin:0}.panel-head p{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.palette{padding:12px;overflow:auto}.group-label{font-size:10px;color:#7e93ae;font-weight:800;letter-spacing:.13em;margin:10px 5px 7px}.component{display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;border:1px solid #2b4361;background:#0b192b;margin:7px 0;cursor:grab;user-select:none;transition:.16s}.component:hover{transform:translateY(-1px);border-color:#3e6690;background:#10233b}.component:active{cursor:grabbing}.component .ci{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:19px;background:#18304d}.component strong{font-size:12px;display:block}.component span{font-size:10px;color:var(--muted);display:block;margin-top:2px}.component.sensor .ci{color:var(--cyan)}.component.logic .ci{color:var(--violet)}.component.output .ci{color:var(--lime)}
.center-panel{display:grid;grid-template-rows:minmax(260px,1.05fr) minmax(215px,.75fr);gap:12px;min-height:0}.builder,.sim-card{min-height:0;background:rgba(15,29,49,.92);border:1px solid rgba(57,83,117,.74);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.builder{display:flex;flex-direction:column}.builder-toolbar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}.builder-toolbar .spacer{flex:1}.builder-toolbar .hint{font-size:11px;color:var(--muted)}
.workspace{flex:1;overflow:auto;padding:13px;position:relative}.dropzone{min-height:100%;border:1px dashed #355274;border-radius:15px;padding:12px;background:linear-gradient(180deg,rgba(7,18,32,.6),rgba(9,22,38,.28))}.dropzone.dragover{border-color:var(--cyan);box-shadow:inset 0 0 0 2px rgba(34,211,238,.12)}.empty-state{height:100%;min-height:160px;display:grid;place-items:center;text-align:center;color:#7188a3;padding:28px}.empty-state b{display:block;color:#a8bed7;margin-bottom:5px}
.program-block{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 11px;border-radius:13px;border:1px solid #334c6a;background:#10233a;margin:7px 0;cursor:grab}.program-block.active{border-color:var(--lime);box-shadow:0 0 0 2px rgba(163,230,53,.17),0 0 25px rgba(163,230,53,.12)}.program-block.error{border-color:var(--red)}.program-block .drag{color:#6f88a4;font-size:16px;text-align:center}.program-block .pb-title{font-size:12px;font-weight:800}.program-block .pb-desc{font-size:10px;color:var(--muted);margin-top:3px}.program-block .remove{width:28px;height:28px;border-radius:9px;border:0;background:#261725;color:#fda4af;cursor:pointer}.program-block select,.program-block input{background:#081726;color:#fff;border:1px solid #334d6d;border-radius:9px;padding:6px 8px;font-size:11px}.block-config{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px}.block-config label{font-size:10px;color:#8097b1}
.sim-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr)}.sim-scene{position:relative;overflow:hidden;background:linear-gradient(#152842 0 50%,#243044 50% 100%);border-right:1px solid var(--line)}.road-mark{position:absolute;left:6%;right:6%;top:70%;height:3px;background:repeating-linear-gradient(90deg,#edf2f7 0 28px,transparent 28px 52px);opacity:.8}.wall{position:absolute;right:8%;bottom:14%;width:34px;height:58%;border-radius:5px;background:repeating-linear-gradient(45deg,#64748b 0 9px,#475569 9px 18px);box-shadow:-7px 0 18px rgba(0,0,0,.22)}.car{position:absolute;bottom:20%;left:8%;width:112px;height:54px;transition:left .18s linear}.car-body{position:absolute;inset:10px 0 6px;border-radius:15px 24px 11px 11px;background:linear-gradient(135deg,var(--cyan),#2563eb);box-shadow:0 10px 24px rgba(0,0,0,.3)}.car-roof{position:absolute;left:27px;top:0;width:58px;height:29px;border-radius:22px 22px 5px 5px;background:#44b8e8}.wheel{position:absolute;bottom:0;width:19px;height:19px;border-radius:50%;background:#0b1020;border:5px solid #334155}.wheel.w1{left:20px}.wheel.w2{right:17px}.sensor-wave{position:absolute;right:-16px;top:19px;width:44px;height:23px;border:2px solid rgba(163,230,53,.75);border-left:0;border-radius:0 26px 26px 0;animation:pulse 1.1s infinite}.sensor-wave:after{content:'';position:absolute;inset:-9px -11px -9px 0;border:2px solid rgba(163,230,53,.35);border-left:0;border-radius:0 32px 32px 0}@keyframes pulse{50%{opacity:.3}}
.distance-chip{position:absolute;top:14px;left:14px;background:rgba(7,16,29,.82);border:1px solid #3b5779;border-radius:12px;padding:9px 11px}.distance-chip b{font-size:24px}.distance-chip small{color:var(--muted)}.light-stack{position:absolute;right:19%;top:13%;display:flex;gap:5px;padding:7px;border-radius:12px;background:#08131f;border:1px solid #344b66}.light{width:18px;height:18px;border-radius:50%;background:#243447}.light.g.on{background:var(--green);box-shadow:0 0 16px var(--green)}.light.y.on{background:var(--yellow);box-shadow:0 0 16px var(--yellow)}.light.r.on{background:#fb7185;box-shadow:0 0 16px #fb7185}.buzzer-viz{position:absolute;right:12%;top:42%;font-size:24px;opacity:.22}.buzzer-viz.on{opacity:1;animation:buzz .25s infinite alternate}@keyframes buzz{to{transform:rotate(8deg) scale(1.08)}}
.sim-controls{padding:13px;display:flex;flex-direction:column;gap:9px;overflow:auto}.sim-controls h3{font-size:13px;margin:0}.metric{display:flex;justify-content:space-between;align-items:center;background:#0a192b;border:1px solid #263e5d;padding:9px 10px;border-radius:11px;font-size:11px}.metric b{font-size:13px}.slider{width:100%;accent-color:var(--cyan)}
.right-panel{min-height:0}.device-card{padding:12px;border-bottom:1px solid var(--line)}.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.device-stat{background:#0a192b;border:1px solid #263e5d;border-radius:11px;padding:9px}.device-stat small{font-size:9px;color:var(--muted);display:block}.device-stat b{font-size:12px}.device-actions{display:flex;gap:7px;margin-top:9px}.device-actions .btn{flex:1;font-size:11px;padding:9px}
.trace-wrap{display:flex;flex-direction:column;min-height:0;flex:1}.tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}.tab{border:0;background:transparent;color:#7f96b0;font-weight:800;font-size:11px;padding:7px 8px;border-radius:8px;cursor:pointer}.tab.active{background:#19304e;color:#fff}.tab-pane{display:none;min-height:0;overflow:auto;padding:11px;flex:1}.tab-pane.active{display:block}.trace{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid #1e334e}.trace .n{flex:0 0 24px;height:24px;border-radius:8px;background:#18334f;display:grid;place-items:center;font-size:10px;color:var(--cyan);font-weight:800}.trace strong{font-size:11px;display:block}.trace p{font-size:10px;color:var(--muted);margin:3px 0 0;line-height:1.45}.codebox{white-space:pre-wrap;background:#07131f;border:1px solid #243b57;border-radius:11px;padding:11px;font-family:'Cascadia Code','JetBrains Mono',Consolas,monospace;font-size:10px;line-height:1.55;color:#d9f2ff}.codebox .kw{color:#c4b5fd}.codebox .num{color:#fde68a}.codebox .fn{color:#67e8f9}.validate-msg{margin:8px 13px 0;padding:9px 10px;border-radius:10px;background:#0d2b26;border:1px solid #245a4c;color:#bbf7d0;font-size:10px}.validate-msg.bad{background:#311623;border-color:#733048;color:#fecdd3}
.modal{position:fixed;inset:0;background:rgba(3,8,18,.78);display:none;place-items:center;z-index:100;padding:20px}.modal.open{display:grid}.modal-box{width:min(720px,100%);max-height:82vh;overflow:auto;background:#0f1d31;border:1px solid #34506f;border-radius:22px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.5)}.modal-box h2{margin:0 0 9px}.modal-box p,.modal-box li{color:#adbed0;line-height:1.65;font-size:13px}
@media(max-width:1180px){.lab-main{grid-template-columns:220px minmax(420px,1fr) 320px}.lab-brand{min-width:205px}.status-pill.hide-sm{display:none}}
@media(max-width:950px){html,body{overflow:auto}.lab-shell{height:auto;min-height:100vh}.lab-main{grid-template-columns:1fr;grid-template-rows:auto}.panel,.builder,.sim-card{min-height:420px}.sim-card{grid-template-columns:1fr}.sim-scene{min-height:280px;border-right:0;border-bottom:1px solid var(--line)}.lab-brand{min-width:auto}.mission-title{display:none}.right-panel{min-height:520px}}

/* ===== V1.2 THEME + NAVIGATION ===== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:42px;padding:0 11px;width:auto}
.theme-toggle .theme-label{font-size:11px}.back-labs{display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
html[data-theme="light"]{
  --bg:#f3f7fb;--bg2:#edf3f9;--panel:#ffffff;--panel2:#f5f8fc;--line:#d4dfeb;
  --text:#152238;--muted:#62738a;--cyan:#0891b2;--violet:#7c3aed;--lime:#65a30d;
  --orange:#ea580c;--red:#e11d48;--green:#059669;--yellow:#ca8a04;
  --shadow:0 14px 38px rgba(35,55,80,.10);
}
html[data-theme="light"] body{background:radial-gradient(circle at 15% 0,#d8f4fb 0,transparent 34%),radial-gradient(circle at 88% 0,#e8ddff 0,transparent 28%),var(--bg);color:var(--text)}
html[data-theme="light"] .lab-topbar{background:rgba(255,255,255,.93);border-color:#d9e3ed}
html[data-theme="light"] .panel,html[data-theme="light"] .builder,html[data-theme="light"] .sim-card{background:rgba(255,255,255,.96);border-color:#d3dfeb}
html[data-theme="light"] .status-pill,html[data-theme="light"] .icon-btn,html[data-theme="light"] .btn.secondary{background:#f3f7fb;color:#24364e;border-color:#ccd9e7}
html[data-theme="light"] .component,html[data-theme="light"] .program-block,html[data-theme="light"] .metric,html[data-theme="light"] .device-stat,html[data-theme="light"] .rule-row,html[data-theme="light"] .vcard{background:#f6f9fc;border-color:#d2deea;color:#17263a}
html[data-theme="light"] .component:hover{background:#eef6fb;border-color:#8fc7dc}
html[data-theme="light"] .dropzone{background:linear-gradient(180deg,#fbfdff,#f5f9fd);border-color:#b7c8da}
html[data-theme="light"] .program-block select,html[data-theme="light"] .program-block input,html[data-theme="light"] .rule-row input{background:#fff;color:#17263a;border-color:#c8d7e6}
html[data-theme="light"] .codebox{background:#f6f8fb;border-color:#d3dfeb;color:#20334c}
html[data-theme="light"] .tab.active{background:#e5f1fb;color:#152238}
html[data-theme="light"] .sim-scene{background:linear-gradient(#d9ecfb 0 50%,#697b91 50% 100%)}
html[data-theme="light"] .distance-chip,html[data-theme="light"] .light-stack{background:rgba(255,255,255,.90);border-color:#c7d6e5;color:#152238}
html[data-theme="light"] .modal{background:rgba(35,49,67,.30)}
html[data-theme="light"] .modal-box{background:#fff;border-color:#cbd8e6;color:#18283d}
html[data-theme="light"] .panel-head{border-color:#d5e0eb}
html[data-theme="light"] .device-card,html[data-theme="light"] .tabs{border-color:#d5e0eb}
html[data-theme="light"] .trace{border-color:#e0e8f0}
html[data-theme="light"] .trace .n{background:#e5f4fa;color:#087f9a}
html[data-theme="light"] .btn.red{background:#fff0f3;color:#9f1239;border-color:#fecdd3}
html[data-theme="light"] .validate-msg{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
html[data-theme="light"] .home-hero{background:linear-gradient(120deg,#eaf7fc,#efeaff)!important;border-color:#cedcea!important}
html[data-theme="light"] .home-hero p{color:#5a6e86!important}
html[data-theme="light"] .lab-card,html[data-theme="light"] .how{background:#fff!important;border-color:#d1deea!important}
html[data-theme="light"] .lab-card ul{color:#50647c!important}
html[data-theme="light"] .chip{background:#e7f7fb!important;border-color:#b6e2ec!important;color:#0e7490!important}
html[data-theme="light"] .flow span{background:#f0f5fa!important;border-color:#d0dce8!important;color:#223650!important}
@media(max-width:1120px){.theme-toggle .theme-label{display:none}.lab-main{grid-template-columns:235px minmax(420px,1fr) 330px}}