:root{--primary:#00d4ff;--primary-light:#5ce1ff;--primary-dark:#00a8cc;--primary-subtle:rgba(0,212,255,.1);--primary-glow:rgba(0,212,255,.3);--accent:#a855f7;--accent-light:#c084fc;--accent-dark:#9333ea;--accent-subtle:rgba(168,85,247,.1);--highlight:#f97316;--highlight-light:#fb923c;--highlight-subtle:rgba(249,115,22,.1);--dark-950:#030712;--dark-900:#0a0f1a;--dark-850:#0d1321;--dark-800:#111827;--dark-700:#1e293b;--dark-600:#334155;--dark-500:#475569;--dark-400:#64748b;--dark-300:#94a3b8;--dark-200:#cbd5e1;--dark-100:#e2e8f0;--dark-50:#f8fafc;--success:#10b981;--success-subtle:rgba(16,185,129,.15);--warning:#f59e0b;--warning-subtle:rgba(245,158,11,.15);--error:#ef4444;--error-subtle:rgba(239,68,68,.15);--info:#3b82f6;--info-subtle:rgba(59,130,246,.15);--background:var(--dark-950);--background-secondary:var(--dark-900);--surface:var(--dark-850);--surface-elevated:var(--dark-800);--surface-hover:var(--dark-700);--glass:rgba(17,24,39,.8);--glass-border:hsla(0,0%,100%,.08);--glass-highlight:hsla(0,0%,100%,.05);--text-primary:var(--dark-50);--text-secondary:var(--dark-300);--text-tertiary:var(--dark-400);--text-muted:var(--dark-500);--text-inverse:var(--dark-900);--border:var(--dark-700);--border-light:var(--dark-800);--border-focus:var(--primary);--border-glow:rgba(0,212,255,.5);--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;--shadow-xs:0 1px 3px rgba(0,0,0,.3);--shadow-sm:0 2px 6px rgba(0,0,0,.4);--shadow-md:0 4px 12px rgba(0,0,0,.5);--shadow-lg:0 10px 30px rgba(0,0,0,.6);--shadow-xl:0 20px 50px rgba(0,0,0,.7);--shadow-glow:0 0 20px var(--primary-glow);--shadow-glow-accent:0 0 20px rgba(168,85,247,.3);--shadow-focus:0 0 0 3px var(--primary-glow);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);--transition:var(--transition-base);--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace}[data-theme=light]{--primary:#0891b2;--primary-light:#06b6d4;--primary-dark:#0e7490;--primary-subtle:rgba(8,145,178,.1);--primary-glow:rgba(8,145,178,.2);--accent:#9333ea;--accent-light:#a855f7;--accent-dark:#7e22ce;--accent-subtle:rgba(147,51,234,.1);--highlight:#ea580c;--highlight-light:#f97316;--highlight-subtle:rgba(234,88,12,.1);--background:#fff;--background-secondary:#f9fafb;--surface:#fff;--surface-elevated:#f3f4f6;--surface-hover:#e5e7eb;--glass:hsla(0,0%,100%,.9);--glass-border:rgba(0,0,0,.08);--glass-highlight:rgba(0,0,0,.03);--text-primary:#111827;--text-secondary:#374151;--text-tertiary:#6b7280;--text-muted:#9ca3af;--text-inverse:#fff;--border:#e5e7eb;--border-light:#f3f4f6;--border-focus:var(--primary);--border-glow:rgba(8,145,178,.3);--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 6px rgba(0,0,0,.1);--shadow-lg:0 10px 20px rgba(0,0,0,.12);--shadow-xl:0 20px 40px rgba(0,0,0,.15);--shadow-glow:0 0 20px rgba(8,145,178,.2);--shadow-glow-accent:0 0 20px rgba(147,51,234,.2);--shadow-focus:0 0 0 3px var(--primary-glow)}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}body{background:var(--background);color:var(--text-primary);font-family:var(--font-sans);line-height:1.6;min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}body:before{background:radial-gradient(ellipse at 20% 0,rgba(0,212,255,.08) 0,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(168,85,247,.08) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(249,115,22,.03) 0,transparent 60%);z-index:-2}body:after,body:before{bottom:0;content:"";left:0;pointer-events:none;position:fixed;right:0;top:0}body:after{background-image:linear-gradient(hsla(0,0%,100%,.02) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.02) 1px,transparent 0);background-size:48px 48px;z-index:-1}[data-theme=light] body:before{background:radial-gradient(ellipse at 20% 20%,rgba(8,145,178,.08) 0,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(147,51,234,.06) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(234,88,12,.04) 0,transparent 60%),linear-gradient(135deg,#fff,#f8fafc 50%,#f1f5f9)}[data-theme=light] body:after{background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 0),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 0);background-size:48px 48px}.app-container{margin:0 auto;max-width:1100px;padding:var(--space-8) var(--space-6)}@media (max-width:768px){.app-container{padding:var(--space-6) var(--space-4)}}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:600;line-height:1.3}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}.header{margin-bottom:var(--space-10);padding-top:var(--space-6);text-align:center}.logo-container{gap:var(--space-4);margin-bottom:var(--space-3)}.logo-container,.logo-wrapper{align-items:center;display:flex;justify-content:center}.logo-wrapper{position:relative}.logo-wrapper:before{animation:border-trace 3s linear infinite;background:linear-gradient(90deg,#00d4ff,#a855f7,#ec4899,#00d4ff);background-size:300% 100%;border-radius:calc(var(--radius-lg) + 3px);content:"";inset:-3px;position:absolute;z-index:0}.logo-wrapper:after{background:var(--dark-900);border-radius:calc(var(--radius-lg) + 1px);content:"";inset:1px;position:absolute;z-index:1}[data-theme=light] .logo-wrapper:after{background:#fff}[data-theme=light] .logo-wrapper:before{background:linear-gradient(90deg,#0891b2,#9333ea,#db2777,#0891b2);background-size:300% 100%}@keyframes border-trace{0%{background-position:0 0}to{background-position:300% 0}}.logo-icon{border-radius:var(--radius-lg);box-shadow:0 4px 20px rgba(0,212,255,.3);height:56px;position:relative;width:56px;z-index:2}[data-theme=light] .logo-icon{box-shadow:0 4px 20px rgba(8,145,178,.25)}.logo-icon.logo-light{display:none!important}.logo-icon.logo-dark{display:block!important}[data-theme=light] .logo-icon.logo-dark{display:none!important}[data-theme=light] .logo-icon.logo-light{display:block!important}.logo{font-size:2.75rem;font-weight:800;letter-spacing:-.03em;margin:0}.logo span{background:linear-gradient(90deg,#00d4ff,#a855f7,#ec4899,#f97316,#00d4ff);-webkit-background-clip:text;background-clip:text;background-size:300% 100%;-webkit-text-fill-color:transparent;animation:rainbow-flow 4s linear infinite;color:transparent;filter:drop-shadow(0 0 20px rgba(0,212,255,.3))}[data-theme=light] .logo span{background:linear-gradient(90deg,#0891b2,#7c3aed,#db2777,#ea580c,#0891b2);-webkit-background-clip:text;background-clip:text;background-size:300% 100%;filter:drop-shadow(0 0 15px rgba(8,145,178,.25))}@keyframes rainbow-flow{0%{background-position:0 50%}to{background-position:300% 50%}}.tagline{color:var(--text-tertiary);font-size:.8rem;font-weight:400;letter-spacing:.02em}.header-top{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-2);width:100%}.theme-toggle-pill{display:none}@media (max-width:640px){#themeToggle,.header .theme-toggle-btn,.header-top>.theme-toggle-btn,.theme-toggle-btn,[id=themeToggle],button.theme-toggle-btn{border:none!important;display:none!important;height:0!important;left:-99999px!important;margin:0!important;max-height:0!important;max-width:0!important;min-height:0!important;min-width:0!important;opacity:0!important;overflow:hidden!important;padding:0!important;pointer-events:none!important;position:absolute!important;top:-99999px!important;visibility:hidden!important;width:0!important;clip:rect(0,0,0,0)!important}.header-top{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-bottom:var(--space-2)}.logo-container{align-items:center!important;display:flex!important;flex-direction:row!important;gap:10px!important;justify-content:center!important}.logo-wrapper{margin-bottom:0!important}.logo{font-size:1.75rem}.theme-toggle-pill{background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.1);border-radius:12px;display:inline-flex;gap:1px;justify-content:center;margin:0 auto var(--space-2) auto;padding:2px}.pill-btn{align-items:center;background:transparent;border:none;border-radius:10px;color:#6b7280;cursor:pointer;display:flex;height:20px;justify-content:center;transition:all .25s ease;width:24px}.pill-btn svg{height:11px;width:11px}.pill-btn.active{background:linear-gradient(135deg,#00d4ff,#0891b2);box-shadow:0 1px 4px rgba(0,212,255,.3);color:#030712}.pill-btn:not(.active):hover{background:rgba(0,212,255,.1);color:#00d4ff}[data-theme=light] .theme-toggle-pill{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}[data-theme=light] .pill-btn{color:#9ca3af}[data-theme=light] .pill-btn.active{background:linear-gradient(135deg,#0891b2,#0e7490);box-shadow:0 1px 4px rgba(8,145,178,.3);color:#fff}[data-theme=light] .pill-btn:not(.active):hover{background:rgba(8,145,178,.1);color:#0891b2}}.theme-toggle-btn{align-items:center;background:var(--dark-700);border:none;border-radius:var(--radius-lg);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.05);cursor:pointer;display:flex;height:44px;justify-content:center;min-height:44px;min-width:44px;overflow:hidden;padding:0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:44px}.theme-toggle-btn:hover{background:var(--dark-600);box-shadow:0 4px 16px rgba(0,212,255,.2),inset 0 1px 0 hsla(0,0%,100%,.08);transform:scale(1.05)}.theme-toggle-btn:focus{box-shadow:0 0 0 3px var(--primary-glow),0 4px 16px rgba(0,212,255,.3);outline:none}.theme-toggle-btn:active{transform:scale(.95)}.theme-icon{height:22px;position:absolute;transition:all .4s cubic-bezier(.4,0,.2,1);width:22px}.theme-toggle-btn .sun-icon{color:#fbbf24;opacity:0;transform:scale(.5) rotate(-90deg)}.theme-toggle-btn .moon-icon{color:#a5b4fc;opacity:1;transform:scale(1) rotate(0deg)}[data-theme=light] .theme-toggle-btn{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.05)}[data-theme=light] .theme-toggle-btn:hover{background:#f8fafc;box-shadow:0 4px 16px rgba(251,191,36,.3),inset 0 -1px 0 rgba(0,0,0,.05)}[data-theme=light] .theme-toggle-btn .sun-icon{color:#f59e0b;opacity:1;transform:scale(1) rotate(0deg)}[data-theme=light] .theme-toggle-btn .moon-icon{color:#6366f1;opacity:0;transform:scale(.5) rotate(90deg)}[data-theme=light] .outfit-chip{background:#f3f4f6;border-color:#e5e7eb;color:#374151}[data-theme=light] .outfit-chip:hover{background:#e5e7eb;border-color:var(--primary);color:var(--primary)}[data-theme=light] .gender-affected-group{background:#f9fafb;border-color:#e5e7eb}[data-theme=light] .gender-toggle-mini{background:#e5e7eb}[data-theme=light] .gender-toggle-mini .gender-btn{color:#6b7280}[data-theme=light] .gender-toggle-mini .gender-btn.active{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--primary)}[data-theme=light] .gender-toggle-mini .gender-btn:hover:not(.active){background:rgba(0,0,0,.05);color:#374151}[data-theme=light] .occasion-filter-pill{background:#f3f4f6;border-color:#e5e7eb;color:#374151}[data-theme=light] .occasion-filter-pill.active,[data-theme=light] .occasion-filter-pill:hover{background:var(--primary);border-color:var(--primary);color:#fff}[data-theme=light] .neutrals-card{background:#fff;border-color:#e5e7eb}[data-theme=light] .neutral-colors{background:#f9fafb}[data-theme=light] .neutral-item{background:#fff;border-color:#e5e7eb}[data-theme=light] .neutral-item:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.1)}[data-theme=light] .neutral-hex,[data-theme=light] .neutral-name{color:#374151}[data-theme=light] .dominant-outfit-links{background:#f9fafb;border-color:#e5e7eb}[data-theme=light] .outfit-links-label{color:#6b7280}[data-theme=light] .color-swatch-large{border-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);outline-color:#e5e7eb}.btn{align-items:center;border:none;border-radius:var(--radius-lg);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:.875rem;font-weight:500;gap:var(--space-2);justify-content:center;padding:var(--space-3) var(--space-5);text-decoration:none;transition:var(--transition-base);white-space:nowrap}.btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);box-shadow:var(--shadow-sm),var(--shadow-glow);color:var(--text-inverse)}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-light) 0,var(--primary) 100%);box-shadow:var(--shadow-md),0 0 30px var(--primary-glow);transform:translateY(-2px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--primary);box-shadow:var(--shadow-glow)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--surface);color:var(--text-primary)}.btn-large{font-size:.9375rem;padding:var(--space-4) var(--space-6)}.copy-btn{background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;opacity:.6;padding:var(--space-1) var(--space-2);transition:var(--transition-fast)}.copy-btn:hover{background:var(--surface-hover);opacity:1}.copy-btn.copied{background:var(--success-subtle);color:var(--success);opacity:1}.error-toast{background:var(--surface-elevated);border:1px solid var(--error);border-radius:var(--radius-lg);bottom:2rem;box-shadow:var(--shadow-lg);color:var(--error);left:50%;opacity:0;padding:var(--space-4) var(--space-6);position:fixed;transform:translateX(-50%) translateY(100%);transition:transform .3s ease,opacity .3s ease;z-index:1000}.error-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.quick-swatch:focus{outline:2px solid var(--primary);outline-offset:2px;transform:scale(1.15)}.quick-swatch:focus-visible{box-shadow:var(--shadow-glow)}.btn-icon{padding:var(--space-3)}.upload-section{margin-bottom:var(--space-12)}.upload-container{margin:0 auto;max-width:540px}.upload-area{backdrop-filter:blur(12px);background:var(--glass);border:2px dashed var(--border);border-radius:var(--radius-xl);cursor:pointer;padding:var(--space-12) var(--space-8);text-align:center;transition:var(--transition-base)}.upload-area.drag-over,.upload-area:hover{background:var(--primary-subtle);border-color:var(--primary);box-shadow:var(--shadow-glow)}.upload-area.drag-over{border-style:solid}.upload-icon{align-items:center;background:linear-gradient(135deg,var(--primary-subtle),var(--accent-subtle));border:1px solid var(--glass-border);border-radius:var(--radius-lg);display:flex;font-size:1.5rem;height:56px;justify-content:center;margin:0 auto var(--space-4);width:56px}.upload-area h3{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:var(--space-1)}.upload-area p{color:var(--text-secondary);font-size:.875rem}.url-input-container{margin-top:var(--space-6)}.divider-text{align-items:center;color:var(--text-tertiary);display:flex;font-size:.75rem;letter-spacing:.05em;margin-bottom:var(--space-4);text-transform:uppercase}.divider-text:after,.divider-text:before{background:var(--border);content:"";flex:1;height:1px}.divider-text:before{margin-right:var(--space-4)}.divider-text:after{margin-left:var(--space-4)}.url-input-wrapper{display:flex;gap:var(--space-3)}.url-input-wrapper input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:.875rem;outline:none;padding:var(--space-3) var(--space-4);transition:var(--transition-fast)}.url-input-wrapper input:hover{border-color:var(--dark-600)}.url-input-wrapper input:focus{border-color:var(--primary);box-shadow:var(--shadow-focus)}.url-input-wrapper input::placeholder{color:var(--text-tertiary)}.camera-container{margin:0 auto;max-width:540px;text-align:center}.camera-preview-wrapper{align-items:center;aspect-ratio:4/3;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);display:flex;justify-content:center;margin-bottom:var(--space-4);overflow:hidden;position:relative}#cameraVideo{background:var(--dark-900);display:block;height:100%;object-fit:cover;width:100%}.camera-overlay{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0}.camera-crosshair{animation:pulse-crosshair 2s ease-in-out infinite;border:2px solid var(--primary);border-radius:50%;box-shadow:0 0 20px var(--primary-glow),inset 0 0 20px var(--primary-glow);height:60px;opacity:.7;width:60px}@keyframes pulse-crosshair{0%,to{opacity:.7;transform:scale(1)}50%{opacity:.9;transform:scale(1.1)}}.camera-controls{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-4)}.camera-controls .btn{min-width:120px}.camera-controls .btn.hidden{display:none}.camera-hint{color:var(--text-secondary);font-size:.875rem;margin-top:var(--space-2)}.camera-error{background:var(--error-subtle);border:1px solid var(--error);border-radius:var(--radius-lg);margin-top:var(--space-4);padding:var(--space-6)}.camera-error.hidden{display:none}.camera-error p{color:var(--error);font-weight:500;margin:0}.camera-error-hint{color:var(--text-secondary)!important;font-size:.875rem;font-weight:400!important;margin-top:var(--space-2)!important}.camera-preview-wrapper img{max-height:100%;max-width:100%;object-fit:contain}@media (max-width:480px){.camera-preview-wrapper{aspect-ratio:3/4;max-height:60vh}.camera-controls{gap:var(--space-2)}.camera-controls .btn{font-size:.8125rem;min-width:100px;padding:var(--space-3) var(--space-4)}}.preview-container{margin:0 auto;max-width:540px}.preview-wrapper{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin-bottom:var(--space-4);overflow:hidden}#previewImage{display:block;margin:0 auto;max-height:400px;max-width:100%}.preview-actions{display:flex;gap:var(--space-3);justify-content:center}.preview-container .btn{margin:var(--space-2)}.results-section{display:flex;flex-direction:column;gap:var(--space-8)}.result-card{backdrop-filter:blur(16px);background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;padding:var(--space-8);position:relative}.result-card:before{background:linear-gradient(90deg,transparent,var(--glass-highlight),transparent);content:"";height:1px;left:0;position:absolute;right:0;top:0}.result-card h2{align-items:center;display:flex;font-size:1.125rem;font-weight:600;gap:var(--space-2);margin-bottom:var(--space-2)}.result-card h2:before{background:linear-gradient(180deg,var(--primary),var(--accent));content:"";height:20px;width:4px}.color-theory-card{padding:var(--space-4)}.color-theory-card .card-header-centered,.color-theory-card .harmony-tabs-container{margin-bottom:var(--space-1)}.curated-styles-card{padding:var(--space-4)}.curated-styles-card .card-header-centered,.curated-styles-card .harmony-tabs-container{margin-bottom:var(--space-1)}.curated-tabs-container:after,.curated-tabs-container:before{display:none!important}.card-description{color:var(--text-secondary);font-size:.875rem;margin-bottom:var(--space-6)}.dominant-display{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--space-8)}.color-swatch-large{border:4px solid var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),0 0 40px rgba(0,0,0,.3);flex-shrink:0;height:140px;outline:1px solid var(--border);width:140px}.color-info{flex:1;min-width:200px}.color-info h3{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin-bottom:var(--space-3)}.color-codes{flex-direction:column}.color-codes,.color-codes-row{display:flex;gap:var(--space-2)}.color-codes-row{flex-direction:row;flex-wrap:wrap}.color-code{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-mono);font-size:.8125rem;gap:var(--space-3);padding:var(--space-2) var(--space-3);transition:var(--transition-fast)}.color-code:hover{background:var(--surface-hover);border-color:var(--primary);box-shadow:var(--shadow-glow);color:var(--text-primary)}.color-code .label,.color-code-label{color:var(--text-tertiary);font-family:var(--font-sans);font-size:.6875rem;font-weight:500;letter-spacing:.05em;min-width:32px;text-transform:uppercase}.color-code-value{color:var(--primary)}.copy-indicator{color:var(--success);font-size:.75rem;margin-left:auto;opacity:0;transition:var(--transition-fast)}.color-code:hover .copy-indicator{opacity:.5}.color-code.copied .copy-indicator{opacity:1}.dominant-outfit-links{align-items:center;border-top:1px solid var(--border);display:flex;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3)}.dominant-outfit-links .outfit-links-label{color:var(--text-tertiary);font-size:.75rem}.harmony-tabs-container,.tabs-container{margin-bottom:var(--space-1)}.harmony-tabs,.tabs{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;gap:var(--space-1);overflow-x:auto;padding:var(--space-1);-webkit-overflow-scrolling:touch;flex-wrap:wrap;justify-content:center}.harmony-tab,.tab-btn{background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;flex:1;font-family:var(--font-sans);font-size:.8125rem;font-weight:500;min-width:fit-content;padding:var(--space-3) var(--space-4);transition:var(--transition-fast);white-space:nowrap}.harmony-tab:hover:not(.active),.tab-btn:hover:not(.active){background:var(--surface-hover);color:var(--text-primary)}.harmony-tab.active,.tab-btn.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:var(--shadow-sm),var(--shadow-glow);color:var(--text-inverse)}.variation-counter:empty{display:none}.harmony-content:empty{display:none}.harmony-header{align-items:center;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-lg);display:flex;gap:var(--space-4);margin-bottom:var(--space-4);padding:var(--space-3)}.harmony-wheel-container{align-items:center;background:var(--dark-900);border-radius:var(--radius-md);box-shadow:inset 0 1px 3px rgba(0,0,0,.3);display:flex;flex-shrink:0;justify-content:center;padding:var(--space-2)}.harmony-wheel{display:block;filter:drop-shadow(0 0 4px rgba(0,0,0,.4))}.harmony-wheel .harmony-dot{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));transition:transform .2s ease}.harmony-wheel .base-dot{filter:drop-shadow(0 0 4px rgba(0,212,255,.6))}.harmony-wheel .mono-glow{animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.4}50%{opacity:.8}}.harmony-layout{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-1)}@media (max-width:500px){.harmony-layout{flex-direction:column;gap:var(--space-2)}}.harmony-wheel-section{align-items:center;display:flex;flex-direction:column;gap:var(--space-1)}.harmony-wheel-large{align-items:center;display:flex;height:100px;justify-content:center;width:100px}.harmony-wheel-large-svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.harmony-desc{color:var(--text-secondary);font-size:.8rem;line-height:1.4;margin:0;max-width:140px;text-align:center}.harmony-swatches-section{align-items:stretch;display:flex;flex:1;flex-direction:column;gap:var(--space-1)}.stacked-swatch-row{align-items:center;display:flex;gap:var(--space-3)}.stacked-swatch-color{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-shrink:0;height:50px;width:70px}.stacked-swatch-info{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.stacked-swatch-name{color:var(--text-primary);font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stacked-swatch-hex{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.75rem}.horizontal-swatches-row{display:flex;flex-wrap:nowrap;gap:var(--space-2);justify-content:center;width:100%}.horizontal-swatch{align-items:center;display:flex;flex-direction:column;gap:var(--space-1);margin:0 -1px;min-width:60px;position:relative}.horizontal-swatch-color{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);height:64px;transition:var(--transition-fast);width:64px}.horizontal-swatch:hover .horizontal-swatch-color{box-shadow:var(--shadow-md);transform:scale(1.05)}.horizontal-swatch-name{color:var(--text-primary);font-size:.65rem;font-weight:500;max-width:80px;text-align:center;white-space:normal;word-wrap:break-word;line-height:1.2}.horizontal-swatch-hex{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.65rem}.base-indicator{background:var(--primary);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);color:var(--text-inverse);font-size:.55rem;font-weight:600;letter-spacing:.03em;padding:2px 5px;position:absolute;right:-6px;text-transform:uppercase;top:-6px}@media (min-width:769px){.horizontal-swatch-color{border-radius:var(--radius-xl);height:100px;width:140px}.horizontal-swatch-name{font-size:.85rem;max-width:140px}.harmony-layout,.horizontal-swatches-row{gap:var(--space-5)}.harmony-layout{align-items:stretch;flex-direction:column;width:100%}.harmony-wheel-section{align-items:center;flex-direction:row;gap:var(--space-8);justify-content:center;width:100%}.harmony-wheel-large{flex-shrink:0;height:160px;width:160px}.harmony-desc{font-size:.85rem;line-height:1.7;max-width:600px;text-align:left}.horizontal-swatches-row{justify-content:center;width:100%}.color-theory-card .card-header-centered .card-description,.curated-styles-card .card-header-centered .card-description{font-size:1.1rem;line-height:1.5;margin-bottom:var(--space-4);max-width:none!important;white-space:nowrap}.tagline{font-size:1.1rem;line-height:1.5;margin-left:auto;margin-right:auto;max-width:700px;text-align:center}.horizontal-swatch{flex:1 1 0;max-width:200px;min-width:100px}.horizontal-swatch-color{height:110px;width:100%}.horizontal-swatch-name{font-size:.9rem;max-width:100%}}.btn-icon-only{background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:1.1rem;opacity:.7;padding:var(--space-1);transition:var(--transition-fast)}.btn-icon-only:hover{opacity:1;transform:scale(1.15)}.btn-icon-only.shuffling{animation:shake .4s ease}.horizontal-swatch{cursor:pointer}.horizontal-swatch:active .horizontal-swatch-color{transform:scale(.95)}.color-preview-modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity .2s ease,visibility .2s ease;visibility:hidden;z-index:9999}.color-preview-modal.show{opacity:1;visibility:visible}.color-preview-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(0,0,0,.85);bottom:0;left:0;position:absolute;right:0;top:0}.color-preview-content{align-items:center;animation:scaleIn .25s ease;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);position:relative}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.color-preview-swatch{border-radius:var(--radius-xl);box-shadow:0 8px 40px rgba(0,0,0,.4);height:200px;width:200px}@media (min-width:500px){.color-preview-swatch{height:280px;width:280px}}.color-preview-info{align-items:center;display:flex;flex-direction:column;gap:var(--space-1)}.color-preview-name{color:#fff;font-size:1.25rem;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.5)}.color-preview-hex{color:hsla(0,0%,100%,.8);font-family:var(--font-mono);font-size:1rem}.color-preview-close{background:hsla(0,0%,100%,.15);border:none;border-radius:var(--radius-full);color:#fff;cursor:pointer;font-size:1.25rem;height:40px;position:absolute;right:var(--space-2);top:var(--space-2);transition:var(--transition-fast);width:40px}.color-preview-close:hover{background:hsla(0,0%,100%,.25);transform:scale(1.1)}.fashion-tip-wrapper{margin-top:var(--space-2);position:relative}.fashion-tip-btn{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:50%;cursor:pointer;display:inline-flex;font-size:.875rem;height:28px;justify-content:center;transition:var(--transition-fast);width:28px}.fashion-tip-btn:hover{background:var(--primary);border-color:var(--primary);transform:scale(1.1)}.fashion-tip-popup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);bottom:100%;box-shadow:var(--shadow-lg);color:var(--text-secondary);display:none;font-size:.75rem;left:auto;line-height:1.4;margin-bottom:var(--space-2);max-width:min(280px,85vw);padding:var(--space-2) var(--space-3);position:absolute;right:0;text-align:left;transform:none;white-space:normal;width:max-content;z-index:10}.fashion-tip-popup.show{display:block}@media (max-width:500px){.harmony-wheel-section{flex-direction:row;gap:var(--space-2)}.harmony-wheel-large,.harmony-wheel-large-svg{height:80px;width:80px}.harmony-desc{flex:1;max-width:none;text-align:left}.stacked-swatch-color{height:40px;width:55px}.horizontal-swatch-color{height:74px;width:74px}.horizontal-swatch-name{font-size:.6rem;max-width:70px}.horizontal-swatch-hex{font-size:.55rem}}.harmony-desc-container{flex:1}.harmony-visual{align-items:center;display:flex;flex-direction:column;gap:var(--space-1)}.harmony-visual-label{color:var(--text-tertiary);font-size:.65rem;letter-spacing:.05em;text-transform:uppercase}@media (max-width:480px){.harmony-header{flex-direction:column;text-align:center}.harmony-wheel-container{margin-bottom:var(--space-2)}}.harmony-palette{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:var(--space-2)}@media (max-width:600px){.harmony-palette{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.harmony-outfit-links{align-items:center;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-md);display:flex;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3) var(--space-4)}.outfit-links-label{color:var(--text-tertiary);font-size:.75rem}@media (max-width:480px){.harmony-outfit-links{flex-wrap:wrap;justify-content:center}.outfit-links-label{margin-bottom:var(--space-2);text-align:center;width:100%}}.outfit-filter-row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-1)}.seasons-row{margin-top:var(--space-1)}.outfit-chip{align-items:center;background:var(--dark-800);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-size:.7rem;font-weight:500;justify-content:center;padding:var(--space-1) var(--space-2);text-decoration:none;transition:var(--transition-fast);white-space:nowrap}.outfit-chip:hover{background:var(--surface-hover);border-color:var(--primary);box-shadow:var(--shadow-glow);color:var(--text-primary)}.filter-divider{color:var(--border);font-size:.75rem;margin:0 var(--space-1)}.gender-affected-group{align-items:center;background:var(--dark-900);border:1px solid var(--border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding:var(--space-1) var(--space-2)}.gender-affected-group .outfit-chip{background:transparent;border:none;padding:var(--space-1)}.gender-affected-group .outfit-chip:hover{background:var(--surface-hover)}.gender-toggle-mini{align-items:center;background:var(--dark-800);border-radius:var(--radius-sm);display:inline-flex;flex-shrink:0;justify-content:center;overflow:hidden}.gender-toggle-mini .gender-btn{background:transparent;border:none;border-radius:6px;color:var(--text-tertiary);cursor:pointer;display:grid;font-size:1.2rem;height:32px;padding:0 0 12px;place-items:center;transition:var(--transition-fast);width:32px}.gender-toggle-mini .gender-btn span{display:block;line-height:1}.gender-toggle-mini .gender-btn:hover{background:var(--surface-hover);color:var(--text-secondary)}.gender-toggle-mini .gender-btn.active{background:var(--primary);color:var(--text-inverse)}@media (max-width:600px){.outfit-filter-row{flex-wrap:wrap;justify-content:center}.filter-divider{display:none}.harmony-outfit-links{gap:var(--space-2)}}.harmony-color{flex:1;min-width:110px}.harmony-swatch{border:2px solid hsla(0,0%,100%,.15);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);cursor:pointer;height:130px;margin-bottom:var(--space-3);overflow:hidden;position:relative;transition:var(--transition-fast);will-change:transform}.harmony-swatch:hover{border-color:hsla(0,0%,100%,.3);box-shadow:var(--shadow-lg),0 0 30px rgba(0,0,0,.3);transform:translateY(-4px) scale(1.02)}@media (max-width:600px){.harmony-swatch{height:100px}}.harmony-color-info{font-size:.875rem}.harmony-color-name{color:var(--text-primary);font-weight:500;margin-bottom:var(--space-1)}.harmony-color-hex{color:var(--text-tertiary);font-family:var(--font-mono);font-size:.75rem}.swatches-container{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.swatch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;overflow:hidden;transition:var(--transition-base)}.swatch:hover{border-color:var(--primary);box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-4px)}.swatch-color{height:80px;position:relative}.swatch-info{background:var(--surface);padding:var(--space-3)}.swatch-name{color:var(--text-primary);font-size:.8125rem;font-weight:500;margin-bottom:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch-hex{color:var(--primary);font-family:var(--font-mono);font-size:.75rem}.mini-neutral-swatch{border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);cursor:pointer;height:32px;position:relative;transition:var(--transition-fast);width:32px}.mini-neutral-swatch:hover{box-shadow:var(--shadow-md),0 0 15px rgba(0,0,0,.3);transform:scale(1.2)}.mini-neutral-swatch:hover .mini-neutral-tooltip{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible}.mini-neutral-tooltip{background:var(--surface-elevated);border:1px solid var(--border);border-radius:var(--radius-md);bottom:100%;box-shadow:var(--shadow-lg);color:var(--text-primary);font-size:.75rem;left:50%;margin-bottom:8px;opacity:0;padding:var(--space-2) var(--space-3);pointer-events:none;position:absolute;text-align:center;transform:translateX(-50%) translateY(5px);transition:var(--transition-fast);visibility:hidden;white-space:nowrap;z-index:10}.mini-neutral-tooltip code{color:var(--primary);display:block;font-size:.6875rem;margin-top:var(--space-1)}.mini-neutral-tooltip:after{border:6px solid transparent;border-top:6px solid var(--surface-elevated);content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.gender-toggle{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:inline-flex;margin-bottom:var(--space-4);padding:var(--space-1)}.gender-btn{background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:.8125rem;font-weight:500;padding:var(--space-2) var(--space-4);transition:var(--transition-fast)}.gender-btn.active{background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow-sm);color:var(--text-inverse)}.outfit-ideas-card .outfit-controls{margin-bottom:var(--space-5)}.outfit-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr);margin-bottom:var(--space-4)}.outfit-card{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;display:flex;gap:var(--space-4);padding:var(--space-4);position:relative;text-decoration:none;transition:var(--transition-base)}.outfit-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-2px)}.outfit-card-style{border-left:3px solid var(--primary)}.outfit-card-season{border-left:3px solid var(--accent)}.outfit-card-icon{align-items:center;background:linear-gradient(135deg,var(--primary-subtle),var(--accent-subtle));border:1px solid var(--glass-border);border-radius:var(--radius-md);display:flex;font-size:1.75rem;height:48px;justify-content:center;min-width:48px}.outfit-card-content{flex:1;min-width:0}.outfit-card-title{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:var(--space-1)}.outfit-card-subtitle{color:var(--text-secondary);font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.outfit-card-link{color:var(--primary);font-size:.75rem;font-weight:500;white-space:nowrap}.outfit-tip{background:var(--info-subtle);border-left:3px solid var(--info);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-secondary);font-size:.875rem;padding:var(--space-4)}@media (max-width:600px){.outfit-grid{grid-template-columns:1fr}}.fashion-categories{display:flex;flex-direction:column;gap:var(--space-6)}.fashion-category{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;display:block;padding:var(--space-5);text-decoration:none;transition:var(--transition-base)}.fashion-category:hover{border-color:var(--primary);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-2px)}.category-header{align-items:center;display:flex;gap:var(--space-3);margin-bottom:var(--space-4)}.category-icon{align-items:center;background:linear-gradient(135deg,var(--primary-subtle),var(--accent-subtle));border:1px solid var(--glass-border);border-radius:var(--radius-md);display:flex;font-size:1.125rem;height:40px;justify-content:center;width:40px}.category-header h4,.category-title{color:var(--text-primary);font-size:.9375rem;font-weight:600}.category-header span{background:var(--surface-hover);border-radius:var(--radius-sm);color:var(--text-tertiary);font-size:.75rem;padding:var(--space-1) var(--space-2)}.category-description{color:var(--text-secondary);font-size:.8125rem;margin-bottom:var(--space-3)}.category-link{align-items:center;color:var(--primary);display:inline-flex;font-size:.8125rem;font-weight:500;gap:var(--space-1);text-decoration:none}.category-link:hover{color:var(--primary-light);text-decoration:underline}.fashion-neutral-tip{background:var(--info-subtle);border-left:3px solid var(--info);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-secondary);font-size:.8125rem;grid-column:1/-1;margin-top:var(--space-2);padding:var(--space-4)}.color-recommendations{display:flex;flex-wrap:wrap;gap:var(--space-2)}.color-chip{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);cursor:pointer;display:flex;font-size:.75rem;gap:var(--space-2);padding:var(--space-2) var(--space-3);transition:var(--transition-fast)}.color-chip:hover{border-color:var(--primary);box-shadow:var(--shadow-glow)}.chip-color{border:1px solid var(--glass-border);border-radius:var(--radius-full);height:16px;width:16px}.chip-name{color:var(--text-primary);font-weight:500}.season-results,.seasonal-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.season-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;padding:var(--space-5);text-decoration:none;transition:var(--transition-base)}.season-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(-4px)}.season-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-4)}.season-icon{font-size:1.75rem;margin-bottom:var(--space-2)}.season-name{color:var(--text-primary);font-size:1rem;font-weight:600}.match-score{background:var(--success-subtle);border-radius:var(--radius-sm);color:var(--success);font-size:.75rem;font-weight:600;padding:var(--space-1) var(--space-2)}.season-palette{display:flex;gap:var(--space-1);margin-bottom:var(--space-3)}.season-palette .season-color{border:1px solid hsla(0,0%,100%,.1);border-radius:var(--radius-sm);cursor:pointer;flex:1;height:32px;transition:var(--transition-fast)}.season-palette .season-color:hover{transform:scaleY(1.3)}.season-tip{color:var(--text-secondary);font-size:.75rem}.season-traits{display:flex;flex-wrap:wrap;gap:var(--space-2)}.trait-tag{background:var(--surface-hover);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.6875rem;padding:var(--space-1) var(--space-2)}.neutrals-card{background:var(--surface)}.neutral-colors,.neutrals-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.neutral-item{align-items:center;background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;display:flex;gap:var(--space-3);padding:var(--space-3);transition:var(--transition-fast)}.neutral-item:hover{border-color:var(--primary);box-shadow:var(--shadow-sm),var(--shadow-glow)}.neutral-color,.neutral-swatch{border:1px solid var(--glass-border);border-radius:var(--radius-md);flex-shrink:0;height:32px;width:32px}.neutral-info{overflow:hidden}.neutral-name{color:var(--text-primary);font-size:.8125rem;font-weight:500}.neutral-hex{color:var(--primary);font-family:var(--font-mono);font-size:.6875rem}.neutral-role,.neutral-tip{color:var(--text-tertiary);font-size:.6875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.neutrals-advice{background:var(--info-subtle);border-left:3px solid var(--info);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--text-secondary);font-size:.8125rem;margin-top:var(--space-4);padding:var(--space-4)}.neutrals-advice strong{color:var(--text-primary)}.preview-wrapper{cursor:crosshair;position:relative}#colorCanvas{height:100%;left:0;opacity:0;top:0;width:100%}#colorCanvas,.color-picker-indicator{pointer-events:none;position:absolute}.color-picker-indicator{border:3px solid #fff;border-radius:var(--radius-full);box-shadow:var(--shadow-lg),0 0 20px rgba(0,0,0,.5);height:40px;transform:translate(-50%,-50%);width:40px;z-index:10}.preview-instructions{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.8125rem;margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);text-align:center}.preview-instructions strong{color:var(--primary)}.progress-container{margin-top:var(--space-6);text-align:center}.progress-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);height:6px;margin-bottom:var(--space-3);overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,var(--primary) 0,var(--accent) 100%);border-radius:var(--radius-full);box-shadow:var(--shadow-glow);height:100%;transition:width .3s ease;width:0}.progress-text{color:var(--text-secondary);font-size:.8125rem}.extracted-palette{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:var(--space-6);padding:var(--space-6)}.extracted-palette h4{color:var(--text-primary);font-size:1rem;font-weight:600;margin:0 0 var(--space-5) 0}.palette-colors{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(100px,1fr));margin-bottom:var(--space-4);margin-left:auto;margin-right:auto;max-width:700px;overflow:visible;padding:var(--space-2)}.palette-color{align-items:center;background:var(--surface-elevated);border:2px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);position:relative;transition:var(--transition)}.palette-color:hover{border-color:var(--primary);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-2px)}.palette-color.selected{background:var(--primary-subtle);border-color:var(--primary);box-shadow:var(--shadow-focus)}.palette-swatch{border:2px solid hsla(0,0%,100%,.15);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);flex-shrink:0;height:70px;width:70px}.palette-info{min-height:36px;text-align:center;width:100%}.palette-name{color:var(--text-primary);display:block;font-size:.75rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-percent{color:var(--text-secondary);display:block;font-size:.6875rem;font-weight:500;margin-top:2px}.palette-hint{border-top:1px solid var(--border-light);color:var(--text-secondary);font-size:.8125rem;margin:0;padding-top:var(--space-2);text-align:center}.debug-console{background:var(--dark-900);border:1px solid var(--border);border-radius:var(--radius-lg);bottom:var(--space-4);box-shadow:var(--shadow-xl);color:var(--dark-100);display:none;font-family:var(--font-mono);font-size:.6875rem;max-height:200px;overflow:hidden;position:fixed;right:var(--space-4);width:320px;z-index:1000}.debug-console.show{display:block}.debug-header{align-items:center;background:var(--dark-800);border-bottom:1px solid var(--dark-700);display:flex;justify-content:space-between;padding:var(--space-2) var(--space-3)}.debug-toggle{background:none;border:none;color:var(--dark-400);cursor:pointer;font-size:1rem;line-height:1;padding:var(--space-1)}.debug-toggle:hover{color:var(--primary)}.debug-content{max-height:160px;overflow-y:auto;padding:var(--space-2) var(--space-3)}.debug-content.collapsed{display:none}.debug-entry{border-radius:var(--radius-sm);margin-bottom:var(--space-1);padding:var(--space-1) var(--space-2);word-break:break-word}.debug-entry.info{background:rgba(59,130,246,.2);color:#93c5fd}.debug-entry.success{background:rgba(16,185,129,.2);color:#6ee7b7}.debug-entry.warning{background:rgba(245,158,11,.2);color:#fcd34d}.debug-entry.error{background:rgba(239,68,68,.2);color:#fca5a5}.debug-time{color:var(--dark-500);margin-right:var(--space-2)}.toast{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);bottom:var(--space-6);box-shadow:var(--shadow-xl),var(--shadow-glow);color:var(--text-primary);font-size:.875rem;font-weight:500;left:50%;opacity:0;padding:var(--space-3) var(--space-5);position:fixed;transform:translateX(-50%) translateY(100px);transition:var(--transition-slow);visibility:hidden;z-index:1000}.toast.show{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible}@keyframes slideUp{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (max-width:768px){.header{margin-bottom:var(--space-8);padding-top:var(--space-4)}.logo{font-size:1.75rem}.result-card{padding:var(--space-5)}.dominant-display{align-items:center;flex-direction:column;text-align:center}.color-swatch-large{height:120px;width:120px}.harmony-tabs,.tabs{gap:0}.harmony-tab,.tab-btn{font-size:.75rem;padding:var(--space-2) var(--space-3)}.swatches-container{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.harmony-swatch,.swatch-color{height:85px}.season-results,.seasonal-grid{grid-template-columns:1fr}}@media (max-width:480px){.app-container{padding:var(--space-4) var(--space-3)}.upload-area{padding:var(--space-8) var(--space-4)}.url-input-wrapper{flex-direction:column}.url-input-wrapper .btn{width:100%}.neutral-colors,.neutrals-grid{grid-template-columns:1fr}.harmony-color{min-width:100%}}.color-input-section{margin-bottom:var(--space-8)}.input-tabs{flex-wrap:nowrap;justify-content:center;margin-bottom:var(--space-6)}.input-tab,.input-tabs{display:flex;gap:var(--space-2)}.input-tab{align-items:center;background:var(--surface-elevated);border:1.5px solid var(--border);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:.85rem;font-weight:600;padding:var(--space-2) var(--space-4);transition:all var(--transition-fast);white-space:nowrap}.input-tab .tab-icon{font-size:1rem;line-height:1}.input-tab .tab-label{font-weight:600;letter-spacing:.01em}.input-tab:hover{background:var(--surface-hover);border-color:var(--primary);box-shadow:var(--shadow-glow);color:var(--text-primary);transform:translateY(-2px)}.input-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:transparent;box-shadow:var(--shadow-glow),var(--shadow-md);color:var(--text-inverse);transform:translateY(-1px)}.input-tab.active .tab-icon{filter:brightness(1.1)}.input-panel{animation:fadeIn .3s ease}.input-panel.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.color-picker-grid{display:grid;gap:var(--space-8);grid-template-columns:1fr 1fr;margin:0 auto}@media (max-width:768px){.color-picker-grid{grid-template-columns:1fr}}.picker-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6)}.picker-section label{color:var(--text-primary);display:block;font-size:.9375rem;font-weight:600;margin-bottom:var(--space-4)}.picker-color-name{color:var(--primary);font-weight:700}.picker-main-label{color:var(--text-primary);display:block;font-size:1.125rem;font-weight:600;margin-bottom:var(--space-6);text-align:center}.picker-layout{align-items:start;display:grid;gap:var(--space-4);grid-template-columns:100px 1fr;margin-bottom:var(--space-4)}.picker-swatch-container{position:relative}#nativeColorPicker{height:100%;opacity:0;position:absolute;width:100%;z-index:2}.picked-color-swatch{background:#e63946;border:3px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);cursor:pointer;height:100px;transition:all .3s ease;width:100px}.picked-color-swatch:hover{border-color:var(--primary);box-shadow:var(--shadow-xl),0 0 20px rgba(230,57,70,.3);transform:translateY(-2px)}.picker-controls{gap:var(--space-2)}.picker-controls,.slider-row{display:flex;flex-direction:column}.slider-row{gap:2px}.slider-row .slider-label{color:var(--text-secondary);font-size:.6875rem;font-weight:600;letter-spacing:.05em;margin:0;text-transform:uppercase}.slider-row .color-slider{margin:0}.hex-row{margin-top:var(--space-1)}.hex-row .hex-input{font-size:.875rem;margin:0;padding:var(--space-2) var(--space-3);text-align:center;width:100%}.picker-button-center{display:flex;justify-content:center;margin-top:var(--space-4)}.native-picker-wrapper{align-items:center}.color-picker-row,.native-picker-wrapper{display:flex;gap:var(--space-4);margin-bottom:var(--space-4)}.color-picker-row{align-items:flex-start}.sliders-group{display:flex;flex:1;flex-direction:column;gap:var(--space-2)}#nativeColorPicker{background:none;border:none;border-radius:var(--radius-lg);cursor:pointer;flex-shrink:0;height:72px;padding:0;width:72px}#nativeColorPicker::-webkit-color-swatch-wrapper{padding:0}#nativeColorPicker::-webkit-color-swatch{border:2px solid var(--border);border-radius:var(--radius-lg)}.picked-color-preview{background:#e63946;border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex:1;height:72px;transition:background-color .2s ease}.hex-input{background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--primary);cursor:text;font-family:var(--font-mono);font-size:1rem;font-weight:600;letter-spacing:.05em;margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);text-align:center;text-transform:uppercase;transition:var(--transition-fast);width:100%}.hex-input::placeholder{color:var(--text-tertiary);font-weight:400;text-transform:none}.hex-input:hover{background:var(--surface);border-color:var(--primary)}.hex-input:focus{background:var(--dark-800);border-color:var(--primary);box-shadow:var(--shadow-focus),var(--shadow-glow);outline:none}.slider-section{display:flex;flex-direction:column;gap:var(--space-1);margin:var(--space-3) 0}.slider-label{color:var(--text-secondary);font-size:.6875rem;margin-top:var(--space-1)}.color-slider{-webkit-appearance:none;appearance:none;border-radius:var(--radius-full);cursor:pointer;height:6px;outline:none;width:100%}.color-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);cursor:pointer;height:16px;width:16px}.color-slider::-moz-range-thumb{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-full);cursor:pointer;height:16px;width:16px}.hue-slider{background:linear-gradient(90deg,#e61a1a,#e6e61a,#1ae61a,#1ae6e6,#1a1ae6,#e61ae6,#e61a1a)}.sat-slider{background:linear-gradient(to right,hsl(var(--current-hue,0),0%,50%),hsl(var(--current-hue,0),100%,50%))}.light-slider{background:linear-gradient(to right,hsl(var(--current-hue,0),80%,0%),hsl(var(--current-hue,0),80%,50%),hsl(var(--current-hue,0),80%,100%))}.palette-tabs{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-3)}.palette-tab{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-size:.6875rem;font-weight:500;padding:var(--space-2) var(--space-3);transition:var(--transition-fast)}.palette-tab:hover{background:var(--surface-hover);border-color:var(--primary);color:var(--text-primary)}.palette-tab.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:transparent;box-shadow:var(--shadow-glow);color:var(--text-inverse)}.palette-tab.pantone-tab{background:linear-gradient(135deg,#ff6f61,#5f4b8b 50%,#88b04b);border-color:transparent;color:#fff}.palette-tab.pantone-tab:hover{filter:brightness(1.1)}.palette-tab.pantone-tab.active{background:linear-gradient(135deg,#ff6f61,#5f4b8b 50%,#88b04b);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)}.quick-swatches{display:flex;flex-wrap:wrap;gap:var(--space-2)}.quick-swatch{border:2px solid var(--surface);border-radius:var(--radius-md);cursor:pointer;height:40px;outline:1px solid var(--border);transition:var(--transition-fast);width:40px}.quick-swatch:hover{box-shadow:var(--shadow-md),0 0 15px rgba(0,0,0,.3);transform:scale(1.15)}.quick-swatch.selected{border:3px solid var(--primary);box-shadow:inset 0 0 0 2px var(--surface);outline:none}.card-header-row{align-items:flex-start;display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;margin-bottom:var(--space-4)}.card-header-row h2{margin-bottom:var(--space-1)}.card-header-row .card-description{margin-bottom:0}.card-header-centered{margin-bottom:var(--space-1);text-align:center}.card-header-centered h2{margin-bottom:0}.card-header-centered .card-description{color:var(--text-tertiary);font-size:.75rem;line-height:1.4;margin:0 auto;max-width:320px}.btn-shuffle{background:linear-gradient(135deg,var(--accent),var(--accent-dark));border:none;border-radius:var(--radius-lg);color:var(--text-inverse);cursor:pointer;font-size:.8125rem;font-weight:500;padding:var(--space-2) var(--space-4);transition:var(--transition-fast)}.btn-shuffle:hover{background:linear-gradient(135deg,var(--accent-light),var(--accent));box-shadow:var(--shadow-md),var(--shadow-glow-accent);transform:translateY(-2px)}.btn-shuffle:active{transform:scale(.95)}.btn-shuffle-inline.shuffling,.btn-shuffle.shuffling{animation:shake .4s ease}.btn-shuffle-inline{background:linear-gradient(135deg,var(--accent),var(--accent-dark));border:none;border-radius:var(--radius-md);color:var(--text-inverse);cursor:pointer;font-size:.8125rem;font-weight:500;margin-left:var(--space-3);padding:var(--space-1) var(--space-3);transition:var(--transition-fast)}.btn-shuffle-inline:hover{background:linear-gradient(135deg,var(--accent-light),var(--accent));transform:scale(1.05)}.shuffle-counter-text{font-size:.8125rem;min-width:80px;opacity:.7;text-align:center}@keyframes shake{0%,to{transform:rotate(0deg)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.harmony-tabs-container{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6);position:relative}.harmony-tab-group{display:flex;flex-direction:column;gap:var(--space-2)}.tab-group-label{color:var(--text-tertiary);font-size:.7rem;font-weight:600;letter-spacing:.08em;padding-left:var(--space-1);text-transform:uppercase}.harmony-tabs-row{display:flex;flex-wrap:wrap;gap:.4rem}.harmony-tabs-row .harmony-tab{flex-shrink:0;font-size:.8rem;padding:var(--space-2) var(--space-3);white-space:nowrap}@media (max-width:600px){.harmony-tabs-container{position:relative}.harmony-tabs-container:after,.harmony-tabs-container:before{align-items:center;bottom:0;color:var(--primary);display:flex;font-size:1.25rem;font-weight:500;pointer-events:none;position:absolute;text-shadow:0 0 8px var(--primary-glow),0 0 12px var(--primary-glow);top:0;transition:opacity .2s ease;z-index:2}.harmony-tabs-container:before{animation:scrollHintLeft 1.5s ease-in-out infinite;content:"‹";left:0;opacity:0}.harmony-tabs-container:after{animation:scrollHintRight 1.5s ease-in-out infinite;content:"›";opacity:1;right:0}.harmony-tabs-container.scrolled-left:before{opacity:1}.harmony-tabs-container.scrolled-end:after{opacity:0}@keyframes scrollHintLeft{0%,to{transform:translateX(0)}50%{transform:translateX(-4px)}}@keyframes scrollHintRight{0%,to{transform:translateX(0)}50%{transform:translateX(4px)}}.harmony-tabs-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-2);padding-left:var(--space-4);padding-right:var(--space-4);scrollbar-width:none;-ms-overflow-style:none}.harmony-tabs-row::-webkit-scrollbar{display:none}.harmony-tabs-row .harmony-tab{flex:0 0 auto;padding:var(--space-2) var(--space-4)}}.harmony-tabs-scroll{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-color:var(--primary) var(--background);scrollbar-width:thin}.harmony-tabs-scroll::-webkit-scrollbar{height:6px}.harmony-tabs-scroll::-webkit-scrollbar-track{background:var(--surface);border-radius:3px}.harmony-tabs-scroll::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-full)}.harmony-tabs-scroll .harmony-tab{flex-shrink:0;white-space:nowrap}.wada-tab{background:linear-gradient(135deg,var(--highlight),var(--accent))!important;border:none!important;color:#fff!important}.wada-tab.active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--highlight)}.variation-counter{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.8125rem;margin-top:var(--space-3);padding:var(--space-2) var(--space-3);position:relative}.variation-counter,.variation-counter .variation-nav{align-items:center;display:flex;justify-content:center}.variation-counter .variation-nav{gap:var(--space-2)}.variation-counter .nav-arrow{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;font-size:.6875rem;padding:var(--space-2) var(--space-3);transition:var(--transition-fast)}.variation-counter .nav-arrow:hover:not(:disabled){background:var(--primary);border-color:var(--primary);box-shadow:var(--shadow-glow);color:var(--text-inverse)}.variation-counter .nav-arrow:disabled{cursor:not-allowed;opacity:.3}.variation-counter .variation-dots{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-2)}.variation-dot{background:var(--border);border-radius:var(--radius-full);height:8px;transition:var(--transition-fast);width:8px}.variation-dot.active{background:var(--primary);box-shadow:0 0 8px var(--primary-glow);transform:scale(1.3)}.harmony-neutrals-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:var(--space-3);overflow:hidden}.neutrals-toggle{align-items:center;background:transparent;border:none;color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:.8125rem;font-weight:500;justify-content:space-between;padding:var(--space-2) var(--space-3);transition:var(--transition-fast);width:100%}.neutrals-toggle:hover{background:var(--surface-hover)}.neutrals-toggle-icon{color:var(--text-tertiary);font-size:.75rem;transition:transform .2s ease}.neutrals-toggle[aria-expanded=true] .neutrals-toggle-icon{transform:rotate(180deg)}.neutrals-content{display:none;flex-direction:column;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-3)}.neutrals-content.expanded{display:flex}.neutrals-section{display:flex;flex-direction:column;gap:var(--space-2)}.harmony-neutrals-label{color:var(--text-primary);font-size:.75rem;font-weight:500}.neutral-hint{font-size:.7rem;font-weight:400;opacity:.7}.neutral-swatches{display:flex;flex-wrap:wrap;gap:var(--space-1)}.wada-harmony-options{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin:var(--space-5) 0;padding:var(--space-5)}.wada-options-title{color:var(--text-primary);font-size:.875rem;font-weight:600;margin:0 0 var(--space-3) 0}.wada-option-cards{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.wada-option-card{background:var(--surface-hover);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;padding:var(--space-3);transition:var(--transition-fast)}.wada-option-card:hover{border-color:var(--primary);box-shadow:var(--shadow-sm),var(--shadow-glow)}.wada-option-card.active{background:var(--primary-subtle);border-color:var(--primary);box-shadow:var(--shadow-focus)}.wada-option-header{color:var(--text-primary);font-size:.75rem;font-weight:600;margin-bottom:var(--space-1)}.wada-option-desc{color:var(--text-secondary);font-size:.6875rem;margin-bottom:var(--space-2)}.wada-option-colors{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-1)}.wada-mini-swatch{border:1px solid var(--glass-border);border-radius:var(--radius-sm);height:20px;width:20px}.wada-plus{color:var(--text-tertiary);font-size:.6875rem;margin:0 var(--space-1)}.wada-cards,.wada-palette-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.wada-card,.wada-palette-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-base)}.wada-card:hover,.wada-palette-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md),var(--shadow-glow)}.wada-colors,.wada-palette-colors{display:flex;height:64px}.wada-color-block,.wada-palette-colors>div{cursor:pointer;flex:1;transition:var(--transition-fast)}.wada-color-block:hover{flex:1.5}.wada-info,.wada-palette-info{padding:var(--space-4)}.wada-name,.wada-palette-name{color:var(--text-primary);font-size:.875rem;font-weight:600;margin-bottom:var(--space-1)}.wada-description,.wada-palette-meta{color:var(--text-secondary);font-size:.75rem;line-height:1.5}.mono-strip{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;height:80px;margin-bottom:var(--space-4);overflow:hidden}.mono-strip>div{align-items:flex-end;color:#fff;display:flex;flex:1;font-family:var(--font-mono);font-size:.6875rem;justify-content:center;padding-bottom:var(--space-2);text-shadow:0 1px 2px rgba(0,0,0,.5)}.fashion-palette-row{align-items:center;display:flex;gap:var(--space-4);margin-bottom:var(--space-6)}.fashion-palette-label{color:var(--text-primary);font-size:.875rem;font-weight:500;min-width:120px}.fashion-palette-colors{display:flex;flex:1;gap:var(--space-2)}.fashion-swatch{border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;height:44px;position:relative;transition:var(--transition-fast);width:44px}.fashion-swatch:hover{box-shadow:var(--shadow-md),0 0 15px currentColor;transform:scale(1.1)}.fashion-swatch:after{bottom:-20px;color:var(--text-tertiary);content:attr(data-name);font-size:.625rem;left:50%;opacity:0;position:absolute;transform:translateX(-50%);transition:var(--transition-fast);white-space:nowrap}.fashion-swatch:hover:after{opacity:1}.pinterest-btn{align-items:center;background:#e60023;border:none;border-radius:var(--radius-full);color:var(--text-inverse);cursor:pointer;display:inline-flex;font-size:.8125rem;font-weight:500;gap:var(--space-2);padding:var(--space-2) var(--space-4);text-decoration:none;transition:var(--transition-fast)}.pinterest-btn:hover{background:#c8001e;box-shadow:0 4px 20px rgba(230,0,35,.4);transform:translateY(-1px)}.tips-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-top:var(--space-6);padding:var(--space-5)}.tips-header{align-items:center;color:var(--primary);display:flex;font-size:.875rem;font-weight:600;gap:var(--space-2);margin-bottom:var(--space-3)}.tips-list{list-style:none}.tips-list li{color:var(--text-secondary);font-size:.8125rem;line-height:1.6;margin-bottom:var(--space-2);padding-left:var(--space-5);position:relative}.tips-list li:before{background:var(--primary);border-radius:var(--radius-full);box-shadow:0 0 6px var(--primary-glow);content:"";height:6px;left:0;position:absolute;top:8px;width:6px}.tooltip{backdrop-filter:blur(8px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);bottom:calc(100% + 8px);box-shadow:var(--shadow-lg),var(--shadow-glow);color:var(--text-primary);font-size:.75rem;opacity:0;padding:var(--space-3) var(--space-4);transition:var(--transition-fast);visibility:hidden;white-space:nowrap;z-index:100}.tooltip,.tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.tooltip:after{border:6px solid transparent;border-top:6px solid var(--border);content:"";top:100%}.tooltip.show{opacity:1;visibility:visible}.loading{align-items:center;display:flex;justify-content:center;padding:var(--space-8)}.spinner{animation:spin .8s linear infinite;border:3px solid var(--border);border-radius:var(--radius-full);border-top-color:var(--primary);box-shadow:0 0 15px var(--primary-glow);height:32px;width:32px}@keyframes spin{to{transform:rotate(1turn)}}.empty-state{color:var(--text-secondary);padding:var(--space-12) var(--space-8);text-align:center}.empty-state-icon{font-size:2.5rem;margin-bottom:var(--space-4);opacity:.5}.empty-state-title{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:var(--space-2)}.empty-state-description{font-size:.875rem}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.hidden{display:none!important}.visually-hidden{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0}@media print{.btn,.debug-console,.toast,.upload-section,body:after,body:before{display:none}.result-card{border:1px solid var(--border);box-shadow:none;break-inside:avoid}.color-swatch-large,.harmony-swatch,.palette-swatch{-webkit-print-color-adjust:exact;print-color-adjust:exact}}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:var(--dark-900)}::-webkit-scrollbar-thumb{background:var(--dark-600);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary);box-shadow:0 0 8px var(--primary-glow)}::selection{background:var(--primary);color:var(--dark-950)}:focus-visible{box-shadow:0 0 12px var(--primary-glow);outline:2px solid var(--primary);outline-offset:2px}@media (display-mode:standalone){body{padding-top:calc(env(safe-area-inset-top) + 8px)}.app-header{background:var(--background);margin-top:calc(env(safe-area-inset-top)*-1);padding-top:env(safe-area-inset-top);position:sticky;top:0;z-index:100}.app-container{padding-left:max(var(--space-6),env(safe-area-inset-left));padding-right:max(var(--space-6),env(safe-area-inset-right))}}.ios-standalone{-webkit-overflow-scrolling:touch}.ios-standalone .app-header{padding-top:env(safe-area-inset-top)}.pwa-standalone{overscroll-behavior-y:contain}.pull-to-refresh{align-items:center;background:linear-gradient(180deg,var(--dark-900) 0,var(--dark-950) 100%);border-bottom:1px solid var(--primary-subtle);display:flex;flex-direction:column;gap:var(--space-3);height:100px;justify-content:center;left:0;padding-top:env(safe-area-inset-top);position:fixed;right:0;top:0;transform:translateY(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:9999}.pull-to-refresh.visible{transform:translateY(0)}.pull-to-refresh.refreshing{box-shadow:0 0 30px var(--primary-subtle),0 4px 20px rgba(0,0,0,.4)}.ptr-spinner{border:2px solid var(--dark-600);border-radius:50%;border-top-color:var(--primary);height:28px;transition:all .3s ease;width:28px}.pull-to-refresh.refreshing .ptr-spinner{animation:ptr-spin .8s linear infinite;border-right-color:var(--primary-light);border-top-color:var(--primary);box-shadow:0 0 15px var(--primary-subtle)}@keyframes ptr-spin{to{transform:rotate(1turn)}}.ptr-text{align-items:center;color:var(--text-tertiary);display:flex;font-size:.8rem;font-weight:400;gap:var(--space-2);letter-spacing:.02em;transition:all .3s ease}.ptr-text .ptr-icon{display:inline-block;font-size:.9rem;transition:transform .3s ease}.pull-to-refresh.refreshing .ptr-text{color:var(--primary);text-shadow:0 0 10px var(--primary-subtle)}.pull-to-refresh.refreshing .ptr-text .ptr-icon{animation:ptr-icon-spin 1s linear infinite}@keyframes ptr-icon-spin{to{transform:rotate(1turn)}}[data-theme=light] .pull-to-refresh{background:linear-gradient(180deg,#fff,#f8fafc);border-bottom:1px solid rgba(8,145,178,.15);box-shadow:0 2px 10px rgba(0,0,0,.05)}[data-theme=light] .pull-to-refresh.refreshing{box-shadow:0 0 30px rgba(8,145,178,.15),0 4px 20px rgba(0,0,0,.1)}[data-theme=light] .ptr-spinner{border-color:#0891b2 #e5e7eb #e5e7eb}[data-theme=light] .pull-to-refresh.refreshing .ptr-spinner{border-right-color:#06b6d4;border-top-color:#0891b2;box-shadow:0 0 15px rgba(8,145,178,.2)}[data-theme=light] .ptr-text{color:#6b7280}[data-theme=light] .pull-to-refresh.refreshing .ptr-text{color:#0891b2;text-shadow:0 0 10px rgba(8,145,178,.15)}.app-container{transition:transform .3s cubic-bezier(.4,0,.2,1)}body.ptr-active .app-container{transform:translateY(100px)}@media (max-width:768px){.neutrals-card{display:none!important}.upload-area{padding:var(--space-6) var(--space-4)}.upload-icon{font-size:1.25rem;height:44px;margin-bottom:var(--space-2);width:44px}.upload-area h3{font-size:.9rem;margin-bottom:2px}.upload-area p{font-size:.75rem}.url-input-container{margin-top:var(--space-4)}.divider-text{margin-bottom:var(--space-3)}.preview-wrapper{align-items:center;background:var(--dark-900);display:flex;justify-content:center;max-height:45vh;min-height:200px;overflow:hidden;width:100%}#previewImage{height:100%;object-fit:cover;width:100%}.preview-instructions{padding:var(--space-2)}.preview-instructions p{font-size:.75rem}.preview-actions{flex-direction:column;gap:var(--space-2);padding:0 var(--space-2)}.preview-actions .btn{font-size:.8rem;margin:0;overflow:hidden;padding:var(--space-2) var(--space-3);text-overflow:ellipsis;white-space:nowrap;width:100%}.preview-actions .btn-large{font-size:.85rem;padding:var(--space-3) var(--space-4)}.picker-section{padding:var(--space-4)}.picker-main-label{font-size:1rem;margin-bottom:var(--space-3)}.picker-layout{align-items:start;display:grid;gap:var(--space-3);grid-template-columns:100px 1fr;margin-bottom:var(--space-3)}.picker-swatch-container{height:100px;position:relative;width:100px}#nativeColorPicker{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%;z-index:2}.picked-color-swatch{border:2px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);height:100px;width:100px}.picker-controls{flex:1;gap:var(--space-1);justify-content:space-between}.picker-controls,.slider-row{display:flex;flex-direction:column}.slider-row{gap:1px}.slider-row .slider-label{color:var(--text-secondary);font-size:.6rem;letter-spacing:.03em;margin:0;text-transform:uppercase}.slider-row .color-slider{height:6px;margin:0}.hex-row{margin-top:var(--space-1)}.hex-row .hex-input{font-size:.75rem;margin:0;padding:var(--space-1) var(--space-2);text-align:center}.picker-button-center{display:flex;justify-content:center;margin-top:var(--space-3)}#applyPickedColor{display:block;font-size:.8rem;margin:0 auto;max-width:none;padding:var(--space-2) var(--space-4);width:auto}.picker-section{overflow:hidden;position:relative}.palette-tabs{position:relative;z-index:1}.quick-swatches{position:relative;z-index:2}.palette-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;gap:var(--space-1);margin-bottom:var(--space-2);mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);max-width:100%;padding-bottom:var(--space-1)}.palette-tabs::-webkit-scrollbar{display:none}.palette-tab{flex-shrink:0;font-size:.65rem;padding:var(--space-1) var(--space-2)}.quick-swatches{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;gap:var(--space-2);margin-top:-2px;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent);max-width:100%;padding-bottom:var(--space-2);padding-top:6px}.quick-swatches::-webkit-scrollbar{display:none}.quick-swatch{flex-shrink:0;height:36px;width:36px}.dominant-color-card{padding:var(--space-2)}.dominant-color-card h2{font-size:.9rem;margin-bottom:var(--space-1)}.dominant-display{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--space-2)}.dominant-display .color-swatch-large{border-radius:var(--radius-md);flex-shrink:0;height:50px;max-height:50px;max-width:50px;min-height:50px;min-width:50px;width:50px}.dominant-display:has(.color-codes-row){align-items:flex-end}.dominant-display .color-info{display:flex;flex:1;flex-direction:column;gap:0;justify-content:flex-start;min-width:0}.dominant-display .color-info h3{font-size:.85rem;line-height:1.2;margin-bottom:4px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.dominant-display .color-codes:empty{display:none}.extracted-palette{border-radius:var(--radius-md);margin-top:var(--space-3);padding:var(--space-3)}.extracted-palette h4{font-size:.85rem;margin-bottom:var(--space-2)}.palette-colors{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:var(--space-2);margin-bottom:var(--space-2);max-width:none;padding-bottom:var(--space-1);scrollbar-width:none}.palette-colors::-webkit-scrollbar{display:none}.palette-color{border-radius:var(--radius-md);flex-shrink:0;gap:var(--space-1);padding:var(--space-2);width:60px}.palette-swatch{border-radius:var(--radius-sm);height:40px;width:40px}.palette-info{min-height:auto}.palette-name{font-size:.6rem;line-height:1.2}.palette-percent{font-size:.55rem}.palette-hint{font-size:.7rem;padding-top:var(--space-1)}.dominant-display .color-codes{display:flex;flex-direction:column;gap:2px}.dominant-display .color-codes-row{display:flex;flex-direction:row;gap:2px}.dominant-display .color-code{flex:1;font-size:.6rem;gap:2px;padding:1px var(--space-1)}.dominant-display .color-code .code-label{font-size:.5rem}}@media (display-mode:standalone){.color-picker-grid{gap:var(--space-4);grid-template-columns:1fr;max-width:100%}.palette-tabs{gap:var(--space-1);margin-bottom:var(--space-2)}.palette-tab{font-size:.625rem;padding:var(--space-1) var(--space-2)}.quick-swatches{gap:var(--space-2)}.quick-swatch{height:36px;width:36px}.result-card{margin-bottom:var(--space-4);padding:var(--space-4)}.header{margin-bottom:var(--space-6);padding-top:var(--space-4)}.logo-icon{height:44px;width:44px}.logo{font-size:2rem}.tagline{font-size:.8rem}}.ios-standalone .neutrals-card{display:none!important}@media (max-width:375px) and (max-height:667px){:root{font-size:14px}.app-container{padding:var(--space-4) var(--space-4)}.app-header h1{font-size:1.5rem}.btn{font-size:.85rem;padding:var(--space-2) var(--space-4)}.color-swatch-large{height:100px;width:100px}}@media (min-width:375px) and (min-height:812px) and (-webkit-device-pixel-ratio:3){.camera-container{padding-top:env(safe-area-inset-top)}}@media (min-width:768px) and (max-width:1024px) and (orientation:portrait){.app-container{max-width:720px;padding:var(--space-8) var(--space-8)}.harmony-grid,.palette-grid{grid-template-columns:repeat(4,1fr)}.upload-section{padding:var(--space-10)}}@media (min-width:1024px) and (max-width:1366px) and (orientation:landscape){.app-container{max-width:900px}.result-card{padding:var(--space-8)}.harmony-swatches{gap:var(--space-4)}}@media (min-width:800px) and (max-width:1280px){.app-container{max-width:800px;padding:var(--space-6)}}@media (min-width:1440px){.app-container{max-width:1200px}.harmony-grid{grid-template-columns:repeat(6,1fr)}.palette-grid{grid-template-columns:repeat(8,1fr)}}@media (min-width:2560px){.app-container{max-width:1400px}:root{font-size:18px}}@media (pointer:coarse){.btn{min-height:44px;min-width:44px}.harmony-tab,.input-tab{min-height:44px;padding:var(--space-3) var(--space-4)}.harmony-swatch,.palette-swatch{min-height:44px;min-width:44px}.harmony-tabs-row{gap:var(--space-2)}.harmony-swatches,.neutral-swatches{scroll-snap-type:x mandatory}.harmony-swatch,.neutral-swatch{scroll-snap-align:start}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.camera-crosshair:after,.camera-crosshair:before{animation:none!important}html{scroll-behavior:auto}}@media (prefers-contrast:high){:root{--primary:#0ff;--accent:#f0f;--text-primary:#fff;--text-secondary:#e0e0e0;--border:#fff;--surface:#000;--background:#000}.btn,.harmony-tab,.result-card{border-width:2px}.btn:focus-visible,.harmony-tab:focus-visible{outline-width:3px}}@media (max-height:500px) and (orientation:landscape){.app-header{padding:var(--space-2) 0}.app-header h1{font-size:1.25rem}.upload-section{min-height:auto;padding:var(--space-4)}.camera-container{max-height:90vh;max-height:90dvh}.camera-controls{padding:var(--space-2)}.camera-capture-btn{height:50px;width:50px}}button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}