.color-controls { margin:14px 0 18px; padding-top:14px; border-top:1px solid #e9edf5; }
.color-controls .property-subheading { margin:0 0 12px; }
.color-controls .field-label { display:block; margin:10px 0 7px; }
.color-controls select { width:100%; min-height:44px; }
.color-current { display:block; min-height:20px; margin:8px 0; font-size:12px; font-family:ui-monospace,monospace; color:#4c5c76; }
.color-controls>.photo-button { min-height:44px; width:100%; }
.color-recent { display:grid; grid-template-columns:repeat(4,minmax(44px,1fr)); gap:6px; }
.color-swatch { min-width:44px; min-height:50px; padding:4px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:#fff; border:1px solid #dce3ef; border-radius:7px; cursor:pointer; }
.color-swatch[aria-pressed="true"] { border-color:var(--blue); outline:1px solid var(--blue); }
.color-swatch:focus-visible,.color-input-pick:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.color-swatch:disabled,.color-input-pick:disabled { cursor:default; opacity:.5; }
.color-swatch-chip { display:block; width:24px; height:20px; border:1px solid #0002; border-radius:4px; }
.color-swatch-code { font:9px/1.2 ui-monospace,monospace; color:#4b5970; }
.color-controls .photo-note { margin:8px 0; font-size:10px; line-height:1.6; }
.color-controls .background-status { margin-top:8px; }
.color-input-pick { min-width:60px; min-height:44px; padding:7px; border:1px solid #dbe2f0; border-radius:7px; background:#fff; color:#345cff; font:inherit; font-size:11px; cursor:pointer; }
.color-input-block { display:flex; flex-direction:column; gap:7px; min-width:0; }
.color-input-block .color-input-pick { width:100%; }
.color-sample-overlay { position:absolute; z-index:6; cursor:crosshair; touch-action:none; outline:none; }
.color-sample-overlay:focus-visible { outline:2px dashed var(--blue); outline-offset:3px; }
.color-sample-chip { position:absolute; display:flex; align-items:center; gap:8px; min-height:34px; padding:5px 9px; border:1px solid #cbd5e7; border-radius:7px; background:#fff; color:#22324a; box-shadow:0 3px 12px #24364b20; pointer-events:none; font:12px/1.4 ui-monospace,monospace; white-space:nowrap; }
.color-sample-preview { display:block; flex:none; width:20px; height:20px; border:1px solid #0003; border-radius:3px; }
.color-sample-preview.is-transparent { background-image:repeating-conic-gradient(#e4e8ef 0% 25%,#fff 0% 50%); background-size:10px 10px; }
.color-controls[hidden],.color-controls [hidden],.color-sample-overlay[hidden],.color-sample-chip[hidden] { display:none!important; }