.tool-page .ct-card-title{font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.tool-page .ct-swatch-row{display:flex;align-items:center;gap:16px;margin-bottom:1.25rem}.tool-page .ct-swatch{width:80px;height:80px;border-radius:12px;border:1px solid var(--border);flex-shrink:0;transition:background .15s}.tool-page .ct-input-group{margin-bottom:1rem}.tool-page .ct-group-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.tool-page .ct-group-row{display:flex;align-items:center;gap:8px}.tool-page .ct-prefix{font-family:var(--mono);font-size:.95rem;color:var(--muted);flex-shrink:0}.tool-page .ct-mono-field{flex:1 1;font-family:var(--mono)!important;min-width:0}.tool-page .ct-channels{display:flex;gap:8px;flex:1 1}.tool-page .ct-channel{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1 1}.tool-page .ct-channel-label{font-size:.65rem;font-weight:700;text-transform:uppercase;color:var(--muted)}.tool-page .ct-channel-input{text-align:center;font-family:var(--mono)!important;width:100%!important;padding:8px 4px!important}.tool-page .ct-copy-btn{flex-shrink:0;padding:8px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.tool-page .ct-copy-btn:hover{color:var(--accent);border-color:var(--accent)}.tool-page .ct-css-var{flex:1 1;background:var(--surface2);padding:8px 12px;font-family:var(--mono);font-size:.85rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-page .ct-css-var,.tool-page .ct-inline-picker{border:1px solid var(--border);border-radius:var(--radius-sm)}.tool-page .ct-inline-picker{width:36px;height:36px;background:none;cursor:pointer;padding:2px;flex-shrink:0}.tool-page .ct-tint-row{display:flex;gap:4px;border-radius:8px;overflow:hidden}.tool-page .ct-tint-swatch{flex:1 1;height:40px;cursor:pointer;transition:transform .1s}.tool-page .ct-tint-swatch:hover{transform:scaleY(1.15)}.tool-page .ct-harmony-btns{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}.tool-page .ct-harmony-btn{padding:7px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s}.tool-page .ct-harmony-btn:hover{color:var(--text);border-color:var(--border-strong)}.tool-page .ct-harmony-btn.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:var(--accent);color:var(--accent)}.tool-page .ct-palette-swatches{display:flex;gap:10px;flex-wrap:wrap;margin:1rem 0 .5rem}.tool-page .ct-palette-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;flex:1 1;min-width:80px;max-width:120px}.tool-page .ct-palette-box{width:100%;height:72px;border-radius:10px;border:1px solid rgba(0,0,0,.1);transition:transform .15s}.tool-page .ct-palette-swatch:hover .ct-palette-box{transform:scale(1.05)}.tool-page .ct-palette-hex{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:center;transition:color .15s}.tool-page .ct-palette-swatch.copied .ct-palette-hex{color:var(--accent)}.tool-page .ct-palette-hint{font-size:.72rem;color:var(--muted);margin-top:4px}.tool-page .ct-gradient-preview{height:100px;border-radius:12px;border:1px solid var(--border);margin-bottom:1.5rem;transition:background .2s}.tool-page .ct-gradient-controls{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.25rem}.tool-page .ct-control-group{display:flex;flex-direction:column;gap:8px;margin-bottom:1.25rem}.tool-page .ct-control-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.tool-page .ct-dir-btns{display:flex;gap:6px}.tool-page .ct-dir-btn{width:36px;height:36px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:1rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.tool-page .ct-dir-btn:hover{color:var(--accent);border-color:var(--accent)}.tool-page .ct-range{width:100%;accent-color:var(--accent);height:4px}.tool-page .ct-stops-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.tool-page .ct-add-stop-btn{padding:5px 12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--accent);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s}.tool-page .ct-add-stop-btn:hover{background:color-mix(in srgb,var(--accent) 20%,var(--surface))}.tool-page .ct-stops-list{display:flex;flex-direction:column;gap:8px}.tool-page .ct-stop-row{display:flex;align-items:center;gap:8px}.tool-page .ct-stop-hex{width:100px!important;font-family:var(--mono)!important;flex-shrink:0}.tool-page .ct-stop-pos{display:flex;align-items:center;gap:4px;flex-shrink:0}.tool-page .ct-stop-pos-input{width:64px!important;font-family:var(--mono)!important;text-align:center}.tool-page .ct-pos-label{font-size:.85rem;color:var(--muted)}.tool-page .ct-remove-stop{width:28px;height:28px;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tool-page .ct-remove-stop:hover:not(:disabled){color:var(--danger,#f87171);border-color:var(--danger,#f87171)}.tool-page .ct-remove-stop:disabled{opacity:.35;cursor:default}.tool-page .ct-css-output-wrap{position:relative}.tool-page .ct-css-output{resize:none;padding-right:100px!important;min-height:60px}.tool-page .ct-copy-css-btn{position:absolute;right:10px;top:10px;padding:6px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .15s}.tool-page .ct-copy-css-btn:hover{color:var(--accent);border-color:var(--accent)}.tool-page .ct-contrast-inputs{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}@media (max-width:480px){.tool-page .ct-contrast-inputs{grid-template-columns:1fr}}.tool-page .ct-contrast-group{display:flex;flex-direction:column;gap:6px}.tool-page .ct-ratio-display{display:flex;flex-direction:column;align-items:center;margin:1.5rem 0;gap:4px}.tool-page .ct-ratio-number{font-family:var(--mono);font-size:2.5rem;font-weight:800;color:var(--text);line-height:1}.tool-page .ct-ratio-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.tool-page .ct-wcag-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-bottom:1.5rem}.tool-page .ct-wcag-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px}.tool-page .ct-wcag-level{font-size:.82rem;font-weight:600;color:var(--text)}.tool-page .ct-badge{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--surface);color:var(--muted);border:1px solid var(--border)}.tool-page .ct-badge-pass{background:color-mix(in srgb,#22c55e 15%,transparent);color:#22c55e;border-color:#22c55e}.tool-page .ct-badge-fail{background:color-mix(in srgb,#f87171 15%,transparent);color:#f87171;border-color:#f87171}.tool-page .ct-contrast-preview{border-radius:12px;padding:1.5rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:10px}.tool-page .ct-preview-normal{font-size:1rem;margin:0}.tool-page .ct-preview-large{font-size:1.5rem;font-weight:700;margin:0}.tool-page .ct-preview-small{font-size:.75rem;margin:0}@media (max-width:480px){.tool-page .ct-wcag-grid{grid-template-columns:1fr}.tool-page .ct-picker-row{flex-direction:column}.tool-page .ct-swatch{width:60px;height:60px}}