/* ===== SkidBuilder v2 — Premium CSS ===== */
:root {
    --bg-primary: #0a0a12;
    --bg-secondary: #111122;
    --bg-panel: #13132a;
    --bg-panel-header: #1a1a3a;
    --bg-hover: #1e1e40;
    --bg-active: #252555;
    --bg-input: #0d0d1f;
    --border: #2a2a50;
    --border-subtle: #1f1f40;
    --text-primary: #e8e8f0;
    --text-secondary: #8888aa;
    --text-dim: #555577;
    --accent: #6c5ce7;
    --accent-hover: #7c6cf7;
    --accent-glow: rgba(108,92,231,0.35);
    --danger: #e74c3c;
    --success: #2ecc71;
    --shadow-color: rgba(0,0,0,0.5);
    --panel-width: 280px;
    --topbar-height: 48px;
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
    --font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono: 'JetBrains Mono','Fira Code',monospace;
}
[data-theme="cyberpunk"]{--bg-primary:#050510;--bg-secondary:#0a0a1a;--bg-panel:#0c0c20;--bg-panel-header:#121230;--bg-hover:#151535;--bg-active:#1a1a40;--bg-input:#080815;--border:#00ffff33;--border-subtle:#00ffff1a;--text-primary:#00ffff;--text-secondary:#008888;--text-dim:#005555;--accent:#ff00ff;--accent-hover:#ff33ff;--accent-glow:rgba(255,0,255,0.35);--shadow-color:rgba(0,0,0,0.7)}
[data-theme="dracula"]{--bg-primary:#1e1f29;--bg-secondary:#21222c;--bg-panel:#282a36;--bg-panel-header:#2e303e;--bg-hover:#343648;--bg-active:#3e405a;--bg-input:#191a22;--border:#44475a;--border-subtle:#343648;--text-primary:#f8f8f2;--text-secondary:#9696b4;--text-dim:#6272a4;--accent:#bd93f9;--accent-hover:#cda4ff;--accent-glow:rgba(189,147,249,0.35)}
[data-theme="mocha"]{--bg-primary:#1e1712;--bg-secondary:#241c15;--bg-panel:#2a211a;--bg-panel-header:#332820;--bg-hover:#3a2e25;--bg-active:#45372c;--bg-input:#181210;--border:#4a3a2e;--border-subtle:#3a2a1e;--text-primary:#f0e0d0;--text-secondary:#a08070;--text-dim:#705040;--accent:#d4a574;--accent-hover:#e4b584;--accent-glow:rgba(212,165,116,0.35)}
[data-theme="emerald"]{--bg-primary:#0a120a;--bg-secondary:#0f1a0f;--bg-panel:#132213;--bg-panel-header:#1a2a1a;--bg-hover:#1e351e;--bg-active:#254025;--bg-input:#081008;--border:#2a4a2a;--border-subtle:#1f3a1f;--text-primary:#c8f0c8;--text-secondary:#70a070;--text-dim:#406040;--accent:#2ecc71;--accent-hover:#3edc81;--accent-glow:rgba(46,204,113,0.35)}
[data-theme="cherry"]{--bg-primary:#120a0a;--bg-secondary:#1a0f0f;--bg-panel:#221313;--bg-panel-header:#2e1a1a;--bg-hover:#351e1e;--bg-active:#402525;--bg-input:#100808;--border:#4a2a2a;--border-subtle:#3a1f1f;--text-primary:#f0c8c8;--text-secondary:#a07070;--text-dim:#604040;--accent:#e74c3c;--accent-hover:#f75c4c;--accent-glow:rgba(231,76,60,0.35)}
[data-theme="arctic"]{--bg-primary:#f0f2f5;--bg-secondary:#e8eaef;--bg-panel:#ffffff;--bg-panel-header:#f5f6f8;--bg-hover:#e0e2e8;--bg-active:#d0d2d8;--bg-input:#f5f6fa;--border:#d0d4dc;--border-subtle:#e0e4ec;--text-primary:#1a1a2e;--text-secondary:#666680;--text-dim:#9999aa;--accent:#4a6cf7;--accent-hover:#5a7cff;--accent-glow:rgba(74,108,247,0.25);--shadow-color:rgba(0,0,0,0.08)}
[data-theme="ocean"]{--bg-primary:#080c14;--bg-secondary:#0c1220;--bg-panel:#0f1828;--bg-panel-header:#142035;--bg-hover:#1a2840;--bg-active:#20304a;--bg-input:#060a12;--border:#1e3050;--border-subtle:#152440;--text-primary:#c0d8f0;--text-secondary:#6888a8;--text-dim:#405870;--accent:#0ea5e9;--accent-hover:#2eb5f9;--accent-glow:rgba(14,165,233,0.35)}
[data-theme="sunset"]{--bg-primary:#120d0a;--bg-secondary:#1a1210;--bg-panel:#221815;--bg-panel-header:#2e201c;--bg-hover:#352822;--bg-active:#40302a;--bg-input:#100c08;--border:#4a3530;--border-subtle:#3a2520;--text-primary:#f0dcc8;--text-secondary:#a08060;--text-dim:#604830;--accent:#f97316;--accent-hover:#ff8326;--accent-glow:rgba(249,115,22,0.35)}
[data-theme="discord"]{--bg-primary:#1e1f22;--bg-secondary:#2b2d31;--bg-panel:#2b2d31;--bg-panel-header:#313338;--bg-hover:#35373c;--bg-active:#3e4046;--bg-input:#1e1f22;--border:#3e4046;--border-subtle:#35373c;--text-primary:#f2f3f5;--text-secondary:#b5bac1;--text-dim:#6d6f78;--accent:#5865f2;--accent-hover:#6875f3;--accent-glow:rgba(88,101,242,0.35)}
[data-theme="hacker"]{--bg-primary:#000000;--bg-secondary:#050505;--bg-panel:#080808;--bg-panel-header:#111111;--bg-hover:#0a220a;--bg-active:#113311;--bg-input:#000000;--border:#00ff0033;--border-subtle:#00ff001a;--text-primary:#00ff00;--text-secondary:#00cc00;--text-dim:#005500;--accent:#00ff00;--accent-hover:#55ff55;--accent-glow:rgba(0,255,0,0.35);--shadow-color:rgba(0,255,0,0.1)}
[data-theme="light"]{--bg-primary:#f0f2f5;--bg-secondary:#e8eaef;--bg-panel:#ffffff;--bg-panel-header:#f5f6f8;--bg-hover:#e0e2e8;--bg-active:#d0d2d8;--bg-input:#f5f6fa;--border:#d0d4dc;--border-subtle:#e0e4ec;--text-primary:#1a1a2e;--text-secondary:#666680;--text-dim:#9999aa;--accent:#4a6cf7;--accent-hover:#5a7cff;--accent-glow:rgba(74,108,247,0.25);--shadow-color:rgba(0,0,0,0.08)}

/* IDE Global Layout Settings */
#canvas-container .canvas {
    background-image: url('wallace_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Layouts */
body.layout-floating #app { position: relative; justify-content: center; }
body.layout-floating .panel { position: absolute; height: calc(100vh - var(--topbar-height) - 40px); top: 20px; border-radius: 8px; box-shadow: 0 10px 40px var(--shadow-color); border: 1px solid var(--border); z-index: 50; background: rgba(var(--bg-panel-rgb), 0.95); backdrop-filter: blur(10px); }
body.layout-floating .panel-header { cursor: move; }
body.layout-floating .panel-resize { display: block; position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 100; }
body.layout-floating #palette { left: 20px; }
body.layout-floating #inspector { right: 20px; }
body.layout-floating #canvas-container { margin: 0; width: 100%; }

body.layout-bottom #app { flex-wrap: wrap; }
body.layout-bottom #canvas-container { width: 100% !important; height: calc(100vh - var(--topbar-height) - 300px) !important; order: 1; }
body.layout-bottom #palette { width: 50% !important; height: 300px !important; order: 2; border-right: 1px solid var(--border); position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
body.layout-bottom #inspector { width: 50% !important; height: 300px !important; order: 3; border-left: none; position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; }
body.layout-classic #palette, body.layout-classic #inspector { width: var(--sidebar-width) !important; height: 100% !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
.panel-resize { display: none; }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:var(--font);font-size:13px;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.5; } }

/* Micro-Animations */
.anim-pulse:hover { transform: scale(1.05); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.anim-slide:hover { transform: translateX(5px); transition: transform 0.2s ease-out; }
.anim-glow:hover { filter: brightness(1.2) drop-shadow(0 0 8px var(--accent-glow)); transition: all 0.2s ease-out; }

/* ===== Top Bar ===== */
#topbar{height:var(--topbar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;user-select:none;z-index:100}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-center{flex:1;text-align:center}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.logo-icon{font-size:18px;filter:drop-shadow(0 0 6px var(--accent-glow))}
.logo-accent{color:var(--accent)}
.topbar-divider{width:1px;height:24px;background:var(--border)}
.topbar-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;background:var(--bg-hover);border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:12px;font-family:var(--font);transition:all var(--transition)}
.topbar-btn:hover{background:var(--bg-active);color:var(--text-primary);border-color:var(--border)}
.topbar-btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.topbar-btn.accent:hover{background:var(--accent-hover)}
.btn-icon{font-size:14px}
.project-name{color:var(--text-secondary);font-size:13px;padding:4px 8px;border-radius:4px;outline:none;transition:all var(--transition)}
.project-name:hover{background:var(--bg-hover)}
.project-name:focus{background:var(--bg-input);color:var(--text-primary);box-shadow:0 0 0 1px var(--accent)}
.theme-label{color:var(--text-dim);font-size:11px;white-space:nowrap}
.theme-select{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-primary);padding:5px 8px;font-size:12px;font-family:var(--font);cursor:pointer;outline:none}
.theme-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}

/* ===== Main Layout ===== */
#app{display:flex;height:calc(100vh - var(--topbar-height))}

/* ===== Panels ===== */
.panel{width:var(--panel-width);min-width:var(--panel-width);background:var(--bg-panel);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow-y:auto}
#inspector{border-right:none;border-left:1px solid var(--border-subtle)}
.panel-header{padding:12px 14px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);background:var(--bg-panel-header);position:sticky;top:0;z-index:10}
.panel-header h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}
.panel-badge{font-size:10px;padding:2px 8px;background:var(--accent);border-radius:10px;color:#fff;font-weight:600;min-width:20px;text-align:center}

/* ===== Palette ===== */
.palette-search{padding:8px 10px}
.palette-search input{width:100%;padding:7px 10px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-primary);font-size:12px;font-family:var(--font);outline:none;transition:all var(--transition)}
.palette-search input::placeholder{color:var(--text-dim)}
.palette-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.palette-section{padding:4px 10px 10px}
.palette-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:6px;padding-left:2px}
.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.palette-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:8px;cursor:grab;transition:all var(--transition);user-select:none}
.palette-item:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow-color)}
.palette-item:active{cursor:grabbing;transform:scale(0.95)}
.palette-item-icon{font-size:16px;line-height:1}
.palette-item-label{font-size:10px;font-weight:500;color:var(--text-secondary)}

/* ===== Canvas ===== */
#canvas-container{flex:1;display:flex;flex-direction:column;background:var(--bg-primary);position:relative;overflow:hidden}
.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:5px 10px;background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle)}
.canvas-toolbar-left,.canvas-toolbar-right{display:flex;align-items:center;gap:4px}
.canvas-tool{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:14px;transition:all var(--transition)}
.canvas-tool:hover{background:var(--bg-hover);border-color:var(--border)}
.canvas-info{font-size:11px;color:var(--text-dim);font-family:var(--font-mono)}
.canvas{flex:1;overflow:auto;position:relative;padding:24px;background-image:radial-gradient(circle at 1px 1px,var(--border-subtle) 1px,transparent 0);background-size:24px 24px}

