/* Contrast checker */
.ct-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 640px) { .ct-form { grid-template-columns: minmax(0, 1fr) auto; } .ct-form > .field:last-child { grid-column: 1 / -1; } }
.ct-swap { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.ct-swap svg { width: 20px; height: 20px; }
.ct-color-row { display: flex; gap: 8px; }
.ct-color-row input[type='color'] { flex-shrink: 0; }
.ct-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 14px; align-items: stretch; }
@media (max-width: 760px) { .ct-head { grid-template-columns: 1fr; } }
.ct-verdict { display: block; margin-top: 6px; font-weight: 700; }
.ct-verdict.ok { color: var(--ok); }
.ct-verdict.warn { color: var(--warn); }
.ct-verdict.bad { color: var(--err); }
.ct-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ct-check { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--glass-soft); }
.ct-check strong { font-size: 0.86rem; }
.ct-check small { color: var(--muted); font-size: 0.76rem; }
.ct-badge { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.ct-check.pass .ct-badge { background: var(--ok-soft); color: var(--ok); }
.ct-check.fail .ct-badge { background: var(--err-soft); color: var(--err); }
.ct-sample { --ct-fg: #111; --ct-bg: #fff; padding: 22px; border-radius: var(--r-lg); background: var(--ct-bg); color: var(--ct-fg); border: 1px solid var(--line); }
.ct-sample .ct-large { margin: 0 0 8px; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--ct-fg); }
.ct-sample .ct-large-bold { margin: 0 0 10px; font-size: 18.66px; font-weight: 700; color: var(--ct-fg); }
.ct-sample p { margin: 0 0 14px; font-size: 16px; color: var(--ct-fg); }
.ct-sample .ct-small { font-size: 13px; }
.ct-ui { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ct-ui-btn { padding: 8px 16px; border-radius: 10px; border: 2px solid var(--ct-fg); color: var(--ct-fg); font-weight: 700; font-size: 0.9rem; background: transparent; }
.ct-ui svg { width: 26px; height: 26px; color: var(--ct-fg); }
.ct-ui-input { width: 160px; height: 36px; border-radius: 8px; border: 2px solid var(--ct-fg); }
.ct-sugs { display: grid; gap: 8px; }
.ct-sug { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: var(--glass-soft); border: 1px solid var(--line); }
.ct-sug-swatch { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 10px; font-weight: 800; border: 1px solid var(--line); }
.ct-sug small { display: block; color: var(--muted); }
.tool-ui input.is-bad { border-color: var(--err); }
#ct-err:empty { display: none; }