*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#ffffff;color:#fff;overflow:hidden;margin:0;padding:0}
.app{display:grid;grid-template-columns:1fr 500px;height:100vh;width:100vw}

/* 3D SCENE */
#scene{position:relative;background:#ffffff;cursor:grab;overflow:hidden;min-width:0;min-height:0;width:100%;height:100%}
#scene:active{cursor:grabbing}
#canvas{display:block}

.scene-ui{position:absolute;bottom:20px;left:20px;display:flex;gap:10px;align-items:center}
.pause-btn{background:rgba(35,35,40,0.88);border:1px solid rgba(255,255,255,0.18);color:#fff;padding:10px 18px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:0.5px;backdrop-filter:blur(10px);transition:all 0.2s}
.view-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#ccc;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:0.3px;transition:all 0.15s;min-width:48px}
.view-btn:hover{background:rgba(134,189,23,0.2);border-color:#86bd17;color:#86bd17}
.view-btn.active{background:rgba(134,189,23,0.3);border-color:#86bd17;color:#fff}
.pause-btn:hover{background:rgba(134,189,23,0.2);border-color:#86bd17;color:#86bd17}
.pause-btn.paused{background:rgba(134,189,23,0.15);border-color:#86bd17;color:#86bd17}
.scene-hint{font-size:11px;color:#333;letter-spacing:1px}

.dim-badge{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);border:1px solid #222;border-radius:8px;padding:8px 16px;font-size:12px;color:#888;backdrop-filter:blur(10px);font-variant-numeric:tabular-nums;letter-spacing:0.5px}
.dim-badge span{color:#86bd17;font-weight:700}

/* PANEL */
.panel{background:#111;border-left:1px solid #1e1e1e;overflow-y:auto;display:flex;flex-direction:column}
.panel-header{padding:16px 24px 14px;border-bottom:1px solid #1e1e1e}
.panel-title{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.panel-logo{height:32px;width:auto;display:block}
.panel-flightcase{font-size:32px;font-weight:800;letter-spacing:-0.5px;color:#fff}
.panel-header p{font-size:19px;color:#888;margin-top:3px}
.panel-body{padding:20px 24px;display:flex;flex-direction:column;gap:20px;flex:1}

/* Ctrl group */
.ctrl-group{display:flex;flex-direction:column;gap:10px}
.ctrl-label{font-size:10px;font-weight:700;color:#666;letter-spacing:1.5px;text-transform:uppercase}

/* Number inputs */
.dim-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px}
.dim-field{display:flex;flex-direction:column;gap:5px}
.dim-field label{font-size:10px;color:#555;text-align:center}
.dim-field input[type=number]{width:100%;background:#1a1a1a;border:1.5px solid #2a2a2a;color:#fff;padding:10px 8px;border-radius:8px;font-size:16px;font-weight:700;text-align:center;outline:none;transition:border-color 0.2s;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.dim-field input[type=number]::-webkit-outer-spin-button,
.dim-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.dim-field input[type=number]:focus{border-color:#86bd17}
.dim-field .unit{font-size:10px;color:#444;text-align:center}

/* Sliders for fine-tune */
.dim-field input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:#222;border-radius:2px;outline:none;margin-top:2px}
.dim-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#86bd17;border-radius:50%;cursor:pointer}

/* Material selector */
.mat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mat-btn{background:#1a1a1a;border:2px solid #222;border-radius:10px;padding:12px;text-align:center;cursor:pointer;transition:all 0.2s}
.mat-btn:hover{border-color:#333}
.mat-btn.active{border-color:#86bd17;background:#0d1500}
.mat-btn .mat-icon{font-size:22px;margin-bottom:4px}
.mat-btn .mat-name{font-size:11px;font-weight:700}
.mat-btn .mat-desc{font-size:10px;color:#555;margin-top:2px}

/* Color swatches */
.color-row{display:flex;gap:8px;flex-wrap:wrap}
.cswatch{width:30px;height:30px;border-radius:7px;border:2px solid transparent;cursor:pointer;transition:all 0.2s;position:relative}
.cswatch:hover{transform:scale(1.12)}
.cswatch.active{border-color:#86bd17;box-shadow:0 0 10px rgba(134,189,23,0.4)}
.cswatch .cswatch-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:#555;white-space:nowrap;opacity:0;transition:opacity 0.2s}
.cswatch:hover .cswatch-label{opacity:1}

/* Toggles */
.toggle-group{display:flex;flex-direction:column;gap:8px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:#1a1a1a;border-radius:10px;padding:12px 14px;cursor:pointer;transition:background 0.2s}
.toggle-row:hover{background:#1e1e1e}
.toggle-info{display:flex;flex-direction:column;gap:2px}
.toggle-info .t-name{font-size:13px;font-weight:600}
.toggle-info .t-price{font-size:10px;color:#888}
.toggle{width:40px;height:22px;background:#2a2a2a;border-radius:11px;position:relative;transition:background 0.3s;flex-shrink:0}
.toggle.on{background:#86bd17}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.toggle.on::after{left:21px}

/* Lock type */
.lock-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.lock-btn{background:#1a1a1a;border:2px solid #222;border-radius:8px;padding:10px 6px;text-align:center;cursor:pointer;transition:all 0.2s}
.lock-btn:hover{border-color:#333}
.lock-btn.active{border-color:#86bd17;background:#0d1500}
.lock-btn .l-icon{font-size:18px}
.lock-btn .l-name{font-size:9px;font-weight:700;margin-top:3px;color:#aaa}

/* Price box */
.price-box{background:linear-gradient(135deg,#0d1500,#111);border:1px solid rgba(134,189,23,0.25);border-radius:14px;padding:18px;margin-top:auto}
.price-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.price-label{font-size:9px;color:#86bd17;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.price-delivery{font-size:11px;color:#fff;margin-top:2px}
.price-main{font-size:38px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.price-main sup{font-size:18px;color:#86bd17;vertical-align:super}
.price-breakdown{margin-top:10px;display:flex;flex-direction:column;gap:3px;border-top:1px solid #1e1e1e;padding-top:10px}
.pb-line{display:flex;justify-content:space-between;font-size:11px;color:#555}
.pb-line span:last-child{color:#888;font-variant-numeric:tabular-nums}
.pb-line.total{color:#aaa;font-weight:700;border-top:1px solid #1e1e1e;margin-top:4px;padding-top:6px}

.cta-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.cta-stueck{font-size:12px;color:#fff;font-weight:600;white-space:nowrap}
.cta-qty{width:52px;background:#1a1a1a;border:1.5px solid #2a2a2a;color:#fff;padding:8px 6px;border-radius:8px;font-size:15px;font-weight:700;text-align:center;outline:none;-moz-appearance:textfield}
.cta-qty::-webkit-outer-spin-button,.cta-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cta-qty:focus{border-color:#86bd17}
.cta-btn{width:138px;height:34px;background:linear-gradient(135deg,#86bd17,#a8d61c);color:#000;padding:0;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.3s;letter-spacing:0.3px;white-space:nowrap}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(134,189,23,0.3)}

/* Mock bar */
.mock-bar{position:fixed;top:0;left:0;right:0;background:#86bd17;color:#000;text-align:center;padding:5px;font-size:9px;font-weight:700;letter-spacing:1px;z-index:1000}

/* Tab system */
.tab-bar{display:flex;border-bottom:1px solid #1e1e1e;padding:0 24px}
.tab-btn{flex:1;background:none;border:none;color:#555;font-size:11px;font-weight:700;letter-spacing:0.5px;padding:12px 8px;cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s}
.tab-btn:hover{color:#aaa}
.tab-btn.active{color:#86bd17;border-bottom-color:#86bd17}
.tab-content{display:none}
.tab-content.active{display:flex;flex-direction:column;gap:20px;flex:1}
/* 2026-05-27: Advanced model tuning hidden everywhere (admin + normal). Code preserved inside <details id="adv-model-tuning"> for future use. */
#adv-model-tuning{display:none!important}
.admin-unlocked #adv-model-tuning{display:block!important}
/* Admin-only tabs (parts/controls/lighting hidden by default) — Lighting moved to admin-only 2026-05-27 */
#tab-parts,#tab-controls,#tab-lighting{display:none!important}
.admin-unlocked #tab-parts,.admin-unlocked #tab-controls,.admin-unlocked #tab-lighting{display:flex!important}
.tab-btn[data-tab="parts"],.tab-btn[data-tab="controls"],.tab-btn[data-tab="lighting"]{display:none!important}
.admin-unlocked .tab-btn[data-tab="parts"],.admin-unlocked .tab-btn[data-tab="controls"],.admin-unlocked .tab-btn[data-tab="lighting"]{display:block!important}

/* Variant cards with image */
.var-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.var-card{background:#1a1a1a;border:2px solid #222;border-radius:10px;padding:8px;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;overflow:hidden}
.var-card:hover{border-color:#444;background:#1e1e1e}
.var-card.active{border-color:#86bd17;background:#0d1500}
.var-card .var-img{width:100%;height:60px;border-radius:6px;object-fit:contain;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden}
.var-card .var-img img{max-width:100%;max-height:60px;object-fit:contain}
.var-card .var-img .var-placeholder{font-size:24px}
.var-card .var-name{font-size:10px;font-weight:700;text-align:center;color:#ccc}
.var-card .var-specs{font-size:8px;color:#666;text-align:center;line-height:1.3}
.var-card .var-price{font-size:9px;color:#86bd17;font-weight:700}
.var-card .var-badge{position:absolute;top:4px;right:4px;background:#86bd17;color:#000;font-size:7px;font-weight:800;padding:1px 5px;border-radius:3px;letter-spacing:0.5px}

/* Texture Upload */
.tex-section{border-top:1px solid #1e1e1e;padding-top:14px}
.tex-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.tex-slot{background:#1a1a1a;border:2px dashed #2a2a2a;border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.tex-slot:hover{border-color:#86bd17;background:#0d1500}
.tex-slot.loaded{border-style:solid;border-color:#2d6b2e}
.tex-slot .tex-icon{font-size:20px;margin-bottom:2px}
.tex-slot .tex-name{font-size:9px;font-weight:700;color:#888}
.tex-slot .tex-preview{position:absolute;inset:0;border-radius:8px;object-fit:cover;width:100%;height:100%;opacity:0.35}
.tex-slot.loaded .tex-preview{opacity:0.7}
.tex-slot .tex-clear{position:absolute;top:3px;right:5px;font-size:11px;color:#f44;background:rgba(0,0,0,0.7);border-radius:4px;padding:0 4px;cursor:pointer;display:none;z-index:2}
.tex-slot.loaded .tex-clear{display:block}
.tex-slot input[type=file]{display:none}

.tex-part-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tex-slot-sm{background:#1a1a1a;border:2px dashed #222;border-radius:8px;padding:6px 4px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.tex-slot-sm:hover{border-color:#86bd17;background:#0d1500}
.tex-slot-sm.loaded{border-style:solid;border-color:#2d6b2e}
.tex-slot-sm .tex-icon{font-size:16px;margin-bottom:1px}
.tex-slot-sm .tex-name{font-size:8px;font-weight:700;color:#888}
.tex-slot-sm .tex-preview{position:absolute;inset:0;border-radius:6px;object-fit:cover;width:100%;height:100%;opacity:0.35}
.tex-slot-sm.loaded .tex-preview{opacity:0.7}
.tex-slot-sm .tex-clear{position:absolute;top:2px;right:4px;font-size:10px;color:#f44;background:rgba(0,0,0,0.7);border-radius:3px;padding:0 3px;cursor:pointer;display:none;z-index:2}
.tex-slot-sm.loaded .tex-clear{display:block}
.tex-slot-sm input[type=file]{display:none}

/* 3D Model Upload */
.model-section{border-top:1px solid #1e1e1e;padding-top:14px}
.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.model-slot{background:#0d1117;border:2px dashed #1a3a2a;border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.model-slot:hover{border-color:#2ea043;background:#0d1a12}
.model-slot.loaded{border-style:solid;border-color:#2ea043;background:#0d1a12}
.model-slot .model-icon{font-size:20px;margin-bottom:2px}
.model-slot .model-name{font-size:9px;font-weight:700;color:#888}
.model-slot .model-format{font-size:8px;color:#2ea043;font-weight:600;margin-top:2px}
.model-slot .model-info{font-size:8px;color:#555;margin-top:1px}
.model-slot .model-clear{position:absolute;top:3px;right:5px;font-size:11px;color:#f44;background:rgba(0,0,0,0.7);border-radius:4px;padding:0 4px;cursor:pointer;display:none;z-index:2}
.model-slot.loaded .model-clear{display:block}
.model-slot input[type=file]{display:none}

@media(max-width:768px){
  .app{grid-template-columns:1fr;grid-template-rows:45vh 1fr;overflow:hidden}
  body{overflow:auto}
}
.lang-bar{display:flex;gap:4px;padding:4px 12px 0;border-bottom:1px solid #1a1d20}
.lang-btn{flex:1;padding:4px 0;background:#1a1d20;color:#666;border:1px solid #222;border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;transition:all .2s}
.lang-btn.active{background:#2a3a4a;color:#88aaff;border-color:#3a5a8a}
.lang-btn:hover:not(.active){background:#222;color:#aaa}