:root{--brand-primary: #00aaff;--brand-primary-hover: #33bbff;--brand-primary-glow: rgba(0, 170, 255, .4);--brand-secondary: #00ff88;--brand-secondary-glow: rgba(0, 255, 136, .4);--brand-warning: #ffaa00;--brand-error: #ff4466;--color-success: #00cc66;--color-success-bg: rgba(0, 200, 100, .1);--color-warning: #ffaa00;--color-warning-bg: rgba(255, 170, 0, .1);--color-error: #ff4466;--color-error-hover: #ff5577;--color-error-bg: rgba(255, 68, 102, .1);--color-info: #6fa8dc;--color-info-bg: rgba(100, 100, 255, .1);--color-value: #8899aa;--color-fps-good: #0f0;--color-fps-warn: #ff0;--color-fps-bad: #f80;--color-accent: #4ecdc4;--color-accent-hover: #5dd9d0;--color-accent-dim: rgba(78, 205, 196, .15);--accent: var(--color-accent);--accent-hover: var(--color-accent-hover);--accent-dim: var(--color-accent-dim);--clr-primary: var(--brand-primary);--clr-primary-rgb: 0, 170, 255;--danger: var(--color-error);--color-white: #ffffff;--color-black: #000000;--bg-deepest: #08080c;--bg-base: #0a0a0f;--bg-app: #0d0d12;--bg-panel: #14141a;--bg-surface: #12121a;--bg-section: #1a1a22;--bg-elevated: #1a1a2e;--bg-overlay: #222235;--bg-hover: #22222c;--bg-selected: #2a2a3a;--bg-input: rgba(255, 255, 255, .06);--bg-input-hover: rgba(255, 255, 255, .1);--bg-input-focus: rgba(0, 170, 255, .15);--bg-dark: rgba(0, 0, 0, .3);--border-subtle: rgba(255, 255, 255, .08);--border-default: rgba(255, 255, 255, .12);--border-section: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .2);--border-focus: var(--brand-primary);--text-primary: #e8e8e8;--text-secondary: #b0b0b0;--text-tertiary: #888888;--text-muted: #666666;--text-disabled: #444444;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 60px rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px var(--brand-primary-glow);--shadow-popup: 0 4px 12px rgba(0, 0, 0, .5);--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 10px;--radius-full: 50%;--font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "Consolas", "Monaco", monospace;--font-family: var(--font-sans);--font-size-2xs: 9px;--font-size-xs: 10px;--font-size-sm: 11px;--font-size-base: 12px;--font-size-md: 13px;--font-size-lg: 14px;--font-size-xl: 16px;--font-size-2xl: 20px;--font-size-3xl: 24px;--transition-fast: .12s ease;--transition-normal: .15s ease;--transition-slow: .25s ease;--spacing-2xs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--topbar-height: 44px;--panel-width-left: 280px;--panel-width-right: 300px;--left-panel-width: var(--panel-width-left);--row-height: 28px;--row-height-sm: 24px;--section-header-height: 28px;--panel-header-height: 32px;--label-width: 60px;--checkbox-size: 12px;--slider-track-height: 4px;--slider-height: 16px;--slider-thumb-size: 12px;--btn-height: 22px;--btn-height-sm: 18px;--input-height: 22px;--ui-height: 22px;--ui-height-sm: 18px;--ui-padding-x: 6px;--ui-padding-y: 4px;--ui-gap: 4px;--ui-radius: 0;--ui-bg: var(--bg-section);--ui-bg-hover: var(--bg-hover);--ui-bg-active: var(--bg-selected);--ui-bg-popup: var(--bg-panel);--ui-border: transparent;--ui-border-hover: var(--border-section);--ui-border-focus: var(--color-accent);--ui-text: var(--text-primary);--ui-text-placeholder: var(--text-muted);--ui-text-disabled: var(--text-muted);--ui-transition: .12s ease;--icon-size-xs: 12px;--icon-size-sm: 14px;--icon-size-md: 16px;--icon-size-lg: 20px;--z-base: 1;--z-above: 10;--z-dropdown: 100;--z-sticky: 200;--z-modal-backdrop: 500;--z-modal: 600;--z-popover: 700;--z-tooltip: 800;--z-topbar: 900;--z-max: 1000}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-base);min-height:100vh;font-family:var(--font-sans);font-size:var(--font-size-base);color:var(--text-primary);display:flex}.ui-input,.ui-select,.ui-slider,.ui-radio-group,.ui-checkbox,.ui-button{font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--ui-text);line-height:1}.top-bar{position:fixed;top:0;left:0;right:0;height:var(--topbar-height);background:var(--bg-elevated);border-bottom:1px solid var(--border-default);display:flex;align-items:center;padding:0 16px;gap:16px;z-index:var(--z-topbar)}.top-bar-divider{width:1px;height:20px;background:var(--bg-input-hover)}.top-bar-brand{display:flex;flex-direction:column;line-height:1.2;width:calc(var(--left-panel-width) - 32px);flex-shrink:0}.brand-title{font-size:13px;font-weight:600;color:var(--brand-primary);letter-spacing:2px}.brand-beta{font-style:italic;font-weight:400;font-size:10px;color:var(--color-accent);letter-spacing:0;margin-left:4px}.brand-subtitle{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}.brand-author{color:var(--text-disabled)}.top-bar-spacer{flex:1}.top-bar-section{display:flex;align-items:center;gap:10px;position:relative}.top-bar-section select{font-size:var(--font-size-xs);padding:4px 8px}.top-bar-section select optgroup{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}.alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:8px;background:var(--bg-elevated);border-radius:var(--radius-md)}.align-btn{width:32px;height:32px;border:none;background:var(--bg-surface);color:var(--text-muted);font-size:14px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.align-btn:hover{background:var(--brand-primary);color:#fff}.align-btn[data-align=center]{font-size:20px;font-weight:700}.msaa-toggle{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-muted);cursor:pointer;padding:2px 6px;border-radius:3px;transition:background .15s}.msaa-toggle:hover{background:var(--bg-input)}.msaa-toggle input{width:12px;height:12px;cursor:pointer}.msaa-toggle span{-webkit-user-select:none;user-select:none}.renderer-badge{display:flex;align-items:center;gap:6px;background:#00ff881a;border:1px solid rgba(0,255,136,.3);padding:4px 10px;border-radius:var(--radius-sm)}.renderer-badge .renderer-dot{width:6px;height:6px}.renderer-badge .renderer-name{font-size:10px;font-weight:600;color:var(--brand-secondary);text-transform:uppercase;letter-spacing:.05em}.renderer-badge.webgl{background:#00aaff1a;border-color:#00aaff4d}.renderer-badge.webgl .renderer-name{color:var(--brand-primary)}.renderer-badge.canvas{background:#ffaa001a;border-color:#ffaa004d}.renderer-badge.canvas .renderer-name{color:var(--brand-warning)}.top-bar-btn{background:transparent;border:1px solid var(--border-default);color:var(--text-muted);width:28px;height:28px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.top-bar-btn:hover{background:var(--bg-input);color:var(--text-secondary)}.top-bar-btn.active{background:var(--bg-input-hover);color:var(--text-secondary);border-color:var(--border-strong)}.top-bar-export-btn{display:flex;align-items:center;background:#ff646426;border:1px solid rgba(255,100,100,.4);color:var(--color-error);padding:5px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition-fast)}.top-bar-export-btn:hover{background:#ff646440;border-color:#ff646499}.top-bar #previewFps{width:60px}.top-bar #rendererSelect{width:75px}.top-bar #bbToggleBtn.active{color:var(--brand-primary)}.top-bar #bbToggleBtn:not(.active){opacity:.4}.sidebar{width:320px;height:calc(100vh - 44px);background:var(--border-subtle);border-right:1px solid var(--border-subtle);padding:20px 20px 40px;overflow-y:auto;overflow-x:visible;flex-shrink:0;position:fixed;left:0;top:44px}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:var(--border-subtle)}.sidebar::-webkit-scrollbar-thumb{background:var(--bg-input-hover);border-radius:3px}.sidebar h1{font-size:1.1rem;font-weight:400;margin-bottom:5px;color:var(--brand-primary)}.sidebar .subtitle{font-size:var(--font-size-xs);color:var(--text-disabled);margin-bottom:15px}.version-badge{display:inline-block;background:#00c86433;border:1px solid rgba(0,200,100,.4);color:var(--color-success);font-size:.6rem;padding:2px 6px;border-radius:var(--radius-sm);margin-left:8px}.renderer-indicator{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:15px;font-size:var(--font-size-xs)}.renderer-indicator .dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted)}.renderer-indicator .dot.webgpu{background:var(--brand-secondary);box-shadow:0 0 8px var(--brand-secondary)}.renderer-indicator .dot.webgl{background:var(--brand-primary);box-shadow:0 0 8px var(--brand-primary)}.renderer-indicator .dot.canvas{background:var(--brand-warning)}.renderer-indicator .label{color:var(--text-muted)}.renderer-indicator .value{color:var(--text-primary);font-weight:500}.renderer-indicator select{margin-left:auto;font-size:.65rem;padding:4px 8px}.perf-overlay{position:fixed;bottom:42px;right:10px;background:#000000d9;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 14px;font-family:Consolas,monospace;font-size:11px;z-index:var(--z-topbar);display:none;min-width:140px}.perf-overlay.visible{display:block}.perf-overlay .row{display:flex;justify-content:space-between;gap:15px;margin-bottom:3px}.perf-overlay .row:last-child{margin-bottom:0}.perf-overlay .label{color:var(--text-muted)}.perf-overlay .fps{color:var(--color-fps-good)}.perf-overlay .ms{color:var(--color-fps-warn)}.perf-overlay .renderer{color:var(--brand-primary)}.perf-overlay .layer-fps-section{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-default)}.perf-overlay .layer-fps-section:empty{display:none}.perf-overlay .layer-fps-section .section-title{color:var(--text-muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.perf-overlay .layer-fps-row{display:flex;justify-content:space-between;gap:10px;margin-bottom:2px;font-size:10px}.perf-overlay .layer-fps-row .layer-name{color:var(--text-muted);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.perf-overlay .layer-fps-row .target-fps{color:var(--color-fps-bad)}.perf-overlay .gpu-resources-section{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-default)}.perf-overlay .gpu-resources-section .section-title{color:var(--text-muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.perf-overlay .resource-row{display:flex;justify-content:space-between;gap:10px;margin-bottom:2px;font-size:10px}.perf-overlay .resource-label{color:var(--text-muted)}.perf-overlay .resource-count{color:var(--color-fps-good);font-variant-numeric:tabular-nums}.perf-overlay .resource-count.changed{animation:flash-change .3s ease-out}@keyframes flash-change{0%{color:var(--color-white)}to{color:var(--color-fps-good)}}.tabs{display:flex;gap:5px;margin-bottom:15px}.tab{flex:1;padding:10px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-size:var(--font-size-sm);text-align:center;transition:all var(--transition-fast)}.tab:hover{background:var(--bg-input)}.tab.active{background:#00aaff26;border-color:#0af6;color:var(--brand-primary)}.input-section{display:none;margin-bottom:15px}.input-section.active{display:block}.text-input{width:100%;padding:12px;font-size:1.4rem;text-align:center;background:var(--bg-input);border:2px solid rgba(0,170,255,.3);border-radius:var(--radius-lg);color:var(--text-primary);outline:none;margin-bottom:10px;letter-spacing:.05em}.text-input:focus{border-color:#0afc}.font-select-row{display:flex;gap:6px;margin-bottom:8px}.font-dropdown,.weight-dropdown{padding:8px 10px;font-size:var(--font-size-sm);border-radius:var(--radius-md)}.font-dropdown{flex:2}.weight-dropdown{flex:1}.load-cdn-btn{width:100%;padding:10px 14px;background:#0af3;border:1px solid rgba(0,170,255,.4);border-radius:var(--radius-md);color:var(--brand-primary);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;margin-bottom:10px}.load-cdn-btn:hover{background:#00aaff4d}.load-cdn-btn:disabled{opacity:.5;cursor:wait}.separator-text{text-align:center;font-size:var(--font-size-xs);color:var(--text-disabled);margin:10px 0}.font-upload-area{border:2px dashed var(--border-default);border-radius:var(--radius-lg);padding:15px;text-align:center;margin-bottom:10px;transition:all var(--transition-fast);cursor:pointer}.font-upload-area:hover{border-color:#00aaff80;background:#00aaff0d}.font-upload-area.dragover{border-color:var(--brand-primary);background:#00aaff1a}.font-upload-area input{display:none}.font-upload-icon{font-size:1.5rem;margin-bottom:5px}.font-upload-text{font-size:var(--font-size-sm);color:var(--text-muted)}.font-upload-text strong{color:var(--brand-primary)}.current-font{background:#00c8641a;border:1px solid rgba(0,200,100,.3);border-radius:var(--radius-md);padding:8px 12px;font-size:var(--font-size-sm);color:var(--color-success);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.current-font .font-name{font-weight:600}.current-font .font-info{color:var(--text-muted);font-size:.65rem}.status-box{background:#6464ff1a;border:1px solid rgba(100,100,255,.3);border-radius:var(--radius-md);padding:8px 10px;font-size:var(--font-size-xs);color:#aaf;margin-bottom:10px}.info-box{background:#00aaff14;border:1px solid rgba(0,170,255,.2);border-radius:var(--radius-md);padding:8px 10px;font-size:var(--font-size-xs);color:#8cf;margin-top:12px}.left-panel{width:var(--left-panel-width);background:var(--bg-panel);border-right:1px solid var(--border-section);display:flex;flex-direction:column;overflow:hidden;position:fixed;top:44px;left:0;height:calc(100vh - 44px);z-index:var(--z-above)}.panel-section{display:flex;flex-direction:column;overflow:hidden}.properties-section{flex:0 0 70%;display:flex;flex-direction:row}.properties-color-bar{width:3px;background:var(--layer-color, #ff6b6b);flex-shrink:0}.properties-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.properties-section.is-hidden .properties-content{opacity:.5}.properties-section.is-hidden .properties-color-bar{opacity:.4}.selected-layer-header{height:32px;display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-section) 100%,white 8%),var(--bg-section));border-bottom:1px solid var(--border-section);flex-shrink:0}.selected-layer-name{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layers-section{flex:0 0 30%}.layers-header{height:var(--panel-header-height);display:flex;align-items:stretch;gap:var(--spacing-xs);padding:0 var(--spacing-sm);padding-left:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-section) 100%,white 8%),var(--bg-section));border-bottom:1px solid var(--border-section);flex-shrink:0}.layers-header-bar{width:3px;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-hover) 100%,white 15%),var(--bg-hover));flex-shrink:0;margin-right:var(--spacing-xs)}.layers-header>*:not(.layers-header-bar){align-self:center}.layers-icon{font-size:12px;color:var(--text-secondary);width:16px}.layers-title{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary)}.layers-count{font-size:var(--font-size-xs);color:var(--text-muted);flex:1}.layers-add-btn{width:22px;height:22px;border-radius:0}.layers-add-btn ui-icon{font-size:12px}.section-scroll{flex:1;overflow-y:auto;overflow-x:hidden}.section-scroll::-webkit-scrollbar{width:6px}.section-scroll::-webkit-scrollbar-track{background:transparent}.section-scroll::-webkit-scrollbar-thumb{background:var(--border-section);border-radius:3px}.section-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.panel-splitter{position:absolute;left:0;right:0;top:70%;height:10px;margin-top:-1px;background:transparent;cursor:row-resize;display:flex;align-items:center;justify-content:center;z-index:var(--z-above)}.splitter-handle{width:40px;height:2px;background:var(--border-section);border-radius:1px}.panel-splitter:hover .splitter-handle{background:var(--accent)}.main{flex:1;display:flex;flex-direction:column;position:fixed;left:var(--left-panel-width);top:44px;right:0;bottom:0}.viewport{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#0a0a12;background-image:linear-gradient(45deg,#0d0d15 25%,transparent 25%),linear-gradient(-45deg,#0d0d15 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0d0d15 75%),linear-gradient(-45deg,transparent 75%,#0d0d15 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.viewport canvas{transform-origin:center center;transition:transform .15s ease-out;box-shadow:0 0 40px #00000080}.selection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center}.selection-box{position:absolute;border:1px solid var(--brand-primary);pointer-events:auto;cursor:move}.selection-box:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--brand-primary);opacity:.05}.control-point{position:absolute;width:8px;height:8px;background:#fff;border:1px solid var(--brand-primary);border-radius:1px;pointer-events:auto}.control-point.corner{cursor:nwse-resize}.control-point.top-left{top:-4px;left:-4px;cursor:nwse-resize}.control-point.top-right{top:-4px;right:-4px;cursor:nesw-resize}.control-point.bottom-left{bottom:-4px;left:-4px;cursor:nesw-resize}.control-point.bottom-right{bottom:-4px;right:-4px;cursor:nwse-resize}.control-point.edge{width:6px;height:6px}.control-point.top-center{top:-3px;left:50%;transform:translate(-50%);cursor:ns-resize}.control-point.bottom-center{bottom:-3px;left:50%;transform:translate(-50%);cursor:ns-resize}.control-point.middle-left{top:50%;left:-3px;transform:translateY(-50%);cursor:ew-resize}.control-point.middle-right{top:50%;right:-3px;transform:translateY(-50%);cursor:ew-resize}.rotation-handle{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:10px;height:10px;background:#fff;border:1px solid var(--brand-primary);border-radius:50%;cursor:grab;pointer-events:auto}.rotation-handle:active{cursor:grabbing}.rotation-line{position:absolute;top:-20px;left:50%;transform:translate(-50%);width:1px;height:20px;background:var(--brand-primary);pointer-events:none}.zoom-bar{height:32px;background:var(--bg-elevated);border-top:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 15px;position:relative}.zoom-btn{width:24px;height:24px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-size-xl);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.zoom-btn:hover{background:var(--border-default);color:var(--text-primary)}.zoom-info{font-size:var(--font-size-sm);color:var(--text-muted)}.zoom-spacer{flex:1}.export-btn{padding:5px 12px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.export-btn:hover{box-shadow:0 2px 10px #ee5a2466}.zoom-bar .ui-select .ui-select-trigger{border:1px solid var(--border-subtle);background:transparent}.zoom-bar .ui-select .ui-select-trigger:hover{border-color:var(--border-default);background:var(--bg-hover)}.zoom-bar .ui-select.is-open .ui-select-trigger{border-color:var(--accent)}.ui-select[data-dropdown-up] .ui-select-arrow{transform:rotate(180deg)}.ui-select[data-dropdown-up].is-open .ui-select-arrow{transform:rotate(0)}.zoom-bar-left{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm)}.zoom-bar-center{display:flex;align-items:center;gap:8px;position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-sm)}.zoom-bar-right{display:flex;align-items:center;gap:8px;font-size:var(--font-size-sm)}.footer-status{color:var(--accent)}.footer-divider{color:var(--text-muted)}.footer-info{color:var(--text-secondary)}.btn-primary,.btn-secondary{padding:10px 24px;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-secondary{background:var(--bg-input);border:1px solid var(--border-default);color:var(--text-secondary)}.btn-secondary:hover{background:var(--bg-input-hover);border-color:var(--border-strong);color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg,var(--brand-primary),#0066cc);border:none;color:var(--text-primary);box-shadow:0 2px 8px var(--brand-primary-glow)}.btn-primary:hover{box-shadow:0 4px 16px var(--brand-primary-glow)}.btn-primary:disabled{background:var(--text-disabled);box-shadow:none;cursor:not-allowed;opacity:.6}.btn-small{padding:6px 12px;font-size:var(--font-size-xs);background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.btn-small:hover{background:var(--bg-input-hover);border-color:var(--border-strong);color:var(--text-primary)}.btn-group{display:flex;gap:0}.btn-toggle{padding:6px 14px;font-size:var(--font-size-xs);background:var(--bg-input);border:1px solid var(--border-default);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.btn-toggle:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.btn-toggle:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.btn-toggle:not(:first-child){border-left:none}.btn-toggle:hover{background:var(--bg-input-hover);color:var(--text-secondary)}.btn-toggle.active{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-white)}.ui-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;transition:color .15s,background .15s}.ui-icon-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.ui-icon-btn.active{color:var(--accent)}.ui-icon-btn ui-icon{font-size:16px}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:22px;padding:0 10px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:0;color:var(--text-primary);font-family:inherit;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all .12s;white-space:nowrap}.ui-btn:hover{background:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.ui-btn:active{background:var(--ui-bg-active)}.ui-btn:focus{outline:none;border-color:var(--ui-border-focus)}ui-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}ui-icon svg{display:block}.ui-btn ui-icon{font-size:12px}.ui-btn--primary{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-white);font-weight:600}.ui-btn--primary:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)}.ui-btn--ghost{background:transparent;border-color:transparent}.ui-btn--ghost:hover{background:var(--ui-bg-hover);border-color:transparent;color:var(--text-primary)}.ui-btn--outline{background:transparent;border-color:var(--border-section);color:var(--text-secondary)}.ui-btn--outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.ui-btn--danger{background:var(--brand-error);border-color:var(--brand-error);color:var(--color-white)}.ui-btn--danger:hover{background:var(--color-error-hover);border-color:var(--color-error-hover)}.ui-btn--danger.ui-btn--ghost{background:transparent;border-color:transparent;color:var(--brand-error)}.ui-btn--danger.ui-btn--ghost:hover{background:#ff446626;color:var(--color-error-hover)}.ui-btn:disabled,.ui-btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.ui-btn--icon{width:22px;height:22px;padding:0}.ui-btn--caret:after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--text-muted);margin-left:4px}.input-label{font-size:var(--font-size-xs);color:var(--text-muted);margin-left:8px}.ui-input{position:relative;display:inline-flex;align-items:center;height:var(--ui-height);background:var(--ui-bg);border:1px solid var(--ui-border);transition:border-color var(--ui-transition),background var(--ui-transition)}.ui-input:hover{border-color:var(--ui-border-hover)}.ui-input:focus-within{border-color:var(--ui-border-focus)}.ui-input input{flex:1;min-width:0;height:100%;padding:0 var(--ui-padding-x);background:transparent;border:none;outline:none;font:inherit;color:inherit}.ui-input input::placeholder{color:var(--ui-text-placeholder)}.ui-input input[type=number]::-webkit-outer-spin-button,.ui-input input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ui-input input[type=number]{-moz-appearance:textfield}.ui-input-label{-webkit-user-select:none;user-select:none;padding:0 6px;color:var(--text-muted);font-size:var(--font-size-xs);font-weight:500;border-right:1px solid var(--border-subtle);height:100%;display:flex;align-items:center;flex-shrink:0}.ui-input.is-scrubbing{border-color:var(--accent)}.ui-input.is-scrubbing input{color:var(--accent)}body.is-scrubbing,body.is-scrubbing *{cursor:ew-resize!important;-webkit-user-select:none;user-select:none}.ui-input.ui-input--sm{height:var(--ui-height-sm)}.ui-input.ui-input--flex{flex:1}.ui-input.ui-input--w60{width:60px}.ui-input.ui-input--w64{width:64px}.ui-input.ui-input--w80{width:80px}.ui-input.ui-input--w100{width:100px}.ui-input--textarea{height:auto;align-items:stretch}.ui-input--textarea textarea{flex:1;min-width:0;padding:var(--ui-padding-y) var(--ui-padding-x);background:transparent;border:none;outline:none;font:inherit;color:inherit;resize:none;min-height:calc(var(--ui-height) * 2);max-height:calc(var(--ui-height) * 5);overflow-y:auto;line-height:1.4}.ui-input--textarea textarea::placeholder{color:var(--ui-text-placeholder)}.ui-input--textarea textarea::-webkit-scrollbar{width:6px}.ui-input--textarea textarea::-webkit-scrollbar-track{background:transparent}.ui-input--textarea textarea::-webkit-scrollbar-thumb{background:var(--border-section);border-radius:3px}.ui-input--textarea textarea::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}select{background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}select:hover{background:var(--border-default);border-color:var(--border-strong)}select:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 2px var(--brand-primary-glow)}select option{background:var(--bg-elevated);color:var(--text-primary)}select optgroup{background:var(--bg-surface);color:var(--text-muted);font-style:normal;font-weight:600}.select-standard,select{font-size:var(--font-size-sm);padding:6px 10px}.select-compact{font-size:var(--font-size-xs);padding:4px 8px}.ui-select{position:relative;display:inline-flex;height:var(--ui-height)}.ui-select.ui-select--flex{flex:1}.ui-select-trigger{display:flex;align-items:center;width:100%;height:100%;padding:0 var(--ui-padding-x);background:var(--ui-bg);border:1px solid var(--ui-border);cursor:pointer;transition:border-color var(--ui-transition);gap:var(--ui-gap);font-family:inherit;font-size:inherit;color:inherit}.ui-select-trigger:hover{border-color:var(--ui-border-hover)}.ui-select.is-open .ui-select-trigger,.ui-select-trigger:focus{border-color:var(--ui-border-focus);outline:none}.ui-select-value{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-select-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--text-muted);transition:transform var(--ui-transition),border-color var(--ui-transition)}.ui-select:hover .ui-select-arrow{border-top-color:var(--text-secondary)}.ui-select.is-open .ui-select-arrow{transform:rotate(180deg);border-top-color:var(--accent)}.ui-select-dropdown{position:fixed;min-width:100%;max-height:200px;overflow-y:auto;background:var(--ui-bg-popup);border:1px solid var(--border-section);box-shadow:var(--shadow-md);z-index:var(--z-max);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition)}.ui-select.is-open .ui-select-dropdown,.ui-select-dropdown.is-open{opacity:1;visibility:visible;transform:translateY(0)}.ui-select-option{display:flex;align-items:center;padding:6px var(--ui-padding-x);cursor:pointer;transition:background var(--ui-transition)}.ui-select-option:hover{background:var(--ui-bg-hover)}.ui-select-option.is-selected{background:var(--accent-dim);color:var(--accent)}.ui-select-option.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;color:var(--text-muted)}.ui-select-option.disabled:hover{background:transparent}.ui-select-group{padding:6px var(--ui-padding-x) 4px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;pointer-events:none}.ui-select-group:not(:first-child){margin-top:4px}.ui-select-divider{height:1px;background:var(--border-subtle);margin:4px 0}.ui-select-dropdown::-webkit-scrollbar{width:6px}.ui-select-dropdown::-webkit-scrollbar-track{background:transparent}.ui-select-dropdown::-webkit-scrollbar-thumb{background:var(--border-section);border-radius:3px}.ui-dropdown{position:relative;display:inline-flex}.ui-dropdown-trigger{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-section);color:var(--text-secondary);cursor:pointer;transition:all var(--ui-transition)}.ui-dropdown-trigger:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.ui-dropdown.is-open .ui-dropdown-trigger{border-color:var(--accent);color:var(--accent)}.ui-dropdown-menu{position:fixed;min-width:120px;padding:4px 0;background:var(--ui-bg-popup);border:1px solid var(--border-section);box-shadow:var(--shadow-md);z-index:var(--z-max);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition)}.ui-dropdown.is-open .ui-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.ui-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;background:none;border:none;color:var(--text-primary);font:inherit;font-size:var(--font-size-sm);text-align:left;cursor:pointer;transition:background var(--ui-transition)}.ui-dropdown-item:hover{background:var(--ui-bg-hover)}.ui-dropdown-item:disabled{opacity:.4;cursor:not-allowed}.ui-dropdown-item:disabled:hover{background:none}.ui-dropdown-shortcut{margin-left:auto;font-size:var(--font-size-xs);color:var(--text-tertiary);opacity:.7}.ui-dropdown-divider{height:1px;margin:4px 0;background:var(--border-subtle)}.ui-dropdown-item.has-submenu{position:relative}.ui-dropdown-item.has-submenu .submenu-arrow{margin-left:auto;font-size:10px;color:var(--text-muted)}.context-submenu{position:absolute;left:100%;top:0;min-width:160px;padding:4px 0;background:var(--ui-bg-popup);border:1px solid var(--border-section);box-shadow:var(--shadow-md);z-index:calc(var(--z-max) + 1);opacity:0;visibility:hidden;transform:translate(-8px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition);pointer-events:none}.ui-dropdown-item.has-submenu:hover>.context-submenu{opacity:1;visibility:visible;transform:translate(0);pointer-events:auto}.context-submenu .submenu-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;background:none;border:none;color:var(--text-primary);font:inherit;font-size:var(--font-size-sm);text-align:left;cursor:pointer;transition:background var(--ui-transition)}.context-submenu .submenu-item:hover{background:var(--ui-bg-hover)}.context-submenu .submenu-group{padding:6px 10px 4px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;pointer-events:none}.context-submenu .submenu-group:not(:first-child){margin-top:4px;border-top:1px solid var(--border-subtle);padding-top:8px}.add-effect-select{position:relative;margin:var(--spacing-xs);margin-top:var(--spacing-sm)}.add-effect-select .add-effect-btn{width:100%;margin:0}.add-effect-select .ui-select-dropdown{position:absolute;bottom:100%;left:0;width:200%;margin-bottom:4px;max-height:200px;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border-section);box-shadow:0 -4px 12px #00000080;z-index:var(--z-max);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition)}.add-effect-select.is-open .ui-select-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.add-effect-select .ui-select-option{display:flex;align-items:center;padding:6px 10px;cursor:pointer;font-size:var(--font-size-sm);color:var(--text-primary);transition:background var(--ui-transition)}.add-effect-select .ui-select-option:hover{background:var(--bg-hover)}.add-effect-select .ui-select-option:active{background:var(--accent-dim)}.ui-slider{position:relative;display:flex;align-items:center;height:var(--slider-height);flex:1;cursor:ew-resize}.ui-slider-track{position:relative;width:100%;height:100%;background:var(--ui-bg);border:1px solid var(--border-subtle);overflow:hidden}.ui-slider-fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);pointer-events:none}.ui-slider-thumb{position:absolute;top:0;width:3px;height:100%;background:var(--text-primary);transform:translate(-50%);transition:background var(--ui-transition);pointer-events:none}.ui-slider:hover .ui-slider-thumb,.ui-slider.is-active .ui-slider-thumb{background:var(--color-white)}.ui-slider-value{width:28px;text-align:right;font-size:var(--font-size-xs);color:var(--accent);margin-left:var(--ui-gap);flex-shrink:0}.checkbox-label{display:flex;align-items:center;gap:10px;font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast)}.checkbox-label:hover{color:var(--text-primary)}.checkbox-label input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--brand-primary)}.transparent-hint{font-size:var(--font-size-xs);margin-left:4px;transition:color var(--transition-fast)}.ui-checkbox{display:inline-flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox input[type=checkbox]{display:none}.ui-checkbox-box{width:var(--checkbox-size);height:var(--checkbox-size);background:var(--ui-bg);border:1px solid var(--border-section);display:flex;align-items:center;justify-content:center;transition:background var(--ui-transition),border-color var(--ui-transition)}.ui-checkbox:hover .ui-checkbox-box{border-color:var(--accent)}.ui-checkbox input:checked+.ui-checkbox-box{background:var(--accent);border-color:var(--accent)}.ui-checkbox input:checked+.ui-checkbox-box:after{content:"";width:10px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(0,0,0,0.7)'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.ui-checkbox-label{font-size:var(--font-size-sm);color:var(--text-primary)}.msaa-label{cursor:pointer}.msaa-label:hover{color:var(--accent)}.ui-radio-group{display:inline-flex;height:var(--ui-height);border:1px solid var(--border-subtle);overflow:hidden}.ui-radio-group.ui-radio-group--flex{flex:1}.ui-radio-option{display:flex;align-items:center;justify-content:center;padding:0 8px;background:var(--ui-bg);border:none;border-right:1px solid var(--border-subtle);color:var(--text-secondary);font:inherit;font-size:var(--font-size-xs);cursor:pointer;transition:background var(--ui-transition),color var(--ui-transition);flex:1}.ui-radio-option:last-child{border-right:none}.ui-radio-option:hover{background:var(--ui-bg-hover);color:var(--text-primary)}.ui-radio-option.is-selected{background:var(--accent-dim);color:var(--accent)}.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-topbar);align-items:center;justify-content:center}.modal-overlay.active{display:flex}.modal{background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--border-default);min-width:400px;max-width:90vw;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-subtle);background:var(--bg-overlay);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.modal-header span{font-size:var(--font-size-lg);font-weight:600;color:var(--text-primary)}.export-resolution{font-size:var(--font-size-sm)!important;font-weight:500!important;color:var(--color-value)!important;background:var(--bg-input);padding:4px 10px;border-radius:var(--radius-sm);margin-left:auto;font-variant-numeric:tabular-nums}.resolution-info{font-size:var(--font-size-sm)!important;color:var(--text-muted)!important;cursor:help;margin-left:0;margin-right:12px;opacity:.6;transition:opacity var(--transition-fast)}.resolution-info:hover{opacity:1;color:var(--brand-warning)!important}.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0;line-height:1;transition:color var(--transition-fast)}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:20px}.modal-row{display:flex;align-items:center;gap:10px;margin-bottom:15px}.modal-row>label:first-child{width:70px;font-size:var(--font-size-sm);color:var(--text-muted)}.modal-row span{font-size:var(--font-size-xs);color:var(--text-muted)}.modal-row select,.modal-row input[type=number]{padding:8px 12px;font-size:var(--font-size-sm)}.modal-row input[type=number]{width:70px;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary)}.modal-row input[type=number]:focus{outline:none;border-color:var(--brand-primary)}.custom-size-inline{display:flex;align-items:center;gap:8px}.custom-size-inline .size-unit{color:var(--text-muted);font-size:var(--font-size-sm)}.modal-row select optgroup{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px}.modal-row input[type=range]{flex:1;height:6px;background:var(--bg-input);border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none}.modal-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--brand-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 8px var(--brand-primary-glow);transition:transform var(--transition-fast)}.modal-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.modal-row input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--brand-primary);border-radius:50%;cursor:pointer;border:none}#exportQualityValue{min-width:45px;text-align:right;color:var(--text-secondary);font-variant-numeric:tabular-nums}.modal-progress{margin-top:15px;display:flex;align-items:center;gap:12px}.progress-bar{flex:1;height:8px;background:var(--bg-input);border-radius:var(--radius-sm);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));width:0%;transition:width .15s ease-out}.progress-text{font-size:var(--font-size-xs);color:var(--text-muted);min-width:90px;font-variant-numeric:tabular-nums}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--border-subtle);background:var(--bg-surface);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.modal-lg{min-width:500px;max-width:600px}.export-dialog-header{display:flex;align-items:center;gap:8px}.gradient-dialog{--width: 420px}.gradient-dialog .gradient-section-card:has(.gradient-type-row){min-height:155px}.about-modal .ui-modal-body{text-align:center;padding:24px 32px 32px}.about-brand{margin-bottom:16px}.about-title{display:block;font-size:24px;font-weight:700;letter-spacing:2px;color:var(--text-primary);margin-bottom:4px}.about-version{display:inline-block;font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-dim);padding:2px 8px;border-radius:10px}.about-updated{display:block;font-size:11px;color:var(--text-muted);margin-top:6px}.about-description{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:0 0 20px}.about-author{font-size:12px;color:var(--text-muted);margin-bottom:16px}.about-author strong{color:var(--text-primary)}.about-author a{color:var(--accent);text-decoration:none}.about-author a:hover{text-decoration:underline}.about-links{margin-bottom:20px}.about-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--accent);text-decoration:none;padding:6px 12px;border-radius:var(--radius-sm);transition:background .15s}.about-link:hover{background:var(--accent-dim)}.about-link ui-icon{font-size:14px}.about-copyright{font-size:10px;color:var(--text-muted);opacity:.6}.ui-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.ui-modal-overlay.is-open{opacity:1;visibility:visible}.ui-modal{background:var(--bg-panel);border:1px solid var(--border-section);border-radius:var(--radius-lg);box-shadow:0 20px 60px #00000080;max-width:90vw;max-height:85vh;display:flex;flex-direction:column;transform:translateY(20px) scale(.95);transition:transform .2s}.ui-modal-overlay.is-open .ui-modal{transform:translateY(0) scale(1)}.ui-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-subtle);flex-shrink:0}.ui-modal-title{font-size:14px;font-weight:600;color:var(--text-primary)}.ui-modal-close{width:28px;height:28px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.ui-modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.ui-modal-body{flex:1;overflow-y:auto;padding:20px}.ui-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--border-subtle);flex-shrink:0}.ui-modal-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;overflow-x:auto}.ui-modal-tab{padding:10px 14px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-family:inherit;font-size:11px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.ui-modal-tab:hover{color:var(--text-primary)}.ui-modal-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}.ui-tab-content{display:none}.ui-tab-content.is-active{display:block}.ui-showcase-modal{min-width:400px;max-width:700px}.showcase-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;min-height:28px}.showcase-row:last-child{margin-bottom:0}.showcase-label{width:90px;font-size:11px;color:var(--text-secondary);flex-shrink:0}.tokens-section{margin-bottom:20px}.tokens-section:last-child{margin-bottom:0}.tokens-section h4{font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}.token-row{display:flex;align-items:center;gap:12px;padding:4px 0;font-size:11px}.token-name{font-family:monospace;color:var(--accent);min-width:140px}.token-value{color:var(--text-secondary)}.token-swatch{width:16px;height:16px;border:1px solid var(--border-section);flex-shrink:0}.token-desc{margin-left:auto;color:var(--text-muted);font-size:10px}.token-rule{padding:6px 0;font-size:11px;color:var(--text-secondary);line-height:1.5}.token-rule strong{color:var(--text-primary)}.icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.icon-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--ui-bg);border-radius:0;font-size:10px;color:var(--text-secondary)}.icon-item ui-icon{font-size:14px;color:var(--text-primary);flex-shrink:0}.color-palette{display:flex;flex-direction:column;gap:8px}.color-palette-item{display:grid;grid-template-columns:32px 140px 70px 1fr;align-items:center;gap:12px;padding:4px 0}.color-palette-swatch{width:32px;height:22px;border-radius:0;flex-shrink:0}.color-palette-name{font-size:11px;font-family:monospace;color:var(--text-primary)}.color-palette-hex{font-size:10px;font-family:monospace;color:var(--text-muted)}.color-palette-use{font-size:10px;color:var(--text-secondary)}.rules-section{margin-bottom:20px}.rules-section:last-child{margin-bottom:0}.rules-section h4{font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}.rules-list{list-style:none;margin:0;padding:0}.rules-list li{padding:5px 0;font-size:11px;color:var(--text-secondary);line-height:1.5;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.rules-list li strong{color:var(--text-primary)}.rules-list li code{background:var(--ui-bg);padding:2px 6px;font-family:monospace;font-size:10px;color:var(--accent)}.rules-list li ui-icon{font-size:14px;color:var(--text-primary)}.color-chip{display:inline-block;width:14px;height:14px;border:1px solid var(--border-section);vertical-align:middle}.rules-note{margin-top:12px;padding:8px 10px;background:#ff44661a;border-left:2px solid var(--brand-error);font-size:10px;color:var(--text-secondary)}.text-sample{margin-left:auto;font-size:11px;font-weight:500}.ui-tab-content[data-tab=selects]{min-height:250px}.showcase-select .ui-select-option{display:flex;align-items:center;gap:8px}.showcase-select .ui-select-option ui-icon{font-size:12px;opacity:.7}.component-desc{font-size:10px;color:var(--text-muted);margin-bottom:12px;line-height:1.4}.component-demo{background:var(--bg-section);border:1px solid var(--border-subtle);padding:12px;margin-bottom:10px}.component-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.component-row:last-child{margin-bottom:0}.component-note{font-size:10px;color:var(--text-muted);margin-left:auto}.component-spec{font-size:10px;color:var(--text-secondary);line-height:1.6;padding:8px 10px;background:var(--ui-bg);border-left:2px solid var(--accent)}.component-spec strong{color:var(--text-primary)}.component-spec code{background:#4ecdc41a;padding:1px 4px;font-family:monospace;font-size:9px;color:var(--accent)}.showcase-drag-handle{opacity:.5}.showcase-prop-demo{background:var(--bg-section);border:1px solid var(--border-subtle);padding:0}.showcase-prop-row{background:transparent!important}.showcase-layer{cursor:default!important}.showcase-layer .drag-handle{cursor:grab}.showcase-collapsible .section-header{cursor:pointer}.showcase-effect{cursor:default}.showcase-effect .effect-header{cursor:pointer}.showcase-color-popup-preview{background:var(--bg-panel);border:1px solid var(--border-section);padding:10px;display:inline-block}[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{position:absolute;z-index:var(--z-modal);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s}[data-tooltip]:after{content:attr(data-tooltip);bottom:calc(100% + 6px);left:50%;transform:translate(-50%);padding:4px 8px;background:var(--bg-overlay);color:var(--text-primary);font-size:var(--font-size-xs);font-weight:400;white-space:nowrap;border:1px solid var(--border-default);border-radius:3px;box-shadow:0 2px 8px #0000004d}[data-tooltip]:before{content:"";bottom:calc(100% + 2px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--border-default)}[data-tooltip]:hover:before,[data-tooltip]:hover:after{opacity:1;visibility:visible;transition-delay:.4s}[data-tooltip].is-open:hover:before,[data-tooltip].is-open:hover:after,[data-tooltip].active:hover:before,[data-tooltip].active:hover:after,.is-open>[data-tooltip]:hover:before,.is-open>[data-tooltip]:hover:after{opacity:0;visibility:hidden;transition-delay:0s}[data-tooltip-pos=bottom]:after{bottom:auto;top:calc(100% + 6px)}[data-tooltip-pos=bottom]:before{bottom:auto;top:calc(100% + 2px);border-top-color:transparent;border-bottom-color:var(--border-default)}.ui-color-trigger{width:20px;height:20px;border:1px solid var(--border-section);cursor:pointer;flex-shrink:0;transition:border-color var(--ui-transition)}.ui-color-trigger:hover,.ui-color-trigger.is-open{border-color:var(--accent)}.ui-color-popup{position:fixed;width:220px;padding:10px;background:var(--bg-panel);border:1px solid var(--border-section);box-shadow:0 8px 24px #0009;z-index:100000;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.ui-color-popup.is-open{opacity:1;visibility:visible;transform:translateY(0)}.ui-color-gradient{position:relative;width:100%;height:140px;margin-bottom:10px;cursor:crosshair;overflow:hidden}.ui-color-gradient-hue{position:absolute;top:0;right:0;bottom:0;left:0;background:red}.ui-color-gradient-white{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#fff 0%,transparent 100%)}.ui-color-gradient-black{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 0%,#000 100%)}.ui-color-gradient-cursor{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0000004d,inset 0 0 0 1px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.ui-color-slider{position:relative;width:100%;height:14px;margin-bottom:8px;cursor:ew-resize;border:1px solid var(--border-subtle)}.ui-color-slider--hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ui-color-slider--alpha{background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(-45deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(-45deg,transparent 75%,#333 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.ui-color-slider--alpha-gradient{position:absolute;top:0;right:0;bottom:0;left:0}.ui-color-slider-thumb{position:absolute;top:-2px;width:3px;height:calc(100% + 4px);background:var(--color-white);border:1px solid rgba(0,0,0,.4);transform:translate(-50%);pointer-events:none}.ui-color-row{display:flex;align-items:center;gap:8px;margin-top:2px}.ui-color-preview{width:32px;height:22px;border:1px solid var(--border-section);display:flex;flex-shrink:0}.ui-color-preview-new,.ui-color-preview-old{flex:1}.ui-color-input{flex:1;min-width:0;height:22px;padding:0 6px;background:var(--ui-bg);border:1px solid transparent;border-radius:var(--ui-radius);color:var(--text-primary);font-family:monospace;font-size:11px;text-transform:uppercase;transition:border-color var(--ui-transition)}.ui-color-input:focus{outline:none;border-color:var(--accent)}.ui-color-eyedropper{width:28px;min-width:28px;height:22px;padding:0;background:var(--ui-bg);border:1px solid var(--border-subtle);border-radius:var(--ui-radius);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--ui-transition)}.ui-color-eyedropper:hover{border-color:var(--accent);color:var(--text)}.ui-color-swatches{display:flex;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-subtle)}.ui-color-swatch{width:18px;height:18px;border:1px solid var(--border-subtle);cursor:pointer;transition:transform .1s,border-color .1s}.ui-color-swatch:hover{transform:scale(1.15);border-color:var(--text-secondary)}.icon{width:14px;height:14px;vertical-align:middle;margin-right:5px;flex-shrink:0;opacity:.7}.scene-navigator{--nav-bg-opacity: .5;--nav-text-opacity: .8;position:fixed;top:44px;right:0;width:180px;max-height:calc(100vh - 86px);background:rgba(0,0,0,var(--nav-bg-opacity));font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);overflow-y:auto;z-index:var(--z-dropdown);opacity:0;pointer-events:none;transform:translate(10px);transition:opacity .15s ease,transform .15s ease}.scene-navigator.is-visible{opacity:1;pointer-events:auto;transform:translate(0)}.scene-navigator-content{padding:var(--spacing-xs);opacity:var(--nav-text-opacity)}.nav-header{display:flex;align-items:center;gap:4px;padding-bottom:var(--spacing-xs);margin-bottom:var(--spacing-xs);border-bottom:1px solid rgba(255,255,255,.08);font-size:9px;color:var(--text-muted)}.nav-label{opacity:.6}.nav-scrubber{color:var(--text-secondary);cursor:ew-resize;padding:0 2px;min-width:20px;text-align:center;-webkit-user-select:none;user-select:none;transition:color .1s}.nav-scrubber:hover,.nav-scrubber.is-dragging{color:var(--accent)}.nav-empty{color:var(--text-muted);font-style:italic;text-align:center;padding:var(--spacing-md)}.nav-node{margin-bottom:2px;--layer-color-faded: color-mix(in srgb, var(--layer-color, #888) 85%, transparent)}.nav-node.is-selected>.nav-layer{font-weight:600}.nav-layer{display:flex;align-items:center;gap:4px;padding:3px 4px;cursor:pointer;border-radius:2px;color:var(--layer-color, var(--text-secondary));transition:background .1s}.nav-layer:hover{background:#ffffff1a}.nav-color{width:3px;height:10px;background:var(--layer-color, var(--text-muted));border-radius:1px;flex-shrink:0}.nav-toggle{width:10px;text-align:center;font-size:8px;opacity:.6}.nav-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-children{margin-left:14px;border-left:1px solid var(--layer-color-faded);padding-left:8px}.nav-item{padding:2px 4px;cursor:pointer;border-radius:2px;color:var(--layer-color-faded);transition:background .1s}.nav-item:hover{background:#ffffff1a;color:var(--layer-color, var(--text-primary))}.nav-effect{padding-left:10px;font-size:10px}.nav-effect-pp{padding-left:20px;font-size:9px}.scene-navigator::-webkit-scrollbar{width:4px}.scene-navigator::-webkit-scrollbar-track{background:transparent}.scene-navigator::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:2px}.scene-navigator::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.scene-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.scene-panel-title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-disabled)}.scene-panel-actions{display:flex;gap:6px}.scene-tree{display:flex;flex-direction:column;gap:4px}.scene-element{background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:visible}.scene-element.disabled{opacity:.5}.scene-element-header{display:flex;align-items:center;padding:8px 10px;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.scene-element-header:hover{background:var(--border-subtle)}.scene-element-header.selected{background:#00aaff26;border-left:2px solid var(--brand-primary);padding-left:8px;position:relative}.collapse-icon{width:14px;font-size:.6rem;color:var(--text-muted);transition:transform .2s}.scene-element.collapsed .collapse-icon{transform:rotate(0)}.element-icon{font-size:.9rem}.element-name{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.effect-count{font-size:.65rem;color:var(--text-muted)}.element-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}.scene-element-header:hover .element-actions{opacity:1}.action-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:3px;cursor:pointer;font-size:var(--font-size-xs);color:var(--text-muted);transition:all var(--transition-fast)}.action-btn:hover{background:var(--bg-input-hover);color:var(--text-primary)}.action-btn.delete-btn:hover{background:#ff646433;color:var(--color-error)}.scene-element-children{padding:4px 10px 8px;border-top:1px solid var(--border-subtle)}.scene-element.collapsed .scene-element-children{display:none}.scene-effect{display:flex;align-items:center;padding:6px 8px;gap:6px;border-radius:var(--radius-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s;margin-bottom:2px}.scene-effect:hover{background:var(--border-subtle)}.scene-effect.selected{background:#00aaff1f;border-left:2px solid var(--brand-primary);padding-left:6px}.scene-effect.disabled{opacity:.5}.effect-icon{font-size:.85rem}.scene-effect .effect-name{flex:1;font-size:var(--font-size-xs);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.effect-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}.scene-effect:hover .effect-actions{opacity:1}.scene-container-props{padding:8px 0}.scene-prop-row{margin-bottom:6px}.scene-prop-row label{display:flex;justify-content:space-between;font-size:.65rem;color:var(--text-muted);margin-bottom:2px}.scene-prop-row .prop-value{color:var(--brand-primary)}.fill-gradient-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fill-gradient-controls .fill-gradient-type{margin-left:auto}.fill-angle-dial-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.fill-angle-label{font-size:9px;color:var(--text-muted);display:flex;align-items:center;gap:4px}.fill-angle-dial-row{display:flex;align-items:center;gap:4px}.fill-angle-dial{width:28px;height:28px;border-radius:50%;background:#0000004d;border:1px solid var(--border-default);position:relative;cursor:pointer;flex-shrink:0}.fill-angle-dial:hover{border-color:var(--brand-primary)}.fill-angle-dial-marker{position:absolute;left:50%;top:50%;width:2px;height:10px;background:var(--brand-primary);border-radius:1px;transform-origin:bottom center;pointer-events:none}.fill-angle-value{font-size:10px;color:var(--brand-primary);min-width:28px}.scene-checkbox-row{margin-bottom:6px}.scene-dropdown{background:#00000040;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:6px;overflow:hidden}.scene-dropdown-header{display:flex;align-items:center;padding:6px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.scene-dropdown-header:hover{background:var(--border-subtle)}.scene-dropdown-icon{font-size:.55rem;color:var(--text-muted);margin-right:6px;transition:transform .2s;width:8px}.scene-dropdown-title{font-size:.65rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}.scene-dropdown-body{padding:6px 8px 8px;border-top:1px solid var(--border-subtle)}.scene-dropdown.collapsed .scene-dropdown-body{display:none}.scene-source-toggle{display:flex;gap:0;margin-bottom:8px;background:#0003;border-radius:var(--radius-sm);padding:2px}.scene-btn-row{display:flex;gap:4px;margin-bottom:6px;align-items:center}.container-load-google-font{width:26px;padding:0}.container-load-font{width:78px}.container-svg-path{width:100%;padding:4px 6px;background:#0000004d;border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.65rem;font-family:inherit;resize:vertical;margin-bottom:6px}.props-container-info{padding:20px 15px;text-align:center;color:var(--text-muted)}.props-container-info p{margin:0 0 8px;font-size:var(--font-size-sm)}.props-container-info p:last-child{margin-bottom:0;font-size:var(--font-size-xs);color:var(--text-disabled)}.props-panel-header{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-subtle);margin-bottom:12px}.props-panel-title{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-disabled)}.props-empty{display:flex;align-items:center;justify-content:center;padding:30px 15px;color:var(--text-disabled);font-size:var(--font-size-sm);text-align:center}.props-content{padding:0}.props-action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border-subtle)}.props-layer-name{font-size:var(--font-size-sm);font-weight:500;color:var(--text-secondary)}.props-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#00aaff14;border-bottom:1px solid var(--border-subtle);position:relative}.props-effect-header{padding:8px 12px;background:var(--border-subtle);border-bottom:1px solid var(--border-subtle);margin-bottom:8px}.props-effect-name{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary)}.props-add-effect{min-width:120px;max-width:120px}.fx-effects-list{padding:8px;display:flex;flex-direction:column;gap:6px}.props-empty-effects{padding:20px;text-align:center;color:var(--text-muted);font-size:var(--font-size-sm)}.fx-box{background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.fx-box-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.fx-box-header:hover{background:var(--border-subtle)}.fx-box-collapse{font-size:.6rem;color:var(--text-muted);width:12px}.fx-box-icon{font-size:.9rem;color:var(--text-muted)}.fx-box-name{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fx-box-actions{display:flex;gap:4px;opacity:.5;transition:opacity .15s}.fx-box-header:hover .fx-box-actions{opacity:1}.fx-action{font-size:var(--font-size-xs);cursor:pointer;padding:2px 4px;border-radius:3px;transition:background .15s}.fx-action:hover{background:var(--bg-input-hover)}.fx-action.disabled{opacity:.3;pointer-events:none}.fx-box-body{padding:10px 12px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:8px}.fx-box.collapsed .fx-box-body{display:none}.props-icon{font-size:14px;color:var(--text-secondary);width:16px}.props-title{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary)}.props-breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--font-size-sm)}.props-parent{color:var(--text-muted);font-weight:400}.props-separator{color:var(--text-disabled)}.props-current{color:var(--text-primary);font-weight:500}.props-section{padding:8px 12px;border-bottom:1px solid var(--border-subtle)}.props-section:last-child{border-bottom:none}.props-section-title{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}.props-row{margin-bottom:8px}.props-row:last-child{margin-bottom:0}.props-row label{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--text-muted);margin-bottom:4px}.props-value{color:var(--brand-primary)}.props-checkbox-row{margin-bottom:6px}.props-info{font-size:var(--font-size-xs);color:var(--text-muted);padding:6px 8px;background:var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:8px}.props-btn-row{display:flex;gap:6px;margin-bottom:8px}.props-google-fonts-row{display:flex;gap:6px;align-items:center}.props-google-fonts-row input[type=text]{flex:1;margin-bottom:0}.props-google-fonts-row .props-btn{flex:none;width:32px;padding:6px;font-size:1rem}.props-btn{flex:1;padding:6px 10px;background:linear-gradient(135deg,#00aaff26,#0064c81a);border:1px solid rgba(0,170,255,.3);border-radius:var(--radius-sm);color:var(--brand-primary);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-fast)}.props-btn:hover{background:linear-gradient(135deg,#00aaff40,#0064c833);border-color:#00aaff80}.props-btn:disabled{opacity:.4;cursor:not-allowed}.props-btn:disabled:hover{background:linear-gradient(135deg,#00aaff26,#0064c81a);border-color:#00aaff4d}.props-text,.props-svg-path{width:100%;padding:6px 8px;background:#0000004d;border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm);font-family:inherit}.props-text:focus,.props-svg-path:focus{outline:none;border-color:#00aaff80}.props-svg-path{resize:vertical;min-height:50px}.props-params{max-height:400px;overflow-y:auto}.props-params::-webkit-scrollbar{width:3px}.props-params::-webkit-scrollbar-track{background:var(--border-subtle)}.props-params::-webkit-scrollbar-thumb{background:var(--bg-input-hover);border-radius:2px}.props-source-toggle{display:flex;gap:0;margin-bottom:10px;background:#0003;border-radius:var(--radius-md);padding:3px}.props-source-btn{flex:1;padding:6px 12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-size-xs);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.props-source-btn:hover{color:var(--text-secondary)}.props-source-btn.active{background:#0af3;color:var(--brand-primary);box-shadow:0 1px 3px #0003}.layer-color-indicator{width:10px;height:10px;border-radius:2px;flex-shrink:0}.props-color-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0;margin-left:auto}.props-dropdown{background:#0003;border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:8px;overflow:hidden}.props-dropdown-header{display:flex;align-items:center;padding:8px 10px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s}.props-dropdown-header:hover{background:var(--border-subtle)}.props-dropdown-icon{font-size:.6rem;color:var(--text-muted);margin-right:8px;transition:transform .2s;width:10px}.props-dropdown-title{font-size:var(--font-size-xs);font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.props-dropdown-body{padding:8px 10px;border-top:1px solid var(--border-subtle)}.props-dropdown.collapsed .props-dropdown-body{display:none}.blending-section{border-bottom:1px solid var(--border-subtle)}.blending-section .prop-row{padding:0 var(--spacing-sm)}.blending-section .ui-slider,.blending-section .ui-select{flex:1}.collapsible-section{border-bottom:1px solid var(--border-subtle)}.section-header{height:var(--section-header-height);display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);cursor:pointer;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-section) 100%,white 4%),var(--bg-section));-webkit-user-select:none;user-select:none}.section-header:hover{background:var(--bg-hover)}.section-icon{font-size:12px;color:var(--text-secondary);width:16px}.section-title{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary)}.section-badge{font-size:var(--font-size-xs);color:var(--accent);background:var(--accent-dim);padding:1px 5px;border-radius:3px}.section-chevron{font-size:12px;color:var(--text-muted);transition:transform .15s}.section-content{display:none;padding:2px 0 var(--spacing-xs) 0}.collapsible-section.is-open .section-content{display:block}.prop-row{height:var(--row-height);display:flex;align-items:center;padding:0 var(--spacing-sm);gap:var(--spacing-sm)}.prop-row--textarea{height:auto;align-items:flex-start;padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.prop-row--textarea label{padding-top:6px}.prop-row:hover{background:var(--bg-hover)}.prop-row label,.prop-row .prop-label{width:var(--label-width);flex-shrink:0;font-size:var(--font-size-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scale-link-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:4px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-disabled);vertical-align:middle;transition:color .15s,background .15s}.scale-link-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.scale-link-btn.is-linked{color:var(--accent)}.scale-link-btn.is-linked:hover{color:var(--accent-hover)}.scale-link-btn ui-icon{width:12px;height:12px}.prop-row-controls{display:flex;align-items:center;gap:var(--spacing-xs);flex:1}.prop-row-controls .ui-input{flex:1;min-width:0}.prop-row-controls .ui-btn{flex-shrink:0}.value-display{width:28px;text-align:right;font-size:var(--font-size-xs);color:var(--accent)}.row-with-dial{display:flex;align-items:center;gap:var(--spacing-xs);flex:1}.mini-dial{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-section);background:var(--bg-section);position:relative;cursor:grab;transition:border-color .15s,box-shadow .15s}.mini-dial:hover{border-color:var(--accent)}.mini-dial.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);cursor:grabbing}.dial-marker{position:absolute;left:50%;top:3px;width:2px;height:5px;background:var(--text-secondary);transform-origin:center 7px;transform:translate(-50%);border-radius:1px;transition:background .15s}.mini-dial:hover .dial-marker,.mini-dial.is-active .dial-marker{background:var(--accent)}.gradient-preview-mini,.stroke-gradient-preview-mini{width:20px;height:20px;border-radius:0;background:linear-gradient(180deg,var(--text-disabled) 0%,var(--text-muted) 100%);border:1px solid var(--border-section);cursor:pointer;flex-shrink:0}.gradient-preview-mini:hover,.stroke-gradient-preview-mini:hover{border-color:var(--accent)}.effect-pp-section{margin-top:12px;padding-top:8px;border-top:1px solid var(--border-color)}.pp-subsection-header{display:flex;align-items:center;gap:6px;padding:0 var(--spacing-sm);margin-bottom:8px;font-size:var(--font-size-sm);color:var(--text-muted)}.pp-subsection-title{font-weight:500}.pp-count{background:var(--accent-dim);color:var(--accent);padding:1px 6px;border-radius:10px;font-size:10px}.pp-item{background:var(--bg-dark);border-radius:var(--radius-sm);margin-bottom:6px;overflow:hidden}.pp-item.is-disabled{opacity:.5}.pp-item-header{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer}.pp-item-header .visibility-toggle{width:14px;height:14px}.pp-icon{font-size:14px;color:var(--accent)}.pp-name{flex:1;font-size:var(--font-size-sm);font-weight:500}.pp-remove-btn{background:none;border:none;color:var(--text-muted);padding:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);opacity:0;transition:opacity .15s}.pp-item-header:hover .pp-remove-btn{opacity:1}.pp-remove-btn:hover{color:var(--error);background:var(--bg-hover)}.pp-params{padding:0 8px 8px}.pp-params .prop-row{margin-bottom:4px}.pp-params .prop-row:last-child{margin-bottom:0}.add-pp-select{position:relative;margin:var(--spacing-xs);margin-top:var(--spacing-sm)}.add-pp-btn{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:6px 10px;background:transparent;border:1px dashed var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.add-pp-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.add-pp-select .ui-select-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-top:4px;max-height:200px;overflow-y:auto;z-index:var(--z-dropdown);display:none;box-shadow:var(--shadow-lg)}.add-pp-select.is-open .ui-select-dropdown{display:block}.add-pp-select .ui-select-option{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-size:var(--font-size-sm)}.add-pp-select .ui-select-option:hover{background:var(--bg-hover)}.add-pp-select .ui-select-option:active{background:var(--accent-dim)}.pp-select,.pp-layer-select{flex:1}.reset-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-left:4px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-disabled);vertical-align:middle;transition:color .15s,background .15s}.reset-btn:hover{background:var(--bg-hover);color:var(--text-secondary)}.reset-btn:active{color:var(--accent)}.reset-btn ui-icon{width:12px;height:12px}.section-header .reset-btn{margin-left:auto;margin-right:4px}.prop-row-inline{display:flex;align-items:center;gap:var(--spacing-xs);flex:1}.prop-row-inline .ui-input{min-width:0}.prop-row-inline .ui-input.ui-input--flex{flex:1}.gradient-editor-bar{position:relative;margin-bottom:0}.gradient-preview-wrapper{position:relative;height:80px;border-radius:10px;overflow:hidden;border:2px solid var(--text-muted);background-image:linear-gradient(45deg,var(--text-disabled) 25%,transparent 25%),linear-gradient(-45deg,var(--text-disabled) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--text-disabled) 75%),linear-gradient(-45deg,transparent 75%,var(--text-disabled) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0px;background-color:var(--text-muted)}.gradient-preview{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:10px;background:linear-gradient(90deg,#ff6b6b,#4ecdc4);cursor:crosshair;box-shadow:inset 0 0 0 1px #ffffff1a,0 4px 12px #0003}.gradient-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0009;padding:5px 10px;border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary);pointer-events:none;opacity:0;transition:opacity .2s}.gradient-preview:hover .gradient-hint{opacity:1}.gradient-stops{position:relative;height:20px;margin-top:4px}.gradient-stop{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;cursor:grab;transform:translate(-50%);box-shadow:0 2px 6px #0000004d;transition:transform .15s,box-shadow .15s}.gradient-stop:hover{transform:translate(-50%) scale(1.15)}.gradient-stop.selected{box-shadow:0 0 0 3px #00a3ff66,0 2px 6px #0000004d}.gradient-section-card{background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:10px;padding:12px 14px;margin-bottom:12px}.section-card-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px}.stop-props-row{display:flex;align-items:center;gap:12px}.stop-opacity-control{display:flex;align-items:center;gap:0;margin-left:10px}.stop-opacity-control .stop-opacity-label{font-size:11px;color:var(--text-secondary);flex-shrink:0;margin-right:6px}.stop-opacity-control .ui-slider{width:90px;height:16px;flex-shrink:0}.stop-opacity-control .ui-slider-track{height:16px}.stop-opacity-value{font-size:11px;color:var(--brand-primary);font-weight:500;width:32px;text-align:right}.stop-position-control{display:flex;align-items:center;margin-left:40px}.stop-position-label{font-size:11px;color:var(--text-secondary);margin-right:0}.stop-position-value{color:var(--brand-primary);font-size:11px;font-weight:500}.stop-position-value input{width:22px;padding:0;margin:0;border:none;background:transparent;color:inherit;font:inherit;text-align:right;-moz-appearance:textfield}.stop-position-value input::-webkit-outer-spin-button,.stop-position-value input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.delete-stop-btn{flex-shrink:0;margin-left:auto;margin-right:-4px;padding:4px!important;color:var(--text-muted);opacity:.4;cursor:not-allowed}.delete-stop-btn:not(:disabled){color:var(--danger);opacity:1;cursor:pointer}.delete-stop-btn:not(:disabled):hover{background:#ff446626}.gradient-type-row{display:flex;align-items:center;justify-content:space-between;margin-top:-5px}.gradient-type-buttons{flex-shrink:0;flex-grow:0;width:auto}.gradient-type-buttons .ui-radio-option{width:60px}.angle-dial-inline{display:flex;align-items:center;gap:4px;margin-left:3px}.angle-label{font-size:11px;color:var(--text-muted);margin-right:5px}.center-label{font-size:11px;color:var(--text-muted)}.angle-dial{width:40px;height:40px;border-radius:50%;background:#0000004d;border:1px solid var(--border-default);position:relative;cursor:pointer}.angle-dial:hover{border-color:var(--brand-primary)}.angle-dial-marker{position:absolute;top:50%;left:50%;width:2px;height:14px;background:var(--brand-primary);transform-origin:center bottom;transform:translate(-50%) translateY(-100%) rotate(90deg);border-radius:1px;pointer-events:none}.angle-value{font-size:11px;color:var(--brand-primary);font-weight:500;min-width:32px;text-align:right;margin-left:auto}.center-control-row{display:flex;align-items:center;gap:8px;margin-top:6px;transition:margin-left .2s ease}.center-control-row[data-align=radial]{margin-left:21px}.center-control-row[data-align=conic]{margin-left:81px}.center-picker-wrapper{width:60px;height:60px;padding:1px;background:linear-gradient(135deg,var(--accent) 0%,var(--brand-primary) 50%,var(--accent) 100%);position:relative}.center-picker{width:100%;height:100%;position:relative;cursor:crosshair;overflow:hidden;background:radial-gradient(circle at 50% 50%,#ff6b6b,#4ecdc4);border:1px solid var(--bg-primary);box-sizing:border-box}.center-picker:before{content:"";position:absolute;top:0;left:50%;width:1px;height:100%;background:var(--border-strong);transform:translate(-.5px);pointer-events:none;z-index:var(--z-base)}.center-picker:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--border-strong);transform:translateY(-.5px);pointer-events:none;z-index:var(--z-base)}.center-picker-marker{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--brand-primary);border:2px solid #fff;box-shadow:0 1px 4px #0006;transform:translate(-50%,-50%);left:50%;top:50%;z-index:var(--z-base);pointer-events:none}.center-value{font-size:var(--font-size-xs);color:var(--text-muted);min-width:70px}.gradient-section-card .gradient-presets-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding-top:4px}.preset-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}.preset-swatch{width:100%;aspect-ratio:1;border-radius:var(--radius-lg);border:2px solid transparent;transition:all var(--transition-fast);box-shadow:0 2px 6px #0003}.preset-item:hover .preset-swatch{transform:scale(1.08);border-color:var(--border-strong)}.preset-item.active .preset-swatch{border-color:var(--brand-primary);box-shadow:0 0 0 2px #00a3ff4d,0 2px 6px #0003}.preset-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}.preset-item:hover .preset-label{color:var(--text-muted)}.preset-sunset{background:linear-gradient(135deg,#ff6b6b,#feca57,#ff9ff3)}.preset-ocean{background:linear-gradient(135deg,#0077b6,#00b4d8,#90e0ef)}.preset-fire{background:linear-gradient(135deg,#d00000,#e85d04,#faa307)}.preset-neon{background:linear-gradient(135deg,#f72585,#7209b7,#3a0ca3)}.preset-forest{background:linear-gradient(135deg,#2d6a4f,#40916c,#95d5b2)}.preset-purple{background:linear-gradient(135deg,#7400b8,#6930c3,#5390d9)}.gradient-actions{display:flex;justify-content:center;gap:10px;margin:4px 0 22px}.angle-dial-small{width:28px;height:28px;border-radius:50%;background:#0000004d;border:1px solid var(--border-default);position:relative;cursor:pointer;flex-shrink:0}.angle-dial-small:hover{border-color:var(--brand-primary)}.angle-dial-small .angle-dial-marker{position:absolute;top:50%;left:50%;width:2px;height:10px;background:var(--brand-primary);transform-origin:center bottom;transform:translate(-50%) translateY(-100%) rotate(0);border-radius:1px;pointer-events:none}.btn-edit-gradient{padding:4px 10px;font-size:.65rem;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.btn-edit-gradient:hover{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--color-white)}#mainCanvas{border-radius:12px;box-shadow:0 0 80px #0096ff1a}.effects-tabs{display:flex;gap:4px;margin-bottom:var(--spacing-sm);padding:0 var(--spacing-sm)}.effects-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--font-size-xs);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.effects-tab:hover:not(.disabled){background:var(--bg-hover);border-color:var(--border-color)}.effects-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.effects-tab.disabled{opacity:.4;cursor:not-allowed}.effects-tab .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#fff3;font-size:10px;font-weight:600}.effects-tab.active .tab-badge{background:#ffffff4d}.effect-item{border-bottom:1px solid var(--border-subtle)}.effect-header{height:var(--row-height);display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);cursor:pointer}.effect-header:hover{background:var(--bg-hover)}.effect-name{flex:1;font-size:var(--font-size-sm);color:var(--text-primary)}.effect-chevron{margin-left:auto;font-size:10px;color:var(--text-muted)}.effect-content{display:none;padding:var(--spacing-xs) 0;background:#00000026}.effect-item.is-open .effect-content{display:block}.effect-item.is-hidden{opacity:.5}.add-effect-btn{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:6px 10px;background:transparent;border:1px dashed var(--border-color);border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--font-size-sm);cursor:pointer}.add-effect-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.effect-item.is-dragging{opacity:.4}.effect-item.drag-over-top{box-shadow:inset 0 2px 0 var(--accent)}.effect-item.drag-over-bottom{box-shadow:inset 0 -2px 0 var(--accent)}.effect-context-menu{position:fixed;min-width:140px;padding:4px 0;background:var(--ui-bg-popup);border:1px solid var(--border-section);box-shadow:var(--shadow-md);z-index:var(--z-max);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition)}.effect-context-menu.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.effect-context-menu .ui-dropdown-item.danger{color:var(--danger)}.effect-context-menu .ui-dropdown-item.danger:hover{background:#ff446626}.effect-rename-input{background:var(--bg-input);border:1px solid var(--brand-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm);padding:2px 6px;flex:1;min-width:0;outline:none}.effect-rename-input:focus{box-shadow:0 0 0 2px var(--brand-primary-glow)}.effects-subsection{margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--border-subtle)}.effects-subsection-header{display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);padding:0 var(--spacing-sm);font-size:var(--font-size-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.effects-subsection-header ui-icon{color:var(--text-muted)}.effects-subsection-header .section-badge{margin-left:auto}.effects-subsection .effect-item:last-of-type{border-bottom:none}.effects-subsection .add-effect-select{margin:var(--spacing-sm);margin-top:var(--spacing-md)}.layer-item{height:32px;display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);padding-left:0;cursor:pointer;border-bottom:1px solid var(--border-subtle)}.layer-item:hover{background:var(--bg-hover)}.layer-item.is-selected{background:var(--bg-selected)}.layer-item.is-hidden{opacity:.5}.layer-item.is-hidden .layer-color{opacity:.4}.drag-handle{display:flex;align-items:center;justify-content:center;width:16px;color:var(--text-muted);cursor:grab;opacity:.5;transition:opacity .15s}.layer-item:hover .drag-handle,.effect-header:hover .drag-handle{opacity:1}.drag-handle:active{cursor:grabbing}.drag-handle ui-icon{font-size:12px}.layer-item.is-dragging{opacity:.4}.layer-item.drag-over-top{box-shadow:inset 0 2px 0 var(--accent)}.layer-item.drag-over-bottom{box-shadow:inset 0 -2px 0 var(--accent)}.layer-context-menu{position:fixed;min-width:140px;padding:4px 0;background:var(--ui-bg-popup);border:1px solid var(--border-section);box-shadow:var(--shadow-md);z-index:var(--z-max);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition)}.layer-context-menu.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.layer-context-menu .ui-dropdown-item.danger{color:var(--danger)}.layer-context-menu .ui-dropdown-item.danger:hover{background:#ff446626}.layer-context-menu .context-submenu{min-width:180px;max-height:300px;overflow-y:auto}.layer-context-menu .context-submenu::-webkit-scrollbar{width:6px}.layer-context-menu .context-submenu::-webkit-scrollbar-track{background:transparent}.layer-context-menu .context-submenu::-webkit-scrollbar-thumb{background:var(--border-section);border-radius:3px}.layer-name-input{background:var(--bg-input);border:1px solid var(--brand-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-sm);padding:2px 6px;flex:1;min-width:0;outline:none}.layer-name-input:focus{box-shadow:0 0 0 2px var(--brand-primary-glow)}.layer-color{width:3px;height:100%;flex-shrink:0;margin-right:var(--spacing-xs);background:var(--layer-color)}.visibility-toggle{width:16px;height:16px;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}.visibility-dot{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--text-muted);background:transparent;transition:all var(--transition-fast);flex-shrink:0}.visibility-toggle:hover .visibility-dot{border-color:var(--text-primary)}.visibility-toggle.is-visible .visibility-dot{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--layer-color) 100%,white 40%),var(--layer-color) 60%,color-mix(in srgb,var(--layer-color) 100%,black 30%));border-color:var(--layer-color);box-shadow:inset 0 -1px 2px #0000004d}.visibility-toggle.is-visible:hover .visibility-dot{background:radial-gradient(circle at 30% 30%,var(--color-white),var(--layer-color) 50%,color-mix(in srgb,var(--layer-color) 100%,black 20%));border-color:var(--layer-color);filter:brightness(1.2)}.layer-icon{font-size:14px;width:16px;color:var(--text-secondary)}.layer-name{flex:1;font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-badges{display:flex;gap:2px}.badge{font-size:var(--font-size-xs);color:var(--text-secondary);background:var(--bg-section);padding:1px 4px;border-radius:2px}.badge.instance-badge{color:var(--accent);background:rgba(var(--accent-rgb),.15);font-weight:500}.layer-item.is-instance .layer-icon{color:var(--accent)}.empty-state{padding:var(--spacing-md);text-align:center;color:var(--text-muted);font-size:var(--font-size-sm)}:root{--hud-elements-width: 200px;--hud-properties-width: 200px;--hud-control-width: 40px;--hud-suffix-width: 20px;--hud-label-width: 110px}.hud-editor-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-app);z-index:calc(var(--z-max) + 100);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--transition-normal),visibility var(--transition-normal)}.hud-editor-overlay.is-open{opacity:1;visibility:visible}.hud-editor-header{display:flex;align-items:center;gap:var(--spacing-lg);height:var(--topbar-height);padding:0 var(--spacing-xl);background:var(--bg-panel);border-bottom:1px solid var(--border-section);flex-shrink:0}.hud-editor-back{gap:var(--spacing-xs);padding-left:5px}.hud-editor-back ui-icon{font-size:14px}.hud-editor-title{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:normal;text-transform:uppercase}.hud-editor-actions{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:auto}.hud-editor-actions button{padding:var(--spacing-xs) var(--spacing-md);background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:inherit;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.hud-editor-actions button:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-focus)}.hud-editor-content{display:flex;flex:1;overflow:hidden}.hud-editor-elements{width:var(--hud-elements-width);background:var(--bg-panel);border-right:1px solid var(--border-section);display:flex;flex-direction:column;flex-shrink:0;position:relative}.hud-elements-header{height:var(--panel-header-height);display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-section) 100%,white 4%),var(--bg-section));border-bottom:1px solid var(--border-section);flex-shrink:0}.hud-elements-icon{font-size:12px;color:var(--text-secondary);width:16px}.hud-elements-title{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary)}.hud-elements-count{font-size:var(--font-size-xs);color:var(--text-muted);flex:1}.hud-add-btn{width:22px;height:22px;border-radius:0}.hud-add-btn ui-icon{font-size:12px}.hud-add-menu{display:none;position:absolute;top:calc(var(--row-height) + 4px);right:var(--spacing-sm);min-width:160px;padding:4px 0;background:var(--ui-bg-popup);border:1px solid var(--border-section);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);z-index:10}.hud-add-menu.is-open{display:block}.hud-elements-list{flex:1;overflow-y:auto}.hud-elements-list .layer-item{--layer-color: var(--accent)}.hud-editor-canvas-area{flex:1;display:flex;align-items:center;justify-content:center;background:#0a0a12;background-image:linear-gradient(45deg,#0d0d15 25%,transparent 25%),linear-gradient(-45deg,#0d0d15 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0d0d15 75%),linear-gradient(-45deg,transparent 75%,#0d0d15 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;position:relative;overflow:hidden}.hud-editor-canvas-container{position:relative;background:#00000080;box-shadow:var(--shadow-xl)}.hud-editor-canvas{display:block}.hud-canvas-info{position:absolute;top:var(--spacing-md);left:var(--spacing-md);display:flex;gap:var(--spacing-md);font-size:var(--font-size-xs);color:var(--text-muted);background:#0009;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.hud-canvas-info span{font-variant-numeric:tabular-nums}.hud-editor-properties{width:var(--hud-properties-width);background:var(--bg-panel);border-left:1px solid var(--border-section);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.hud-props-content{flex:1;overflow-y:auto;overflow-x:hidden}.hud-props-content::-webkit-scrollbar{width:var(--spacing-xs)}.hud-props-content::-webkit-scrollbar-track{background:transparent}.hud-props-content::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:var(--spacing-2xs)}.hud-props-content::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.hud-props-header{height:var(--panel-header-height);display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-section) 100%,white 4%),var(--bg-section));border-bottom:1px solid var(--border-section);flex-shrink:0}.hud-props-header .layer-icon{font-size:14px;width:16px;color:var(--text-secondary)}.hud-props-title{flex:1;font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-props-content .collapsible-section{border-bottom:1px solid var(--border-subtle)}.hud-props-content .section-header{height:var(--section-header-height);display:flex;align-items:center;gap:var(--spacing-xs);padding:0 var(--spacing-sm);cursor:pointer;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-section) 100%,white 4%),var(--bg-section));-webkit-user-select:none;user-select:none}.hud-props-content .section-header:hover{background:var(--bg-hover)}.hud-props-content .section-icon{font-size:12px;color:var(--text-muted)}.hud-props-content .section-title{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);flex:1}.hud-props-content .section-chevron{font-size:10px;color:var(--text-muted);transition:transform var(--transition-fast)}.hud-props-content .section-content{display:none;padding:2px 0 var(--spacing-xs) 0}.hud-props-content .collapsible-section.is-open .section-content{display:block}.hud-props-grid{display:flex;flex-direction:column}.hud-editor-properties .prop-row{height:var(--row-height);display:grid;grid-template-columns:var(--hud-label-width) var(--hud-control-width) var(--hud-suffix-width);align-items:center;padding:0 var(--spacing-sm);gap:5px}.hud-editor-properties .prop-row:hover{background:var(--bg-hover)}.hud-editor-properties .prop-row>label{width:100%;font-size:var(--font-size-sm);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-editor-properties .prop-row .ui-input{width:100%}.hud-editor-properties .prop-row .ui-checkbox,.hud-editor-properties .prop-row .ui-select,.hud-editor-properties .prop-row .ui-color-picker{grid-column:2 / 4}.hud-editor-properties .prop-suffix{font-size:var(--font-size-xs);color:var(--text-muted);text-align:left}.hud-editor-properties .prop-row--seed{grid-template-columns:1fr var(--hud-control-width) auto}.hud-editor-properties .prop-row--seed .ui-btn--icon{width:18px;height:18px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--bg-input);border:1px solid var(--border-default);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.hud-editor-properties .prop-row--seed .ui-btn--icon:hover{background:var(--bg-hover);border-color:var(--border-focus);color:var(--text-primary)}.hud-prop-row{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.hud-prop-label{width:var(--hud-label-width);font-size:var(--font-size-sm);color:var(--text-muted);flex-shrink:0}.hud-prop-value{flex:1;display:flex;align-items:center;gap:var(--spacing-sm)}.hud-prop-value input[type=number]{width:var(--label-width);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:inherit;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.hud-prop-value input[type=number]:focus{outline:none;border-color:var(--accent)}.hud-prop-value input[type=checkbox]{width:var(--checkbox-size);height:var(--checkbox-size);accent-color:var(--accent)}.hud-prop-color{display:flex;align-items:center;gap:var(--spacing-sm)}.hud-prop-color-swatch{width:var(--spacing-xl);height:var(--spacing-xl);border:1px solid var(--border-section);border-radius:var(--radius-sm);cursor:pointer}.hud-prop-color-input{width:var(--hud-control-width);padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-size-xs)}.hud-props-empty{color:var(--text-muted);font-size:var(--font-size-base);font-style:italic}.hud-globals-section{display:flex;gap:var(--spacing-xl);padding-bottom:var(--spacing-md);margin-bottom:var(--spacing-md);border-bottom:1px solid var(--border-subtle)}.hud-globals-section .hud-prop-label{width:100px}.hud-context-menu{position:fixed;min-width:160px;padding:4px 0;background:var(--ui-bg-popup);border:1px solid var(--border-section);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:calc(var(--z-max) + 200);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--ui-transition),transform var(--ui-transition),visibility var(--ui-transition)}.hud-context-menu.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.hud-context-menu .ui-dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.hud-context-menu .ui-dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}.hud-context-menu .ui-dropdown-item.danger{color:var(--danger)}.hud-context-menu .ui-dropdown-item.danger:hover{background:#ff446626}.hud-context-menu .ui-dropdown-item:disabled{opacity:.5;cursor:not-allowed}.hud-context-menu .ui-dropdown-item:disabled:hover{background:transparent;color:var(--text-secondary)}.segments-list{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;padding:0 4px}.segment-item{display:flex;align-items:center;gap:3px;padding:3px 4px;background:rgba(var(--clr-primary-rgb),.05);border:1px solid rgba(var(--clr-primary-rgb),.15);border-radius:var(--radius-sm);font-size:var(--font-size-sm)}.segment-item .seg-num{color:var(--text-tertiary);width:12px;font-size:var(--font-size-xs);text-align:center;flex-shrink:0}.segment-item select{background:#00000080;border:1px solid rgba(var(--clr-primary-rgb),.3);color:var(--clr-primary);padding:1px 2px;font-size:var(--font-size-sm);font-family:inherit;border-radius:var(--radius-xs);cursor:pointer;height:18px}.segment-item select:hover{border-color:rgba(var(--clr-primary-rgb),.5)}.segment-item .segment-type{width:45px}.segment-item .segment-direction{width:32px;text-align:center}.segment-item .ui-input{width:36px!important;min-width:36px!important;height:18px!important}.segment-item .ui-input input{font-size:var(--font-size-sm)!important;padding:0 4px!important;text-align:center!important;height:100%!important}.segment-item .segment-unit{color:var(--text-tertiary);font-size:var(--font-size-xs);width:14px;flex-shrink:0}.segment-item .segment-remove{background:none;border:none;color:#ff646480;cursor:pointer;font-size:12px;padding:0;margin-left:auto;line-height:1;width:14px;text-align:center}.segment-item .segment-remove:hover{color:#f66}.segment-add{width:calc(100% - 8px);margin:0 4px;padding:3px 6px;background:rgba(var(--clr-primary-rgb),.1);border:1px dashed rgba(var(--clr-primary-rgb),.3);color:var(--clr-primary);font-size:var(--font-size-sm);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast),border-color var(--transition-fast)}.segment-add:hover{background:rgba(var(--clr-primary-rgb),.15);border-color:rgba(var(--clr-primary-rgb),.5)}.terminator-group{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}.terminator-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.terminator-label{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:4px;padding-left:var(--spacing-sm);font-weight:500}@media (max-width: 1200px){.hud-editor-elements{width:180px}.hud-props-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}