/* ===== ImGui Menu Windows ===== */
.imgui-window{position:absolute;min-width:200px;background:var(--bg-input);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 32px var(--shadow-color);overflow:visible;transition:box-shadow 0.3s;z-index:1}
.imgui-window.active-menu{box-shadow:0 8px 32px var(--shadow-color),0 0 0 2px var(--accent);z-index:2}
.imgui-window.dragging{opacity:0.9;transition:none;z-index:10}
.imgui-titlebar{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--bg-active);border-bottom:1px solid var(--border);cursor:move;user-select:none;border-radius:6px 6px 0 0}
.imgui-titlebar-text{font-size:13px;font-weight:600;color:var(--text-primary)}
.imgui-titlebar-controls{display:flex;gap:8px;color:var(--text-dim);font-size:11px}
.imgui-titlebar-controls span{cursor:pointer;opacity:0.5;transition:opacity var(--transition)}
.imgui-titlebar-controls span:hover{opacity:1}
.imgui-body{padding:6px;min-height:120px;position:relative}
.imgui-body.drag-hover{background:var(--accent-glow);outline:2px dashed var(--accent);outline-offset:-4px}
.canvas-empty-msg{color:var(--text-dim);text-align:center;padding:30px 10px;font-size:12px;user-select:none;pointer-events:none;opacity:0.5}
.resize-handle{position:absolute;bottom:-4px;right:-4px;width:16px;height:16px;cursor:nwse-resize;z-index:5;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition)}
.imgui-window:hover .resize-handle,.imgui-window.active-menu .resize-handle{opacity:1}
.resize-handle::before{content:'';display:block;width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);opacity:0.6}
.resize-handle-right{position:absolute;top:30px;right:-3px;bottom:10px;width:6px;cursor:ew-resize;z-index:5}
.resize-handle-bottom{position:absolute;bottom:-3px;left:10px;right:10px;height:6px;cursor:ns-resize;z-index:5}

