@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-app: #0c0d14;--bg-pane: #131520;--bg-pane-hover: #191c2b;--bg-card: #181b28;--bg-card-hover: #202436;--border-subtle: rgba(255, 255, 255, .07);--border-focus: rgba(139, 92, 246, .5);--accent-primary: #7c3aed;--accent-primary-hover: #8b5cf6;--accent-primary-glow: rgba(124, 58, 237, .35);--accent-secondary: #06b6d4;--accent-warning: #f59e0b;--accent-danger: #ef4444;--accent-success: #10b981;--text-main: #f3f4f6;--text-sub: #9ca3af;--text-muted: #6b7280;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);font-size:13px;line-height:1.5;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;display:flex;flex-direction:column}.studio-layout{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.studio-main-body{flex:1;display:flex;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#151724,#0c0d14)}.palette-sidebar{width:280px;min-width:200px;max-width:480px;background:var(--bg-pane);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;container-type:inline-size}.main-canvas-pane{flex:1;display:flex;flex-direction:column;min-width:320px;position:relative;overflow:hidden}.mask-sidebar{width:310px;min-width:220px;max-width:520px;background:var(--bg-pane);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}.column-splitter{width:8px;position:relative;cursor:col-resize;background:transparent;flex-shrink:0;z-index:20;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.column-splitter:before{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;background:var(--border-subtle);transition:all .15s ease}.column-splitter:hover,.column-splitter.is-active{background:#7c3aed26}.column-splitter:hover:before,.column-splitter.is-active:before{background:var(--accent-primary);width:3px;left:2px;box-shadow:0 0 8px var(--accent-primary-glow)}.splitter-handle{width:4px;height:30px;border-radius:2px;background:#ffffff38;transition:all .15s ease;z-index:1}.column-splitter:hover .splitter-handle,.column-splitter.is-active .splitter-handle{background:#fff;height:44px;box-shadow:0 0 6px #fffc}body.is-resizing,body.is-resizing *{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff38}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .16s ease;white-space:nowrap}.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.btn-primary{background:linear-gradient(135deg,var(--accent-primary) 0%,#6d28d9 100%);color:#fff;box-shadow:0 2px 8px var(--accent-primary-glow)}.btn-primary:hover{background:linear-gradient(135deg,var(--accent-primary-hover) 0%,#7c3aed 100%);box-shadow:0 4px 12px var(--accent-primary-glow)}.btn-secondary{background:#242938;color:var(--text-main);border-color:var(--border-subtle)}.btn-secondary:hover{background:#2f3547;border-color:#ffffff26}.btn-outline{background:transparent;color:var(--text-sub);border-color:var(--border-subtle)}.btn-outline:hover{background:#ffffff0d;color:var(--text-main);border-color:#fff3}.btn-ghost{background:transparent;border:none;color:var(--text-muted);padding:6px 8px}.btn-ghost:hover{color:var(--text-main);background:#ffffff0d}.btn-warning{background:var(--accent-warning);color:#000;font-weight:700}.btn-warning:hover{background:#fbbf24}.btn-sm{padding:4px 9px;font-size:11px}.btn-block{width:100%}.btn-icon-sm{background:#202435;border:1px solid var(--border-subtle);color:var(--text-sub);border-radius:var(--radius-sm);padding:4px 8px;font-size:12px;cursor:pointer;transition:all .15s ease}.btn-icon-sm:hover:not(:disabled){background:#2b3147;color:var(--text-main)}.btn-icon-sm:disabled{opacity:.35;cursor:not-allowed}.app-header{height:56px;background:var(--bg-pane);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:16px;z-index:10}.header-brand{display:flex;align-items:center;gap:10px}.brand-logo{font-size:22px;filter:drop-shadow(0 0 8px var(--accent-primary-glow))}.brand-title{font-weight:700;font-size:15px;letter-spacing:-.2px;background:linear-gradient(135deg,#fff 40%,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-tag{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.header-center{display:flex;align-items:center;justify-content:center}.mode-segmented-control{display:flex;align-items:center;background:#00000073;padding:3px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);gap:4px}.mode-segment-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-sub);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;transition:all .18s ease;-webkit-user-select:none;user-select:none}.mode-segment-btn:hover{color:var(--text-main);background:#ffffff0f}.mode-segment-btn.active{background:var(--bg-card);color:#fff;border-color:#ffffff26;box-shadow:0 2px 8px #0006;font-weight:600}.mode-segment-btn.active#btn-mode-pixel{border-color:#7c3aed99;box-shadow:0 0 12px #7c3aed59}.mode-segment-btn.active#btn-mode-mask{border-color:#06b6d499;box-shadow:0 0 12px #06b6d459}.segment-icon{font-size:15px}.segment-label{letter-spacing:.2px}.header-actions{display:flex;align-items:center;gap:10px}.auto-save-indicator{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#00000040;border-radius:var(--radius-sm);font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.indicator-dot{width:7px;height:7px;border-radius:50%;background-color:var(--text-muted);transition:all .3s ease}.indicator-dot.saving{background-color:var(--accent-warning);box-shadow:0 0 6px var(--accent-warning)}.indicator-dot.saved{background-color:var(--accent-success);box-shadow:0 0 6px var(--accent-success)}.column-sidebar{padding:10px 12px;display:flex;flex-direction:column;gap:8px}.section-title-group{display:flex;align-items:center;gap:6px}.panel-active-badge{font-size:9.5px;font-weight:700;font-family:var(--font-mono);color:#34d399;background:#10b98126;border:1px solid rgba(16,185,129,.35);padding:1px 6px;border-radius:10px;display:inline-flex;align-items:center;box-shadow:0 0 8px #10b98140;white-space:nowrap}.palette-actions-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:0;margin-bottom:0}.btn-xs{padding:4px 8px;font-size:11px;border-radius:var(--radius-sm);background:#ffffff0a;color:var(--text-sub);border:1px solid var(--border-subtle);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease;white-space:nowrap}.btn-xs:hover{background:#ffffff1a;color:var(--text-main);border-color:#fff3}.btn-xs.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary-glow)}.mask-display-card{background:#00000040;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:8px}.section-sub-header{display:flex;align-items:center;justify-content:space-between;margin-top:2px;margin-bottom:-4px}.panel-section{display:flex;flex-direction:column;gap:7px}.section-header{display:flex;align-items:center;justify-content:space-between}.section-title{font-size:12.5px;font-weight:700;color:var(--text-main);white-space:nowrap}.history-actions{display:flex;gap:4px}.tool-picker-group{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.tool-tab-btn.btn-span-half{grid-column:span 3}.bucket-connectivity-panel{background:#7c3aed14;border:1px solid rgba(124,58,237,.25);border-radius:var(--radius-sm);padding:6px 9px;display:flex;flex-direction:column;gap:5px;animation:fadeIn .15s ease-out}.connectivity-header{display:flex;align-items:center;justify-content:space-between}.connectivity-title{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#c084fc}.connectivity-title svg{display:inline-block;width:13px;height:13px;flex-shrink:0}.connectivity-tip{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.connectivity-pills{display:flex;gap:6px}.connectivity-pill-btn{flex:1;padding:4px 6px;font-size:11px;font-weight:600;background:#ffffff0d;border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .12s ease;-webkit-user-select:none;user-select:none}.connectivity-pill-btn:hover{background:#ffffff1a;color:var(--text-main);border-color:#fff3}.connectivity-pill-btn.active{background:#7c3aed59;border-color:var(--accent-primary);color:#fff;box-shadow:0 0 8px var(--accent-primary-glow)}.connectivity-pill-btn .pill-dot{font-size:8px;color:var(--text-muted)}.connectivity-pill-btn.active .pill-dot{color:#a855f7}.tool-tab-btn{grid-column:span 2;padding:5px 4px;background:#1c2030;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-sub);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:29px;transition:all .16s ease;-webkit-user-select:none;user-select:none}.tool-tab-btn:hover{background:#252b40;color:var(--text-main);border-color:#ffffff26}.tool-tab-btn.active{background:#7c3aed38;border-color:var(--accent-primary);color:#fff;box-shadow:0 0 10px var(--accent-primary-glow)}.tool-btn-icon{font-size:12px;line-height:1;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px}.tool-btn-icon svg{display:block;width:14px;height:14px}.tool-btn-label{font-size:11.5px;font-weight:600;white-space:nowrap}.tool-btn-kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 3px;font-size:9px;font-family:var(--font-mono);font-weight:600;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:var(--text-muted);line-height:1;flex-shrink:0;margin-left:1px}.tool-tab-btn.active .tool-btn-kbd{background:#7c3aed59;border-color:#a855f780;color:#e9d5ff}.palette-header-fgbg{margin-top:0}.fgbg-container{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0006;padding:5px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.color-slot{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.color-slot-preview{width:22px;height:22px;min-width:22px;border-radius:4px;border:1.5px solid rgba(255,255,255,.5);box-shadow:0 1px 4px #00000080}.fg-slot .color-slot-preview{border-color:#fff;box-shadow:0 0 8px #ffffff80}.bg-slot .color-slot-preview{border:1.5px dashed #38bdf8;box-shadow:0 0 8px #38bdf859}.color-slot-info{display:flex;flex-direction:column;gap:1px;min-width:0}.slot-title{font-size:10px;font-weight:700;color:var(--text-muted);white-space:nowrap}.slot-hex{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-main);white-space:nowrap}.btn-swap-fgbg{width:24px;height:24px;border-radius:50%;background:#252b40;border:1px solid var(--border-subtle);color:var(--text-sub);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.btn-swap-fgbg:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);transform:rotate(180deg)}.palette-families-container{display:flex;flex-direction:column;gap:4px;background:#00000059;padding:7px 8px;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.palette-family-row{display:flex;align-items:center;padding:1px 0;width:100%}.palette-family-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:2px}.palette-family-row.palette-family-row-base{padding-bottom:3px;border-bottom:1.5px solid rgba(255,255,255,.12)!important;margin-bottom:1px}.palette-family-chips{display:flex;flex-wrap:wrap;gap:4px;width:100%;align-items:center}.palette-chip{width:35px;height:35px;min-width:35px;aspect-ratio:1;border-radius:4px;cursor:pointer;position:relative;border:1px solid rgba(255,255,255,.2);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;display:flex;align-items:flex-end;justify-content:flex-end;padding:2px 3px;flex-shrink:0;box-shadow:0 1px 3px #0000004d}.palette-chip:hover{transform:translateY(-2px) scale(1.06);z-index:5;border-color:#fff;box-shadow:0 4px 10px #00000080}.palette-chip.is-fg,.palette-chip.active{transform:scale(1.06);outline:2px solid #ffffff;outline-offset:1px;box-shadow:0 0 10px #ffffffd9;z-index:6}.palette-chip.is-bg{border:2px dashed #38bdf8!important;z-index:5}.palette-chip.is-fg.is-bg{outline:2px solid #ffffff;outline-offset:1px;border:2px dashed #38bdf8!important;z-index:7}.chip-bg-dot{position:absolute;top:2px;left:2px;width:6px;height:6px;border-radius:50%;background:#38bdf8;border:1px solid #000000;box-shadow:0 0 3px #38bdf8;pointer-events:none}.chip-index{font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fffffff2;text-shadow:0 1px 2px #000000,0 0 3px #000000;line-height:1}.hair-ramp-section{margin-top:0;margin-bottom:0;padding:6px 8px;background:#191c2b;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:5px}.hair-ramp-header{display:flex;align-items:center;justify-content:space-between;gap:6px}.hair-ramp-title-group{display:flex;align-items:center;gap:5px}.hair-ramp-title{font-size:12px;font-weight:700;color:#f1f5f9}.hair-ramp-tier-hint{font-size:10px;color:var(--text-muted)}.hair-ramp-actions{display:flex;align-items:center;gap:5px}.hair-highlight-btn{display:inline-flex;align-items:center;gap:3px;background:#38bdf81a;border:1px solid rgba(56,189,248,.35);color:#38bdf8;font-size:11px;font-weight:600;padding:1.5px 6px;border-radius:4px;cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;line-height:1.3}.hair-highlight-btn:hover,.hair-highlight-btn.active{background:#38bdf847;border-color:#38bdf8;color:#fff;box-shadow:0 0 8px #38bdf873}.hair-ramp-select-wrap{flex-shrink:0}.hair-ramp-select{background:#111422;border:1px solid rgba(255,255,255,.22);color:#f8fafc;font-size:12px;font-weight:600;padding:2px 6px;border-radius:4px;cursor:pointer;outline:none;transition:border-color .15s ease,background .15s ease}.hair-ramp-select:hover,.hair-ramp-select:focus{border-color:#38bdf8;background:#161b2e}.hair-ramp-chips{display:flex;gap:4px;width:100%}.hair-chip{flex:1;height:30px;min-width:0;border-radius:4px;border:1px solid rgba(255,255,255,.22);cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2px 1px;-webkit-user-select:none;user-select:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;box-shadow:0 1px 3px #0006}.hair-chip:hover{transform:translateY(-2px) scale(1.06);z-index:5;border-color:#fff;box-shadow:0 4px 10px #00000080}.hair-chip.is-fg,.hair-chip.active{outline:2px solid #ffffff;outline-offset:1px;border-color:#fff;box-shadow:0 0 10px #ffffffd9;z-index:6}.hair-chip.is-bg{border:2px dashed #38bdf8!important;z-index:5}.hair-chip.is-fg.is-bg{outline:2px solid #ffffff;outline-offset:1px;border:2px dashed #38bdf8!important;z-index:7}.hair-chip-tier{font-size:8.5px;font-weight:700;color:#fffffff2;text-shadow:0 1px 2px #000,0 0 3px #000;line-height:1}.hair-chip-index{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:#fffffff2;text-shadow:0 1px 2px #000,0 0 3px #000;line-height:1}.palette-section-divider{display:flex;align-items:center;justify-content:space-between;margin-top:1px;margin-bottom:0;padding-top:4px;border-top:1px solid var(--border-subtle)}.palette-section-divider .sub-label{font-size:11px;font-weight:600;color:var(--text-muted)}.palette-chip.chip-white,.palette-chip[data-index="1"]{border:1.5px solid rgba(255,255,255,.45)}.palette-chip.chip-white .chip-index,.palette-chip[data-index="1"] .chip-index{color:#0f172a;text-shadow:0 0 2px rgba(255,255,255,.95);font-weight:900}.palette-chip.chip-transparent,.palette-chip[data-index="255"],.color-slot-preview.slot-transparent{background-color:#1a1d2d!important;background-image:linear-gradient(45deg,#2e344e 25%,transparent 25%),linear-gradient(-45deg,#2e344e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2e344e 75%),linear-gradient(-45deg,transparent 75%,#2e344e 75%)!important;background-size:8px 8px!important;background-position:0 0,0 4px,4px -4px,-4px 0px!important;border:1.5px dashed rgba(56,189,248,.6)!important}.palette-chip.chip-transparent .chip-index,.palette-chip[data-index="255"] .chip-index{font-size:9px;color:#38bdf8;font-weight:800;text-shadow:0 1px 2px #000}.palette-families-container.has-probed-color .palette-chip:not(.is-probed),.hair-ramp-chips.has-probed-color .hair-chip:not(.is-probed){opacity:.28;filter:grayscale(.2) brightness(.65);transform:scale(.96);transition:opacity .12s ease,transform .12s ease,filter .12s ease}.palette-chip.is-probed,.hair-chip.is-probed{opacity:1!important;filter:none!important;transform:scale(1.18)!important;outline:2.5px solid #38bdf8!important;outline-offset:2px!important;border-color:#fff!important;box-shadow:0 0 16px #38bdf8f2,0 0 28px #38bdf899!important;z-index:30!important;animation:probe-chip-pulse 1.2s infinite ease-in-out}.palette-chip.is-probed .chip-index,.hair-chip.is-probed .hair-chip-index{color:#fff!important;font-weight:900!important;text-shadow:0 0 4px #000,0 0 8px #000!important;font-size:11px!important}@keyframes probe-chip-pulse{0%,to{box-shadow:0 0 14px #38bdf8e6,0 0 24px #38bdf880;outline-color:#38bdf8}50%{box-shadow:0 0 22px #38bdf8,0 0 36px #38bdf8d9;outline-color:#fff}}.panel-divider{height:1px;background:var(--border-subtle);margin:6px 0}.help-text{font-size:11px;color:var(--text-muted);line-height:1.4}.recompute-box,.mask-display-card{display:flex;flex-direction:column;gap:8px}.mask-shortcuts-tip{display:flex;align-items:center;justify-content:center;gap:8px;background:#7c3aed14;border:1px dashed rgba(124,58,237,.35);border-radius:var(--radius-sm);padding:6px 10px;font-size:11px;color:var(--text-sub)}.mask-shortcuts-tip .tip-badge{display:inline-flex;align-items:center;gap:4px}.mask-shortcuts-tip .tip-badge b{color:#c4b5fd}.mask-shortcuts-tip .tip-divider{color:var(--text-muted);opacity:.5}.slider-control-group{display:flex;flex-direction:column;gap:6px;background:#00000040;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.slider-label-row{display:flex;justify-content:space-between}.slider-value-text{font-family:var(--font-mono);font-size:11px;color:var(--text-main)}input[type=range]{width:100%;accent-color:var(--accent-primary);cursor:pointer}.zone-quick-actions{display:flex;align-items:center;gap:8px}.btn-xs-link{background:transparent;border:none;font-size:11px;color:#a78bfa;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px;transition:color .15s ease}.btn-xs-link:hover{color:#fff}.zone-selector-list{display:flex;flex-direction:column;gap:6px}.zone-card{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#191c2b;border:1px solid var(--border-subtle);border-left:4px solid var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;-webkit-user-select:none;user-select:none}.zone-card:hover{background:#21263a;border-color:#ffffff29}.zone-card.active{background:#7c3aed2e;border-color:#7c3aed66;border-left-width:5px}.zone-checkbox-wrap{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0;position:relative;flex-shrink:0}.zone-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.zone-checkmark{width:17px;height:17px;border-radius:4px;border:1.5px solid rgba(255,255,255,.3);background:#141826e6;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.zone-checkbox-wrap:hover .zone-checkmark{border-color:#ffffffb3;box-shadow:0 0 6px #fff3}.zone-card-main{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.zone-color-indicator{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.zone-name{font-weight:600;font-size:12px;white-space:nowrap}.zone-hotkey{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.zone-card-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.zone-stat{font-family:var(--font-mono);font-size:11px;color:var(--text-sub);white-space:nowrap}.zone-stat b{color:var(--text-main)}.zone-action-btn{padding:1px 4px;font-size:11px;background:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:var(--text-muted);cursor:pointer;transition:all .15s ease;line-height:1.2;display:inline-flex;align-items:center;justify-content:center}.zone-action-btn:hover:not(:disabled){background:#ffffff29;border-color:#ffffff52;color:#fff}.zone-action-btn:disabled{opacity:.22;cursor:not-allowed}.zone-lock-btn.locked{background:#f59e0b38;border-color:#f59e0b99;color:#fbbf24}.zone-card.is-locked{border-right:2px solid #f59e0b}.hair-presets-grid{display:flex;flex-direction:column;gap:5px;padding-bottom:16px}.hair-preset-card{padding:6px 10px;background:#191c2b;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:all .15s ease}.hair-preset-card:hover{background:#22273d;border-color:#fff3;transform:translate(2px)}.hair-preset-card.active{background:#7c3aed33;border-color:var(--accent-primary);box-shadow:0 0 8px var(--accent-primary-glow)}.preset-header{display:flex;align-items:center;gap:6px}.preset-icon{font-size:14px}.preset-name{font-weight:600;font-size:12px;color:var(--text-main)}.preset-badge{margin-left:auto;background:var(--accent-primary);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px}.preset-ramp-row{display:flex;height:12px;border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}.ramp-chip{flex:1;height:100%}.mask-tools-sidebar-inner{height:100%;overflow-y:auto;display:flex;flex-direction:column}.active-zone-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid rgba(0,229,255,.4);background:#00e5ff1f;color:#00e5ff;transition:all .2s ease}.brush-size-section{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle)}.brush-size-header{display:flex;align-items:center;justify-content:space-between}.brush-size-header .sub-hint{font-size:11px;color:var(--text-muted)}.brush-size-header .sub-hint kbd{background:#ffffff14;padding:1px 4px;border-radius:3px;border:1px solid rgba(255,255,255,.15);font-family:inherit;font-size:10px;color:var(--text-sub)}.brush-size-title-group{display:flex;align-items:center;gap:8px}.brush-size-badge{font-family:var(--font-mono, monospace);color:#38bdf8;border-color:#38bdf859;background:#38bdf81f;min-width:40px;text-align:center;font-weight:600}.brush-size-slider-row{display:flex;align-items:center;gap:10px;padding:2px 0}.brush-range-slider{flex:1;width:100%!important}.slider-tick-label{font-size:11px;font-family:var(--font-mono, monospace);color:var(--text-muted);-webkit-user-select:none;user-select:none;line-height:1}.color-to-mask-section{display:flex;flex-direction:column;gap:8px;margin-top:10px;flex:1}.badge-tag-sm{font-size:10px;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.2);background:#ffffff0f;color:var(--text-sub);font-weight:500}.panel-tip-text{font-size:11px;line-height:1.4;color:var(--text-muted);margin:0}.color-to-mask-list{display:flex;flex-direction:column;gap:5px;max-height:380px;overflow-y:auto;padding-right:2px}.color-mask-card{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:#191c2b;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;gap:8px;-webkit-user-select:none;user-select:none}.color-mask-card:hover{background:#22273a;border-color:#fff3}.color-mask-card.fully-assigned{background:#ffffff05;border-color:#ffffff0f;opacity:.65;cursor:default}.color-mask-card.all-locked{background:#ffffff05;border-color:#ef444433;opacity:.65;cursor:not-allowed}.color-mask-card-left{display:flex;align-items:center;gap:7px;min-width:80px;flex-shrink:0}.color-swatch-box{width:20px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.2);flex-shrink:0;box-shadow:0 1px 3px #0006}.color-meta-info{display:flex;flex-direction:column;line-height:1.1}.color-hex-text{font-size:11px;font-family:var(--font-mono);font-weight:600;color:var(--text-main)}.color-pixel-count{font-size:10px;color:var(--text-muted)}.color-mask-card-mid{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.zone-pct-bar-wrap{width:100%;height:5px;background:#00000059;border-radius:3px;overflow:hidden}.zone-pct-bar-fill{height:100%;border-radius:3px;transition:width .25s ease}.zone-pct-label{font-size:9px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-mask-card-right{flex-shrink:0}.btn-assign-zone{padding:3px 8px;font-size:11px;font-weight:600;background:#38bdf81f;border:1px solid rgba(56,189,248,.35);color:#38bdf8;border-radius:4px;cursor:pointer;transition:all .15s ease}.color-mask-card:hover .btn-assign-zone{background:#38bdf8;color:#0b0f19;box-shadow:0 0 8px #38bdf866}.badge-fully-assigned{font-size:10px;color:#10b981;font-weight:500;padding:2px 4px}.badge-locked{font-size:10px;color:#f87171;font-weight:500;padding:2px 4px}.empty-color-hint{padding:20px 10px;text-align:center;font-size:12px;color:var(--text-muted);background:#00000026;border-radius:var(--radius-sm);border:1px dashed var(--border-subtle)}.hair-action-box{animation:hairActionFade .18s ease-out}@keyframes hairActionFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.hair-preset-card.previewing{border-color:#a855f7!important;background:#a855f726!important;box-shadow:0 0 10px #a855f74d!important}.preset-badge.badge-preview{background:#9333ea!important;color:#fff!important}.tool-picker-group.mask-tool-grid{grid-template-columns:repeat(2,1fr);gap:5px}.mask-tool-grid .tool-tab-btn{grid-column:span 1}.mask-box-select-card{background:#7c3aed0d;border:1px solid rgba(124,58,237,.2);border-radius:var(--radius-sm);padding:8px 10px;display:flex;flex-direction:column;gap:8px;margin-top:8px;transition:border-color .2s ease,box-shadow .2s ease}.mask-box-select-card.tool-active{border-color:#a855f799;background:#7c3aed17;box-shadow:0 0 12px #7c3aed33}.box-select-dropdown-row{width:100%}.match-preset-select{width:100%;height:28px;background:#111422;border:1px solid rgba(255,255,255,.18);color:#f8fafc;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:4px;cursor:pointer;outline:none;transition:border-color .15s ease,background .15s ease}.match-preset-select:hover,.match-preset-select:focus{border-color:#a855f7;background:#161b2e}.match-chips-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:28px;max-height:120px;overflow-y:auto;padding-right:2px}.match-color-chip{width:24px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.25);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0006;cursor:default;-webkit-user-select:none;user-select:none;transition:transform .1s ease}.match-color-chip.chip-white{border:1px solid rgba(0,0,0,.35)}.match-color-chip.chip-white .match-chip-index{color:#0f172a;text-shadow:0 0 2px #fff}.match-color-chip.chip-transparent{background-color:#1a1d2d!important;background-image:linear-gradient(45deg,#2e344e 25%,transparent 25%),linear-gradient(-45deg,#2e344e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2e344e 75%),linear-gradient(-45deg,transparent 75%,#2e344e 75%)!important;background-size:6px 6px!important;background-position:0 0,0 3px,3px -3px,-3px 0px!important;border:1px dashed rgba(56,189,248,.6)!important}.match-chip-index{font-family:var(--font-mono);font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;line-height:1}.match-chip-del-btn{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;background:#ef4444;color:#fff;border:1px solid rgba(255,255,255,.6);font-size:8px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 3px #00000080}.match-color-chip:hover .match-chip-del-btn{display:flex}.match-chip-del-btn:hover{background:#dc2626;transform:scale(1.15)}.match-chip-add-btn{background:#ffffff0f;border:1px dashed rgba(255,255,255,.25);color:var(--text-sub);font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:3px;height:24px;transition:all .15s ease}.match-chip-add-btn:hover{background:#a855f72e;border-color:#a855f7;color:#f8fafc}.add-color-picker-popover{background:#141724;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);padding:8px;box-shadow:0 6px 16px #0009;display:flex;flex-direction:column;gap:6px;animation:fadeIn .15s ease-out}.add-color-picker-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-sub)}.btn-xs-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:11px;padding:2px 4px}.btn-xs-close:hover{color:#fff}.add-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.add-swatch-item{height:20px;border-radius:3px;border:1px solid rgba(255,255,255,.2);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .1s ease}.add-swatch-item:hover{transform:scale(1.12);z-index:2;border-color:#fff}.add-swatch-item.is-selected{outline:2px solid #a855f7;outline-offset:-1px}.add-swatch-item .swatch-idx{font-family:var(--font-mono);font-size:8px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}.add-swatch-item.chip-white .swatch-idx{color:#000;text-shadow:0 0 2px #fff}.add-swatch-item .swatch-check{position:absolute;top:-2px;right:0;font-size:8px;color:#10b981;font-weight:900;text-shadow:0 1px 2px #000}.match-tip-box{background:#0003;border-radius:4px;padding:6px 8px;font-size:10.5px;color:var(--text-muted);line-height:1.45}.match-tip-line{color:var(--text-sub)}.match-tip-line.match-tip-highlight{color:#fca5a5;margin-top:2px}.subtract-tag{display:inline-block;padding:0 4px;border-radius:3px;background:#ef444440;border:1px solid rgba(239,68,68,.45);color:#f87171;font-size:9.5px;font-weight:700;vertical-align:middle;margin:0 2px}.match-sub-tip{margin-top:3px;font-size:10px;color:var(--text-muted)}.canvas-editor-area{display:flex;flex-direction:column;height:100%;width:100%;position:relative;overflow:hidden}.canvas-toolbar{height:40px;background:#12141fd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 16px;gap:10px;font-size:12px}.tool-group{display:flex;align-items:center;gap:6px}.toolbar-label{color:var(--text-muted);font-size:11px}.tool-btn{background:#202434;border:1px solid var(--border-subtle);color:var(--text-sub);border-radius:var(--radius-sm);padding:3px 9px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.tool-btn:hover{background:#2b3146;color:var(--text-main)}.tool-btn.active{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.zoom-level-text{font-family:var(--font-mono);font-size:12px;min-width:28px;text-align:center;color:var(--text-main);font-weight:600}.zoom-tool-group{display:flex;align-items:center;gap:8px}.zoom-range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:84px;height:4px;border-radius:2px;background:#2b3146;outline:none;cursor:pointer;transition:background .15s}.zoom-range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-primary);border:2px solid #ffffff;cursor:pointer;box-shadow:0 0 6px #7c3aed80;transition:transform .1s}.zoom-range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.zoom-range-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-primary);border:2px solid #ffffff;cursor:pointer;box-shadow:0 0 6px #7c3aed80}.btn-zoom-reset{padding:2px 7px;font-size:11px}.tool-divider{width:1px;height:18px;background:var(--border-subtle)}.selection-status-badge{display:inline-flex;align-items:center;padding:3px 9px;background:#a855f733;border:1px solid rgba(168,85,247,.5);border-radius:9999px;color:#d8b4fe;font-family:var(--font-mono);font-size:11px;font-weight:600}.btn-replace-selection{background:#7c3aed38;border:1px solid rgba(139,92,246,.5);color:#c4b5fd;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease}.btn-replace-selection:hover{background:#7c3aed66;border-color:#a78bfacc;color:#fff;box-shadow:0 0 10px #7c3aed59;transform:translateY(-1px)}.floating-context-bar{position:absolute;top:48px;left:50%;transform:translate(-50%);z-index:60;display:inline-flex;align-items:center;padding:5px 12px;background:#12141ff0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(168,85,247,.45);border-radius:9999px;box-shadow:0 8px 28px #000000a6,0 2px 8px #00000073,0 0 16px #a855f726;pointer-events:auto;-webkit-user-select:none;user-select:none;animation:floating-pill-in .18s cubic-bezier(.16,1,.3,1);white-space:nowrap;max-width:calc(100% - 32px);box-sizing:border-box}@keyframes floating-pill-in{0%{opacity:0;transform:translate(-50%,-6px) scale(.97)}to{opacity:1;transform:translate(-50%) scale(1)}}.floating-context-group{display:inline-flex;align-items:center;gap:8px}.floating-tool-badge{display:inline-flex;align-items:center;padding:3px 10px;background:#a855f733;border:1px solid rgba(168,85,247,.45);border-radius:9999px;color:#d8b4fe;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.2px}.floating-btn-group,.floating-pills-group{display:inline-flex;align-items:center;gap:6px}.floating-pills-group .connectivity-pill-btn{flex:initial;padding:3px 9px;border-radius:9999px}.floating-btn-group #btn-cancel-selection:hover{background:#ef444433;border-color:#ef444480;color:#fca5a5}.floating-help-tip{color:var(--text-muted);font-size:11px;padding:0 4px}.selection-color-stats-panel{position:absolute;top:90px;left:16px;z-index:24;display:flex;flex-direction:column;width:172px;max-height:calc(100% - 110px);background:#12141ff0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(168,85,247,.38);border-radius:10px;box-shadow:0 10px 30px #000000a6,0 2px 8px #0006,0 0 16px #a855f71f;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:auto;animation:floating-pill-in .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.stats-panel-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 6px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.stats-panel-title{font-size:11px;font-weight:600;color:#e2e8f0;display:flex;align-items:center;gap:4px;letter-spacing:.3px}.stats-summary-badge{font-family:var(--font-mono);font-size:10px;font-weight:500;color:#c084fc;background:#a855f726;padding:1px 6px;border-radius:9999px;border:1px solid rgba(168,85,247,.3);white-space:nowrap}.stats-color-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 6px;display:flex;flex-direction:column;gap:2px}.stats-color-list::-webkit-scrollbar{width:4px}.stats-color-list::-webkit-scrollbar-track{background:transparent}.stats-color-list::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:2px}.stats-color-list::-webkit-scrollbar-thumb:hover{background:#a855f780}.stats-color-row{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:5px;cursor:pointer;transition:background .12s ease,border-color .12s ease;border:1px solid transparent;font-size:11px;line-height:1}.stats-color-row:hover{background:#a855f733;border-color:#a855f773}.stats-color-row.is-active-fg{background:#a855f738;border-color:#a855f78c}.stats-color-row.is-active-bg:not(.is-active-fg){background:#38bdf829;border-color:#38bdf873}.stats-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 3px #00000059;flex-shrink:0;box-sizing:border-box}.stats-color-chip.chip-white{border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px #0003}.stats-color-chip.chip-transparent{background-color:#1a1d2d!important;background-image:linear-gradient(45deg,#2e344e 25%,transparent 25%),linear-gradient(-45deg,#2e344e 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2e344e 75%),linear-gradient(-45deg,transparent 75%,#2e344e 75%)!important;background-size:6px 6px!important;background-position:0 0,0 3px,3px -3px,-3px 0px!important;border:1px dashed rgba(56,189,248,.6)!important}.stats-color-index{font-family:var(--font-mono);font-size:11px;font-weight:600;color:#cbd5e1;width:24px;flex-shrink:0}.stats-color-count{font-family:var(--font-mono);font-size:11px;font-weight:500;color:#f8fafc;flex:1;text-align:right}.stats-color-pct{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);width:38px;text-align:right;flex-shrink:0}.canvas-coords-bar{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-sub)}.hover-color-chip{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.2);display:inline-block}.hover-zone-chip{padding-left:6px;color:var(--text-main)}.canvas-viewport{flex:1;display:flex;overflow:auto;padding:24px;position:relative}.canvas-viewport.dragover{background:#7c3aed1a;outline:2px dashed var(--accent-primary)}.canvas-container{margin:auto;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 36px #000000a6,0 0 0 1px var(--border-subtle);border-radius:4px;background-color:#161926;background-image:linear-gradient(45deg,#222638 25%,transparent 25%),linear-gradient(-45deg,#222638 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#222638 75%),linear-gradient(-45deg,transparent 75%,#222638 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;overflow:hidden}#main-display-canvas{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;cursor:crosshair;display:block}.empty-dropzone{width:480px;min-height:320px;background:var(--bg-card);border:2px dashed var(--border-subtle);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center;transition:all .2s ease}.dropzone-icon{font-size:48px;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}.dropzone-title{font-size:16px;font-weight:700;color:var(--text-main);margin-bottom:6px}.dropzone-sub{font-size:12px;color:var(--text-muted);max-width:320px;line-height:1.5;margin-bottom:20px}.restore-banner{margin-top:20px;background:#f59e0b1f;border:1px solid rgba(245,158,11,.3);padding:8px 12px;border-radius:var(--radius-md);display:flex;align-items:center;gap:12px;font-size:12px;color:#fcd34d}.pip-preview-card{box-sizing:border-box;position:absolute;top:52px;right:16px;width:auto;min-width:220px;background:#12141ff0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:0 16px 36px #000000bf,0 0 0 1px #7c3aed40;z-index:50;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;transition:box-shadow .2s,border-color .2s,width .15s ease-out}.pip-preview-card.dragging{opacity:.95;box-shadow:0 24px 48px #000000d9,0 0 0 2px var(--accent-primary);cursor:grabbing!important;transition:none}.pip-header{height:32px;padding:0 10px;background:#ffffff0a;border-bottom:1px solid rgba(255,255,255,.06);border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:space-between;cursor:grab}.pip-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--text-main, #f1f5f9)}.pip-dimension-badge{font-family:var(--font-mono, monospace);font-size:10px;color:#38bdf8;background:#38bdf81f;border:1px solid rgba(56,189,248,.3);padding:1px 5px;border-radius:4px}.pip-header-actions{display:flex;align-items:center;gap:4px}.pip-action-btn{background:transparent;border:none;color:var(--text-sub, #94a3b8);width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.pip-action-btn:hover{background:#ffffff1a;color:#fff}.pip-btn-close:hover{background:#ef444433;color:#f87171}.pip-body{box-sizing:border-box;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.pip-stage-wrapper{box-sizing:border-box;width:100%;min-height:88px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:12px;position:relative;overflow:visible;box-shadow:inset 0 2px 8px #00000080;border:1px solid rgba(255,255,255,.08);transition:background .2s,height .15s ease-out}.pip-stage-wrapper canvas{image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:none;border-radius:0;flex-shrink:0;display:block}.pip-bg-lcd{background:#8fa562}.pip-bg-checker{background-color:#1a1d2d;background-image:linear-gradient(45deg,#24283b 25%,transparent 25%),linear-gradient(-45deg,#24283b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#24283b 75%),linear-gradient(-45deg,transparent 75%,#24283b 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.pip-empty-placeholder{font-size:11px;color:var(--text-muted, #64748b);display:flex;align-items:center;justify-content:center}.pip-controls{width:100%;display:flex;flex-direction:column;gap:8px}.pip-slider-row{display:flex;align-items:center;gap:8px;width:100%}.pip-label{font-size:11px;color:var(--text-sub, #94a3b8);min-width:30px}.pip-range-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;border-radius:2px;background:#2b3146;outline:none;cursor:pointer}.pip-range-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#38bdf8;border:2px solid #ffffff;cursor:pointer;box-shadow:0 0 5px #38bdf899;transition:transform .1s}.pip-range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.pip-scale-badge{font-family:var(--font-mono, monospace);font-size:11px;font-weight:600;color:#38bdf8;min-width:20px;text-align:right}.pip-bg-row{display:flex;align-items:center;gap:8px;width:100%}.pip-bg-chips{display:flex;align-items:center;gap:4px;flex:1}.pip-bg-btn{flex:1;padding:3px 2px;font-size:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:4px;color:var(--text-sub, #94a3b8);cursor:pointer;white-space:nowrap;text-align:center;transition:all .15s}.pip-bg-btn:hover{background:#ffffff1a;color:#fff}.pip-bg-btn.active{background:#7c3aed59;border-color:var(--accent-primary, #7c3aed);color:#fff;font-weight:600}.pip-preview-card.minimized{width:auto;min-width:140px}.pip-minimized-pill{height:32px;padding:0 10px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-main, #f1f5f9)}.pill-text{font-weight:500;color:#38bdf8}.pill-restore-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:4px;width:20px;height:20px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto}.pill-restore-btn:hover{background:var(--accent-primary)}.replace-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#0a0c14bf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;animation:replaceModalFadeIn .15s ease-out}@keyframes replaceModalFadeIn{0%{opacity:0}to{opacity:1}}.replace-modal-card{background:#151824;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);box-shadow:0 24px 48px -12px #000000bf,0 0 0 1px #7c3aed33;width:460px;max-width:95vw;margin:auto;display:flex;flex-direction:column;overflow:hidden;animation:replaceModalPop .18s cubic-bezier(.16,1,.3,1)}@keyframes replaceModalPop{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.replace-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-subtle);background:#ffffff05}.replace-modal-header .modal-title-group{display:flex;align-items:center;gap:8px}.replace-modal-header .modal-title-icon{font-size:16px}.replace-modal-header .modal-title-text{font-size:14px;font-weight:600;color:var(--text-main);letter-spacing:-.01em}.replace-modal-header .modal-close-btn{background:transparent;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .15s ease;line-height:1}.replace-modal-header .modal-close-btn:hover{background:#ffffff14;color:var(--text-main)}.replace-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:16px}.replace-slots-row{display:flex;align-items:center;gap:12px}.replace-slot-box{flex:1;background:#ffffff08;border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px;cursor:pointer;transition:all .15s ease}.replace-slot-box:hover{border-color:#fff3;background:#ffffff0d}.replace-slot-box.active{border-color:#8b5cf6;background:#7c3aed1a;box-shadow:0 0 12px #7c3aed40}.slot-box-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.slot-tag{font-size:11px;font-weight:600;color:var(--text-sub)}.slot-active-dot{font-size:10px;color:#a78bfa;font-weight:600;opacity:0;transition:opacity .15s ease}.replace-slot-box.active .slot-active-dot{opacity:1}.slot-box-content{display:flex;align-items:center;gap:10px}.slot-chip-preview{width:32px;height:32px;border-radius:6px;border:1.5px solid rgba(255,255,255,.2);box-shadow:inset 0 0 4px #0006;flex-shrink:0}.slot-chip-desc{display:flex;flex-direction:column;overflow:hidden;gap:2px}.slot-name{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-sub{font-size:10px;color:var(--text-muted)}.btn-swap-replace-slots{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-subtle);background:#ffffff0d;color:var(--text-sub);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s ease;flex-shrink:0}.btn-swap-replace-slots:hover{background:#7c3aed40;border-color:#8b5cf6;color:#fff;transform:rotate(180deg) scale(1.05)}.replace-palette-picker{background:#00000038;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 12px}.replace-palette-header{margin-bottom:8px}.palette-picker-tip{font-size:11px;font-weight:600;color:#a78bfa}.replace-mini-palette{display:flex;flex-direction:column;gap:5px}.mini-palette-family-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:4px}.mini-chip{height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.16);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,box-shadow .1s ease,border-color .1s ease;padding:0}.mini-chip:hover{transform:scale(1.15);z-index:2;box-shadow:0 2px 8px #00000080;border-color:#fff}.mini-chip.selected{border:2px solid #ffffff;box-shadow:0 0 10px #8b5cf6;transform:scale(1.1);z-index:3}.mini-chip-idx{font-family:var(--font-mono);font-size:9px;font-weight:700;color:#ffffffb3;text-shadow:0 1px 2px #000;pointer-events:none}.replace-scope-section{display:flex;align-items:center;gap:12px;font-size:12px;padding:0 2px}.replace-scope-section .scope-label{color:var(--text-sub);font-weight:500;font-size:12px}.replace-scope-section .scope-options{display:flex;align-items:center;gap:16px}.replace-scope-section .scope-radio-label{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-main);font-size:12px}.replace-scope-section .scope-radio-label input[type=radio]{accent-color:#8b5cf6;width:14px;height:14px;cursor:pointer}.replace-scope-section .scope-radio-label.disabled{opacity:.45;cursor:not-allowed}.replace-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--border-subtle);background:#00000026}.footer-shortcut-hint{font-size:11px;color:var(--text-muted)}.footer-shortcut-hint b{color:var(--text-sub);font-weight:600}.footer-buttons{display:flex;align-items:center;gap:8px}.confirm-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#0a0c14bf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;animation:confirmModalFadeIn .15s ease-out}@keyframes confirmModalFadeIn{0%{opacity:0}to{opacity:1}}.confirm-modal-card{background:#151824;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);box-shadow:0 24px 48px -12px #000000bf,0 0 0 1px #7c3aed33;width:440px;max-width:95vw;margin:auto;display:flex;flex-direction:column;overflow:hidden;animation:confirmModalPop .18s cubic-bezier(.16,1,.3,1)}@keyframes confirmModalPop{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-subtle);background:#ffffff05}.confirm-modal-title-group{display:flex;align-items:center;gap:8px}.confirm-modal-icon{font-size:16px}.confirm-modal-title{font-size:14px;font-weight:600;color:var(--text-main);letter-spacing:-.01em}.confirm-modal-close-btn{background:transparent;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .15s ease;line-height:1}.confirm-modal-close-btn:hover{background:#ffffff14;color:var(--text-main)}.confirm-modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:8px}.confirm-modal-message{font-size:14px;color:var(--text-main);line-height:1.5;margin:0}.confirm-modal-submessage{font-size:12px;color:var(--text-muted);line-height:1.5;margin:0}.confirm-modal-footer{padding:12px 18px;border-top:1px solid var(--border-subtle);background:#0003;display:flex;justify-content:flex-end;gap:10px}.help-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#0a0c14c7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10002;display:flex;align-items:center;justify-content:center;padding:20px;animation:replaceModalFadeIn .15s ease-out}.help-modal-card{background:#151824;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);box-shadow:0 24px 48px -12px #000c,0 0 0 1px #7c3aed40;width:720px;max-width:95vw;max-height:85vh;margin:auto;display:flex;flex-direction:column;overflow:hidden;animation:replaceModalPop .18s cubic-bezier(.16,1,.3,1)}.help-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-subtle);background:#ffffff08;flex-shrink:0}.help-modal-title-group{display:flex;align-items:center;gap:10px}.help-modal-icon{font-size:18px}.help-modal-title{font-size:15px;font-weight:600;color:var(--text-main);letter-spacing:-.2px}.help-modal-close-btn{background:transparent;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:all .15s ease;line-height:1}.help-modal-close-btn:hover{background:#ffffff14;color:var(--text-main)}.help-modal-body{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:16px}.help-section-title{font-size:14px;font-weight:600;color:var(--text-main);margin:0 0 10px}.help-grid-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.help-guide-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);padding:12px}.guide-card-header{font-size:13px;font-weight:600;color:var(--accent-primary, #a855f7);margin-bottom:6px}.guide-card-content{font-size:12px;color:var(--text-sub);line-height:1.5}.help-shortcuts-table-wrap{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden}.help-shortcuts-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.help-shortcuts-table th{background:#ffffff0a;color:var(--text-sub);padding:8px 12px;font-weight:600;border-bottom:1px solid var(--border-subtle)}.help-shortcuts-table td{padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text-main)}.help-shortcuts-table tr:last-child td{border-bottom:none}.help-shortcuts-table .cat-cell{background:#ffffff04;font-weight:600;color:var(--text-sub);border-right:1px solid var(--border-subtle);vertical-align:middle}.help-shortcuts-table kbd{display:inline-block;padding:2px 6px;font-family:inherit;font-size:11px;color:var(--text-main);background:#202434;border:1px solid rgba(255,255,255,.15);border-radius:4px;box-shadow:0 1px 2px #0003}.help-modal-footer{padding:12px 20px;border-top:1px solid var(--border-subtle);background:#0003;display:flex;justify-content:flex-end;flex-shrink:0}.toast-container{position:fixed;bottom:64px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}.toast{padding:10px 16px;background:#161926f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-main);font-size:12px;font-weight:500;box-shadow:0 6px 20px #00000073;pointer-events:auto;animation:toast-in .25s cubic-bezier(.16,1,.3,1);transition:opacity .3s ease,transform .3s ease;max-width:360px}.toast.fade-out{opacity:0;transform:translateY(10px)}.toast-success{border-left:4px solid var(--accent-success)}.toast-error{border-left:4px solid var(--accent-danger)}.toast-warning{border-left:4px solid var(--accent-warning)}.toast-info{border-left:4px solid var(--accent-secondary)}@keyframes toast-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}