*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f13;--card-bg:#1a1a22;--border:#2a2a35;--text:#e8e8ed;--text-dim:#8888a0;--accent:#7c6ff0;--accent-glow:#7c6ff04d;--radius:10px}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}header{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#0f0f13eb;padding:16px 24px;position:sticky;top:0}.header-content{align-items:baseline;gap:12px;margin-bottom:14px;display:flex}h1{background:linear-gradient(135deg,#7c6ff0,#f070a0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:700}.subtitle{-webkit-text-fill-color:var(--text-dim);font-size:14px;font-weight:400}.stats{color:var(--text-dim);margin-left:auto;font-size:13px}.stats span{color:var(--accent);font-size:15px;font-weight:700}.controls{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.filter-group{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;gap:4px;padding:3px;display:flex}.filter-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 14px;font-size:13px;transition:all .15s}.filter-btn:hover{color:var(--text);background:#ffffff0d}.filter-btn.active{background:var(--accent);color:#fff}.search-group{flex:1;gap:8px;min-width:200px;display:flex}#searchInput{border:1px solid var(--border);background:var(--card-bg);color:var(--text);border-radius:6px;outline:none;flex:1;padding:7px 12px;font-size:13px;transition:border-color .15s}#searchInput:focus{border-color:var(--accent)}#searchInput::placeholder{color:var(--text-dim)}#sizeSelect{border:1px solid var(--border);background:var(--card-bg);color:var(--text);cursor:pointer;border-radius:6px;outline:none;padding:7px 10px;font-size:13px}.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-width:1600px;margin:0 auto;padding:20px 24px;display:grid}.palette-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .15s;position:relative;overflow:hidden}.palette-card:hover{border-color:var(--accent);box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-2px)}.palette-card .swatches{height:60px;display:flex}.palette-card .swatch{flex:1;transition:flex .2s;position:relative}.palette-card:hover .swatch{flex:1.5}.palette-card .swatch:hover{flex:3}.palette-card .info{justify-content:space-between;align-items:center;padding:8px 10px;display:flex}.palette-card .name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;overflow:hidden}.palette-card .badge{border-radius:4px;flex-shrink:0;padding:2px 6px;font-size:10px;font-weight:500}.badge-sanzo{color:#b794f4;background:#2d1b69}.badge-nice{color:#68d391;background:#1b3a2d}.badge-met{color:#fbb6ce;background:#3d1b2a}.badge-china{color:#f5c6a0;background:#8b1a1a}.palette-card .hex-row{flex-wrap:wrap;gap:4px;padding:4px 10px 8px;display:none}.palette-card.expanded .hex-row{display:flex}.palette-card .hex-chip{color:var(--text-dim);background:#ffffff0f;border-radius:4px;padding:2px 6px;font-family:SF Mono,Fira Code,monospace;font-size:10px;transition:color .1s}.palette-card .hex-chip:hover{color:#fff}.copy-all-btn{border:none;border-top:1px solid var(--accent);color:var(--accent);cursor:pointer;text-align:center;z-index:10;background:#0f0f13eb;padding:6px 0;font-size:11px;transition:all .12s;display:none;position:absolute;bottom:0;left:0;right:0}.palette-card:hover .copy-all-btn{display:block}.copy-all-btn:hover{background:var(--accent);color:#fff}.toast{background:var(--accent);color:#fff;z-index:999;opacity:0;pointer-events:none;border-radius:8px;padding:8px 20px;font-size:13px;transition:opacity .25s;position:fixed;bottom:30px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}footer{text-align:center;color:var(--text-dim);border-top:1px solid var(--border);padding:24px;font-size:12px}footer a{color:var(--accent);text-decoration:none}footer a:hover{text-decoration:underline}.empty-state{text-align:center;color:var(--text-dim);grid-column:1/-1;padding:60px 20px}.empty-state .icon{margin-bottom:12px;font-size:48px}@media (width<=640px){header{padding:12px 16px}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:12px 16px}.controls{flex-direction:column}.search-group{width:100%}}