#ccc-copy-status{min-height:2.8em;margin:0}.ccc-wrap{display:flex;flex-direction:column;gap:1rem}.ccc-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.85rem;align-items:end;padding:1rem;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card)}.ccc-color-cell{display:flex;flex-direction:column;gap:.5rem;min-width:0}.ccc-label{font-size:.78rem;font-weight:800;line-height:1.2;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.04em}.ccc-color-input{display:flex;gap:.6rem;min-width:0}.ccc-picker{width:50px;height:50px;flex:0 0 50px;padding:3px;border:0;border-radius:var(--radius-md);cursor:pointer;background:var(--color-bg-secondary);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.ccc-picker::-webkit-color-swatch-wrapper{padding:0}.ccc-picker::-webkit-color-swatch{border:0;border-radius:var(--radius-sm)}.ccc-picker::-moz-color-swatch{border:0;border-radius:var(--radius-sm)}.ccc-hex-wrap{display:flex;flex-direction:column;gap:.3rem;min-width:0;flex:1 1 auto}.ccc-hex-input{width:100%;min-height:50px;padding:.6rem .75rem;border:0;border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text);font-family:var(--font-mono);font-size:.95rem;font-weight:700;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),box-shadow var(--transition-fast)}.ccc-hex-input:focus{outline:none;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 4px var(--color-primary-light)}.ccc-hex-input.ccc-error{box-shadow:inset 0 0 0 1px var(--color-danger),0 0 0 4px color-mix(in oklch,var(--color-danger) 14%,transparent)}.ccc-hex-error{min-height:1em;color:var(--color-danger);font-size:.78rem;line-height:1.25}.ccc-swap-btn{align-self:end;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:50px;padding:.55rem .85rem;border:0;border-radius:var(--radius-pill);background:var(--color-surface-muted);color:var(--color-text-muted);cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}@media(hover:hover){.ccc-swap-btn:hover{color:var(--color-primary);background:var(--color-surface);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 45%,transparent)}}.ccc-swap-btn:active{transform:scale(.94)}.ccc-preview{display:flex;flex-direction:column;gap:.4rem;padding:1.5rem 1.25rem;border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),color var(--transition-fast);overflow-wrap:anywhere}.ccc-preview-large{font-size:1.3rem;font-weight:700;line-height:1.4}.ccc-preview-small{font-size:.95rem;font-weight:400;line-height:1.55}.ccc-summary{display:flex;flex-direction:column;gap:.85rem}.ccc-ratio-card{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.2rem;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card)}.ccc-ratio-label{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-secondary)}.ccc-ratio-row{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap}.ccc-ratio-value{font-family:var(--font-mono);font-size:2.2rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--color-text)}.ccc-ratio-headline{font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .7rem;border-radius:var(--radius-pill)}.ccc-ratio-pass{background:color-mix(in oklch,var(--color-success) 22%,transparent);color:var(--color-success);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-success) 45%,transparent)}.ccc-ratio-fail{background:color-mix(in oklch,var(--color-danger) 18%,transparent);color:var(--color-danger);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-danger) 45%,transparent)}.ccc-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.85rem}.ccc-status-card{display:flex;flex-direction:column;gap:.45rem;padding:.9rem 1rem;border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card)}.ccc-status-title{font-size:.95rem;font-weight:800;color:var(--color-text);line-height:1.25}.ccc-status-hint{font-size:.74rem;color:var(--color-text-muted);line-height:1.4}.ccc-status-row{display:flex;align-items:center;gap:.6rem}.ccc-status-tag{display:inline-block;min-width:36px;padding:.2rem .5rem;border-radius:var(--radius-pill);background:var(--color-bg-secondary);color:var(--color-text-secondary);font-size:.74rem;font-weight:800;text-align:center;letter-spacing:.04em;box-shadow:inset 0 0 0 1px var(--color-border-soft)}.ccc-status-result{font-size:.85rem;font-weight:700;color:var(--color-text-secondary)}.ccc-status-result.ccc-pass{color:var(--color-success)}.ccc-status-result.ccc-fail{color:var(--color-danger)}.ccc-status-result.ccc-status-na{color:var(--color-text-muted)}.ccc-suggestion{display:flex;flex-direction:column;gap:.7rem;padding:.95rem 1.15rem;border-radius:var(--radius-lg);background:color-mix(in oklch,var(--color-accent) 14%,var(--color-surface));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-accent) 42%,transparent),var(--shadow-card)}.ccc-suggestion[hidden]{display:none}.ccc-suggestion-title{font-size:.88rem;font-weight:800;color:var(--color-text)}.ccc-suggestion-body{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;font-size:.92rem}.ccc-suggestion-line{color:var(--color-text-secondary)}.ccc-suggestion-swatch{display:inline-block;width:22px;height:22px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.ccc-suggestion-hex{font-family:var(--font-mono);font-weight:800;color:var(--color-text)}.ccc-suggestion-ratio{color:var(--color-text-muted);font-family:var(--font-mono);font-size:.85rem}.ccc-suggestion-actions{display:flex;gap:.6rem;flex-wrap:wrap}.ccc-wrap{flex:1;min-height:0}.ccc-body{display:grid;grid-template-columns:clamp(270px,24vw,320px) minmax(0,1fr);gap:1rem;flex:1;min-height:0}.ccc-rail{display:flex;flex-direction:column;gap:.65rem;min-width:0;min-height:0;overflow:auto}.ccc-inputs{grid-template-columns:minmax(0,1fr);padding:.65rem;gap:.65rem}.ccc-label-row{display:flex;align-items:center;justify-content:space-between;gap:.25rem;min-width:0}.ccc-swap-row{display:flex;align-items:center;gap:.4rem}.ccc-swap-btn{min-height:44px}#ccc-copy-status{flex:0 0 auto;min-height:3.8em;line-height:1.3}.ccc-result{min-width:0;min-height:0;overflow:auto}.ccc-result-content{display:flex;flex-direction:column;gap:.75rem}.ccc-result-content[hidden],.ccc-preview[hidden],.ccc-empty[hidden]{display:none}.ccc-empty{display:grid;place-content:center;min-height:100%;margin:0;color:var(--color-text-muted);text-align:center}.ccc-preview{height:160px;min-height:0;overflow:auto;padding:.8rem}.ccc-suggestion{padding:.65rem;gap:.45rem}.ccc-suggestion-body{gap:.4rem}.ccc-suggestion-line{font-size:.8rem}.ccc-suggestion-actions{gap:.25rem}.ccc-action{display:inline-flex;align-items:center;gap:.15rem;min-width:0}.ccc-action button{white-space:nowrap;font-size:.74rem;padding:.5rem .55rem}.ccc-summary{max-height:24rem;overflow:auto}@media(max-width:860px){.ccc-body{grid-template-columns:minmax(0,1fr);flex:none}.ccc-rail,.ccc-result{overflow:visible}.ccc-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.ccc-result[data-empty=true]{display:none}}@media(max-width:640px){.ccc-body{gap:.55rem}.ccc-rail{gap:.3rem}.ccc-inputs{padding:.5rem;gap:.45rem}.ccc-label{font-size:.74rem}.ccc-color-cell{gap:.2rem}.ccc-color-input{gap:.3rem}.ccc-picker{width:44px;height:44px;flex-basis:44px}.ccc-hex-input{min-height:44px;padding:.35rem;font-size:.82rem}.ccc-swap-btn,.ccc-action button{min-height:44px}.ccc-hex-error{font-size:.68rem}#ccc-copy-status{min-height:2.8em;font-size:.75rem}.ccc-suggestion{padding:.5rem;gap:.35rem}.ccc-suggestion-title{font-size:.75rem}.ccc-suggestion-line{font-size:.72rem}.ccc-preview{height:130px;padding:.6rem}.ccc-preview-large{font-size:1.05rem;line-height:1.35}.ccc-preview-small{font-size:.82rem}.ccc-ratio-value{font-size:1.85rem}.ccc-summary{max-height:22rem}}