.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}@media(max-width:640px){.ccc-inputs{grid-template-columns:1fr}.ccc-swap-btn{width:100%;min-height:44px}.ccc-ratio-value{font-size:1.85rem}}