:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--accent: #8b5cf6;--accent-hover: #7c3aed;--accent-dim: rgba(139, 92, 246, .12);--surface: rgba(255, 255, 255, .04);--surface-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .1);--text: #fafafa;--text-dim: rgba(255, 255, 255, .5);--text-mid: rgba(255, 255, 255, .7);--danger: #ef4444;--radius: .625rem;--heart: #f43f5e}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:var(--text)}.app{max-width:540px;margin:0 auto;padding:1rem;min-height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0 1.25rem;border-bottom:1px solid var(--border);margin-bottom:.75rem}.logo{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;letter-spacing:-.03em}.saved-count{font-size:.8rem;color:var(--accent);font-weight:600}.main{flex:1;display:flex;flex-direction:column;gap:.75rem;position:relative}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;padding:.6rem 1.2rem;border-radius:2rem;font-size:.85rem;font-weight:600;z-index:200;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.tab-bar{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3px}.tab-btn{flex:1;padding:.5rem;font-size:.85rem;font-weight:600;font-family:inherit;background:transparent;border:none;border-radius:calc(var(--radius) - 3px);color:var(--text-dim);cursor:pointer;transition:all .15s}.tab-btn.active{background:var(--accent);color:#fff}.tab-btn:not(.active):hover{color:var(--text-mid)}.icon-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:.375rem;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .15s}.icon-btn:hover{background:var(--surface-hover);color:var(--text)}.danger-icon:hover{background:#ef444426;color:var(--danger)}.search-wrap{position:relative}.search-input{width:100%;padding:.65rem .75rem .65rem 2.25rem;font-size:.9rem;font-family:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;transition:border-color .15s}.search-input:focus{border-color:var(--accent)}.search-input::placeholder{color:var(--text-dim)}.search-icon{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--text-dim);pointer-events:none}.picker-section{display:flex;flex-direction:column;gap:.75rem}.preview-card{width:100%;aspect-ratio:2.5 / 1;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;transition:background .1s;border:1px solid var(--border)}.preview-hex{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.preview-rgb,.preview-hsl{font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums}.slider-group{display:flex;align-items:center;gap:.625rem}.slider-label{font-size:.75rem;font-weight:600;color:var(--text-dim);width:36px;flex-shrink:0}.slider-value{font-size:.75rem;font-weight:700;color:var(--text-mid);width:40px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}.hue-slider,.sat-slider,.light-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:4px;outline:none;cursor:pointer}.hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.hue-slider::-webkit-slider-thumb,.sat-slider::-webkit-slider-thumb,.light-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.3);cursor:pointer;box-shadow:0 1px 4px #0006}.hue-slider::-moz-range-thumb,.sat-slider::-moz-range-thumb,.light-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.3);cursor:pointer;box-shadow:0 1px 4px #0006}.hex-row{display:flex;align-items:center;gap:.5rem}.hex-label{font-size:.75rem;font-weight:600;color:var(--text-dim);width:36px;flex-shrink:0}.hex-input{flex:1;padding:.5rem .75rem;font-size:.95rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;color:var(--text);outline:none;transition:border-color .15s;letter-spacing:.05em}.hex-input:focus{border-color:var(--accent)}.copy-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;color:var(--text-mid);cursor:pointer;transition:all .15s}.copy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.code-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.code-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.625rem .75rem;cursor:pointer;transition:border-color .15s;display:flex;flex-direction:column;gap:.15rem}.code-card:hover{border-color:#ffffff2e}.code-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.code-value{font-size:.88rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.action-row{display:flex;gap:.5rem}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem;font-size:.88rem;font-weight:600;font-family:inherit;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;color:var(--text-mid);cursor:pointer;transition:all .15s}.action-btn:hover{border-color:#ffffff2e;color:var(--text)}.action-btn.saved-active{border-color:var(--heart);color:var(--heart);background:#f43f5e14}.action-btn.copy-all:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.search-section{display:flex;flex-direction:column;gap:.75rem}.search-hints{text-align:center;padding:1rem 0}.hint-text{font-size:.85rem;color:var(--text-dim);margin-bottom:.75rem}.hint-chips{display:flex;flex-wrap:wrap;gap:.375rem;justify-content:center}.hint-chip{padding:.35rem .75rem;font-size:.82rem;font-family:inherit;background:var(--surface);border:1px solid var(--border);border-radius:2rem;color:var(--text-mid);cursor:pointer;transition:all .15s}.hint-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.search-results{display:flex;flex-direction:column;gap:.375rem}.color-result{display:flex;align-items:center;gap:.75rem;padding:.625rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s}.color-result:hover{border-color:#ffffff2e}.color-swatch{width:36px;height:36px;border-radius:.5rem;flex-shrink:0;border:1px solid var(--border)}.color-info{flex:1;min-width:0;display:flex;flex-direction:column}.color-name{font-size:.88rem;font-weight:600;color:var(--text);text-transform:capitalize}.color-hex{font-size:.75rem;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1rem;color:var(--text-dim)}.empty p{margin-top:1rem;font-size:.95rem;max-width:260px}.saved-section{display:flex;flex-direction:column}.saved-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.saved-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .15s}.saved-card:hover{border-color:#ffffff2e}.saved-swatch{aspect-ratio:1.4 / 1;display:flex;align-items:center;justify-content:center}.saved-swatch-hex{font-size:.85rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.saved-card-bottom{display:flex;align-items:center;justify-content:space-between;padding:.5rem .5rem .5rem .625rem}.saved-name{font-size:.78rem;font-weight:600;color:var(--text-mid);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-card-actions{display:flex;gap:.125rem;flex-shrink:0}.saved-card-actions .icon-btn{width:24px;height:24px}@media(max-width:480px){.app{padding:.75rem}}