.loft-color-picker__picker-row{display:flex;gap:8px;align-items:center}.loft-color-picker__wheel{flex:1;height:48px;border:none;border-radius:var(--radius-lg);cursor:pointer;background:none;padding:0}.loft-color-picker__eyedropper-btn{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0}.loft-color-picker__value-row{display:flex;gap:8px;align-items:center}.loft-color-picker__value-row .loft-form__input{flex:1;min-width:0}.loft-color-picker__right{display:flex;flex-direction:column;gap:16px}.loft-color-picker__preview-card{position:relative;width:100%;min-height:260px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);display:flex;align-items:flex-end;overflow:hidden;box-shadow:0 4px 24px #00000040}.loft-color-picker__preview-overlay{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(to top,#0000008c,#0000)}.loft-color-picker__preview-hex{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:700;letter-spacing:.04em;color:#fff;text-shadow:0 1px 4px var(--color-surface-overlay)}.loft-color-picker__preview-actions{display:flex;align-items:center;gap:8px}.loft-color-picker__preview-pick-btn{display:inline-flex;align-items:center;gap:6px}.loft-color-picker__panel{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:10px}.loft-color-picker__panel-header{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.loft-color-picker__panel-header i{font-size:1rem;color:var(--accent-cyan)}.loft-color-picker__harmony-list{display:flex;flex-direction:column;gap:8px}.loft-color-picker__harmony-row{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}.loft-color-picker__harmony-name{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.loft-color-picker__harmony-swatches{display:flex;gap:6px;flex-wrap:wrap}.loft-color-picker__harmony-swatch{flex:1 1 0;min-width:70px;height:44px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;position:relative;padding:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;transition:transform var(--duration-quick) ease,border-color var(--duration-quick) ease}.loft-color-picker__harmony-swatch:hover{transform:translateY(-2px);border-color:var(--accent-cyan)}.loft-color-picker__harmony-swatch-label{font-family:var(--font-mono, ui-monospace, monospace);font-size:10px;font-weight:600;padding:2px 6px;margin-bottom:4px;border-radius:4px;background:#0000008c;color:#fff;letter-spacing:.02em}.loft-color-picker__contrast-row{display:flex;gap:12px;align-items:stretch}.loft-color-picker__contrast-preview{flex:1;min-height:80px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700}.loft-color-picker__contrast-controls{display:flex;flex-direction:column;gap:6px;min-width:130px}.loft-color-picker__contrast-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.loft-color-picker__pair-wheel{width:100%;height:36px;border:none;border-radius:var(--radius-md);cursor:pointer;background:none;padding:0}.loft-color-picker__contrast-ratio{font-family:var(--font-mono, ui-monospace, monospace);font-size:18px;font-weight:700;text-align:center;color:var(--color-text-heading)}.loft-color-picker__contrast-badges{display:flex;gap:8px;flex-wrap:wrap}.loft-color-picker__contrast-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--border-subtle)}.loft-color-picker__contrast-badge--pass{background:color-mix(in srgb,var(--accent-cyan) 18%,transparent);color:var(--accent-cyan);border-color:color-mix(in srgb,var(--accent-cyan) 40%,transparent)}.loft-color-picker__contrast-badge--fail{background:color-mix(in srgb,var(--color-danger, #ef4444) 14%,transparent);color:var(--color-danger, #ef4444);border-color:color-mix(in srgb,var(--color-danger, #ef4444) 35%,transparent)}.loft-color-picker__image-area{display:flex;flex-direction:column;gap:8px;align-items:stretch}.loft-color-picker__image-canvas{width:100%;max-height:360px;object-fit:contain;border-radius:var(--radius-lg);cursor:crosshair;border:1px solid var(--border-subtle)}.loft-color-picker__image-remove{align-self:flex-start}@container tool (max-width: 36rem){.loft-color-picker__harmony-row{grid-template-columns:1fr;gap:6px}}