:root{--bg-app: #f8fafc;--bg-topbar: #ffffff;--bg-panel: #ffffff;--bg-panel-hover: #f1f5f9;--bg-surface: #f8fafc;--bg-input: #ffffff;--bg-viewport: #e2e8f0;--border-subtle: #e2e8f0;--border-active: #6366f1;--border-glow: rgba(99, 102, 241, .25);--primary: #4f46e5;--primary-hover: #4338ca;--primary-glow: rgba(79, 70, 229, .18);--accent-cyan: #0284c7;--accent-pink: #db2777;--accent-green: #059669;--accent-amber: #d97706;--accent-red: #dc2626;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #94a3b8;--text-accent: #4f46e5;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Outfit", sans-serif;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .08), 0 2px 6px -1px rgba(0, 0, 0, .04);--shadow-lg: 0 16px 36px -6px rgba(0, 0, 0, .12), 0 6px 14px -3px rgba(0, 0, 0, .06);--shadow-glow: 0 0 16px rgba(79, 70, 229, .16);--glass-bg: rgba(255, 255, 255, .96);--glass-border: #cbd5e1;--top-menu-h: 46px;--options-bar-h: 42px;--status-bar-h: 30px;--toolbar-w: 52px;--sidebar-w: 290px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body,html{width:100%;height:100%;overflow:hidden;font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased}.studio-app{display:flex;flex-direction:column;width:100vw;height:100vh;overflow:hidden;background-color:var(--bg-app)}.top-menu-bar{display:flex;align-items:center;justify-content:space-between;height:var(--top-menu-h);background-color:var(--bg-topbar);border-bottom:1px solid var(--border-subtle);padding:0 14px;z-index:100;box-shadow:0 1px 3px #00000008}.brand-group{display:flex;align-items:center;gap:10px;margin-right:18px;cursor:pointer;user-select:none}.brand-logo{display:flex;align-items:center;justify-content:center;position:relative}.brand-logo svg{filter:drop-shadow(0 2px 4px rgba(15,23,42,.25));transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s ease}.brand-group:hover .brand-logo svg{transform:rotate(-5deg) scale(1.1);filter:drop-shadow(0 4px 8px rgba(180,83,9,.35))}.brand-info{display:flex;flex-direction:column}.brand-title{font-family:var(--font-display);font-weight:800;font-size:15.5px;letter-spacing:-.3px;background:linear-gradient(135deg,#0f172a,#334155 45%,#b45309 85%,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-domain{font-size:10px;color:#b45309;font-weight:700;letter-spacing:.5px;margin-top:-2px;text-transform:uppercase}.menu-items-group{display:flex;align-items:center;gap:4px;flex:1}.menu-dropdown{position:relative}.menu-btn{background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:13px;font-weight:500;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;gap:6px}.menu-btn:hover,.menu-dropdown:hover .menu-btn{color:var(--text-primary);background:var(--bg-panel-hover)}.dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);border-radius:8px;padding:6px;margin-top:4px;z-index:1000;animation:dropdownFade .15s ease-out}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.menu-dropdown:hover .dropdown-menu{display:block}.dropdown-item{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;color:var(--text-secondary);font-size:12.5px;padding:7px 10px;border-radius:5px;cursor:pointer;text-align:left;transition:background .12s,color .12s}.dropdown-item:hover{background:#eef2ff;color:#4338ca}.dropdown-item.highlight{color:var(--accent-cyan);font-weight:600}.dropdown-item.highlight:hover{background:#e0f2fe;color:#0369a1}.dropdown-item kbd{font-size:10.5px;color:var(--text-muted);font-family:inherit;background:#f1f5f9;border:1px solid #cbd5e1;padding:2px 6px;border-radius:4px}.dropdown-item:hover kbd{color:#4338ca;border-color:#a5b4fc}.dropdown-divider{height:1px;background:var(--border-subtle);margin:5px 0}.dropdown-submenu-parent{position:relative}.dropdown-submenu{display:none;position:absolute;top:0;left:100%;min-width:190px;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);border-radius:8px;padding:6px;margin-left:2px}.dropdown-submenu-parent:hover .dropdown-submenu{display:block}.quick-actions-group{display:flex;align-items:center;gap:8px}.quick-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:7px;cursor:pointer;border:1px solid transparent;transition:all .15s ease}.quick-btn.special{background:linear-gradient(135deg,#eef2ff,#fdf2f8);border-color:#f472b6;color:#be185d}.quick-btn.special:hover{background:linear-gradient(135deg,#e0e7ff,#fce7f3);box-shadow:0 2px 10px #ec489940;transform:translateY(-1px)}.quick-btn.optimize{background:linear-gradient(135deg,#0284c7,#4f46e5);color:#fff;box-shadow:0 2px 8px #0284c759}.quick-btn.optimize:hover{box-shadow:0 4px 14px #0284c780;transform:translateY(-1px)}.quick-export-container{display:flex;position:relative}.quick-btn.primary{background:#fff;border:1px solid #cbd5e1;color:var(--text-primary);border-top-right-radius:0;border-bottom-right-radius:0}.quick-btn.primary:hover{background:#f1f5f9;border-color:#94a3b8}.quick-btn.primary-caret{background:#fff;border:1px solid #cbd5e1;border-left:none;color:var(--text-secondary);padding:6px 8px;border-top-left-radius:0;border-bottom-left-radius:0}.quick-btn.primary-caret:hover{background:#f1f5f9;color:var(--text-primary)}.quick-export-menu{display:none;position:absolute;top:100%;right:0;min-width:200px;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);border-radius:8px;padding:6px;margin-top:4px;z-index:1000}.quick-export-menu.visible{display:block}.quick-export-item{width:100%;background:transparent;border:none;color:var(--text-secondary);font-size:12.5px;padding:7px 10px;border-radius:5px;cursor:pointer;text-align:left;transition:all .12s}.quick-export-item:hover{background:#eef2ff;color:#4338ca}#optionsbar-container{height:var(--options-bar-h);background-color:var(--bg-panel);border-bottom:1px solid var(--border-subtle);padding:0 16px;display:flex;align-items:center}.options-bar-inner{display:flex;align-items:center;gap:16px;width:100%;overflow-x:auto}.opt-group{display:flex;align-items:center;gap:10px}.opt-label{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}.opt-control{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.opt-val{min-width:32px;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-primary);font-weight:600}.opt-btn{background:#fff;border:1px solid #cbd5e1;color:var(--text-primary);font-size:12px;font-weight:500;padding:4px 10px;border-radius:5px;cursor:pointer;transition:all .15s ease}.opt-btn:hover{background:#f1f5f9;border-color:#94a3b8}.opt-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.opt-btn.primary:hover{background:var(--primary-hover)}.opt-btn.danger{color:#dc2626;border-color:#fca5a5;background:#fff5f5}.opt-btn.danger:hover{background:#fee2e2}.opt-btn.active{background:var(--primary);color:#fff}.opt-btn-mini{background:#fff;border:1px solid #cbd5e1;color:var(--text-secondary);font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;cursor:pointer;transition:all .12s}.opt-btn-mini:hover{background:#f1f5f9;color:var(--text-primary)}.opt-btn-mini.active{background:var(--primary);border-color:var(--primary);color:#fff}.opt-btn-mini.auto-pill{background:linear-gradient(135deg,#4f46e5,#0284c7)!important;border-color:#4338ca!important;color:#fff!important;box-shadow:0 1px 6px #4f46e559;display:inline-flex;align-items:center;gap:2px}.opt-btn-group{display:inline-flex;align-items:center;gap:3px}.opt-divider{width:1px;height:20px;background:var(--border-subtle);margin:0 4px}.opt-hint{font-size:11.5px;color:var(--text-muted);font-style:italic}.opt-checkbox{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);cursor:pointer}.studio-workspace{display:flex;flex:1;overflow:hidden;position:relative}.studio-toolbar{width:var(--toolbar-w);background-color:var(--bg-panel);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 0;z-index:10;box-shadow:1px 0 3px #00000005}.toolbar-tools{display:flex;flex-direction:column;gap:3px;width:100%;align-items:center}.tool-item-wrapper{position:relative;display:flex;justify-content:center;width:100%}.tool-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;color:#334155;border-radius:6px;cursor:pointer;position:relative;transition:all .12s ease}.tool-btn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#0f172a}.tool-btn.active{background:#e0e7ff;border-color:#6366f1;color:#4338ca;box-shadow:0 0 6px #6366f12e}.tool-icon-slot{display:flex;align-items:center;justify-content:center;pointer-events:none}.ps-triangle{position:absolute;bottom:2px;right:2px;width:0;height:0;border-style:solid;border-width:0 0 5px 5px;border-color:transparent transparent #64748b transparent;cursor:pointer;transition:border-color .12s}.tool-btn:hover .ps-triangle{border-color:transparent transparent #0f172a transparent}.tool-btn.active .ps-triangle{border-color:transparent transparent #4338ca transparent}.tool-flyout-menu{display:none;position:absolute;left:46px;top:0;min-width:300px;background:#fff;border:1px solid #cbd5e1;border-radius:9px;box-shadow:0 12px 30px -4px #00000029,0 4px 10px -2px #00000014;padding:6px;z-index:1050;animation:flyoutFadeIn .14s ease-out}.tool-flyout-menu.open{display:block}@keyframes flyoutFadeIn{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.tool-flyout-header{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;padding:4px 10px 6px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}.tool-flyout-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:1px solid transparent;background:transparent;border-radius:7px;cursor:pointer;text-align:left;transition:all .12s ease;color:var(--text-primary)}.tool-flyout-item:hover{background:#eef2ff;border-color:#e0e7ff;color:#4338ca}.tool-flyout-item.active{background:#f0fdf4;border-color:#86efac;color:#15803d}.tool-flyout-item .flyout-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;flex-shrink:0}.tool-flyout-item:hover .flyout-icon{background:#fff;border-color:#c7d2fe;color:#4f46e5}.tool-flyout-item.active .flyout-icon{background:#fff;border-color:#86efac;color:#16a34a}.flyout-info{display:flex;flex-direction:column;flex:1;min-width:0}.flyout-title{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;line-height:1.2}.flyout-desc{font-size:11px;color:#64748b;margin-top:2px}.flyout-badge{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;background:linear-gradient(135deg,#e0e7ff,#fce7f3);color:#4338ca;letter-spacing:.03em}.tool-flyout-item kbd{font-size:10px;font-family:inherit;color:#64748b;background:#f1f5f9;border:1px solid #cbd5e1;padding:1px 6px;border-radius:4px;margin-left:6px}.tool-flyout-divider{height:1px;background:#f1f5f9;margin:4px 0}.tool-hotkey{display:none}.color-swatches-box{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-bottom:4px}.swatches-container{position:relative;width:38px;height:38px}.swatch-input{position:absolute;width:24px;height:24px;padding:0;border:1.5px solid #0f172a;border-radius:3px;cursor:pointer;background:none}.swatch-input::-webkit-color-swatch-wrapper{padding:0}.swatch-input::-webkit-color-swatch{border:none;border-radius:1px}.fg-swatch{top:0;left:0;z-index:2;box-shadow:0 2px 4px #00000040}.bg-swatch{bottom:0;right:0;z-index:1;border-color:#94a3b8}.swatch-swap-btn{position:absolute;top:-5px;right:-5px;background:transparent;border:none;color:#64748b;cursor:pointer;z-index:3;padding:2px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .12s}.swatch-swap-btn:hover{color:#0f172a}.swatch-reset-btn{background:transparent;border:none;cursor:pointer;padding:2px}.mini-d-box{position:relative;width:14px;height:14px}.d-fg{position:absolute;top:0;left:0;width:8px;height:8px;background:#000;border:1px solid #ffffff;box-shadow:0 1px 2px #0000004d;z-index:2}.d-bg{position:absolute;bottom:0;right:0;width:8px;height:8px;background:#fff;border:1px solid #94a3b8;z-index:1}.canvas-viewport{flex:1;position:relative;overflow:hidden;background-color:var(--bg-viewport);background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:24px 24px;display:flex;align-items:center;justify-content:center}.main-editor-canvas,.overlay-editor-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.main-editor-canvas{box-shadow:0 10px 30px #00000029}.overlay-editor-canvas{pointer-events:auto;z-index:5}.viewport-drop-hint{display:none;position:absolute;inset:16px;border:2px dashed var(--accent-cyan);border-radius:12px;background:#ffffffe6;backdrop-filter:blur(8px);z-index:20;align-items:center;justify-content:center;pointer-events:none}.canvas-viewport.drag-over .viewport-drop-hint{display:flex;animation:pulseGlow 1.5s infinite alternate}@keyframes pulseGlow{0%{border-color:var(--accent-cyan);box-shadow:0 0 15px #0284c74d}to{border-color:var(--primary);box-shadow:0 0 25px #4f46e580}}.drop-hint-box{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--primary);font-size:15px;font-weight:600}.studio-sidebar{width:var(--sidebar-w);background-color:var(--bg-panel);border-left:1px solid var(--border-subtle);display:flex;flex-direction:column;overflow:hidden;z-index:10;box-shadow:-1px 0 3px #00000005}.sidebar-tabs{display:flex;background-color:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}.sidebar-tab-btn{flex:1;background:transparent;border:none;color:var(--text-secondary);font-family:var(--font-sans);font-size:12.5px;font-weight:600;padding:8px 0;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s ease}.sidebar-tab-btn:hover{color:var(--text-primary)}.sidebar-tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);background:#fff}.sidebar-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.panel-card{display:flex;flex-direction:column;height:100%;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}.panel-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}.checker-mini{display:inline-block;width:14px;height:14px;border:1px solid var(--border-subtle);border-radius:2px;background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0}.icon-btn-mini{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:4px;transition:all .12s}.icon-btn-mini:hover{background:var(--bg-surface);color:var(--text-primary)}.layer-properties-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:10px;border-bottom:1px solid var(--border-subtle);background:#fff}.opacity-control{display:flex;align-items:center;gap:6px}.opacity-val{font-size:11px;color:var(--text-secondary);min-width:30px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.layers-list-scroll{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.layer-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid var(--border-subtle);border-radius:6px;cursor:pointer;transition:all .12s ease}.layer-item:hover{background:#f1f5f9}.layer-item.active{border-color:var(--primary);background:#eef2ff;box-shadow:0 0 6px #4f46e526}.layer-item.hidden{opacity:.5}.layer-eye-btn,.layer-lock-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;padding:2px}.layer-eye-btn:hover,.layer-lock-btn:hover{color:var(--text-primary)}.layer-thumb-box{width:36px;height:36px;border-radius:4px;overflow:hidden;border:1px solid var(--border-subtle);position:relative;background-color:#f1f5f9;flex-shrink:0}.layer-thumb-img{width:100%;height:100%;object-fit:cover}.type-badge{position:absolute;bottom:1px;right:1px;background:var(--primary);color:#fff;font-size:8px;font-weight:700;padding:1px 3px;border-radius:2px}.layer-name-box{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.layer-name-text{font-size:12.5px;font-weight:600;color:var(--text-primary)}.layers-footer{display:flex;align-items:center;justify-content:space-around;padding:6px 12px;border-top:1px solid var(--border-subtle);background:#fff}.footer-btn{background:transparent;border:none;color:var(--text-secondary);padding:6px 8px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}.footer-btn:hover{background:var(--bg-panel-hover);color:var(--text-primary)}.footer-btn.danger:hover{background:#fee2e2;color:#dc2626}.history-list-scroll{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px;background:#f8fafc}.history-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;cursor:pointer;color:var(--text-secondary);font-size:12px;transition:all .12s}.history-item:hover{background:#f1f5f9;color:var(--text-primary)}.history-item.active{background:#eef2ff;color:#4338ca;font-weight:600}.history-item.future{opacity:.4}.hist-current-tag{margin-left:auto;font-size:9.5px;background:var(--primary);color:#fff;padding:1px 5px;border-radius:3px;font-weight:600}.studio-statusbar{height:var(--status-bar-h);background-color:var(--bg-topbar);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11.5px;color:var(--text-muted);z-index:100}.status-left,.status-right{display:flex;align-items:center;gap:16px}.status-item{display:flex;align-items:center;gap:4px}.status-lbl{color:var(--text-muted)}.status-val{color:var(--text-secondary);font-weight:600}.zoom-controls{display:flex;align-items:center;gap:4px}.status-btn{background:#fff;border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:11px;font-weight:600;padding:1px 6px;border-radius:3px;cursor:pointer}.status-btn:hover{background:#f1f5f9;color:var(--text-primary)}.zoom-readout{min-width:36px;text-align:center;color:var(--text-primary);font-weight:600}.modal-backdrop{position:fixed;inset:0;background:#0f172a73;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-card{background:#fff;border:1px solid var(--border-subtle);border-radius:14px;box-shadow:0 20px 45px -10px #00000029;color:var(--text-primary);display:flex;flex-direction:column;overflow:hidden;max-width:95vw;max-height:90vh}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle);background:#f8fafc}.modal-title-group{display:flex;align-items:center;gap:12px}.modal-icon{font-size:22px;display:flex;align-items:center;justify-content:center}.modal-title-group h3{font-family:var(--font-display);font-size:17px;font-weight:700;color:#0f172a}.modal-subtitle{font-size:12px;color:var(--text-secondary)}.modal-close-btn{background:transparent;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;line-height:1}.modal-close-btn:hover{color:var(--text-primary)}.modal-body{padding:20px;overflow-y:auto}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--border-subtle);background:#f8fafc}.btn{font-family:var(--font-sans);font-size:13px;font-weight:600;padding:8px 16px;border-radius:7px;cursor:pointer;border:none;transition:all .15s ease}.btn-secondary{background:#fff;color:var(--text-secondary);border:1px solid #cbd5e1}.btn-secondary:hover{background:#f1f5f9;color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent-cyan));color:#fff;box-shadow:0 2px 10px #4f46e559}.btn-primary:hover{box-shadow:0 4px 16px #4f46e580;transform:translateY(-1px)}.save-web-card{width:780px}.save-web-body{display:grid;grid-template-columns:1fr 310px;height:480px}.save-web-preview-pane{background:#e2e8f0;display:flex;flex-direction:column;border-right:1px solid var(--border-subtle)}.preview-checkerboard{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;background-image:linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.preview-checkerboard img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:var(--shadow-md)}.preview-stats-bar{padding:8px 14px;background:#fff;border-top:1px solid var(--border-subtle);font-size:11.5px;color:var(--accent-cyan);font-weight:600}.save-web-controls-pane{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;background:#fff}.format-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.format-btn{background:#fff;border:1px solid #cbd5e1;color:var(--text-secondary);padding:6px;border-radius:5px;font-weight:600;font-size:12px;cursor:pointer;transition:all .12s}.format-btn:hover{background:#f1f5f9;color:var(--text-primary)}.format-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.control-group{display:flex;flex-direction:column;gap:5px}.control-label{font-size:12px;font-weight:600;color:var(--text-secondary)}.label-with-value{display:flex;justify-content:space-between;align-items:center}.value-badge{font-size:11px;color:var(--primary);font-weight:600;background:#eef2ff;padding:1px 6px;border-radius:3px}.dimension-readout{font-size:11.5px;color:var(--text-muted);text-align:right;margin-top:2px}.savings-card{background:#f8fafc;border:1px solid var(--border-subtle);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}.savings-header{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px}.savings-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.savings-row.highlight{color:var(--text-primary);font-weight:600;font-size:13px}.savings-badge{margin-top:4px;font-size:12px;font-weight:700;color:var(--accent-green);background:#ecfdf5;border:1px solid #a7f3d0;padding:4px 8px;border-radius:4px;text-align:center}.adjustments-card{width:580px}.adjust-modal-body{padding:18px;display:flex;flex-direction:column;gap:16px}.presets-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.preset-label{font-size:12px;color:var(--text-secondary);font-weight:600}.preset-pill{background:#fff;border:1px solid #cbd5e1;color:var(--text-secondary);font-size:11.5px;padding:3px 9px;border-radius:12px;cursor:pointer}.preset-pill:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.sliders-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.toggles-row{display:flex;align-items:center;gap:18px;padding-top:6px;border-top:1px solid var(--border-subtle)}.new-canvas-card{width:540px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.preset-card{background:#fff;border:1px solid var(--border-subtle);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:3px;cursor:pointer;text-align:left;transition:all .12s}.preset-card:hover{background:#f1f5f9}.preset-card.active{border-color:var(--primary);background:#eef2ff}.p-title{font-size:13px;font-weight:700;color:var(--text-primary)}.p-dim{font-size:11.5px;color:var(--primary);font-weight:600}.p-desc{font-size:11px;color:var(--text-muted)}.custom-dims-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px}.dim-field{display:flex;flex-direction:column;gap:4px}.dim-field label{font-size:11.5px;color:var(--text-secondary)}.styled-input{background:#fff;border:1px solid #cbd5e1;color:var(--text-primary);font-family:inherit;font-size:12.5px;padding:6px 10px;border-radius:6px;outline:none;transition:border-color .15s}.styled-input:focus{border-color:var(--primary)}.styled-input.mini{padding:3px 6px;font-size:12px}.styled-num-input{background:#fff;border:1px solid #cbd5e1;color:var(--text-primary);font-family:inherit;font-size:12px;font-weight:600;padding:3px 6px;border-radius:4px;outline:none;transition:border-color .15s}.styled-num-input:focus{border-color:var(--primary)}.styled-select{background:#fff;border:1px solid #cbd5e1;color:var(--text-primary);font-family:inherit;font-size:12px;padding:5px 8px;border-radius:6px;outline:none;cursor:pointer}.styled-select.mini{padding:3px 6px;font-size:11.5px}.styled-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#cbd5e1;border-radius:2px;outline:none}.styled-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary);border:2px solid #ffffff;cursor:pointer;box-shadow:0 1px 4px #00000040;transition:transform .1s}.styled-range::-webkit-slider-thumb:hover{transform:scale(1.2)}.styled-range.mini{width:80px}.checkbox-label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);cursor:pointer}.color-swatch-input{width:24px;height:24px;padding:0;border:1px solid var(--border-subtle);border-radius:4px;background:transparent;cursor:pointer}.studio-toast{position:fixed;bottom:42px;left:50%;transform:translate(-50%) translateY(20px);background:#0f172af0;backdrop-filter:blur(12px);border:1px solid var(--border-active);color:#f8fafc;padding:8px 18px;border-radius:20px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;transition:all .25s cubic-bezier(.16,1,.3,1);z-index:99999}.studio-toast.visible{opacity:1;transform:translate(-50%) translateY(0)}.shortcuts-card{width:920px;max-width:95vw}.shortcuts-modal-body{padding:20px 24px;overflow-y:auto;max-height:72vh}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.shortcuts-col{display:flex;flex-direction:column;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px}.shortcuts-col h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid #e2e8f0}.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--text-secondary);padding:4px 0;border-bottom:1px dashed #e2e8f0}.shortcut-row:last-child{border-bottom:none}.shortcut-row.highlight{color:#0284c7;font-weight:600}.shortcut-row kbd,.dropdown-item kbd{background:#fff;border:1px solid #cbd5e1;box-shadow:0 1px 2px #0000000f;border-radius:4px;padding:2px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;font-weight:600;color:#0f172a;white-space:nowrap}.shortcut-row.highlight kbd{background:#e0f2fe;border-color:#7dd3fc;color:#0284c7}