.contrast-page .tool-grid{align-items:flex-start}.color-inputs-container{display:flex;flex-direction:column;gap:24px}.color-input-group{display:flex;flex-direction:column;gap:8px}.color-header{display:flex;justify-content:space-between;align-items:center}.color-label{font-weight:700;font-size:.95rem;color:var(--text-primary)}.color-picker-wrap{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--border);padding:8px 12px;border-radius:var(--radius-md);transition:border-color var(--transition)}.color-picker-wrap:focus-within{border-color:var(--accent)}.color-swatch{width:36px;height:36px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;padding:0;background:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;overflow:hidden;flex-shrink:0}.color-swatch::-webkit-color-swatch-wrapper{padding:0}.color-swatch::-webkit-color-swatch{border:none;border-radius:50%}[data-theme=dark] .color-swatch{border-color:#ffffff26}.hex-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:1.05rem;font-weight:600;outline:none;text-transform:uppercase}.swap-btn-container{display:flex;justify-content:center;align-items:center;margin:-10px 0;position:relative;z-index:2}.swap-btn{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-secondary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition)}.swap-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}.contrast-score-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:24px}.ratio-value{font-size:3.5rem;font-weight:800;line-height:1;font-family:var(--font-display);letter-spacing:-.04em}.ratio-label{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;margin-top:8px}.wcag-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}.wcag-card{display:flex;flex-direction:column;padding:16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-surface);position:relative;overflow:hidden}.wcag-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.wcag-title{font-size:.85rem;font-weight:700;color:var(--text-primary);line-height:1.3}.wcag-status{padding:4px 8px;border-radius:99px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.status-pass{background:var(--green-dim);color:var(--green);border:1px solid rgba(104,211,145,.3)}.status-fail{background:var(--red-dim);color:var(--red);border:1px solid rgba(252,129,129,.3)}[data-theme=light] .status-pass{border-color:#16a34a4d}[data-theme=light] .status-fail{border-color:#dc26264d}.wcag-desc{font-size:.75rem;color:var(--text-muted)}.live-preview{padding:32px 24px;border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 2px 10px #0000000d;margin-top:8px}[data-theme=dark] .live-preview{border-color:#ffffff1a;box-shadow:inset 0 2px 15px #0003}.preview-title{font-size:2rem;font-weight:800;margin-bottom:12px;line-height:1.1;letter-spacing:-.02em}.preview-text{font-size:1.1rem;font-weight:400;line-height:1.6}@media (max-width: 992px){.contrast-page .tool-grid{display:flex;flex-direction:column;align-items:stretch!important;gap:24px;width:100%}}@media (max-width: 640px){.contrast-page .tool-grid{width:100%;margin:0}.wcag-cards{grid-template-columns:1fr}.ratio-value{font-size:3rem}}.related-tool-cta{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#2563eb1a,#8b5cf61a);border:1px solid rgba(37,99,235,.2);border-radius:var(--radius-lg);padding:24px;margin:32px 0;gap:24px}.cta-content h4{margin:0 0 8px;color:var(--text-primary);font-size:1.1rem}.cta-content p{margin:0;font-size:.95rem;color:var(--text-secondary)}.cta-link-btn{background:var(--accent);color:#fff;padding:12px 24px;border-radius:var(--radius-md);font-weight:700;text-decoration:none;white-space:nowrap;transition:all var(--transition);box-shadow:0 4px 12px #2563eb33}.cta-link-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2563eb4d;background:var(--accent-bright);color:#fff!important}.best-practices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}.practice-card{background:var(--bg-surface);border:1px solid var(--border);padding:20px;border-radius:var(--radius-md)}.practice-card h5{margin:0 0 10px;color:var(--text-primary);font-size:1rem;font-weight:700}.practice-card p{margin:0;font-size:.9rem;line-height:1.5;color:var(--text-muted)}@media (max-width: 768px){.related-tool-cta{flex-direction:column;text-align:center;padding:20px}.best-practices-grid{grid-template-columns:1fr}}