.color-preview{width:100%;height:120px;border-radius:var(--radius-lg);border:1px solid var(--color-border);background-color:#3b82f6;transition:background-color var(--duration-fast) var(--ease-default)}.format-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.format-label{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text)}.copy-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);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);cursor:pointer;transition:var(--transition)}.copy-btn:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-hover);color:var(--color-text)}.rgb-inputs,.hsl-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-3)}.color-input-group{margin-bottom:0}.color-input-group .form-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);margin-bottom:var(--space-1)}.color-input-group .form-input{text-align:center;font-family:var(--font-mono);font-size:var(--text-sm);padding:var(--space-2) var(--space-2)}#hexInput{font-family:var(--font-mono);text-transform:uppercase}.color-input-group input[type=number]::-webkit-inner-spin-button,.color-input-group input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-input-group input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}@media(min-width:768px){.color-preview{height:160px}}