@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-Light.otf)format("opentype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-Book.ttf)format("truetype");font-weight:350;font-style:normal;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-Regular.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-Semibold.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-Bold.otf)format("opentype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-Black.ttf)format("truetype");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-RegularIt.otf)format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-SemiboldIt.ttf)format("truetype");font-weight:600;font-style:italic;font-display:swap}@font-face{font-family:Toyota Type;src:url(/fonts/ToyotaType-BlackIt.ttf)format("truetype");font-weight:900;font-style:italic;font-display:swap}:root{--bg-body:#f3f4f6;--bg-gradient:radial-gradient(circle at 50% 32%, #fff 0%, #f8fafc 60%, #e5e7eb 100%);--bg-panel:#ffffffe6;--bg-panel-light:#f8fafcf5;--bg-panel-card:#f1f5f9e6;--border-panel:#ef44444d;--border-panel-mint:#f871714d;--border-subtle:#0f172a1f;--border-glow:#ef444480;--text-main:#111827;--text-muted:#475569;--text-eco:#b91c1c;--color-electric:#ef4444;--color-electric-dim:#b91c1c;--color-mint:#f87171;--color-lime:#fb7185;--color-mechanic:#f59e0b;--color-off:#475569;--color-danger:#ef4444;--color-blue:#ef4444;--font-primary:"Plus Jakarta Sans", "Outfit", "Inter", -apple-system, sans-serif;--font-tech:"Orbitron", "Rajdhani", monospace, sans-serif;--font-toyota:"Toyota Type", sans-serif}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-body);width:100vw;height:100vh;font-family:var(--font-primary);color:var(--text-main);justify-content:center;align-items:flex-start;margin:0;padding:0;display:flex;overflow:hidden}.app-wrapper{background:var(--bg-gradient);transform-origin:top;flex-direction:column;flex-shrink:0;width:1920px;height:1080px;display:flex;position:relative;overflow:hidden}.fullscreen-toggle-btn{width:52px;height:52px;color:var(--text-muted);background:#f1f5f9f2;border-color:#94a3b84d;border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1)}.fullscreen-toggle-btn:hover{transform:none}.fullscreen-toggle-btn svg{stroke:currentColor;fill:none;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.fullscreen-toggle-btn.active{color:#111827!important;background:#ef4444!important;border-color:#ef4444!important}body.is-fullscreen-mode{background-color:#05070c}.app-wrapper:before{content:"";pointer-events:none;z-index:1;background-image:linear-gradient(90deg,#ef44440f 1px,#0000 1px),linear-gradient(#f871710f 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.cockpit-header{z-index:20;justify-content:space-between;align-items:center;padding:38px 40px 40px;display:flex;position:relative}.brand-capsule{justify-content:center;align-items:center;padding:0;display:flex}.logo-left-box,.logo-right-box{position:static}.logo-left-image{object-fit:contain;width:auto;height:60px}.logo-right-image{object-fit:contain;width:auto;height:65px}.top-header{text-align:center;z-index:10;flex-direction:column;align-items:center;display:flex}.system-status-badge{background:#ef44441f;border:1px solid #ef444461;border-radius:999px;align-items:center;gap:8px;margin-bottom:6px;padding:4px 14px;display:inline-flex}.pulse-indicator{background:var(--color-electric);width:8px;height:8px;box-shadow:0 0 10px var(--color-electric);border-radius:50%;animation:2s ease-in-out infinite ecoPulse}.badge-text{font-family:var(--font-tech);letter-spacing:2px;color:var(--text-eco);text-transform:uppercase;font-size:11px;font-weight:700}.main-system-title{font-family:var(--font-toyota);letter-spacing:3px;color:#111827;margin:0;font-size:44px;font-weight:900;line-height:1.15}.main-system-subtitle{font-size:19px;font-family:var(--font-toyota);color:var(--text-muted);letter-spacing:.5px;margin-top:3px;font-weight:300}.main-content{z-index:10;flex:1;gap:13px;height:calc(100% - 90px);min-height:0;padding:0 30px 18px 35px;display:flex}.panel{background:var(--bg-panel);border:1px solid var(--border-panel);border-radius:16px;position:relative;overflow:hidden;box-shadow:0 4px 14px #0f172a29,inset 0 0 10px #94a3b814}.panel-header-row{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;width:100%;margin-bottom:12px;padding-bottom:8px;display:flex}.panel-tag{font-family:var(--font-tech);letter-spacing:1.5px;color:var(--color-mint);background:#f8717124;border:1px solid #f8717147;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700}.left-col{flex-direction:column;flex-shrink:0;gap:10px;width:390px;display:flex;position:relative}.selector-header-box{padding:4px 6px 6px}.left-title{font-family:var(--font-toyota);letter-spacing:2px;color:#111827;text-shadow:0 2px 3px #0f172a2e;font-size:19px;font-weight:700}.selector-subtitle{color:var(--font-toyota);letter-spacing:1px;font-size:13px;font-weight:300}.mode-cards-container{flex-direction:column;flex:1;gap:20px;display:flex}.mode-btn{background:var(--bg-panel-light);border:1px solid var(--border-subtle);cursor:pointer;border-radius:14px;align-items:center;gap:16px;padding:12px 18px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.mode-card-indicator{background:0 0;width:4px;transition:all .3s;position:absolute;top:0;bottom:0;left:0}.mode-btn:not(.disabled):hover{background:#fee2e2f2;border-color:#ef444473;transform:translate(5px);box-shadow:0 8px 24px #0f172a2e}.mode-btn:not(.disabled):hover .mode-card-indicator{background:var(--color-mint);box-shadow:0 0 8px #0f172a4d}.mode-icon-wrapper{background:#ef44441a;border:1.5px solid #ef444459;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;transition:all .3s;display:flex}.mode-icon-wrapper svg{width:26px;height:26px;fill:var(--color-electric);transition:all .3s}.mode-text{text-align:left;flex-direction:column;flex:1;min-width:0;display:flex}.mode-header-row{justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;display:flex}.mode-text-title{font-family:var(--font-toyota);letter-spacing:.8px;color:var(--text-main);font-size:14px;font-weight:900;transition:all .3s}.mode-badge-tag{font-family:var(--font-tech);letter-spacing:1px;color:var(--text-muted);white-space:nowrap;background:#94a3b826;border:1px solid #94a3b840;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700}.tag-ev{color:var(--color-electric);background:#ef444429;border-color:#ef444461}.tag-boost{color:var(--color-mechanic);background:#f59e0b29;border-color:#f59e0b61}.tag-cruise{color:var(--color-lime);background:#84cc1629;border-color:#84cc1661}.tag-regen{color:var(--color-mint);background:#f8717129;border-color:#f8717161}.tag-rev{color:#f87171;background:#10b98129;border-color:#10b98161}.mode-text-desc{font-family:var(--font-toyota);color:var(--text-muted);font-size:15px;font-weight:300;line-height:1.5}.mode-btn.active{border-color:var(--color-electric);background:linear-gradient(90deg,#fee2e2fa 0%,#fffffffa 100%);transform:translate(6px);box-shadow:0 8px 24px #0f172a33,inset 0 0 15px #94a3b838}.mode-btn.active .mode-card-indicator{background:var(--color-electric);box-shadow:0 0 8px #0f172a4d}.mode-btn.active .mode-icon-wrapper{border-color:var(--color-electric);background:#ef44443d;box-shadow:0 4px 12px #0f172a2e,inset 0 0 10px #94a3b82e}.mode-btn.active .mode-icon-wrapper svg{fill:var(--color-electric);filter:drop-shadow(0 2px 2px #0f172a59)}.mode-btn.active .mode-text-title{color:var(--color-electric);text-shadow:none}.mode-btn.disabled{opacity:.32;cursor:not-allowed;filter:grayscale(85%)}.center-col{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.car-main-display{box-shadow:none;background:radial-gradient(circle at 50% 55%,#ef444417 0%,#ffffffe0 80%);border:1px solid #ef444438;border-radius:18px;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.active-mode-label{z-index:15;pointer-events:none;box-shadow:none;background:#fffffff0;border:1px solid #ef444459;border-radius:12px;padding:10px 20px;position:absolute;top:20px;left:25px}.mode-label-header{align-items:center;gap:8px;margin-bottom:2px;display:flex}.mode-pulse-dot{background:var(--color-electric);width:6px;height:6px;box-shadow:0 0 8px var(--color-electric);border-radius:50%;animation:1.5s infinite ecoPulse}.mode-header-text{font-family:var(--font-toyota);letter-spacing:1.5px;color:var(--text-muted);font-size:13px;font-weight:300}.mode-title-glow{font-family:var(--font-toyota);color:var(--color-electric);text-transform:uppercase;letter-spacing:1.5px;text-shadow:none;margin:0;font-size:34px;font-weight:700;line-height:1.1}.center-legend{font-family:var(--font-toyota);color:var(--text-main);pointer-events:none;z-index:15;box-shadow:none;background:#fffffff0;border:1px solid #ef444452;border-radius:12px;align-items:center;gap:16px;padding:10px 18px;font-size:12px;font-weight:300;display:flex;position:absolute;top:20px;right:25px}.leg-item{align-items:center;gap:8px;display:flex}.flow-pill-indicator{border-radius:3px;width:16px;height:6px;display:inline-block}.elec-glow{background:var(--color-electric);box-shadow:none}.mech-glow{background:var(--color-mechanic);box-shadow:none}.off-glow{background:var(--color-off)}.big-car-container{cursor:grab;flex:1;width:100%;position:relative;overflow:hidden}.big-car-container:active{cursor:grabbing}#car3dContainer{outline:none;width:100%;height:100%;display:block}.model-loading{z-index:12;color:var(--text-eco);font-family:var(--font-toyota);letter-spacing:1px;pointer-events:none;background:#fffffff5;border:1px solid #ef444473;border-radius:999px;padding:6px 14px;font-size:11px;font-weight:300;position:absolute;bottom:20px;right:25px;box-shadow:0 0 15px #ef444440}.label-3d{font-size:12px;font-family:var(--font-toyota);color:#fff;pointer-events:none;text-align:center;box-shadow:none;z-index:8;background:#fffffff5;border:1px solid #ef44448c;border-radius:10px;align-items:center;gap:8px;padding:8px 14px;font-weight:300;transition:opacity .3s;display:flex;position:absolute;transform:translate(-50%,-50%)}.lbl-icon-pin{background:var(--color-off);width:8px;height:8px;box-shadow:none;border-radius:50%}.lbl-icon-pin.active-pin{background:#16a34a}.lbl-icon-pin.charging-pin{background:#2563eb}.lbl-text-wrap{text-align:left;flex-direction:column;display:flex}.lbl-title{font-family:var(--font-toyota);letter-spacing:1px;color:#111827;font-size:11px;font-weight:700}.lbl-on{color:#16a34a;text-shadow:0 1px 2px #0f172a40;font-size:10px;font-weight:800}.lbl-self-charging{color:#2563eb;text-shadow:0 1px 2px #0f172a40;font-size:10px;font-weight:800}.lbl-yellow-active{color:#16a34a;text-shadow:0 1px 2px #0f172a40;font-size:10px;font-weight:800}.lbl-off{color:var(--color-danger);text-shadow:none;font-size:10px;font-weight:700}.customize-wrap{z-index:18;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.customize-btn{display:none}.customize-panel{min-width:820px;height:60px;box-shadow:none;background:#fffffff5;border:1px solid #ef444459;border-radius:14px;align-items:center;gap:18px;padding:0 20px;display:flex}.customize-title{align-items:center;gap:12px;display:flex}.cust-title-text{flex-direction:column;display:flex}.cust-primary{font-family:var(--font-toyota);letter-spacing:1.5px;color:#111827;font-size:15px;font-weight:700;line-height:1.1}.cust-sub{font-family:var(--font-toyota);color:var(--color-mint);letter-spacing:1px;font-size:11px;font-weight:300}.upload-model-btn{width:32px;height:32px;color:var(--text-eco);cursor:pointer;background:#ef444424;border:1px solid #ef444473;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:all .25s;display:flex}.upload-model-btn:hover{background:#ef444459;transform:scale(1.05);box-shadow:0 4px 12px #0f172a33}.upload-model-btn svg{stroke:currentColor;fill:none;stroke-width:2.2px;width:18px;height:18px}.model-file-input{display:none}.customize-divider{background:#ffffff1f;width:1px;height:30px}.customize-group{align-items:center;gap:10px;display:flex}.customize-label{font-family:var(--font-toyota);color:var(--text-muted);letter-spacing:1px;white-space:nowrap;font-size:10px;font-weight:300}.swatch-row,.opacity-row{align-items:center;gap:8px;display:flex}.swatch-btn{cursor:pointer;border:2px solid #fff3;border-radius:50%;width:28px;height:28px;transition:all .25s}.swatch-btn[data-color=white]{background:#f8fafc}.swatch-btn.active{border-color:#fff;transform:scale(1.15);box-shadow:0 3px 10px #0f172a38}.toggle-switch{color:var(--text-main);cursor:pointer;align-items:center;gap:8px;font-size:10px;font-weight:700;display:inline-flex}.toggle-switch input{opacity:0;pointer-events:none;position:absolute}.toggle-slider{background:#475569cc;border:1px solid #ffffff40;border-radius:999px;width:42px;height:22px;transition:all .25s;position:relative}.toggle-slider:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .25s;position:absolute;top:2px;left:2px}.toggle-switch input:checked+.toggle-slider{background:var(--color-electric);border-color:#fff;box-shadow:0 2px 8px #0f172a38,inset 0 0 4px #ffffff73}.toggle-switch input:checked+.toggle-slider:after{transform:translate(20px)}.toggle-state{min-width:24px}.upload-status-box{align-items:center;gap:6px;max-width:140px;display:flex}.upload-status-dot{background:var(--color-electric);border-radius:50%;flex-shrink:0;width:6px;height:6px}.upload-status{font-family:var(--font-toyota);color:var(--text-muted);white-space:normal;text-overflow:ellipsis;font-size:10px;font-weight:300;line-height:1.2;overflow:hidden}.customize-note{display:none}.info-bottom-row{gap:20px;height:200px;display:flex}.info-box{box-shadow:none;background:linear-gradient(135deg,#fffffffa 0%,#ef444414 100%);border:1px solid #ef444447;flex-direction:column;flex:1;justify-content:center;padding:20px 25px;display:flex;position:relative}.info-box-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:6px;display:flex}.info-tag-badge{font-family:var(--font-toyota);letter-spacing:1.5px;color:var(--color-mint);align-items:center;gap:6px;font-size:13px;font-weight:300;display:flex}.info-dot{background:var(--color-mint);width:6px;height:6px;box-shadow:0 0 6px var(--color-mint);border-radius:50%}.box-title{font-family:var(--font-toyota);color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;font-size:13px;font-weight:300}.penjelasan-content{align-items:center;gap:25px;display:flex}.penjelasan-icon-wrapper{flex-shrink:0;position:relative}.penjelasan-icon{border:2px solid var(--color-electric);background:#ef444414;border-radius:20px;justify-content:center;align-items:center;width:90px;height:90px;display:flex;box-shadow:0 6px 16px #0f172a33,inset 0 0 20px #94a3b82e}.penjelasan-icon svg{width:48px;height:48px;fill:var(--color-electric);filter:drop-shadow(0 2px 2px #0f172a4d)}.penjelasan-text-area{flex-direction:column;flex:1;justify-content:center;display:flex}.penjelasan-title-row{align-items:center;gap:14px;margin-bottom:8px;display:flex}.penjelasan-title{font-family:var(--font-toyota);color:var(--color-electric);text-transform:uppercase;letter-spacing:1px;text-shadow:none;font-size:27px;font-weight:700}.telemetry-live-pill{font-family:var(--font-toyota);letter-spacing:1px;color:var(--color-electric);background:#ef444426;border:1px solid #ef444459;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:300}.penjelasan-desc{font-family:var(--font-toyota);color:#111827;white-space:normal;font-size:18px;font-weight:300;line-height:1.5}.highlight-text{color:var(--color-electric);text-shadow:none;font-weight:700}.highlight-mech{color:var(--color-mechanic);text-shadow:0 0 8px #f59e0b59;font-weight:700}.right-col{flex-direction:column;flex-shrink:0;gap:10px;width:480px;display:flex}.panel-speedo{flex-direction:column;align-items:center;height:250px;padding:16px 20px;display:flex}.panel-speedo h3,.panel-energy h3,.panel-kondisi h3{font-family:var(--font-toyota);color:#111827;letter-spacing:1.5px;text-align:right;flex:1;min-width:0;font-size:22px;font-weight:700;line-height:1.1}.panel-speedo .panel-tag,.panel-energy .panel-tag,.panel-kondisi .panel-tag{font-family:var(--font-toyota);font-size:12px;font-weight:300}.panel-energy h3,.panel-kondisi h3{font-size:18px}.panel-speedo .panel-header-row,.panel-energy .panel-header-row,.panel-kondisi .panel-header-row{gap:14px}.speed-svg-wrapper{width:420px;height:200px;margin:0 auto;position:relative}.speed-center-text{text-align:center;flex-direction:column;align-items:center;display:flex;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.speed-val{font-family:var(--font-toyota);color:#111827;text-shadow:none;font-size:60px;font-weight:700;line-height:.9}.panel-speedo .speed-val,.panel-speedo .speed-unit{color:#111827;text-shadow:0 2px 4px #0f172a33}.speed-unit-wrap{flex-direction:column;align-items:center;margin-top:2px;display:flex}.speed-unit{font-family:var(--font-toyota);letter-spacing:1.5px;color:var(--color-electric);font-size:15px;font-weight:300}.speed-sub-label{font-family:var(--font-toyota);color:var(--text-muted);letter-spacing:1px;font-size:11px;font-weight:300}.panel-energy{height:310px;box-shadow:none;flex-direction:column;align-items:center;padding:16px 20px;display:flex}.energy-svg-wrapper{flex:1;width:100%;min-height:140px;position:relative}.arrow-flow{fill:none;stroke-width:5px;stroke-dasharray:0 14;stroke-linecap:round;animation:.6s linear infinite dashFlow}.flow-elec{stroke:var(--color-electric);filter:none}.panel-energy .flow-elec,.panel-energy .dot-elec{--color-electric:#00e676}.panel-energy .flow-elec{stroke:#00e676;filter:none}.flow-mech{stroke:var(--color-mechanic);filter:none}.glow-red-svg,.glow-green-svg{filter:none}@keyframes dashFlow{0%{stroke-dashoffset:14px}to{stroke-dashoffset:0}}@keyframes dashFlowRev{0%{stroke-dashoffset:0}to{stroke-dashoffset:14px}}.arrow-rev{animation:.6s linear infinite dashFlowRev}.right-legend{font-family:var(--font-toyota);color:var(--text-muted);justify-content:center;gap:20px;margin-top:6px;font-size:16px;font-weight:300;display:flex}.r-leg-item{align-items:center;gap:6px;display:flex}.r-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.dot-elec{background:var(--color-electric);box-shadow:none}.panel-energy .dot-elec{box-shadow:none;background:#00e676}.panel-energy .dot-mech{box-shadow:none}.dot-mech{background:var(--color-mechanic);box-shadow:none}.dot-off{background:var(--color-off)}.panel-speedo svg text{font-size:14px;font-weight:300;font-family:var(--font-toyota)!important}.panel-energy svg text{font-size:10px;font-weight:300;font-family:var(--font-toyota)!important}.panel-kondisi{flex-direction:column;flex:1;min-height:350px;padding:20px 24px;display:flex;overflow:visible}.kondisi-list{flex-direction:column;flex:1;justify-content:space-around;gap:12px;margin-top:12px;display:flex}.kondisi-item{background:var(--bg-panel-light);border:1px solid var(--border-subtle);border-radius:10px;justify-content:space-between;align-items:center;padding:10px 14px;transition:all .3s;display:flex}.kondisi-name{opacity:.55;align-items:center;gap:16px;transition:all .3s;display:flex}.kondisi-name.active-name{opacity:1!important}.kondisi-icon{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex}.kondisi-icon svg{width:25px;height:25px;fill:var(--text-muted);transition:all .3s}.kondisi-icon.active-icon{border-color:var(--color-electric)!important;background:#ef444429!important;box-shadow:0 4px 12px #0f172a33,inset 0 0 8px #94a3b833!important}.kondisi-icon.active-icon svg{fill:var(--color-electric)!important}.kondisi-meta{flex-direction:column;display:flex}.komponen-title{font-family:var(--font-toyota);letter-spacing:.8px;color:#111827;font-size:17px;font-weight:700}.komponen-spec{font-family:var(--font-toyota);color:var(--text-muted);font-size:14px;font-weight:300}.stat-pill-wrap{align-items:center;display:flex}.kondisi-stat{font-family:var(--font-toyota);text-transform:uppercase;letter-spacing:1px;border-radius:6px;padding:3px 10px;font-size:16px;font-weight:700;transition:all .3s}.txt-red{color:var(--color-danger);opacity:.5;background:#ef44441f;border:1px solid #ef444440}.txt-green,.txt-yellow{color:#16a34a;opacity:1;background:#22c55e24;border:1px solid #16a34a66;box-shadow:0 3px 10px #0f172a29}.bottom-bar{z-index:50;background:linear-gradient(#0000 0%,#f1f5f9d1 30%,#e2e8f0f5 100%);justify-content:flex-start;align-items:center;width:100%;height:105px;padding:0 40px;display:flex;position:absolute;bottom:0;left:0}.left-col>.bottom-bar{background:0 0;width:100%;height:105px;padding:0;position:absolute;top:auto;bottom:0;right:0}.left-col>.bottom-bar .console-dock{width:100%;height:100%;box-shadow:none;background:linear-gradient(135deg,#fffffffa 0%,#ef444414 100%);border:1px solid #ef444447;border-radius:16px;flex-direction:row;justify-content:center;align-items:center;gap:18px;padding:10px 16px}.left-col>.bottom-bar .btn-power{width:64px;height:64px}.left-col>.bottom-bar .btn-power svg{width:28px;height:28px}.left-col>.bottom-bar .gear-shift-btn{width:64px;height:64px}.console-dock{box-shadow:none;background:#fffffff5;border:1px solid #ef444447;border-radius:999px;align-items:center;gap:24px;padding:10px 24px;display:flex}.power-control-group{align-items:center;gap:14px;display:flex}.gear-btn{width:58px;height:58px;color:var(--text-muted);font-family:var(--font-tech);cursor:pointer;background:#f1f5f9f2;border:2px solid #94a3b84d;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.btn-power{color:var(--color-danger);background:#ef44441f;border-color:#ef444466}.btn-power svg{stroke:currentColor;fill:none;stroke-width:2.5px;stroke-linecap:round;width:26px;height:26px}.btn-power.on{color:#16a34a;box-shadow:none;background:#22c55e24;border-color:#16a34a}.power-label-text{flex-direction:column;display:flex}.pwr-title{font-family:var(--font-tech);letter-spacing:1.5px;color:#111827;font-size:14px;font-weight:900;line-height:1.1}.pwr-sub{color:var(--text-muted);letter-spacing:1px;font-size:9px;font-weight:700}.console-divider{background:#ffffff1f;width:1px;height:36px}.gears-area{align-items:center;gap:12px;display:flex}.gear-selector-label{font-family:var(--font-tech);letter-spacing:1px;color:var(--text-muted);margin-right:4px;font-size:10px;font-weight:800}.gear-shift-btn{border-radius:12px;width:52px;height:52px}.gear-letter{font-size:20px;font-weight:900;line-height:1}.gear-sub{letter-spacing:.5px;font-size:8px;font-weight:700}.gear-btn.disabled{opacity:.28;cursor:not-allowed;filter:grayscale()}.gear-btn.active{color:#111827;box-shadow:none;background:#16a34a;border-color:#16a34a}.gear-btn.active .gear-sub{color:#111827;font-weight:900}#gearD.active{background:#16a34a;border-color:#16a34a}#gearR.active{border-color:var(--color-electric);background:var(--color-electric)}.left-col .left-title,.left-col .mode-text-title,.left-col .mode-text-desc,.left-col .mode-badge-tag,.center-col .mode-header-text,.center-col .mode-title-glow,.center-col .lbl-on,.center-col .lbl-self-charging,.center-col .lbl-yellow-active,.center-col .lbl-off,.center-col .cust-primary,.center-col .cust-sub,.center-col .customize-label,.center-col .upload-status,.center-col .info-tag-badge,.center-col .box-title,.center-col .penjelasan-title,.center-col .penjelasan-desc,.center-col .highlight-text,.center-col .highlight-mech{text-shadow:none}.left-col .mode-icon-wrapper,.left-col .mode-icon-wrapper svg,.center-col .mode-pulse-dot,.center-col .info-dot,.center-col .label-3d,.center-col .lbl-icon-pin,.center-col .penjelasan-icon,.center-col .penjelasan-icon svg,.center-col .upload-model-btn{box-shadow:none;filter:none}.console-hint-box{align-items:center;gap:8px;padding-left:8px;display:flex}.hint-dot{background:var(--color-electric);border-radius:50%;width:6px;height:6px;animation:2s infinite ecoPulse}.hint-text{font-family:var(--font-tech);letter-spacing:1px;color:var(--text-muted);font-size:10px;font-weight:700}.dimmed{opacity:.38;pointer-events:none;filter:grayscale(40%);transition:all .5s}@keyframes ecoPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}@media (width<=900px){html,body{width:100%;height:auto;min-height:100%;display:block;overflow:hidden auto}.app-wrapper{width:100%;height:auto;min-height:100vh;overflow:visible}.cockpit-header{gap:12px;padding:14px 16px 18px}.logo-left-image,.logo-right-image{max-width:82px;height:36px}.top-header{flex:1;min-width:0}.main-system-title{letter-spacing:1.5px;font-size:22px}.main-system-subtitle{font-size:11px;line-height:1.35}.main-content{flex-direction:column;gap:14px;height:auto;padding:0 14px 24px;display:flex}.left-col,.right-col{flex-shrink:1;width:100%}.left-col{order:1;gap:12px}.center-col{flex:none;order:2;gap:14px}.right-col{order:3;gap:14px}.mode-cards-container{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.mode-btn,.mode-btn.active{border-radius:12px;gap:10px;min-width:0;padding:10px;transform:none}.mode-icon-wrapper{border-radius:9px;width:38px;height:38px}.mode-icon-wrapper svg{width:20px;height:20px}.mode-text-title{letter-spacing:.3px;font-size:12px}.mode-text-desc{font-size:11px;line-height:1.25}.car-main-display{flex:none;height:min(68vw,500px);min-height:330px}.active-mode-label{border-radius:9px;padding:8px 12px;top:12px;left:12px}.mode-title-glow{font-size:18px}.center-legend{flex-direction:column;align-items:flex-start;gap:6px;max-width:48%;padding:8px 10px;font-size:9px;top:12px;right:12px}.customize-wrap{bottom:10px;left:10px;right:10px;transform:none}.customize-panel{border-radius:10px;flex-wrap:wrap;gap:8px;width:100%;min-width:0;height:auto;min-height:52px;padding:8px 10px}.customize-divider{height:24px}.cust-primary{font-size:10px}.cust-sub,.customize-label,.upload-status{font-size:8px}.customize-group{gap:6px}.upload-status-box{max-width:120px}.info-bottom-row{height:auto}.info-box{min-height:190px;padding:16px}.penjelasan-content{gap:14px}.penjelasan-icon{border-radius:14px;width:64px;height:64px}.penjelasan-icon svg{width:34px;height:34px}.penjelasan-title{font-size:18px}.penjelasan-desc{font-size:12px}.panel-speedo,.panel-energy,.panel-kondisi{height:auto;min-height:0;padding:14px 16px}.speed-svg-wrapper{aspect-ratio:420/200;width:min(420px,100%);height:auto}.speed-val{font-size:46px}.energy-svg-wrapper{min-height:220px}.kondisi-list{gap:8px;margin-top:10px}.kondisi-item{padding:8px 10px}.kondisi-name{gap:10px}.kondisi-icon{width:38px;height:38px}.kondisi-icon svg{width:20px;height:20px}.komponen-title{font-size:14px}.komponen-spec,.kondisi-stat{font-size:12px}.bottom-bar,.left-col>.bottom-bar{width:100%;height:auto;position:static}.left-col>.bottom-bar .console-dock{gap:14px;height:auto;min-height:78px;padding:8px 14px}.left-col>.bottom-bar .btn-power,.left-col>.bottom-bar .gear-shift-btn{width:52px;height:52px}}@media (width<=520px){.cockpit-header{align-items:flex-start}.logo-left-image,.logo-right-image{max-width:62px;height:29px}.main-system-title{font-size:15px;line-height:1.2}.main-system-subtitle{font-size:9px}.mode-cards-container{grid-template-columns:1fr}.mode-btn,.mode-btn.active{padding:9px 10px}.car-main-display{height:390px;min-height:0}.center-legend{flex-flow:wrap;justify-content:center;max-width:calc(100% - 20px);font-size:8px;top:auto;bottom:72px;right:10px}.customize-panel{justify-content:center}.customize-title{justify-content:center;width:100%}.customize-divider{display:none}.info-box{min-height:0}.penjelasan-content{align-items:flex-start}.penjelasan-title-row{flex-direction:column;align-items:flex-start;gap:5px}}