.colorgen-clean-page{padding-bottom:90px}.colorgen-minimal-hero{border-bottom:1px solid var(--border);margin-bottom:28px;padding:38px 0 28px}.hero-top-badge{letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);align-items:center;gap:8px;margin-bottom:14px;font-size:11px;font-weight:600;display:inline-flex}.live-indicator{background-color:var(--accent);border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 3px #c2fc104d}.hero-heading{letter-spacing:-2px;color:var(--fg);margin:0 0 14px;font-size:clamp(34px,4.5vw,64px);font-weight:550;line-height:1.1}.serif-touch{font-family:Thanhflox Serif,Georgia,serif;font-style:italic;font-weight:400}.hero-subtext{color:var(--muted);max-width:760px;margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.6}.hero-subtext strong{color:var(--fg)}.url-extractor-wrapper{margin-top:24px}.url-extractor-bar{background:var(--bg);border:1.5px solid var(--border);border-radius:14px;align-items:center;gap:8px;padding:4px 6px;transition:border-color .2s,box-shadow .2s;display:flex;box-shadow:0 4px 14px #00000008}html[data-theme=dark] .url-extractor-bar{background:var(--surface,#23281e);box-shadow:0 4px 14px #00000040}.url-extractor-bar:focus-within{border-color:var(--fg);box-shadow:0 0 0 2px #c2fc1066}.extractor-input-box{flex:1;align-items:center;display:flex;position:relative}.extractor-icon{color:var(--muted);pointer-events:none;position:absolute;left:12px}.extractor-input{width:100%;color:var(--fg);background:0 0;border:none;outline:none;padding:10px 32px 10px 38px;font-size:13.5px}.clear-url-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:11px;position:absolute;right:8px}.extractor-submit-btn{background:var(--accent);color:#181816;cursor:pointer;white-space:nowrap;border:none;border-radius:10px;align-items:center;gap:6px;padding:10px 20px;font-size:13px;font-weight:600;transition:transform .15s,filter .15s;display:inline-flex}.extractor-submit-btn:hover:not(:disabled){filter:brightness(.95);transform:translateY(-1px)}.extractor-submit-btn:disabled{opacity:.55;cursor:not-allowed}.spin-icon{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.extractor-preset-row{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;display:flex}.preset-pills{flex-wrap:wrap;gap:6px;display:flex}.preset-pill-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:12px;padding:3px 9px;font-size:11px;transition:all .15s}.preset-pill-btn:hover{border-color:var(--fg);color:var(--fg)}.extracted-system-panel{border:1.5px solid var(--border);background:var(--bg);border-radius:16px;margin-top:20px;padding:24px;animation:.2s cubic-bezier(.16,1,.3,1) expandIn;box-shadow:0 12px 30px #0000000d}html[data-theme=dark] .extracted-system-panel{background:var(--surface,#23281e);box-shadow:0 12px 30px #0006}@keyframes expandIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.extracted-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;display:flex}.extracted-badge{letter-spacing:.8px;text-transform:uppercase;color:var(--accent);background:#000c;border-radius:8px;margin-bottom:6px;padding:2px 8px;font-size:10px;font-weight:700;display:inline-block}html[data-theme=dark] .extracted-badge{background:#181a15}.extracted-brand-info h3{letter-spacing:-.6px;color:var(--fg);margin:0 0 4px;font-size:22px}.extracted-brand-info h3 code{color:var(--muted);font-family:monospace;font-size:14px}.extracted-brand-info p{color:var(--muted);margin:0;font-size:13px}.extracted-close-btn{border:1px solid var(--border);cursor:pointer;width:32px;height:32px;color:var(--fg);background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.extracted-close-btn:hover{background:#0000000d}.extracted-palette-section{border:1px solid var(--border);background:#00000005;border-radius:12px;margin-bottom:20px;padding:16px}html[data-theme=dark] .extracted-palette-section{background:#ffffff05}.extracted-section-label{color:var(--fg);margin-bottom:10px;font-size:12px}.extracted-swatch-bands{border-radius:8px;height:48px;margin-bottom:12px;display:flex;overflow:hidden;box-shadow:inset 0 1px 2px #0000001a}.extracted-color-band{cursor:pointer;justify-content:center;align-items:center;height:100%;transition:filter .15s;display:flex}.extracted-color-band:hover{filter:brightness(1.08)}.extracted-band-label{flex-direction:column;align-items:center;font-size:11px;display:flex}.extracted-band-label .band-pct{font-size:11px;line-height:1.2}.extracted-band-label .band-hex{opacity:.85;font-family:monospace;font-size:10px}.extracted-chips-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;display:grid}.extracted-chip{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;transition:all .15s;display:flex}html[data-theme=dark] .extracted-chip{background:var(--surface,#23281e)}.extracted-chip:hover{border-color:var(--fg)}.chip-dot{border-radius:3px;flex-shrink:0;width:14px;height:14px}.chip-texts{flex-direction:column;flex:1;display:flex}.extracted-tokens-inspector{margin-bottom:20px}.tokens-tab-headers{border-bottom:1px solid var(--border);flex-wrap:wrap;gap:6px;margin-bottom:12px;padding-bottom:8px;display:flex}.token-tab-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:14px;padding:5px 12px;font-size:11.5px;font-weight:500;transition:all .15s}.token-tab-btn:hover{color:var(--fg)}.token-tab-btn.active{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}.token-kv-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;display:grid}.token-kv-row{border:1px solid var(--border);cursor:pointer;background:#00000005;border-radius:6px;justify-content:space-between;align-items:center;padding:7px 10px;font-family:monospace;font-size:11px;transition:all .15s;display:flex}html[data-theme=dark] .token-kv-row{background:#ffffff08}.token-kv-row:hover{border-color:var(--fg);transform:translateY(-1px)}.token-key{color:var(--muted)}.token-val{color:var(--fg);align-items:center;gap:5px;font-weight:600;display:flex}.token-color-preview{border:1px solid #00000026;border-radius:2px;width:10px;height:10px;display:inline-block}.extracted-actions-bar{border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;padding-top:12px;display:flex}.action-btn{cursor:pointer;border-radius:16px;align-items:center;gap:6px;padding:8px 14px;font-size:12px;font-weight:550;transition:all .15s;display:inline-flex}.action-btn.preview-action{background:var(--accent);color:#181816;border:none}.action-btn.preview-action:hover{filter:brightness(.95);transform:translateY(-1px)}.action-btn.code-action{color:var(--fg);border:1px solid var(--border);background:0 0}.action-btn.code-action:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}.colorgen-toolbar{flex-direction:column;gap:16px;margin-bottom:32px;display:flex}.toolbar-main-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.search-pill-box{flex:1;min-width:260px;max-width:480px;position:relative}.search-icon{color:var(--muted);pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.search-pill-input{background:var(--bg);width:100%;color:var(--fg);border:1px solid var(--border);border-radius:24px;outline:none;padding:10px 36px 10px 38px;font-size:13px;transition:border-color .2s,box-shadow .2s}.search-pill-input:focus{border-color:var(--fg);box-shadow:0 0 0 2px #c2fc1066}.clear-search{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:11px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.toolbar-controls{align-items:center;gap:10px;display:flex}.ratio-toggle-group{border:1px solid var(--border);background:#0000000a;border-radius:20px;padding:2px;display:inline-flex}html[data-theme=dark] .ratio-toggle-group{background:#ffffff0a}.ratio-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:16px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .15s}.ratio-btn.active{background:var(--fg);color:var(--bg);font-weight:600}.sort-btn{border:1px solid var(--border);color:var(--fg);cursor:pointer;background:0 0;border-radius:20px;align-items:center;gap:6px;padding:7px 14px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.sort-btn:hover{border-color:var(--fg)}.category-scroll-row{flex-wrap:wrap;gap:8px;display:flex}.cat-pill{border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;border-radius:18px;align-items:center;padding:6px 14px;font-size:12px;transition:all .15s;display:inline-flex}.cat-pill:hover{border-color:var(--fg);color:var(--fg)}.cat-pill.active{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:550}.cat-count{color:inherit;background:#0000000f;border-radius:10px;margin-left:6px;padding:1px 6px;font-size:11px}.cat-pill.active .cat-count{color:inherit;background:#0000001f}html[data-theme=light] .cat-pill.active .cat-count{background:#ffffff40}.palette-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;display:grid}.clean-palette-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.clean-palette-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0000000f}html[data-theme=dark] .clean-palette-card{background:var(--surface,#23281e);border-color:var(--border,#3d4435)}html[data-theme=dark] .clean-palette-card:hover{box-shadow:0 10px 24px #0006}.card-bands-wrap{border-radius:15px 15px 0 0;flex-direction:column;height:220px;display:flex;position:relative;overflow:hidden}.color-band{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:filter .15s;display:flex;position:relative}.color-band:hover{filter:brightness(1.03)}.band-hex-label{letter-spacing:.6px;text-transform:uppercase;opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:monospace;font-size:13px;font-weight:700;transition:opacity .15s,transform .15s;transform:translateY(2px)}.color-band:hover .band-hex-label{opacity:1;transform:translateY(0)}.card-footer{background:var(--bg);border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;display:flex}html[data-theme=dark] .card-footer{background:var(--surface,#23281e)}.card-meta{flex-direction:column;flex:1;gap:2px;display:flex;overflow:hidden}.card-title{color:var(--fg);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;line-height:1.3;overflow:hidden}.card-cat-name{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px;font-weight:550}.card-actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.preview-pill-btn{border:1px solid var(--border);color:var(--fg);cursor:pointer;background:0 0;border-radius:14px;align-items:center;gap:4px;padding:5px 10px;font-size:11px;font-weight:550;transition:all .15s;display:inline-flex}.preview-pill-btn:hover{background:var(--accent);border-color:var(--accent);color:#181816}.heart-like-btn{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;border-radius:14px;align-items:center;gap:4px;padding:5px 9px;font-size:11px;transition:all .15s;display:inline-flex}.heart-like-btn:hover{color:#ef4444;border-color:#ef4444}.heart-like-btn.liked{color:#ef4444;background:#ef444414;border-color:#ef4444}.load-more-section{text-align:center;margin-top:40px}.load-more-btn{border:1px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer;border-radius:24px;padding:12px 28px;font-size:13px;font-weight:550;transition:all .15s}.load-more-btn:hover{background:var(--accent);border-color:var(--accent);color:#181816}.empty-results{text-align:center;max-width:400px;margin:40px auto;padding:50px 20px}.empty-results h3{margin-bottom:8px;font-size:18px}.empty-results p{color:var(--muted);font-size:13px}.reset-btn{background:var(--fg);color:var(--bg);cursor:pointer;border:none;border-radius:20px;margin-top:14px;padding:8px 18px;font-size:12px}.colorgen-modal-overlay{-webkit-backdrop-filter:blur(6px);z-index:9999;background:#000000a6;justify-content:center;align-items:center;padding:20px;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.colorgen-modal-sheet{background:var(--bg);border:1px solid var(--border);border-radius:18px;width:100%;max-width:900px;max-height:90vh;padding:28px;position:relative;overflow-y:auto;box-shadow:0 20px 50px #00000040}html[data-theme=dark] .colorgen-modal-sheet{background:#181a15;border-color:#3d4435}.modal-header{justify-content:space-between;align-items:flex-start;margin-bottom:20px;display:flex}.modal-title-wrap h3{letter-spacing:-.8px;margin:6px 0;font-size:24px}.modal-title-wrap p{color:var(--muted);max-width:600px;margin:0;font-size:13px}.modal-badge{letter-spacing:.8px;text-transform:uppercase;color:var(--accent);background:#000c;border-radius:10px;padding:2px 8px;font-size:10px;font-weight:700}html[data-theme=dark] .modal-badge{background:#23281e}.modal-close-btn{border:1px solid var(--border);cursor:pointer;width:34px;height:34px;color:var(--fg);background:0 0;border-radius:50%;justify-content:center;align-items:center;transition:all .15s;display:flex}.modal-close-btn:hover{background:#0000000d}.modal-ratio-section{border:1px solid var(--border);background:#00000005;border-radius:12px;margin-bottom:20px;padding:14px 16px}html[data-theme=dark] .modal-ratio-section{background:#ffffff05}.ratio-header-label{color:var(--fg);justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;font-weight:600;display:flex}.ratio-rule-badge{color:var(--muted);font-size:10px}.colorgen-ratio-bar{border-radius:6px;height:22px;margin-bottom:12px;display:flex;overflow:hidden}.ratio-segment{cursor:pointer;justify-content:center;align-items:center;height:100%;transition:filter .15s;display:flex}.ratio-segment:hover{filter:brightness(1.1)}.ratio-label-inside{font-size:10px;font-weight:700}.colorgen-color-chips{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;display:grid}.color-chip{border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;transition:all .15s;display:flex}html[data-theme=dark] .color-chip{background:var(--surface,#23281e)}.color-chip:hover{border-color:var(--fg)}.chip-dot{border:1px solid #00000026;border-radius:3px;flex-shrink:0;width:14px;height:14px}.chip-info{flex-direction:column;flex:1;display:flex}.chip-role{color:var(--muted);font-size:9px}.chip-hex{color:var(--fg);font-family:monospace;font-size:11px;font-weight:700}.chip-copy-icon{color:var(--muted)}.modal-preview-canvas-box{margin-bottom:20px}.preview-canvas-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.canvas-title{color:var(--fg);font-size:12px}.preview-theme-toggles{align-items:center;display:flex}.theme-pill{border:1px solid var(--border);color:var(--muted);cursor:pointer;background:0 0;padding:3px 8px;font-size:11px}.theme-pill:first-of-type{border-right:none;border-radius:10px 0 0 10px}.theme-pill:last-of-type{border-radius:0 10px 10px 0}.theme-pill.active{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}.mockup-frame{border:1px solid;border-radius:12px;overflow:hidden}.mockup-navbar{justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.mockup-brand{align-items:center;gap:8px;display:flex}.mockup-logo-mark{border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:800;display:flex}.mockup-brand-name{font-size:12px;font-weight:700}.mockup-nav-links{gap:14px;font-size:11px;display:flex}.mockup-nav-item{opacity:.7}.mockup-nav-item.active{opacity:1;border-bottom:2px solid;font-weight:600}.mockup-action-btn{cursor:pointer;border:none;border-radius:16px;padding:5px 12px;font-size:11px;font-weight:700}.mockup-body-grid{grid-template-columns:1fr 1fr;gap:14px;padding:16px;display:grid}.mockup-card{border:1px solid;border-radius:8px;flex-direction:column;gap:8px;padding:14px;display:flex}.mockup-card-header{justify-content:space-between;align-items:center;display:flex}.mockup-card-title{font-size:11px;font-weight:600}.mockup-pill-badge{border-radius:8px;padding:2px 6px;font-size:9px;font-weight:700}.mockup-stat-number{letter-spacing:-.5px;font-size:22px;font-weight:800}.mockup-stat-sub{margin:0;font-size:10px;line-height:1.4}.mockup-chart-bars{border-top:1px dashed #96969633;align-items:flex-end;gap:6px;height:40px;margin-top:4px;padding-top:6px;display:flex}.chart-bar{border-radius:3px 3px 0 0;flex:1;min-height:8px}.mockup-status-dot{border-radius:50%;width:7px;height:7px}.mockup-controls-list{flex-direction:column;gap:8px;display:flex}.mockup-btn{cursor:pointer;text-align:center;border:none;border-radius:6px;padding:7px 12px;font-size:11px;font-weight:600}.mockup-btn.primary-btn{width:100%}.mockup-btn.secondary-btn{flex:1}.mockup-btn.outline-btn{border:1px solid;flex:1}.mockup-input-wrap{gap:6px;display:flex}.mockup-input{border:1px solid;border-radius:6px;outline:none;flex:1;padding:6px 8px;font-size:11px}.mockup-input-submit{cursor:pointer;border:none;border-radius:6px;padding:6px 10px;font-size:11px;font-weight:600}.mockup-footer-note{justify-content:space-between;align-items:center;padding:8px 16px;font-size:10px;display:flex}.wcag-score-tag{align-items:center;display:flex}.wcag-note-text{color:var(--muted)}.modal-export-bar{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;display:flex}.export-hint{color:var(--muted);font-size:11px}.export-buttons{gap:6px;display:flex}.export-btn{border:1px solid var(--border);color:var(--fg);cursor:pointer;background:0 0;border-radius:16px;align-items:center;gap:5px;padding:6px 12px;font-size:11px;font-weight:550;transition:all .15s;display:inline-flex}.export-btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}.colorgen-toast{background:var(--fg);color:var(--bg);z-index:10000;border-radius:24px;align-items:center;gap:8px;padding:10px 18px;font-size:12px;font-weight:550;animation:.2s cubic-bezier(.16,1,.3,1) toastSlideUp;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0003}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%,15px)}to{opacity:1;transform:translate(-50%)}}.toast-color-bubble{border:1px solid #ffffff4d;border-radius:50%;width:12px;height:12px}.toast-check-icon{color:var(--accent)}@media (max-width:760px){.hero-heading{letter-spacing:-1.5px;font-size:32px}.toolbar-main-row{flex-direction:column;align-items:stretch}.search-pill-box{max-width:100%}.toolbar-controls{justify-content:space-between}.palette-grid,.mockup-body-grid{grid-template-columns:1fr}.mockup-nav-links{display:none}}