.cc-top{grid-template-columns:220px 1fr;align-items:start;gap:20px;display:grid}@media (width<=640px){.cc-top{grid-template-columns:1fr}}.cc-swatch-wrap{flex-direction:column;gap:12px;display:flex}.cc-swatch{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--border);width:100%;box-shadow:var(--shadow-sm) inset;justify-content:space-around;align-items:center;padding:12px;display:flex}@media (width<=640px){.cc-swatch{aspect-ratio:16/7}}.cc-sample{font-size:1.1rem;font-weight:700}.cc-sample-white{color:#fff;text-shadow:0 1px 2px #00000040}.cc-sample-black{color:#000}.cc-picker-row{align-items:center;gap:10px;display:flex}.cc-picker-row .label{margin:0}input[type=color]#cc-picker{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;width:52px;height:38px;padding:2px}.cc-fields{min-width:0}.cc-triple{grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:8px;display:grid}.cc-mini{flex-direction:column;gap:4px;min-width:0;display:flex}.cc-mini-label{color:var(--text-muted);font-size:.78rem;font-weight:600}.cc-triple .input{text-align:center;padding:9px 8px}.cc-triple .btn{height:40px}.cc-contrast-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);padding:12px}.cc-contrast-preview{border-radius:var(--radius-sm);text-align:center;border:1px solid var(--border);padding:18px 12px;font-size:1rem;font-weight:700}.cc-wcag{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.cc-badge{border:1px solid #0000;border-radius:999px;align-items:center;gap:4px;padding:3px 8px;font-size:.74rem;font-weight:700;display:inline-flex}.cc-pass{background:var(--success-soft);color:var(--success)}.cc-fail{background:var(--danger-soft);color:var(--danger)}.cc-palette{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.cc-chip{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-height:64px;padding:14px 8px 8px;font-family:inherit;transition:transform 80ms,box-shadow .15s;display:flex}.cc-chip:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.cc-chip:active{transform:translateY(0)}.cc-chip-label{opacity:.9;font-size:.72rem;font-weight:700}.cc-chip-hex{font-size:.74rem;font-weight:700}.cc-schemes{flex-direction:column;gap:14px;display:flex}.cc-scheme-head{align-items:baseline;gap:8px;margin-bottom:6px;display:flex}.cc-scheme-head strong{font-size:.92rem}.cc-strip{flex-wrap:wrap;gap:6px;display:flex}.cc-block{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;flex:1 1 0;justify-content:center;align-items:flex-end;min-width:68px;height:54px;padding-bottom:5px;font-family:inherit;transition:transform 80ms,box-shadow .15s;display:flex}.cc-block:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.cc-block-hex{font-size:.7rem;font-weight:700}.cc-palettes{flex-direction:column;gap:16px;display:flex}.cc-pal-head{justify-content:space-between;align-items:center;margin-bottom:7px;display:flex}.cc-pal-head strong{font-size:.92rem}.cc-pal-copyall{color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:100px;padding:4px 11px;font-family:inherit;font-size:.78rem;font-weight:600}.cc-pal-copyall:hover{color:var(--primary);border-color:var(--primary)}.cc-pal-strip{border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;overflow:hidden}.cc-pal-block{cursor:pointer;border:0;flex:1;justify-content:center;align-items:flex-end;height:76px;padding-bottom:8px;font-family:inherit;transition:flex .18s;display:flex}.cc-pal-block span{opacity:0;font-size:.7rem;font-weight:700;transition:opacity .12s}.cc-pal-block:hover{flex:1.5}.cc-pal-block:hover span{opacity:1}.cc-toast{background:var(--text);color:var(--surface);box-shadow:var(--shadow-lg);opacity:0;z-index:50;pointer-events:none;border-radius:999px;padding:10px 18px;font-size:.88rem;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;bottom:28px;left:50%;transform:translate(-50%)translateY(10px)}.cc-toast.show{opacity:1;transform:translate(-50%)translateY(0)}