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