.color-input-group{border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);background:var(--bg-secondary)}.color-input-group label{font-weight:600;margin-bottom:var(--spacing-sm);display:block}.color-input-wrapper{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.color-picker{width:60px;height:40px;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer}.hex-input{flex:1;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-mono);background:var(--bg-primary);color:var(--text-primary)}.hex-input:focus{outline:0;border-color:var(--primary-color)}.color-preview{height:30px;border:1px solid var(--border-color);border-radius:var(--radius-sm)}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.preset-color-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:0 0;cursor:pointer;padding:0;overflow:hidden}.preset-demo{width:100%;height:40px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}.contrast-ratio-display{text-align:center;padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-md)}.ratio-value{font-size:3rem;font-weight:700;color:var(--primary-color)}.ratio-label{color:var(--text-secondary)}.ratio-description{font-size:1.1rem;color:var(--text-secondary);margin-top:var(--spacing-sm)}.compliance-grid,.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.compliance-item,.info-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary)}.compliance-status{display:flex;align-items:center;gap:var(--spacing-xs);font-weight:600}.compliance-status.pass{color:#16a34a}.compliance-status.fail{color:#dc2626}.status-icon{font-size:1.2rem}.preview-container{border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.preview-demo{padding:var(--spacing-xl);line-height:1.6}.preview-demo h2{font-size:1.8rem;margin-bottom:var(--spacing-md)}.preview-demo h3{font-size:1.4rem;margin:var(--spacing-lg) 0 var(--spacing-md)}.preview-demo p{margin-bottom:var(--spacing-md)}.large-text{font-size:1.3rem}.sample-button{padding:var(--spacing-sm) var(--spacing-md);border:2px solid currentColor;border-radius:var(--radius-md);background:0 0;cursor:pointer;margin-right:var(--spacing-md)}.sample-link{text-decoration:underline}.guideline-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.guideline-item h4{color:var(--primary-color);margin-bottom:var(--spacing-sm)}.guideline-item ul{list-style-type:none;padding:0}.guideline-item li{padding:var(--spacing-xs) 0;position:relative;padding-left:1.2rem}.guideline-item li::before{content:"•";color:var(--primary-color);position:absolute;left:0}.text-size-info{padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md);border-left:4px solid var(--primary-color)}@media (max-width:768px){.compliance-grid,.grid-2,.guideline-grid,.info-grid{grid-template-columns:1fr}.preset-grid{grid-template-columns:repeat(2,1fr)}.ratio-value{font-size:2rem}}