:root{--bg:#efeef6;--surface:#fff;--border:#ece9f5;--border-strong:#dcd6ee;--text:#24212e;--text-muted:#6c667e;--text-subtle:#a8a3b8;--accent:#6c4bf5;--accent-hover:#5a38e0;--accent-light:#f1edfe;--accent-soft:#e3dbfc;--accent-rgb:108,75,245;--ink-violet:#43308f;--pastel-violet:#7c58fd;--pastel-violet-bg:#f1edfe;--pastel-yellow:#f8c94b;--pastel-yellow-bg:#fdf3d8;--pastel-yellow-ink:#a87508;--pastel-coral:#f5866b;--pastel-coral-bg:#fdede7;--pastel-coral-ink:#c24b31;--pastel-mint:#6fe0b4;--pastel-mint-bg:#e4faf1;--pastel-mint-ink:#0e8e68;--pastel-blue:#a9c7f8;--pastel-blue-bg:#eaf2fe;--pastel-blue-ink:#3f6fc4;--danger:#e8553f;--danger-light:#fdeeeb;--danger-text:#c23b26;--success:#0f9d74;--success-light:#e3f9f1;--success-text:#0b7a59;--warning:#c98a0f;--warning-light:#fdf3d8;--radius-xs:8px;--radius-sm:12px;--radius:18px;--radius-lg:24px;--radius-xl:28px;--radius-full:9999px;--shadow-xs:0 1px 2px rgba(52,38,106,.04);--shadow-sm:0 2px 6px rgba(52,38,106,.05);--shadow:0 10px 30px rgba(58,42,120,.07),0 2px 8px rgba(58,42,120,.04);--shadow-md:0 16px 40px rgba(58,42,120,.1),0 4px 12px rgba(var(--accent-rgb),.05);--shadow-lg:0 24px 60px rgba(58,42,120,.14),0 8px 20px rgba(var(--accent-rgb),.07);--shadow-accent:0 8px 22px rgba(var(--accent-rgb),.28);--ring:0 0 0 3px rgba(var(--accent-rgb),0.16);--transition-fast:0.15s ease;--transition:0.2s ease;--transition-slow:0.35s cubic-bezier(0.4,0,0.2,1);--transition-spring:0.4s cubic-bezier(0.34,1.56,0.64,1);--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;--font-mono:"SF Mono","Cascadia Code","Consolas","Fira Code",monospace;--glass-bg:hsla(0,0%,100%,.86);--glass-border:hsla(0,0%,100%,.7);--glass-shadow:0 8px 30px rgba(58,42,120,.06);--glass-blur:16px;--surface-raised:#fff;--surface-soft:#f6f5fb;--accent-gradient:linear-gradient(135deg,#6f4ef2,#653fef 55%,#5a38e0);--accent-gradient-soft:linear-gradient(135deg,rgba(124,88,253,.1),rgba(108,75,245,.05));--accent-glow:0 0 20px rgba(var(--accent-rgb),0.16);--bg-pattern:radial-gradient(900px circle at 6% -14%,rgba(124,88,253,.16) 0%,transparent 55%),radial-gradient(760px circle at 104% -6%,rgba(169,199,248,.26) 0%,transparent 52%),radial-gradient(600px circle at 90% 104%,rgba(111,224,180,.12) 0%,transparent 55%),radial-gradient(520px circle at 4% 98%,rgba(248,201,75,.1) 0%,transparent 55%);--bg-dots:radial-gradient(var(--accent) 0.5px,transparent 0.5px);--bg-dots-size:24px 24px;--bg-dots-opacity:0.05}[data-theme=dark]{--bg:#14121d;--surface:#1c1927;--border:#2a2536;--border-strong:#3a3349;--text:#f4f2fa;--text-muted:#a49eb5;--text-subtle:#746e86;--accent:#9b86ff;--accent-hover:#b4a3ff;--accent-light:#241e3e;--accent-soft:#332b54;--accent-rgb:155,134,255;--ink-violet:#c9bcff;--pastel-violet:#9b86ff;--pastel-violet-bg:#241e3e;--pastel-yellow:#f8c94b;--pastel-yellow-bg:#2e2611;--pastel-yellow-ink:#f8d574;--pastel-coral:#f5866b;--pastel-coral-bg:#2e1b17;--pastel-coral-ink:#ffa994;--pastel-mint:#6fe0b4;--pastel-mint-bg:#102a22;--pastel-mint-ink:#8cebc5;--pastel-blue:#a9c7f8;--pastel-blue-bg:#15202f;--pastel-blue-ink:#b9d2fa;--danger:#fb8a75;--danger-light:#2b1613;--danger-text:#ffa094;--success:#4bd3a4;--success-light:#0c251d;--success-text:#6ee7c0;--warning:#f2c14e;--warning-light:#2a2211;--shadow-xs:0 1px 2px rgba(0,0,0,.35);--shadow-sm:0 2px 6px rgba(0,0,0,.4);--shadow:0 10px 30px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);--shadow-md:0 16px 40px rgba(0,0,0,.5),0 4px 12px rgba(var(--accent-rgb),.07);--shadow-lg:0 24px 60px rgba(0,0,0,.6),0 8px 20px rgba(var(--accent-rgb),.09);--shadow-accent:0 8px 24px rgba(var(--accent-rgb),.3);--ring:0 0 0 3px rgba(var(--accent-rgb),0.28);--glass-bg:rgba(28,25,39,.82);--glass-border:rgba(58,51,73,.65);--glass-shadow:0 8px 30px rgba(0,0,0,.4);--glass-blur:18px;--surface-raised:#242031;--surface-soft:#17141f;--accent-gradient:linear-gradient(135deg,#a78bff,#9b86ff 55%,#8468ff);--accent-gradient-soft:linear-gradient(135deg,rgba(155,134,255,.14),rgba(155,134,255,.05));--accent-glow:0 0 20px rgba(var(--accent-rgb),0.22);--bg-pattern:radial-gradient(820px circle at 8% -12%,rgba(124,88,253,.16) 0%,transparent 55%),radial-gradient(680px circle at 102% -4%,rgba(169,199,248,.07) 0%,transparent 52%),radial-gradient(560px circle at 88% 102%,rgba(111,224,180,.05) 0%,transparent 55%),radial-gradient(480px circle at 6% 96%,rgba(248,201,75,.04) 0%,transparent 55%);--bg-dots-opacity:0.07}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:var(--font-sans);background-color:var(--bg);background-image:var(--bg-pattern);background-attachment:fixed;background-repeat:no-repeat;color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-slow),color var(--transition-slow)}::selection{background:var(--accent);color:#fff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:9999px;-webkit-transition:background var(--transition-fast);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--text-subtle)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}a{color:inherit;text-decoration:none}h1{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.25}h2{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.3}h3{font-size:18px;font-weight:650;letter-spacing:-.2px;line-height:1.35}h4{font-size:15px;font-weight:600;letter-spacing:-.1px}.app{min-height:100vh;padding:16px;gap:16px;align-items:flex-start}.app,.nav{display:flex}.nav{width:236px;min-width:236px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:26px;box-shadow:var(--shadow);flex-direction:column;padding:22px 14px 18px;position:-webkit-sticky;position:sticky;top:16px;height:calc(100vh - 32px);overflow-y:auto;z-index:100;transition:background var(--transition-slow),border-color var(--transition-slow)}.nav-header{margin-bottom:26px;padding:0 6px}.nav-header .brand-mark{display:flex;align-items:center;gap:10px}.nav-header .brand-mark [data-icon]{width:22px;height:22px;color:var(--accent);flex-shrink:0}.nav-header h2{font-size:19px;font-weight:800;letter-spacing:-.5px;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity var(--transition-slow)}.nav-label{display:block;padding:0 14px;margin-bottom:8px;font-size:10px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--text-subtle)}.nav nav{flex:1 1;display:flex;flex-direction:column;gap:4px}.nav-tab{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:14px;color:var(--text-muted);text-decoration:none;font-size:14px;font-weight:500;transition:all var(--transition);position:relative;border:1px solid transparent}.nav-tab [data-icon]{width:18px;height:18px;flex-shrink:0}.nav-tab.active,.nav-tab:hover{background:var(--accent-light);color:var(--accent)}.nav-tab.active{font-weight:650;border-color:rgba(var(--accent-rgb),.08)}.nav-tab.active:after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12);flex-shrink:0}.nav-promo{margin-top:18px;padding:16px 14px 14px;border-radius:20px;background:radial-gradient(120px circle at 88% 0,rgba(248,201,75,.2),transparent 62%),radial-gradient(100px circle at 8% 100%,rgba(111,224,180,.16),transparent 60%),var(--accent-light);border:1px solid hsla(0,0%,100%,.65);text-align:center;position:relative;overflow:hidden}[data-theme=dark] .nav-promo{border-color:hsla(0,0%,100%,.06);background:radial-gradient(120px circle at 88% 0,rgba(248,201,75,.1),transparent 62%),radial-gradient(100px circle at 8% 100%,rgba(111,224,180,.08),transparent 60%),var(--accent-light)}.nav-promo-orbs{position:relative;height:40px;margin-bottom:10px}.nav-promo-orbs span{position:absolute;top:50%;left:50%;border-radius:50%}.nav-promo-orbs span:first-child{width:34px;height:34px;background:linear-gradient(145deg,#8b6bff,#6c4bf5);transform:translate(-72%,-50%);box-shadow:0 6px 14px rgba(var(--accent-rgb),.3)}.nav-promo-orbs span:nth-child(2){width:20px;height:20px;background:linear-gradient(145deg,#ffd96f,#f8c94b);transform:translate(18%,-78%);box-shadow:0 4px 10px rgba(248,201,75,.35)}.nav-promo-orbs span:nth-child(3){width:13px;height:13px;background:var(--pastel-coral);transform:translate(-30%,70%)}.nav-promo-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.1px}.nav-promo-desc{font-size:11.5px;color:var(--text-muted);line-height:1.55;margin:4px 0 12px}.nav-promo-btn{display:flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:12px;background:var(--accent-gradient);color:#fff;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-accent);transition:all var(--transition-spring)}.nav-promo-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(var(--accent-rgb),.36)}.nav-footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);display:flex;flex-direction:column;gap:10px;transition:border-color var(--transition-slow)}.nav-footer p:last-child{font-size:11px;color:var(--text-muted);letter-spacing:.3px;opacity:.9;text-align:center}.theme-toggle{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-full);font-size:12px;font-weight:500;cursor:pointer;color:var(--text-muted);transition:all var(--transition);white-space:nowrap}.theme-toggle:hover{border-color:var(--accent-soft);color:var(--accent);background:var(--accent-light);box-shadow:var(--shadow-sm)}.theme-toggle [data-icon]{width:16px;height:16px}.theme-toggle .icon-light{display:none}.theme-toggle .icon-dark,[data-theme=dark] .theme-toggle .icon-light{display:inline}[data-theme=dark] .theme-toggle .icon-dark{display:none}.stats-info{font-size:11px;color:var(--text-muted);text-align:center;margin:0;line-height:1.5;transition:color var(--transition-slow)}.stats-info strong{color:var(--accent);font-weight:650}.stats-info svg{width:13px;height:13px;vertical-align:-2px;flex-shrink:0}.menu-toggle{top:12px;left:12px;z-index:200;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 12px;font-size:18px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition)}.menu-toggle,.nav-backdrop{display:none;position:fixed}.nav-backdrop{inset:0;background:rgba(36,30,60,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:99;animation:fadeIn .2s ease}.nav-backdrop.open{display:block}.nav-logo{width:34px;height:34px;object-fit:contain;flex-shrink:0}.page{flex:1 1;padding:18px 16px 40px;min-width:0}.tab-content{display:none;animation:fadeSlideIn .3s ease}.tab-content.active{display:block}.page-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}.page-eyebrow{font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}.page-head h1{font-size:34px}.page-subtitle{font-size:14px;color:var(--text-muted);margin-top:6px}.orb-cluster{position:relative;width:200px;height:92px;flex-shrink:0}.orb-cluster .orb{position:absolute;border-radius:50%;animation:orbFloat 7s ease-in-out infinite}.orb-cluster .orb-1{width:74px;height:74px;right:68px;top:8px;background:linear-gradient(145deg,#8b6bff,#6c4bf5);box-shadow:0 16px 30px rgba(var(--accent-rgb),.28)}.orb-cluster .orb-2{width:58px;height:58px;right:18px;top:-2px;background:linear-gradient(145deg,#ffd96f,#f8c94b);box-shadow:0 14px 26px rgba(248,201,75,.32);animation-delay:-1.6s}.orb-cluster .orb-3{width:44px;height:44px;right:108px;bottom:0;background:linear-gradient(145deg,#ffa38a,#f5866b);box-shadow:0 12px 22px hsla(12,87%,69%,.28);animation-delay:-3.1s}.orb-cluster .orb-4{width:36px;height:36px;right:58px;bottom:-2px;background:linear-gradient(145deg,#8defc8,#6fe0b4);box-shadow:0 10px 20px rgba(111,224,180,.3);animation-delay:-4.4s}.orb-cluster .orb-5{width:30px;height:30px;right:0;bottom:12px;background:linear-gradient(145deg,#c6dbff,#a9c7f8);box-shadow:0 8px 18px rgba(169,199,248,.35);animation-delay:-2.3s}.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.search{flex:1 1;min-width:200px;position:relative}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--text-subtle);pointer-events:none}.search input{width:100%;padding:11px 18px 11px 43px;border:1px solid var(--border);border-radius:14px;font-size:14px;background:var(--surface);color:var(--text);transition:all var(--transition);outline:none;box-shadow:var(--shadow-sm)}.search input:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring)}.search input::placeholder{color:var(--text-subtle);font-weight:400}.btn-primary{background:var(--accent-gradient);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;letter-spacing:.1px;cursor:pointer;transition:all var(--transition-spring);white-space:nowrap;position:relative;box-shadow:var(--shadow-accent)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--accent-rgb),.38)}.btn-primary:active{transform:translateY(0) scale(.97)}.btn-primary:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,hsla(0,0%,100%,.15),transparent);pointer-events:none}.btn-secondary{background:var(--surface);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));color:var(--text);border:1px solid var(--border);padding:10px 22px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-xs)}.btn-secondary:hover{border-color:var(--accent-soft);color:var(--accent);background:var(--accent-light)}.btn-secondary [data-icon]{width:16px;height:16px}.btn-small{padding:6px 14px;border:1px solid var(--border);background:var(--surface);border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);white-space:nowrap;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px;box-shadow:var(--shadow-xs)}.btn-small.fav-active,.btn-small:hover{border-color:var(--accent-soft);color:var(--accent);background:var(--accent-light)}.btn-small.fav-active [data-icon] svg path{fill:currentColor}.btn-small [data-icon]{width:13px;height:13px}.btn-tiny{padding:3px 8px;border:1px solid transparent;background:transparent;border-radius:4px;font-size:12px;cursor:pointer;transition:all var(--transition);color:var(--text-muted);display:inline-flex;align-items:center;gap:3px}.btn-tiny:hover{background:var(--accent-light);color:var(--accent)}.btn-tiny [data-icon]{width:12px;height:12px}.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.filters button{padding:7px 16px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-full);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-spring);color:var(--text-muted);box-shadow:var(--shadow-xs)}.filters button:hover{border-color:var(--accent-soft);color:var(--accent);background:var(--accent-light);transform:translateY(-1px)}.filters button.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-accent)}.card-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:18px;gap:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:all var(--transition-spring);display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow)}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--accent-soft)}.card-fav{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;padding:0;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition-spring)}.card-fav:hover{color:var(--accent);background:var(--surface);transform:scale(1.08)}.card-fav [data-icon]{width:16px;height:16px}.card-fav.active{color:var(--accent);background:var(--accent-light);border-color:var(--accent-soft)}.card-fav.active [data-icon] svg path{fill:currentColor}.card-colors{display:flex;height:116px;cursor:pointer}.card-colors .swatch{flex:1 1;display:flex;align-items:flex-end;justify-content:center;padding:8px 4px;font-size:10px;font-weight:600;color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;transition:all var(--transition-spring);text-shadow:0 1px 3px rgba(0,0,0,.35);font-family:var(--font-mono);letter-spacing:.3px}.card-colors .swatch:after{content:"";position:absolute;inset:0;background:hsla(0,0%,100%,0);transition:background var(--transition-fast)}.card-colors .swatch:hover{flex:1.8 1;font-size:11px}.card-colors .swatch:hover:after{background:hsla(0,0%,100%,.08)}.card-info{padding:15px 16px 8px}.card-title{font-weight:700;font-size:15px;letter-spacing:-.2px;margin-bottom:6px;color:var(--text)}.card-tags{display:flex;gap:4px;flex-wrap:wrap}.tag{font-size:10px;font-weight:650;padding:4px 11px;border-radius:var(--radius-full);background:var(--accent-light);color:var(--accent);letter-spacing:.2px}.card-operate{display:flex;gap:6px;padding:0 16px 14px}.card-operate .btn-small{flex:1 1;text-align:center;justify-content:center}.color-picker-wrap{display:flex;align-items:center;gap:10px}.color-picker-wrap input[type=color]{width:42px;height:42px;border:2px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;padding:3px;transition:border-color var(--transition),transform var(--transition);background:transparent}.color-picker-wrap input[type=color]:hover{border-color:var(--accent);transform:scale(1.05)}.color-picker-wrap input[type=text]{flex:1 1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:14px;font-family:var(--font-mono);outline:none;background:var(--surface-soft);color:var(--text);transition:border-color var(--transition),background var(--transition);box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}.color-picker-wrap input[type=text]:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring),inset 0 1px 3px rgba(0,0,0,.04)}.color-picker-wrap.small input[type=color]{width:34px;height:34px}.color-picker-wrap.small input[type=text]{font-size:12px}.modal-overlay{position:fixed;inset:0;background:rgba(36,30,60,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;width:90%;max-width:440px;box-shadow:var(--shadow-lg),var(--accent-glow);animation:slideUp .3s ease;transition:background var(--transition-slow),border-color var(--transition-slow)}.modal h3{margin-bottom:20px;font-size:20px;font-weight:700;letter-spacing:-.3px}.modal-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.modal-field label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.modal-field input,.modal-field select{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:14px;outline:none;background:var(--surface-soft);color:var(--text);transition:all var(--transition);font-family:var(--font-sans);box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}.modal-field input:focus,.modal-field select:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring),inset 0 1px 3px rgba(0,0,0,.04)}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.modal-colors-row{display:flex;align-items:center;gap:10px}.modal-colors-row .color-swatch-btn{flex-shrink:0}.modal-colors-row input[type=text]{flex:1 1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:14px;font-family:var(--font-mono);outline:none;background:var(--surface-soft);color:var(--text);transition:all var(--transition);box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}.modal-colors-row input[type=text]:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring),inset 0 1px 3px rgba(0,0,0,.04)}.modal-colors-chips{display:flex;gap:6px;flex-wrap:wrap;min-height:28px}.modal-color-chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-family:var(--font-mono);font-weight:600;cursor:pointer;transition:all var(--transition-fast);border:1.5px solid transparent}.modal-color-chip:hover{transform:scale(1.08);border-color:hsla(0,0%,100%,.4);box-shadow:var(--shadow-sm)}.toast{position:fixed;right:24px;bottom:24px;background:var(--ink-violet);color:#fff;padding:12px 22px;border-radius:14px;font-size:13px;font-weight:550;z-index:999;box-shadow:var(--shadow-md),0 0 0 1px hsla(0,0%,100%,.08);animation:slideInRight .3s ease;pointer-events:none;letter-spacing:.1px}[data-theme=dark] .toast{background:var(--accent);color:#14121d}.toast.fade-out{animation:fadeOut .3s ease forwards}.empty-state{grid-column:1/-1;text-align:center;padding:60px 40px;color:var(--text-muted)}.empty-state p{font-size:15px}.empty-state .empty-state-action{display:inline-flex;margin-top:18px;padding:9px 20px;font-size:13px}.palette-detail{animation:fadeSlideIn .3s ease}.detail-header,.palette-detail .btn-secondary{margin-bottom:24px}.detail-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.detail-header h1{font-size:28px;font-weight:800;letter-spacing:-.6px}.detail-header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.detail-nav-btn{padding:7px 10px;border:1px solid var(--border);background:var(--surface);border-radius:10px;font-size:14px;cursor:pointer;color:var(--text-muted);transition:all var(--transition);box-shadow:var(--shadow-xs);display:flex;align-items:center;justify-content:center}.detail-nav-btn [data-icon]{width:16px;height:16px}.detail-nav-btn:hover:not(:disabled){border-color:var(--accent-soft);color:var(--accent);background:var(--accent-light)}.detail-nav-btn:disabled{opacity:.3;cursor:default}.detail-top-row{display:flex;align-items:stretch;gap:10px;margin-bottom:14px}.detail-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}.detail-picker{display:flex;gap:10px;flex-wrap:wrap;flex:1 1;min-width:0}.dp-item{flex:1 1;min-width:130px;max-width:200px;border-radius:14px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all var(--transition-spring);background:var(--surface);box-shadow:var(--shadow-xs)}.dp-item:hover{border-color:var(--accent-soft);transform:translateY(-2px);box-shadow:var(--shadow)}.dp-colors{display:flex;height:28px}.dp-colors span{flex:1 1}.dp-name{font-size:11px;font-weight:600;padding:6px 8px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.dp-item:hover .dp-name{color:var(--accent)}.detail-nav-count{font-size:12px;font-weight:600;color:var(--text-muted);min-width:40px;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.detail-colors{display:flex;flex-direction:column;gap:0;border-radius:22px;overflow:hidden;border:1px solid var(--border);margin-bottom:20px;box-shadow:var(--shadow)}.detail-color-item{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;transition:padding var(--transition),filter var(--transition);cursor:default;flex-wrap:wrap;gap:16px}.detail-color-item:hover{padding-left:36px;filter:brightness(1.05)}.detail-color-body{display:flex;flex-direction:column;gap:4px}.detail-color-hex{font-size:28px;font-weight:800;font-family:var(--font-mono);letter-spacing:.5px;text-shadow:0 1px 3px rgba(0,0,0,.15)}.detail-color-hsl,.detail-color-rgb{font-size:13px;font-family:var(--font-mono);opacity:.85}.detail-color-actions{display:flex;gap:8px;flex-shrink:0}.detail-copy-btn{padding:8px 16px;border:1.5px solid hsla(0,0%,100%,.3);background:hsla(0,0%,100%,.15);color:inherit;border-radius:var(--radius-xs);font-size:13px;font-weight:550;cursor:pointer;transition:all var(--transition-fast);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:5px}.detail-copy-btn:hover{background:hsla(0,0%,100%,.28);border-color:hsla(0,0%,100%,.5)}.detail-copy-btn [data-icon]{width:13px;height:13px}.detail-export{display:flex;gap:8px;flex-wrap:wrap}.generator-panel{display:grid;grid-template-columns:340px 1fr;grid-gap:24px;gap:24px;align-items:start}.gen-controls{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:18px;transition:all var(--transition);box-shadow:var(--shadow)}.gen-controls:hover{box-shadow:var(--shadow-md);border-color:var(--accent-soft)}.gen-row{display:flex;flex-direction:column;gap:6px}.gen-row label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.gen-row input[type=range]{accent-color:var(--accent);width:100%;cursor:pointer;height:6px}.theory-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:6px;gap:6px}.theory-btn{padding:9px 6px;border:1px solid var(--border);background:var(--surface-soft);border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition-spring);text-align:center;color:var(--text-muted)}.theory-btn:hover{border-color:var(--accent-soft);color:var(--accent);background:var(--accent-light);transform:translateY(-1px)}.theory-btn.active{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-accent)}.gen-actions{display:flex;gap:8px;padding-top:2px}.gen-actions .btn-primary{flex:1 1}.gen-actions .btn-secondary{flex:1 1;display:inline-flex;align-items:center;justify-content:center;gap:6px}.gen-actions .btn-secondary [data-icon]{width:15px;height:15px}.gen-preview{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:all var(--transition);box-shadow:var(--shadow)}.gen-preview:hover{box-shadow:var(--shadow-md);border-color:var(--accent-soft)}.gen-preview-colors{display:flex;min-height:280px}.gen-preview-colors .gen-swatch{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:20px 8px;gap:8px;cursor:pointer;transition:all var(--transition-spring);position:relative}.gen-preview-colors .gen-swatch:hover{flex:1.6 1}.gen-preview-colors .gen-swatch:active{flex:2.2 1}.gen-swatch-code{font-family:var(--font-mono);font-size:13px;font-weight:650;padding:6px 12px;background:rgba(0,0,0,.18);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform var(--transition),background var(--transition);letter-spacing:.3px}.gen-swatch:hover .gen-swatch-code{transform:scale(1.06);background:rgba(0,0,0,.3)}.gen-swatch-rgb{font-size:11px;color:hsla(0,0%,100%,.82);font-weight:500}.gen-preview-actions{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--border);flex-wrap:wrap;transition:border-color var(--transition-slow)}.gen-preview-actions .btn-small [data-icon]{width:13px;height:13px}.tools-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;gap:20px}.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px;transition:all var(--transition-spring);box-shadow:var(--shadow)}.tool-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent-soft);transform:translateY(-2px)}.tool-card h3{font-size:17px;font-weight:700;margin-bottom:4px;letter-spacing:-.2px;display:flex;align-items:center;gap:10px}.tool-card h3 [data-icon]{width:34px;height:34px;padding:8px;border-radius:11px;color:var(--accent);background:var(--accent-light);flex-shrink:0}.tools-grid>.tool-card:first-child h3 [data-icon]{color:var(--pastel-blue-ink);background:var(--pastel-blue-bg)}.tools-grid>.tool-card:nth-child(2) h3 [data-icon]{color:var(--pastel-coral-ink);background:var(--pastel-coral-bg)}.tools-grid>.tool-card:nth-child(3) h3 [data-icon]{color:var(--pastel-yellow-ink);background:var(--pastel-yellow-bg)}.tools-grid>.tool-card:nth-child(4) h3 [data-icon]{color:var(--pastel-mint-ink);background:var(--pastel-mint-bg)}.tools-grid>.tool-card:nth-child(5) h3 [data-icon]{color:var(--accent);background:var(--accent-light)}.tool-desc{font-size:13px;color:var(--text-muted);margin-bottom:18px;line-height:1.5}.contrast-inputs{display:flex;gap:16px;margin-bottom:16px}.contrast-field{flex:1 1;display:flex;flex-direction:column;gap:5px}.contrast-field label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.contrast-preview{padding:20px;border-radius:var(--radius-sm);margin-bottom:16px;text-align:center;transition:background var(--transition);border:1px solid var(--border)}.contrast-preview span{font-size:28px;font-weight:750;letter-spacing:-.5px}.contrast-result{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.contrast-ratio{display:flex;align-items:baseline;gap:10px}.ratio-label{font-size:13px;color:var(--text-muted);font-weight:500}.ratio-value{font-size:32px;font-weight:850;font-family:var(--font-mono);letter-spacing:-1px;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.wcag-badges{display:flex;gap:6px;flex-wrap:wrap}.badge{font-size:11px;font-weight:650;padding:4px 14px;border-radius:var(--radius-full);transition:all var(--transition);letter-spacing:.3px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.badge.pass{background:var(--success-light);color:var(--success-text)}.badge.fail{background:var(--danger-light);color:var(--danger-text)}.convert-input{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}.convert-input label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.convert-input input{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:14px;font-family:var(--font-mono);outline:none;background:var(--surface-soft);color:var(--text);transition:all var(--transition);box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}.convert-input input:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--ring),inset 0 1px 3px rgba(0,0,0,.04)}.convert-input input::placeholder{color:var(--text-subtle)}.convert-results{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.convert-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-soft);border-radius:12px;transition:all var(--transition-fast);border:1px solid transparent}.convert-item:hover{border-color:var(--border);background:var(--accent-light)}.convert-label{font-size:10px;font-weight:750;color:var(--accent);min-width:30px;text-transform:uppercase;letter-spacing:.5px}.convert-item code{flex:1 1;font-size:14px;font-family:var(--font-mono);color:var(--text);transition:color var(--transition-slow)}.convert-preview{height:44px;border-radius:var(--radius-xs);transition:background var(--transition);border:1px solid var(--border)}.shade-controls{margin-bottom:16px}.shade-strip{display:flex;border-radius:12px;overflow:hidden;height:52px;margin-bottom:14px;border:1px solid var(--border)}.shade-swatch{flex:1 1;display:flex;align-items:flex-end;justify-content:center;padding:6px 2px;cursor:pointer;transition:flex var(--transition);position:relative}.shade-swatch:hover{flex:1.8 1;z-index:1}.shade-swatch span{font-size:9px;font-family:var(--font-mono);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap;pointer-events:none}.shade-actions{display:flex;gap:8px}.mix-inputs{display:flex;gap:16px;margin-bottom:14px}.mix-field{flex:1 1;display:flex;flex-direction:column;gap:5px}.mix-field label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}.mix-slider{margin-bottom:14px}.mix-slider input[type=range]{width:100%;accent-color:var(--accent);margin-bottom:2px}.mix-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);font-weight:500}.mix-preview{display:flex;align-items:center;gap:14px;padding:12px;background:var(--surface-soft);border-radius:12px;border:1px solid var(--border)}.mix-result{width:52px;height:52px;border-radius:var(--radius-xs);border:1px solid var(--border);flex-shrink:0;transition:background var(--transition)}.mix-preview code{font-size:16px;font-weight:650;font-family:var(--font-mono)}.cvd-controls{margin-bottom:16px}.cvd-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}.cvd-item{text-align:center;border-radius:12px;overflow:hidden;border:1px solid var(--border)}.cvd-swatch{height:60px;transition:background var(--transition)}.cvd-label{font-size:11px;font-weight:600;padding:6px 8px;background:var(--surface-soft);color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes pulseGlow{0%,to{box-shadow:var(--shadow-accent)}50%{box-shadow:0 4px 20px rgba(var(--accent-rgb),.4)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes scalePulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes fadeSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes rotateIn{0%{opacity:0;transform:rotate(-90deg)}to{opacity:1;transform:rotate(0)}}@keyframes orbFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@media (prefers-reduced-motion:reduce){.orb-cluster .orb,.tab-content{animation:none}}.ps-picker-overlay{position:fixed;inset:0;z-index:1000;animation:fadeIn .15s ease}.ps-picker{position:fixed;z-index:1001;background:#2d2d2d;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px hsla(0,0%,100%,.08);padding:16px;flex-direction:column;-moz-user-select:none;user-select:none;-webkit-user-select:none;animation:scaleIn .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif}.ps-picker,.ps-picker-body{display:flex;gap:12px}.ps-sv-area{position:relative;width:240px;height:240px;border-radius:5px;overflow:hidden;cursor:crosshair;border:1px solid #3d3d3d}.ps-sv-canvas{display:block;width:100%;height:100%}.ps-sv-cursor{position:absolute;width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 3px rgba(0,0,0,.6),inset 0 0 2px rgba(0,0,0,.3);pointer-events:none;transform:translate(-50%,-50%);transition:width .1s,height .1s}.ps-sv-area:active .ps-sv-cursor{width:14px;height:14px}.ps-hue-slider{position:relative;width:18px;height:240px;border-radius:5px;overflow:hidden;cursor:ns-resize;border:1px solid #3d3d3d;flex-shrink:0}.ps-hue-canvas{display:block;width:100%;height:100%}.ps-hue-cursor{position:absolute;left:-2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid #fff;pointer-events:none;transform:translateY(-50%);filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}.ps-picker-footer{display:flex;align-items:flex-start;gap:12px}.ps-preview{display:flex;flex-direction:column;border-radius:5px;overflow:hidden;border:1px solid #3d3d3d;flex-shrink:0}.ps-preview-new,.ps-preview-old{width:36px;height:36px}.ps-preview-old{border-top:1px solid #3d3d3d}.ps-inputs{flex:1 1;display:flex;flex-direction:column;gap:5px}.ps-input-row{display:flex;align-items:center;gap:6px}.ps-input-row .ps-copy-btn{width:22px;height:22px;border:none;background:transparent;color:#71717a;cursor:pointer;border-radius:3px;font-size:11px;flex-shrink:0;transition:all .15s;display:flex;align-items:center;justify-content:center;padding:0}.ps-input-row .ps-copy-btn:hover{background:#3d3d3d;color:#fafafa}.ps-input-label{font-size:10px;font-weight:700;color:#a1a1aa;min-width:28px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.ps-hex-input{flex:1 1;display:flex;align-items:center;background:#1e1e1e;border:1.5px solid #3d3d3d;border-radius:4px;overflow:hidden;transition:border-color .15s}.ps-hex-input:focus-within{border-color:var(--accent)}.ps-hex-hash{padding:0 0 0 8px;font-size:12px;font-weight:600;color:#a1a1aa;font-family:SF Mono,Consolas,monospace}.ps-hex-field{flex:1 1;padding:6px 8px 6px 2px;border:none;background:transparent;color:#fafafa;font-size:13px;font-family:SF Mono,Consolas,monospace;outline:none;letter-spacing:.5px;text-transform:uppercase}.ps-confirm-btn{width:100%;margin-top:10px;padding:8px 0;border:none;border-radius:5px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s}.ps-confirm-btn:hover{background:var(--accent-hover)}.ps-confirm-btn:active{transform:scale(.98)}.ps-num-field{flex:1 1;min-width:0;padding:6px 4px;background:#1e1e1e;border:1.5px solid #3d3d3d;border-radius:4px;color:#fafafa;font-size:12px;font-family:SF Mono,Consolas,monospace;text-align:center;outline:none;transition:border-color .15s;-moz-appearance:textfield}.ps-num-field::-webkit-inner-spin-button,.ps-num-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ps-num-field:focus{border-color:var(--accent)}.color-swatch-btn{width:42px;height:42px;border:2px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition);position:relative;flex-shrink:0;padding:0;outline:none}.color-swatch-btn:hover{border-color:var(--accent);transform:scale(1.05)}.color-swatch-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.color-swatch-btn:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;opacity:.3;z-index:0}.color-swatch-btn:after,.color-swatch-btn:before{content:"";position:absolute;inset:3px;border-radius:3px}.color-swatch-btn:after{z-index:1;background:inherit}.color-swatch-btn.small{width:34px;height:34px}input[type=color].native-hidden{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.detail-divider{display:flex;align-items:center;gap:14px;margin:36px 0 16px}.detail-divider:after,.detail-divider:before{content:"";flex:1 1;height:1px;background:var(--border)}.detail-divider-label{font-size:12px;font-weight:650;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}.site-preview-section{background:var(--surface-soft);border-radius:var(--radius-lg);padding:6px;border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:background var(--transition-slow),border-color var(--transition-slow)}.site-preview{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);transition:border-color var(--transition-slow)}.sp-navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px}.sp-nav-logo{font-weight:750;font-size:15px;letter-spacing:-.2px;white-space:nowrap}.sp-nav-links{display:flex;gap:20px;list-style:none}.sp-nav-links li{width:40px;height:8px;border-radius:4px;opacity:.6}.sp-nav-links li.active{opacity:1;width:50px}.sp-hero{padding:40px 24px;text-align:center}.sp-hero h3{font-size:24px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px}.sp-hero p{font-size:14px;opacity:.8;margin-bottom:20px;max-width:420px;margin-left:auto;margin-right:auto}.sp-hero-btn{display:inline-block;padding:10px 28px;border-radius:var(--radius-full);font-size:13px;font-weight:650;letter-spacing:.2px;border:none;cursor:default;transition:transform var(--transition-fast)}.sp-section-title{text-align:center;font-size:15px;font-weight:700;padding:10px 24px 0;opacity:.7}.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px;padding:20px 24px 28px}.sp-card{border-radius:var(--radius-sm);padding:18px 16px;transition:transform var(--transition-fast)}.sp-card-icon{width:36px;height:36px;border-radius:var(--radius-xs);margin-bottom:12px}.sp-card h4{font-size:14px;font-weight:700;margin-bottom:6px;letter-spacing:-.1px}.sp-card p{font-size:11px;opacity:.7;line-height:1.5;margin:0}.sp-stats{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:0;gap:0}.sp-stat{text-align:center;padding:24px 12px}.sp-stat-num{font-size:26px;font-weight:850;letter-spacing:-.5px;line-height:1.1}.sp-stat-label{font-size:11px;font-weight:500;opacity:.65;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}.sp-quote{text-align:center;padding:32px 24px}.sp-quote-text{font-size:16px;font-weight:600;font-style:italic;line-height:1.6;max-width:500px;margin:0 auto 12px;opacity:.9}.sp-quote-author{font-size:12px;font-weight:500;opacity:.6}.sp-cta{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;gap:20px;flex-wrap:wrap}.sp-cta-text{font-size:15px;font-weight:700;letter-spacing:-.2px}.sp-cta-btn{display:inline-block;padding:10px 24px;border-radius:var(--radius-full);font-size:12px;font-weight:650;border:none;cursor:default;white-space:nowrap}.sp-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:11px;font-weight:500;gap:16px}.sp-footer-dots{display:flex;gap:6px}.sp-footer-dots span{width:6px;height:6px;border-radius:50%;opacity:.5}@media (max-width:600px){.sp-navbar{padding:12px 16px}.sp-nav-links{gap:12px}.sp-nav-links li{width:28px;height:6px}.sp-hero{padding:28px 16px}.sp-hero h3{font-size:19px}.sp-cards{grid-template-columns:1fr;gap:10px;padding:14px 16px 20px}.sp-stats{grid-template-columns:repeat(2,1fr)}.sp-stat{padding:16px 8px}.sp-stat-num{font-size:22px}.sp-cta{flex-direction:column;text-align:center;padding:20px 16px}.sp-footer{padding:12px 16px}}@media (max-width:1100px){.generator-panel{grid-template-columns:1fr;gap:18px}.page{padding:14px 10px 32px}.page-head h1{font-size:30px}}@media (max-width:900px){.tools-grid{grid-template-columns:1fr}.card-container{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.nav{width:216px;min-width:216px}.page{padding:12px 6px 28px}.orb-cluster{display:none}.page-head h1{font-size:28px}}@media (max-width:700px){.app{padding:0;min-height:100vh}.app,.menu-toggle{display:block}.nav{position:fixed;left:-290px;top:10px;bottom:10px;height:auto;width:268px;min-width:268px;border-radius:24px;transition:left var(--transition);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border)}.nav.open{left:10px}.nav-backdrop.open{display:block}.page{padding:64px 14px 28px}.page-head{margin-bottom:18px}.page-head h1{font-size:26px}.page-subtitle{font-size:13px}.top{flex-direction:column;align-items:stretch}.card-container{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.contrast-inputs,.contrast-result{flex-direction:column}.contrast-result{align-items:flex-start}.gen-preview-colors{min-height:170px;flex-wrap:wrap}.gen-preview-colors .gen-swatch{min-width:80px;min-height:100px}.theory-grid{grid-template-columns:1fr 1fr 1fr}.gen-actions{flex-direction:column}.modal{padding:20px;max-width:95vw}.nav{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}@media (max-width:420px){.page{padding:56px 12px 24px}.page-head h1{font-size:23px}.page-eyebrow{font-size:10px}.card-container{grid-template-columns:1fr 1fr;gap:10px}.card{border-radius:16px}.card-colors{height:80px}.card-colors .swatch{font-size:9px;padding:4px}.card-info{padding:10px 10px 4px}.card-title{font-size:13px}.card-operate{padding:0 10px 10px;flex-direction:column;gap:4px}.filters{gap:5px}.filters button{padding:5px 12px;font-size:11px}.gen-controls{padding:16px;gap:14px}.gen-preview-colors{min-height:140px}.tool-card{padding:16px;border-radius:16px}.tool-card h3{font-size:15px}.tool-card h3 [data-icon]{width:30px;height:30px;padding:7px}.toast{right:12px;bottom:12px;left:12px;text-align:center}h1{font-size:22px}}