.contrast-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}.color-input-group{display:flex;flex-direction:column;gap:var(--space-2)}.color-input-group .group-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}.color-picker-row{display:flex;align-items:center;gap:var(--space-2)}.color-picker-row input[type=color]{width:44px;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:2px;cursor:pointer;background:none;flex-shrink:0}.color-picker-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-picker-row input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-picker-row .form-input{font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;flex:1;min-width:0}.color-swatch{width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--color-border);flex-shrink:0}.swap-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:background-color var(--duration-normal) var(--ease-default),border-color var(--duration-normal) var(--ease-default),color var(--duration-normal) var(--ease-default);margin-bottom:var(--space-4)}.swap-btn:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-hover);color:var(--color-text)}.contrast-result{text-align:center;padding:var(--space-6) var(--space-4);margin-bottom:var(--space-4)}.contrast-ratio-value{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--color-text);font-family:var(--font-mono);line-height:var(--leading-tight)}.contrast-ratio-label{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-1)}.wcag-results{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}.wcag-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface)}.wcag-item-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text)}.wcag-item-level{font-size:var(--text-xs);color:var(--color-text-secondary)}.pass-badge,.fail-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-semibold);flex-shrink:0}.pass-badge{background-color:var(--color-success-light);color:var(--color-success)}.fail-badge{background-color:var(--color-error-light);color:var(--color-error)}.preview-section{margin-bottom:var(--space-4)}.preview-box{padding:var(--space-6) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:center}.preview-text-large{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:var(--space-2);line-height:var(--leading-normal)}.preview-text-normal{font-size:var(--text-base);line-height:var(--leading-relaxed)}.suggestion-section{margin-bottom:var(--space-4)}.section-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text);margin-bottom:var(--space-3)}.suggestion-list{display:flex;flex-direction:column;gap:var(--space-2)}.suggestion-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);cursor:pointer;transition:background-color var(--duration-normal) var(--ease-default),border-color var(--duration-normal) var(--ease-default)}.suggestion-item:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-hover)}.suggestion-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--color-border);flex-shrink:0}.suggestion-info{flex:1;min-width:0}.suggestion-color{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text)}.suggestion-ratio{font-size:var(--text-xs);color:var(--color-text-secondary)}.simulation-section{margin-bottom:var(--space-4)}.simulation-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3)}.simulation-item{text-align:center}.simulation-preview{padding:var(--space-3) var(--space-2);border-radius:var(--radius-md);border:1px solid var(--color-border);margin-bottom:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:var(--leading-normal)}.simulation-label{font-size:var(--text-xs);color:var(--color-text-secondary)}.simulation-ratio{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--color-text-tertiary);margin-top:2px}@media not (min-width:480px){.contrast-inputs,.wcag-results,.simulation-grid{grid-template-columns:1fr}}