:root{--bg-app: #0a0c12;--bg-panel: #11141f;--bg-card: #161a28;--bg-card-hover: #1e2336;--bg-input: #1a1e2e;--bg-accent-soft: rgba(139, 92, 246, .12);--border-subtle: rgba(255, 255, 255, .07);--border-medium: rgba(255, 255, 255, .14);--border-focus: #8b5cf6;--text-main: #f8fafc;--text-muted: #94a3b8;--text-dim: #64748b;--primary: #8b5cf6;--primary-hover: #7c3aed;--primary-glow: rgba(139, 92, 246, .35);--accent-cyan: #06b6d4;--accent-emerald: #10b981;--accent-rose: #f43f5e;--accent-amber: #f59e0b;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Outfit", var(--font-sans);--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100vh;width:100vw}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;background:radial-gradient(circle at 50% 0%,#15192b,#0a0c12 70%)}.top-nav{height:56px;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#11141feb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);z-index:50;gap:12px}.brand-group{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-logo-badge{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,#8b5cf6,#d946ef);border-radius:var(--radius-md);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.brand-title-wrap h1{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--text-main);display:flex;align-items:center;gap:6px}.brand-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:2px 6px;background:#8b5cf633;border:1px solid rgba(139,92,246,.4);color:#c4b5fd;border-radius:10px}.preset-selector-wrap{display:flex;align-items:center;gap:6px;margin-left:12px}.preset-dropdown{padding:5px 8px;font-size:12px;width:210px;cursor:pointer;background:var(--bg-card);border-color:var(--border-medium)}.top-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font-sans);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:var(--radius-md);cursor:pointer;transition:all .18s ease;border:1px solid transparent;outline:none;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.btn-primary:hover{background:linear-gradient(135deg,#9d71f7,#8b5cf6);transform:translateY(-1px);box-shadow:0 6px 20px var(--primary-glow)}.btn-secondary{background:var(--bg-card);border-color:var(--border-medium);color:var(--text-main)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:#ffffff40;transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{background:#ffffff0f;color:var(--text-main)}.btn-sm{padding:5px 9px;font-size:11.5px;border-radius:var(--radius-sm)}.btn-section-reset{display:inline-flex;align-items:center;gap:4px;background:#ffffff0a;border:1px solid rgba(255,255,255,.09);color:var(--text-dim);border-radius:var(--radius-sm);padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease;flex-shrink:0;-webkit-user-select:none;user-select:none}.btn-section-reset:hover{background:#8b5cf626;border-color:#8b5cf673;color:#c4b5fd;transform:translateY(-1px)}.btn-section-reset:active{transform:translateY(0)}.undo-redo-group{display:flex;align-items:center;gap:2px;background:#ffffff0a;border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:2px}.btn-icon-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:all .15s ease}.btn-icon-nav:hover:not(:disabled){background:#ffffff14;color:#fff}.btn-icon-nav:disabled{opacity:.35;cursor:not-allowed}.studio-workspace{display:flex;flex:1;overflow:hidden;height:calc(100vh - 56px)}.editor-panel{width:46%;min-width:420px;max-width:620px;display:flex;flex-direction:column;background:var(--bg-panel);border-right:1px solid var(--border-subtle);overflow:hidden;height:100%}.editor-tabs-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#0d1019fa;border-bottom:1px solid var(--border-subtle);flex-shrink:0;min-height:48px;box-sizing:border-box}.editor-tabs-group{display:flex;align-items:center;gap:6px}.editor-tab-badge{font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.3px;background:#ffffff0a;padding:3px 9px;border-radius:var(--radius-full);border:1px solid var(--border-subtle)}.tab-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-md);font-size:12px;font-weight:600;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:all .15s ease;white-space:nowrap}.tab-btn:hover{color:var(--text-main);background:#ffffff0d}.tab-btn.active{color:#fff;background:var(--bg-card);border:1px solid var(--border-medium);box-shadow:var(--shadow-sm)}.tab-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);background:#ffffff05;color:var(--text-muted);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .15s ease}.tab-btn-icon:hover{color:var(--text-main);background:#ffffff14;border-color:#ffffff26}.tab-btn-icon.active{color:#fff;background:#8b5cf640;border:1px solid rgba(139,92,246,.6);box-shadow:0 0 10px #8b5cf640}.tab-content-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px}.control-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:12px}.control-card-header{display:flex;align-items:center;justify-content:space-between}.control-card-title{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:8px}.control-card-desc{font-size:11.5px;color:var(--text-muted);line-height:1.4}.form-group{display:flex;flex-direction:column;gap:5px}.form-label{font-size:11.5px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between}.text-input,.textarea-input,.select-input{width:100%;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:8px 10px;font-family:var(--font-sans);font-size:12.5px;color:var(--text-main);outline:none;transition:all .15s ease}.text-input:focus,.textarea-input:focus,.select-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--primary-glow)}.textarea-input{min-height:70px;resize:vertical;line-height:1.45}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.segmented-control{display:flex;background:var(--bg-input);padding:3px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);gap:2px}.segment-btn{flex:1;padding:5px 6px;font-size:11.5px;font-weight:600;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;text-align:center}.segment-btn:hover{color:var(--text-main)}.segment-btn.active{background:var(--bg-card-hover);color:#fff;box-shadow:0 2px 6px #0000004d}.slider-wrap{display:flex;flex-direction:column;gap:5px}.slider-header{display:flex;align-items:center;justify-content:space-between;font-size:11.5px}.slider-label{color:var(--text-muted);font-weight:500}.slider-value{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:#c4b5fd;background:#8b5cf61f;padding:1px 5px;border-radius:4px}.slider-input-badge{display:inline-flex;align-items:center;gap:3px;background:#8b5cf61f;border:1px solid rgba(139,92,246,.25);border-radius:4px;padding:1px 4px;transition:all .15s ease}.slider-input-badge:focus-within{border-color:#8b5cf6;background:#8b5cf638;box-shadow:0 0 6px #8b5cf659}.slider-modifier-badge{font-family:var(--font-mono);font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.3px;animation:pulseBadge 1.5s infinite alternate}.slider-modifier-badge.ctrl-mode{background:#10b98133;color:#34d399;border:1px solid rgba(16,185,129,.5)}.slider-modifier-badge.shift-mode{background:#f59e0b33;color:#fbbf24;border:1px solid rgba(245,158,11,.5)}@keyframes pulseBadge{0%{opacity:.8}to{opacity:1}}.slider-stepper-btn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:2px;background:#ffffff0d;border:none;color:var(--text-dim);cursor:pointer;padding:0;transition:all .12s ease}.slider-stepper-btn:hover{background:#8b5cf659;color:#fff}.slider-stepper-btn:active{transform:scale(.9)}.slider-direct-input{width:44px;background:transparent;border:none;color:#c4b5fd;font-family:var(--font-mono);font-size:11px;font-weight:600;text-align:center;outline:none;padding:0;-moz-appearance:textfield}.slider-direct-input::-webkit-outer-spin-button,.slider-direct-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slider-unit{font-family:var(--font-mono);font-size:10.5px;font-weight:500;color:var(--text-muted)}.slider-unit.scrub-target:hover{color:#c4b5fd}.custom-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:var(--bg-input);outline:none;cursor:pointer}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 8px #8b5cf699;cursor:pointer;transition:transform .1s ease}.custom-range::-webkit-slider-thumb:hover{transform:scale(1.15)}.color-picker-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.color-swatch-circle{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer;position:relative;overflow:hidden;flex-shrink:0}.color-swatch-circle input[type=color]{opacity:0;position:absolute;top:-10px;left:-10px;width:50px;height:50px;cursor:pointer}.variable-chip-list{display:flex;flex-wrap:wrap;gap:5px}.var-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-family:var(--font-mono);font-size:11px;font-weight:500;background:#8b5cf61f;border:1px solid rgba(139,92,246,.3);color:#c4b5fd;border-radius:6px;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.var-chip:hover{background:#8b5cf640;border-color:#8b5cf699;color:#fff;transform:translateY(-1px)}.var-chip:active{transform:translateY(0)}.preview-panel{flex:1;display:flex;flex-direction:column;background:#08090e;position:relative;overflow:hidden}.preview-toolbar{height:44px;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#0d1019f2;border-bottom:1px solid var(--border-subtle);z-index:10;gap:8px}.preview-device-toggle{display:flex;align-items:center;gap:2px;background:var(--bg-card);padding:2px;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.device-btn{display:flex;align-items:center;gap:4px;padding:3px 8px;font-size:11.5px;font-weight:600;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease}.device-btn.active{background:var(--bg-panel);color:#fff;box-shadow:0 2px 6px #0000004d}.preview-canvas-container{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;background-size:20px 20px}.preview-canvas-container.theme-dark{background-color:#090a0f;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px)}.preview-canvas-container.theme-light{background-color:#f1f5f9;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px)}.preview-frame-wrapper{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg),0 0 0 1px #ffffff0f;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column}.preview-frame-header{height:30px;background:#141724;display:flex;align-items:center;padding:0 12px;gap:6px;border-bottom:1px solid rgba(255,255,255,.08)}.window-dot{width:8px;height:8px;border-radius:50%}.window-dot.red{background:#ef4444}.window-dot.yellow{background:#f59e0b}.window-dot.green{background:#10b981}.window-title{font-size:10.5px;font-weight:500;color:#94a3b8;margin-left:6px;font-family:var(--font-mono)}.preview-rendered-body{width:100%;overflow:hidden}.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}.toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--radius-lg);font-size:12.5px;font-weight:600;color:#fff;box-shadow:var(--shadow-lg);animation:slideIn .22s cubic-bezier(.16,1,.3,1)}.toast-success{background:#064e3b;border:1px solid #10b981}.toast-info{background:#1e1b4b;border:1px solid #8b5cf6}@keyframes slideIn{0%{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:1100px){.btn-label-responsive{display:none}.preset-dropdown{width:150px}.quick-brands-wrap{display:none}}@media(max-width:850px){.studio-workspace{flex-direction:column;height:auto;overflow-y:auto}.editor-panel{width:100%;max-width:100%;min-width:100%;height:520px}.preview-panel{width:100%;min-height:600px}}.visual-editor-container{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease;display:flex;flex-direction:column}.visual-editor-container:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--primary-glow)}.visual-editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#0d1019b3;border-bottom:1px solid var(--border-subtle);gap:8px;flex-wrap:wrap}.visual-editor-label{font-size:11.5px;font-weight:700;color:var(--text-main)}.visual-editor-label-badge{font-size:10.5px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.visual-editor-actions{display:flex;align-items:center;gap:4px}.visual-toolbar-group{display:flex;align-items:center;gap:2px;background:#ffffff0a;padding:2px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.v-tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:3px 6px;font-size:11px;font-weight:600;color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:all .12s ease;-webkit-user-select:none;user-select:none}.v-tool-btn:hover:not(:disabled){background:#ffffff14;color:#fff}.v-tool-btn:disabled{opacity:.35;cursor:not-allowed}.v-tool-btn.active{background:#8b5cf640;color:#fff;border-color:#8b5cf680}.v-tool-btn.brand-highlight-btn{color:#c4b5fd}.v-tool-btn.brand-highlight-btn:hover{background:#8b5cf633;color:#fff}.v-tool-btn.yellow-marker-btn{color:#facc15}.v-tool-btn.yellow-marker-btn:hover{background:#facc1526;color:#fef08a}.v-tool-btn.var-insert-btn{background:#8b5cf61f;border-color:#8b5cf64d;color:#c4b5fd}.v-tool-btn.var-insert-btn:hover{background:#8b5cf640;color:#fff}.v-tool-btn.delete-btn{color:#f87171}.v-tool-btn.delete-btn:hover{background:#f8717126;color:#ef4444}.v-dropdown-wrap{position:relative}.v-var-menu{position:absolute;top:calc(100% + 4px);right:0;width:220px;background:#141824;border:1px solid var(--border-medium);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;z-index:100;display:flex;flex-direction:column;gap:3px;max-height:240px;overflow-y:auto}.v-var-menu-header{font-size:10.5px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;padding:4px 6px}.v-var-menu-item{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background .1s ease}.v-var-menu-item:hover{background:#8b5cf633}.v-var-tag{font-family:var(--font-mono);font-size:11px;font-weight:600;color:#c4b5fd}.v-var-val{font-size:10.5px;color:var(--text-muted);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v-var-menu-empty{padding:8px;font-size:11px;color:var(--text-dim);text-align:center}.visual-editor-body{padding:10px 12px;background:var(--bg-input)}.visual-editable-area{outline:none;font-family:var(--font-sans);font-size:13px;line-height:1.6;color:var(--text-main);word-break:break-word;white-space:pre-wrap}.visual-editable-area[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--text-dim);pointer-events:none}.visual-editable-area strong{font-weight:700;color:#fff}.visual-editable-area em{font-style:italic}.visual-editable-area u{text-decoration:underline}.visual-editor-raw-textarea{width:100%;background:transparent;border:none;outline:none;font-family:var(--font-mono);font-size:11.5px;line-height:1.5;color:#e2e8f0;resize:vertical}.var-manager-grid{display:flex;flex-direction:column;gap:8px}.var-manager-row{display:flex;align-items:center;gap:8px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:6px 10px;transition:all .15s ease}.var-manager-row:focus-within{border-color:var(--border-focus);background:#8b5cf60d}.var-key-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#c4b5fd;background:#8b5cf626;border:1px solid rgba(139,92,246,.35);padding:3px 7px;border-radius:var(--radius-sm);white-space:nowrap;-webkit-user-select:all;user-select:all;min-width:120px}.var-val-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:var(--text-main)}.var-val-input::placeholder{color:var(--text-dim)}.var-actions{display:flex;align-items:center;gap:4px}