*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0a0f;--bg-secondary: #0f0f1a;--bg-card: rgba(255, 255, 255, .04);--bg-card-hover: rgba(255, 255, 255, .07);--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .15);--text-primary: #f0f0f8;--text-secondary: rgba(240, 240, 248, .55);--text-muted: rgba(240, 240, 248, .35);--accent-primary: #7c3aed;--accent-secondary: #06b6d4;--accent-glow: rgba(124, 58, 237, .4);--accent-cyan-glow: rgba(6, 182, 212, .3);--success: #10b981;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--shadow-card: 0 8px 32px rgba(0, 0, 0, .4);--shadow-glow: 0 0 40px rgba(124, 58, 237, .15);--transition-fast: .15s ease;--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1);--font-primary: "Inter", sans-serif;--font-display: "Space Grotesk", sans-serif}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:#7c3aed80;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#7c3aedcc}.bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:orbFloat 12s ease-in-out infinite alternate}.bg-orb-1{width:600px;height:600px;background:radial-gradient(circle,#7c3aed 0%,transparent 70%);top:-200px;left:-200px;animation-duration:14s}.bg-orb-2{width:500px;height:500px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-150px;right:-150px;animation-duration:10s;animation-delay:-5s}.bg-orb-3{width:350px;height:350px;background:radial-gradient(circle,#ec4899 0%,transparent 70%);top:50%;left:60%;animation-duration:16s;animation-delay:-8s;opacity:.2}@keyframes orbFloat{0%{transform:translate(0) scale(1)}to{transform:translate(40px,60px) scale(1.1)}}.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}.header{padding:28px 0 20px;border-bottom:1px solid var(--glass-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:100;background:#0a0a0fb3}.header-inner{display:flex;align-items:center;gap:16px}.header-logo{display:flex;align-items:center;gap:12px}.logo-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px #7c3aed73;flex-shrink:0;overflow:hidden}.header-title{font-family:var(--font-display);font-size:1.7rem;font-weight:700;background:linear-gradient(135deg,#f0f0f8 30%,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.header-subtitle{font-size:.75rem;color:var(--text-muted);font-weight:400;margin-top:3px;-webkit-text-fill-color:var(--text-muted)}.header-badge{margin-left:auto;padding:6px 14px;border-radius:100px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--glass-border);background:var(--bg-card);color:var(--text-secondary)}.hero{text-align:center;padding:64px 0 48px}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-secondary);margin-bottom:20px;padding:6px 16px;border-radius:100px;background:#06b6d414;border:1px solid rgba(6,182,212,.2)}.hero-title{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;line-height:1.1;margin-bottom:18px;background:linear-gradient(135deg,#f0f0f8,#f0f0f8b3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-title span{background:linear-gradient(135deg,#7c3aed,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-desc{font-size:1.05rem;color:var(--text-secondary);max-width:520px;margin:0 auto 40px;line-height:1.7}.picker-section{margin-bottom:56px}.picker-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:36px 40px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--shadow-card);display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:space-between}.picker-left{display:flex;align-items:center;gap:24px;flex:1;min-width:280px}.color-preview-btn{position:relative;flex-shrink:0;width:80px;height:80px;border:none;border-radius:var(--radius-lg);background:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;outline:none}.color-ring{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:calc(var(--radius-lg) + 4px);background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);z-index:0;opacity:.65;animation:spinRing 8s linear infinite}@keyframes spinRing{to{transform:rotate(360deg)}}.preview-swatch{position:relative;z-index:1;width:80px;height:80px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;transition:transform var(--transition-spring),box-shadow var(--transition-base);box-shadow:0 4px 20px #00000080}.color-preview-btn:hover .preview-swatch{transform:scale(1.06);box-shadow:0 8px 32px #0009}.preview-icon{font-size:1.5rem;opacity:0;transform:scale(.6);transition:opacity var(--transition-base),transform var(--transition-spring);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.color-preview-btn:hover .preview-icon{opacity:1;transform:scale(1)}.btn-choose-color{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:9px 16px;border-radius:var(--radius-sm);border:1px solid rgba(124,58,237,.4);background:#7c3aed1a;color:#a78bfa;font-family:var(--font-primary);font-size:.82rem;font-weight:600;cursor:pointer;letter-spacing:.01em;transition:all var(--transition-base)}.btn-choose-color:hover{background:#7c3aed33;border-color:#7c3aedb3;color:#c4b5fd;transform:translateY(-1px);box-shadow:0 4px 14px #7c3aed40}.picker-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.btn-row{display:flex;gap:10px;align-items:center}.btn-generate{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--radius-md);border:none;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;font-family:var(--font-primary);font-size:.9rem;font-weight:600;cursor:pointer;transition:transform var(--transition-spring),box-shadow var(--transition-base);box-shadow:0 4px 20px #7c3aed66;white-space:nowrap}.btn-generate:hover{transform:translateY(-2px);box-shadow:0 8px 32px #7c3aed99}.btn-generate:active{transform:translateY(0)}.btn-randomize{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:var(--radius-md);border:none;background:linear-gradient(135deg,#ec4899,#f59e0b);color:#fff;font-family:var(--font-primary);font-size:.9rem;font-weight:600;cursor:pointer;transition:transform var(--transition-spring),box-shadow var(--transition-base);box-shadow:0 4px 20px #ec489959;white-space:nowrap;position:relative;overflow:hidden}.btn-randomize:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);pointer-events:none}.btn-randomize:hover{transform:translateY(-2px);box-shadow:0 8px 28px #ec48998c}.btn-randomize:active{transform:translateY(0) scale(.97)}.dice-icon{display:inline-block;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}.btn-randomize.spinning .dice-icon{animation:diceRoll .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes diceRoll{0%{transform:rotate(0) scale(1)}30%{transform:rotate(180deg) scale(1.3)}60%{transform:rotate(330deg) scale(.9)}to{transform:rotate(360deg) scale(1)}}.btn-regenerate{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--radius-md);border:1px solid rgba(6,182,212,.35);background:#06b6d414;color:var(--accent-secondary);font-family:var(--font-primary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.btn-regenerate:hover:not(:disabled){background:#06b6d429;border-color:var(--accent-secondary);transform:translateY(-1px);box-shadow:0 4px 16px #06b6d433}.btn-regenerate:disabled{opacity:.35;cursor:not-allowed}.btn-regenerate span{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.btn-regenerate:hover:not(:disabled) span{transform:rotate(180deg)}.btn-export{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-primary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-base);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}.btn-export:hover:not(:disabled){border-color:var(--accent-secondary);color:var(--accent-secondary);background:#06b6d414;box-shadow:0 4px 16px #06b6d426}.btn-export:disabled{opacity:.35;cursor:not-allowed}.variation-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:#7c3aed1a;border:1px solid rgba(124,58,237,.25);font-size:.72rem;color:var(--text-secondary);animation:fadeInUp .3s ease both}.var-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-primary);box-shadow:0 0 6px var(--accent-primary);flex-shrink:0;animation:pulse 2s ease-in-out infinite}.var-name{font-weight:700;color:#a78bfa}.var-step{color:var(--text-muted);font-weight:400}.palettes-area{flex:1;margin-bottom:60px}.palette-group{margin-bottom:48px}.palette-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}.palette-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.palette-icon.complementary{background:linear-gradient(135deg,#7c3aed33,#ed7c3a33);border:1px solid rgba(124,58,237,.3)}.palette-icon.analogous{background:linear-gradient(135deg,#06b6d433,#10b98133);border:1px solid rgba(6,182,212,.3)}.palette-icon.triadic{background:linear-gradient(135deg,#ec489933,#f59e0b33);border:1px solid rgba(236,72,153,.3)}.palette-icon.monochromatic{background:linear-gradient(135deg,#94a3b826,#64748b26);border:1px solid rgba(148,163,184,.25)}.palette-title{font-family:var(--font-display);font-size:1.2rem;font-weight:600}.palette-count{margin-left:auto;font-size:.75rem;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--glass-border);border-radius:100px;padding:4px 12px}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}.color-card{border-radius:var(--radius-lg);border:1px solid var(--glass-border);background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;transition:transform var(--transition-spring),box-shadow var(--transition-base),border-color var(--transition-base);cursor:default}.color-card:hover{transform:translateY(-6px);border-color:var(--glass-border-hover);box-shadow:var(--shadow-card),0 0 30px #7c3aed1a}.color-swatch{height:120px;position:relative;overflow:hidden;transition:height var(--transition-base)}.color-card:hover .color-swatch{height:130px}.swatch-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}.copy-btn{position:absolute;bottom:10px;right:10px;width:34px;height:34px;border-radius:8px;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transform:scale(.85) translateY(4px);transition:opacity var(--transition-base),transform var(--transition-spring),background var(--transition-fast)}.color-card:hover .copy-btn{opacity:1;transform:scale(1) translateY(0)}.copy-btn:hover{background:#10b98180;border-color:#10b98180}.copy-btn.copied{background:#10b98199;border-color:#10b98199;opacity:1;transform:scale(1) translateY(0)}.color-info{padding:14px 16px 16px}.color-hex{font-family:Space Grotesk,monospace;font-size:1rem;font-weight:600;letter-spacing:.04em;margin-bottom:5px}.color-rgb{font-size:.72rem;color:var(--text-muted);font-family:Space Grotesk,monospace;letter-spacing:.02em;line-height:1.5}.color-label{display:inline-block;margin-top:8px;font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:#ffffff0f;color:var(--text-muted)}.copy-all-row{display:flex;align-items:center;gap:10px;margin-top:14px}.copy-all-btn{font-size:.75rem;padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--bg-card);color:var(--text-muted);cursor:pointer;transition:all var(--transition-base);font-family:var(--font-primary);font-weight:500}.copy-all-btn:hover{border-color:var(--accent-secondary);color:var(--accent-secondary);background:#06b6d40f}.empty-state{text-align:center;padding:80px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}.empty-icon{font-size:4rem;opacity:.4;animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.08);opacity:.6}}.empty-title{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--text-secondary)}.empty-desc{font-size:.9rem;color:var(--text-muted);max-width:380px;line-height:1.6}.empty-randomize{margin-top:8px;padding:14px 32px!important;font-size:1rem!important;box-shadow:0 8px 32px #ec489966!important}.toast-container{position:fixed;bottom:30px;right:30px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:#10b981e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(16,185,129,.4);border-radius:var(--radius-md);padding:12px 20px;color:#fff;font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:8px;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) forwards;box-shadow:0 8px 32px #10b9814d}.toast.error{background:#ef4444e6;border-color:#ef444466;box-shadow:0 8px 32px #ef44444d}@keyframes toastIn{0%{opacity:0;transform:translate(20px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}.footer{border-top:1px solid var(--glass-border);background:#0a0a0fcc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:36px 0;margin-top:auto}.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}.footer-brand{display:flex;align-items:center;gap:16px}.footer-logo-mini{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;box-shadow:0 2px 12px #7c3aed59}.footer-name{font-family:var(--font-display);font-size:1rem;font-weight:600;margin-bottom:3px}.footer-email{font-size:.78rem;color:var(--text-muted)}.footer-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:var(--radius-md);background:linear-gradient(135deg,#7c3aed,#06b6d4);color:#fff;font-family:var(--font-primary);font-size:.9rem;font-weight:600;text-decoration:none;transition:transform var(--transition-spring),box-shadow var(--transition-base),opacity var(--transition-fast);box-shadow:0 4px 20px #7c3aed59;position:relative;overflow:hidden}.footer-cta:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%);pointer-events:none}.footer-cta:hover{transform:translateY(-2px);box-shadow:0 8px 36px #7c3aed8c}.footer-cta:active{transform:translateY(0)}.section-divider{height:1px;background:linear-gradient(to right,transparent,var(--glass-border),transparent);margin:40px 0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .5s cubic-bezier(.4,0,.2,1) both}.fade-in-up:nth-child(1){animation-delay:.05s}.fade-in-up:nth-child(2){animation-delay:.1s}.fade-in-up:nth-child(3){animation-delay:.15s}.fade-in-up:nth-child(4){animation-delay:.2s}.fade-in-up:nth-child(5){animation-delay:.25s}.fade-in-up:nth-child(6){animation-delay:.3s}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer{background:linear-gradient(90deg,var(--bg-card) 0%,rgba(255,255,255,.08) 50%,var(--bg-card) 100%);background-size:200% 100%;animation:shimmer 2s infinite}#export-target{background:#0a0a0f;padding:32px;border-radius:0}@media (max-width: 768px){.picker-card{padding:24px;flex-direction:column;align-items:stretch}.picker-left{min-width:unset}.picker-actions{align-items:stretch}.btn-row{justify-content:stretch}.btn-row>*{flex:1;justify-content:center}.btn-generate,.btn-randomize,.btn-regenerate,.btn-export,.variation-badge{justify-content:center}.hero{padding:40px 0 32px}.color-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.footer-inner{flex-direction:column;align-items:flex-start}}@media (max-width: 480px){.color-grid{grid-template-columns:repeat(2,1fr)}.header-badge{display:none}}.cp-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000a6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;animation:cpOverlayIn .2s ease both}@keyframes cpOverlayIn{0%{opacity:0}to{opacity:1}}.cp-modal{background:#0f0f1af5;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:28px 28px 24px;width:100%;max-width:520px;box-shadow:0 24px 80px #000000b3,0 0 0 1px #7c3aed1f;animation:cpModalIn .3s cubic-bezier(.34,1.56,.64,1) both;overflow:hidden}@keyframes cpModalIn{0%{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.cp-header{display:flex;align-items:center;gap:14px;margin-bottom:22px}.cp-preview-swatch{width:52px;height:52px;border-radius:var(--radius-md);flex-shrink:0;box-shadow:0 4px 16px #00000080;border:2px solid rgba(255,255,255,.12);transition:background var(--transition-fast)}.cp-header-info{flex:1}.cp-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:3px}.cp-selected-hex{font-family:Space Grotesk,monospace;font-size:.82rem;color:var(--text-muted);letter-spacing:.06em}.cp-close-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--glass-border);background:#ffffff0a;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all var(--transition-fast);flex-shrink:0}.cp-close-btn:hover{background:#ef444426;border-color:#ef444466;color:#f87171}.cp-hex-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}.cp-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);width:20px;flex-shrink:0;text-align:center}.cp-hex-input{flex:1;background:#ffffff0f;border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text-primary);font-family:Space Grotesk,monospace;font-size:.95rem;font-weight:600;letter-spacing:.05em;outline:none;transition:border-color var(--transition-base),box-shadow var(--transition-base)}.cp-hex-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #7c3aed26}.cp-eyedropper-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#ffffff0a;color:var(--text-secondary);font-size:.75rem;font-family:var(--font-primary);font-weight:500;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.cp-eyedropper-btn:hover{border-color:var(--accent-secondary);color:var(--accent-secondary);background:#06b6d414}.cp-sliders{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}.cp-slider-row{display:flex;align-items:center;gap:10px}.cp-slider-track{flex:1;height:12px;border-radius:6px;position:relative;overflow:visible;box-shadow:inset 0 1px 3px #0006}.cp-slider-track.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.cp-slider-track input[type=range]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;padding:0}.cp-slider-track:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:8px;pointer-events:none}.cp-slider-val{font-family:Space Grotesk,monospace;font-size:.72rem;color:var(--text-muted);width:36px;text-align:right;flex-shrink:0}.cp-slider-track{cursor:pointer}.cp-presets-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}.cp-preset-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin-bottom:22px}.cp-preset{aspect-ratio:1;border-radius:7px;border:2px solid transparent;cursor:pointer;transition:transform var(--transition-spring),border-color var(--transition-fast),box-shadow var(--transition-fast);padding:0;outline:none}.cp-preset:hover{transform:scale(1.18);box-shadow:0 4px 12px #00000080;border-color:#ffffff4d;z-index:1}.cp-preset.active{border-color:#fff;box-shadow:0 0 0 2px #fffc,0 4px 16px #00000080;transform:scale(1.12)}.cp-actions{display:flex;gap:10px;justify-content:flex-end}.cp-cancel-btn{padding:11px 22px;border-radius:var(--radius-md);border:1px solid var(--glass-border);background:#ffffff0a;color:var(--text-secondary);font-family:var(--font-primary);font-size:.88rem;font-weight:500;cursor:pointer;transition:all var(--transition-base)}.cp-cancel-btn:hover{background:#ffffff14;border-color:#ffffff26;color:var(--text-primary)}.cp-apply-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:var(--radius-md);border:none;background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;font-family:var(--font-primary);font-size:.88rem;font-weight:700;cursor:pointer;transition:transform var(--transition-spring),box-shadow var(--transition-base);box-shadow:0 4px 18px #7c3aed73}.cp-apply-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #7c3aed99}.picker-info h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:4px}.hex-display{font-family:Space Grotesk,monospace;font-size:.9rem;color:var(--text-secondary);letter-spacing:.05em}.hex-text-input{margin-top:8px;background:#ffffff0f;border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text-primary);font-family:Space Grotesk,monospace;font-size:.85rem;width:130px;outline:none;transition:border-color var(--transition-base),box-shadow var(--transition-base);display:block}.hex-text-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #7c3aed26}@media (max-width: 480px){.cp-preset-grid{grid-template-columns:repeat(8,1fr)}.cp-modal{padding:20px 16px 18px}}