/* ===== Widget Previews ===== */
.widget-preview{position:absolute;cursor:move;border:1px solid transparent;border-radius:3px;transition:box-shadow var(--transition);padding:2px 4px;z-index:10;user-select:none;}
.widget-preview:hover{border-color:var(--accent-glow)}
.widget-preview.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 10px var(--accent-glow);z-index:20;}
.widget-resize{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;cursor:nwse-resize;opacity:0;transition:opacity 0.2s;display:flex;align-items:center;justify-content:center}
.widget-preview:hover .widget-resize,.widget-preview.selected .widget-resize{opacity:1}
.widget-resize::before{content:'';display:block;width:6px;height:6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);opacity:0.8}


/* ImGui-style widgets */
.w-button{display:inline-block;padding:4px 16px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:3px;color:#e0e0f0;font-size:13px;font-family:var(--font);cursor:pointer;transition:all var(--transition);text-align:center}
.w-checkbox{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:13px;cursor:pointer}
.w-checkbox-box{width:15px;height:15px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;transition:all var(--transition)}
.w-checkbox-box.checked{background:var(--accent);border-color:var(--accent);color:#fff}
.w-slider{display:flex;align-items:center;gap:8px;padding:2px 0}
.w-slider-label{font-size:13px;min-width:40px;flex-shrink:0}
.w-slider-track{flex:1;height:16px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:2px;position:relative;overflow:hidden}
.w-slider-fill{position:absolute;top:0;left:0;height:100%;opacity:0.6;border-radius:2px}
.w-slider-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-family:var(--font-mono);pointer-events:none}
.w-text{padding:1px 0;font-size:13px}
.w-input{display:flex;align-items:center;gap:8px;padding:2px 0}
.w-input-label{font-size:13px;min-width:40px;flex-shrink:0}
.w-input-field{flex:1;height:18px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:2px;padding:0 6px;font-size:11px}
.w-separator{height:1px;background:#3a3a6a;margin:4px 0}
.w-combo{display:flex;align-items:center;gap:8px;padding:2px 0}
.w-combo-label{font-size:13px;min-width:40px;flex-shrink:0}
.w-combo-box{flex:1;height:18px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:2px;padding:0 6px;display:flex;align-items:center;justify-content:space-between;font-size:11px}
.w-combo-arrow{font-size:8px;opacity:0.5}
.w-colorpicker{display:flex;align-items:center;gap:8px;padding:2px 0}
.w-colorpicker-label{font-size:13px;min-width:40px;flex-shrink:0}
.w-colorpicker-swatch{width:50px;height:16px;border:1px solid #3a3a6a;border-radius:2px}
.w-toggle{display:flex;align-items:center;gap:8px;padding:2px 0}
.w-toggle-label{font-size:13px}
.w-toggle-track{width:30px;height:14px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:7px;position:relative;transition:background var(--transition)}
.w-toggle-track.on{background:var(--accent)}
.w-toggle-thumb{position:absolute;top:2px;left:2px;width:8px;height:8px;background:#e0e0f0;border-radius:50%;transition:left var(--transition)}
.w-toggle-track.on .w-toggle-thumb{left:18px}
.w-progress{padding:2px 0}
.w-progress-label{font-size:13px;margin-bottom:2px}
.w-progress-bar{height:14px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:2px;position:relative;overflow:hidden}
.w-progress-fill{height:100%;opacity:0.6;border-radius:2px}
.w-progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-family:var(--font-mono)}
.w-tab{display:flex;gap:0;border-bottom:1px solid #3a3a6a;margin-bottom:4px}
.w-tab-item{padding:4px 12px;font-size:12px;color:var(--text-secondary);border-bottom:2px solid transparent;cursor:pointer;transition:all var(--transition)}
.w-tab-item.active{border-bottom-color:var(--accent)}
.w-child{border:1px solid #3a3a6a;border-radius:3px;padding:6px;min-height:40px;background:rgba(0,0,0,0.15)}
.w-child-label{font-size:11px;color:var(--text-dim);margin-bottom:4px}
.w-hotkey{display:flex;align-items:center;gap:8px;padding:2px 0}
.w-hotkey-label{font-size:13px;min-width:40px;flex-shrink:0}
.w-hotkey-btn{padding:2px 12px;background:#2d2d5a;border:1px solid #3a3a6a;border-radius:2px;font-size:10px;font-family:var(--font-mono)}
.w-image-placeholder{width:100%;height:50px;background:#2d2d5a;border:1px dashed #3a3a6a;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-dim)}
.w-header{font-size:14px;font-weight:600;padding:4px 0;border-bottom:1px solid #3a3a6a;margin-bottom:2px}
.w-spacing{height:8px}

/* ===== Inspector ===== */
.inspector-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;gap:8px;color:var(--text-dim)}
.inspector-empty-icon{font-size:32px;opacity:0.4}
.inspector-content{padding:0}
.inspector-section{padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.inspector-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);margin-bottom:8px}
.inspector-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.inspector-row label{font-size:11px;color:var(--text-secondary);min-width:65px;flex-shrink:0}
.inspector-row-dual{display:flex;gap:8px;margin-bottom:6px}
.inspector-row-half{flex:1;display:flex;align-items:center;gap:6px}
.inspector-row-half label{font-size:11px;color:var(--text-secondary);min-width:14px}
.insp-input{flex:1;padding:4px 7px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-primary);font-size:11px;font-family:var(--font);outline:none;transition:all var(--transition);min-width:0}
.insp-input.mono{font-family:var(--font-mono)}
.insp-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.insp-input[type="number"]{width:50px}
.insp-color{width:28px;height:22px;border:1px solid var(--border);border-radius:4px;cursor:pointer;padding:0;background:none}
.insp-color::-webkit-color-swatch-wrapper{padding:2px}
.insp-color::-webkit-color-swatch{border-radius:2px;border:none}
.insp-range{flex:1;accent-color:var(--accent);cursor:pointer}
.insp-range-val{font-size:10px;color:var(--text-dim);font-family:var(--font-mono);min-width:18px;text-align:right}
.insp-select{flex:1;padding:4px 6px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-primary);font-size:11px;font-family:var(--font);outline:none;cursor:pointer}
.insp-select:focus{border-color:var(--accent)}
.insp-textarea{width:100%;min-height:50px;padding:5px 7px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-primary);font-size:11px;font-family:var(--font);resize:vertical;outline:none}
.insp-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}

/* Color Grid */
.inspector-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
.color-cell{display:flex;align-items:center;gap:6px}
.color-cell label{font-size:10px;color:var(--text-dim);min-width:32px}

/* Box Style Picker */
.box-style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.box-style-option{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:1px solid var(--border-subtle);border-radius:6px;cursor:pointer;transition:all var(--transition);background:var(--bg-secondary)}
.box-style-option:hover{border-color:var(--accent)}
.box-style-option.selected{border-color:var(--accent);background:var(--accent-glow)}
.box-style-option span{font-size:9px;color:var(--text-dim)}
.box-preview{width:28px;height:16px;background:var(--bg-active);border:1px solid var(--border)}
.box-preview.flat{border-radius:2px}
.box-preview.rounded{border-radius:6px}
.box-preview.pill{border-radius:10px}
.box-preview.outlined{background:transparent;border:2px solid var(--accent)}
.box-preview.neon{border-radius:3px;box-shadow:0 0 6px var(--accent),inset 0 0 4px var(--accent-glow);border-color:var(--accent)}
.box-preview.glass{border-radius:6px;background:rgba(255,255,255,0.08);backdrop-filter:blur(2px);border-color:rgba(255,255,255,0.15)}
.box-preview.gradient{border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-color:transparent}
.box-preview.sharp{border-radius:0}

/* Toggle Switch */
.toggle-switch{position:relative;display:inline-block;width:34px;height:18px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg-input);border:1px solid var(--border);border-radius:9px;transition:var(--transition)}
.toggle-slider::before{content:'';position:absolute;height:12px;width:12px;left:2px;bottom:2px;background:var(--text-dim);border-radius:50%;transition:var(--transition)}
.toggle-switch input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(16px);background:#fff}
.inspector-delete-btn{width:100%;padding:7px;background:transparent;border:1px solid var(--danger);border-radius:6px;color:var(--danger);cursor:pointer;font-size:12px;font-family:var(--font);transition:all var(--transition)}
.inspector-delete-btn:hover{background:var(--danger);color:#fff}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn 0.2s}
.modal{width:720px;max-height:80vh;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,0.5);animation:slideUp 0.3s cubic-bezier(0.4,0,0.2,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-subtle)}
.modal-header h3{font-size:15px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer}
.modal-close:hover{color:var(--text-primary)}
.modal-tabs{display:flex;padding:0 18px;border-bottom:1px solid var(--border-subtle)}
.modal-tab{padding:9px 14px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-size:12px;font-family:var(--font);transition:all var(--transition)}
.modal-tab:hover{color:var(--text-primary)}
.modal-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.modal-body{flex:1;overflow:auto;padding:14px 18px}
.export-code{font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:8px;padding:14px;overflow-x:auto;white-space:pre;tab-size:4}
.modal-footer{display:flex;gap:8px;padding:10px 18px;border-top:1px solid var(--border-subtle);justify-content:flex-end}
.modal-btn{padding:7px 14px;background:var(--accent);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-family:var(--font);transition:all var(--transition)}
.modal-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.modal-btn.secondary{background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border)}
.modal-btn.secondary:hover{background:var(--bg-active);color:var(--text-primary)}