.contrast-pickers{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:500px){.contrast-pickers{grid-template-columns:1fr}}.picker-group{display:flex;flex-direction:column;gap:8px}.picker-group label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.picker-row{display:flex;gap:8px;align-items:center}.picker-row input[type=color]{width:48px;height:48px;border:1px solid var(--border);border-radius:var(--r);cursor:pointer;background:none;padding:2px}.picker-row input[type=text]{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:var(--r);outline:none;font-family:JetBrains Mono,monospace;font-size:14px;transition:border-color .2s}.picker-row input:focus{border-color:var(--accent)}.picker-alt{font-size:11px;color:var(--muted);font-family:JetBrains Mono,monospace}.contrast-visual-preview{width:100%;min-height:100px;border-radius:var(--r);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;transition:background-color .15s,color .15s}.contrast-sample-normal{font-size:14px;font-weight:400}.contrast-sample-large{font-size:20px;font-weight:700}.ratio-display{display:flex;align-items:baseline;gap:16px;padding:12px 0}.ratio-number{font-family:JetBrains Mono,monospace;font-size:36px;font-weight:700;color:#fff}.ratio-score{font-size:24px;letter-spacing:4px}.ratio-score.excellent{color:#2ea043}.ratio-score.good{color:#d29922}.ratio-score.poor{color:#f85149}.wcag-table{display:flex;flex-direction:column;gap:10px}.wcag-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border)}.wcag-criterion{font-size:13px;font-weight:500;color:var(--text)}.wcag-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase}.wcag-badge.pass{background:#2ea04326;color:#2ea043;border:1px solid #2ea043}.wcag-badge.fail{background:#f8514926;color:#f85149;border:1px solid #f85149}.suggestions-box{display:flex;flex-direction:column;gap:8px}.suggestion-item{padding:10px 14px;background:var(--bg3);border-radius:var(--r);font-size:13px;border-left:3px solid var(--accent);color:var(--text)}.suggestion-item.ok{border-left-color:#2ea043}.suggestion-item.warn{border-left-color:#d29922}.suggestion-item.err{border-left-color:#f85149}.form-container{display:flex;flex-direction:column;gap:20px}.output-container{display:flex;flex-direction:column;gap:12px}