.color-scheme-tester-wrapper{display:grid;grid-template-columns:320px 1fr;gap:30px;margin-bottom:40px}@media(max-width:768px){.color-scheme-tester-wrapper{grid-template-columns:1fr;gap:20px}}.control-panel{display:flex;flex-direction:column;gap:24px}.control-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:16px}.control-section h2{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;color:var(--text-secondary)}.color-input-row{margin-bottom:12px}.color-input-row:last-child{margin-bottom:0}.color-input-row label{display:block;font-size:.75rem;font-weight:500;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}.color-input-group{display:flex;gap:8px}.color-input-row input[type=color]{width:50px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0}.color-text-input{flex:1;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:.75rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);text-transform:uppercase}.preset-select,.color-text-input{transition:border-color .2s ease}.preset-select:focus,.color-text-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-light)}.preset-select{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.875rem;cursor:pointer}.button-group{display:flex;flex-direction:column;gap:8px}.action-btn{padding:10px 12px;background:var(--accent-primary-light);border:1px solid var(--accent-primary);border-radius:var(--radius-sm);color:var(--accent-primary);font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.875rem}.action-btn:hover{background:var(--accent-primary);color:#fff}.export-btn{width:100%;padding:10px 12px;background:var(--accent-primary);border:none;border-radius:var(--radius-sm);color:#fff;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.875rem}.export-btn:hover{background:var(--accent-primary-hover);transform:translateY(-1px)}.preview-panel{display:flex;flex-direction:column;gap:30px}.contrast-checker{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px}.contrast-checker h3{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;color:var(--text-secondary)}.contrast-grid{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:769px){.contrast-grid{grid-template-columns:repeat(3,1fr)}}.contrast-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:12px}.contrast-badge{display:flex;flex-direction:column;gap:2px}.ratio-value{font-family:JetBrains Mono,monospace;font-size:.875rem;font-weight:700;color:var(--text-primary)}.ratio-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.badge.aa{background:#d1fae5;color:#065f46}.badge.aaa{background:#86efac;color:#15803d}.badge.fail{background:#fee2e2;color:#991b1b}[data-theme=dark] .badge.aa{background:#10b98133;color:#6ee7b7}[data-theme=dark] .badge.aaa{background:#22c55e33;color:#86efac}[data-theme=dark] .badge.fail{background:#ef444433;color:#fca5a5}.ui-preview{--preview-bg: #ffffff;--preview-text: #1a1a2e;--preview-primary: #e85d3a;--preview-secondary: #6c3ce1;--preview-accent: #0ea5e9;background:var(--preview-bg);color:var(--preview-text);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.preview-navbar{background:var(--preview-primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:20px}.nav-logo{font-weight:700;font-size:1rem}.nav-links{display:flex;gap:20px;flex:1}.nav-link{color:#fff;font-size:.875rem;text-decoration:none;opacity:.9;transition:opacity .2s}.nav-link:hover{opacity:1}.nav-cta{background:var(--preview-accent);color:#fff;border:none;padding:8px 16px;border-radius:4px;font-size:.875rem;font-weight:600;cursor:pointer;flex-shrink:0}.preview-hero{padding:60px 40px;text-align:center}.hero-title{font-size:2rem;font-weight:700;margin-bottom:12px;color:var(--preview-text)}.hero-subtitle{font-size:1rem;margin-bottom:24px;opacity:.8}.btn-primary{background:var(--preview-primary);color:#fff;border:none;padding:12px 24px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.preview-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:40px}@media(max-width:600px){.preview-cards{grid-template-columns:1fr}}.card{background:var(--preview-bg);border:1px solid var(--preview-text);border-opacity:.1;border-radius:8px;padding:24px}.card-title{font-size:1.125rem;font-weight:700;margin-bottom:12px;color:var(--preview-text)}.card-text{font-size:.875rem;margin-bottom:16px;opacity:.8;line-height:1.5}.btn-secondary{background:transparent;border:2px solid var(--preview-secondary);color:var(--preview-secondary);padding:8px 16px;border-radius:4px;font-weight:600;cursor:pointer;font-size:.875rem;transition:all .2s}.btn-secondary:hover{background:var(--preview-secondary);color:#fff}.preview-form{padding:40px;border-top:1px solid var(--preview-text);border-top-opacity:.1}.form-title{font-size:1.5rem;font-weight:700;margin-bottom:24px;color:var(--preview-text)}.form-group{margin-bottom:16px}.form-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px;color:var(--preview-text)}.form-input{width:100%;padding:10px 12px;border:1px solid var(--preview-text);border-opacity:.2;border-radius:4px;background:var(--preview-bg);color:var(--preview-text);font-size:.875rem;font-family:inherit;transition:border-color .2s}.form-input:focus{outline:none;border-color:var(--preview-accent)}.preview-footer{padding:20px 40px;border-top:1px solid var(--preview-text);border-top-opacity:.1;font-size:.75rem;opacity:.6;text-align:center}