.color-main{grid-template-columns:300px minmax(0,1fr);gap:16px;display:grid}.color-preview{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xl);flex-direction:column;gap:14px;padding:16px;display:flex}.color-swatch-wrap{border-radius:var(--radius-lg);border:1px solid var(--border);background-image:linear-gradient(45deg, var(--border2) 25%, transparent 25%), linear-gradient(-45deg, var(--border2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border2) 75%), linear-gradient(-45deg, transparent 75%, var(--border2) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;overflow:hidden}.color-swatch{width:100%;height:150px}.color-picker-row{align-items:center;gap:14px;display:flex}.color-picker{border:1px solid var(--border2);border-radius:var(--radius-lg);background:var(--bg3);cursor:pointer;flex-shrink:0;width:52px;height:52px;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:4px}.color-picker::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}.color-alpha{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.color-alpha__label{font-family:var(--font-mono);letter-spacing:.08em;color:var(--text3);justify-content:space-between;font-size:.62rem;display:flex}.color-alpha__label span{color:var(--text2)}.color-alpha input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.color-fields{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xl);flex-direction:column;justify-content:center;padding:8px 16px;display:flex}.color-field{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:12px 0;display:flex}.color-field:last-child{border-bottom:none}.color-field__label{font-family:var(--font-mono);letter-spacing:.05em;color:var(--text3);flex:0 0 46px;font-size:.72rem;font-weight:700}.color-field__input{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius-md);min-width:0;height:38px;color:var(--text);font-family:var(--font-mono);outline:none;flex:1;padding:0 12px;font-size:.86rem;transition:border-color .15s}.color-field__input:focus{border-color:var(--accent)}.color-field__input--invalid{border-color:var(--red);color:var(--red)}.color-ramp{grid-template-columns:repeat(5,1fr);gap:10px;display:grid}.color-ramp__chip{border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;justify-content:center;align-items:flex-end;height:72px;padding-bottom:8px;transition:transform .12s,box-shadow .12s;display:flex;position:relative;overflow:hidden}.color-ramp__chip:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000040}.color-ramp__hex{font-family:var(--font-mono);color:#08121a;border-radius:var(--radius-xs);background:#ffffffd1;padding:2px 5px;font-size:.62rem;font-weight:700}.color-ramp__chip--dark .color-ramp__hex{color:#f4f8ff;background:#00000080}@media (width<=720px){.color-main{grid-template-columns:1fr}}@media (width<=520px){.color-ramp{grid-template-columns:repeat(3,1fr)}.color-field__input{font-size:.78rem}}