.bs-color-picker { --bs-cp-focus:#0b76b7; --bs-cp-surface:var(--bs-body-bg); }
.bs-color-picker .btn { transition:box-shadow .15s ease-in-out; }
.bs-color-picker .modal-header > div { min-width:0; }
.bs-color-picker .modal-header .btn-close { flex:0 0 auto; }
.bs-color-picker .btn-outline-secondary {
  --bs-btn-color:#545b62;
  --bs-btn-border-color:#687078;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#545b62;
  --bs-btn-hover-border-color:#545b62;
  --bs-btn-focus-shadow-rgb:84,91,98;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#545b62;
  --bs-btn-active-border-color:#545b62;
}
.bs-color-picker .modal-dialog { max-width:min(58rem,calc(100vw - 1.5rem)); }
.bs-color-picker .modal-content { max-height:calc(100dvh - 1.5rem); border-color:var(--bs-border-color); }
.bs-cp-eyebrow { color:var(--bs-primary); font-size:.7rem; font-weight:800; letter-spacing:.14em; }
.bs-cp-layout { display:grid; grid-template-columns:minmax(18rem,.8fr) minmax(22rem,1.2fr); gap:1.25rem; }
.bs-cp-layout > section { min-width:0; padding:1rem; border:1px solid var(--bs-border-color); border-radius:var(--bs-border-radius-lg); background:var(--bs-tertiary-bg); }
.bs-cp-palette { display:grid; gap:.35rem; margin:0; padding:.15rem; border:0; }
.bs-cp-palette-row { display:grid; grid-template-columns:repeat(8,minmax(2rem,1fr)); gap:.35rem; }
.bs-cp-swatch { position:relative; min-width:2rem; padding:0; aspect-ratio:1; border:2px solid var(--bs-border-color); border-radius:.35rem; background:var(--swatch); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22); cursor:pointer; }
.bs-cp-swatch:focus-visible { outline:3px solid var(--bs-cp-focus); outline-offset:2px; }
.bs-cp-swatch[aria-selected="true"] { border-color:CanvasText; box-shadow:0 0 0 3px var(--bs-cp-surface),0 0 0 5px var(--bs-cp-focus); }
.bs-cp-swatch[aria-selected="true"]::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:900; font-size:1.1rem; text-shadow:0 1px 2px #000,0 0 3px #000; }
.bs-cp-spectrum-wrap { position:relative; height:11rem; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:.4rem; background:#fff; }
.bs-cp-spectrum { display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.bs-cp-spectrum-marker { position:absolute; width:1rem; height:1rem; border:2px solid #fff; border-radius:50%; background:var(--marker-colour); box-shadow:0 0 0 1px #000,0 1px 4px #0008; transform:translate(-50%,-50%); pointer-events:none; }
.bs-cp-ranges { display:grid; grid-template-columns:minmax(8rem,auto) minmax(10rem,1fr); align-items:center; gap:.25rem .75rem; }
.bs-cp-ranges .form-label { margin:0; }
.bs-cp-range-value { float:inline-end; min-width:3.5rem; color:var(--bs-secondary-color); text-align:end; font-variant-numeric:tabular-nums; }
.bs-cp-numeric { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.bs-cp-preview { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.bs-cp-preview > div { display:grid; gap:.25rem; color:var(--bs-secondary-color); font-size:.8rem; }
.bs-cp-preview [data-cp-original],.bs-cp-preview [data-cp-new] { min-height:3rem; padding:.75rem; display:grid; place-items:center; border:1px solid var(--bs-border-color); border-radius:.4rem; font:700 .9rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
[data-bs-theme="dark"] .bs-color-picker .bs-cp-eyebrow { color:#75cfff; }
[data-bs-theme="dark"] .bs-color-picker .btn-outline-secondary {
  --bs-btn-color:#f1f3f5;
  --bs-btn-border-color:#adb5bd;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#495057;
  --bs-btn-hover-border-color:#ced4da;
  --bs-btn-focus-shadow-rgb:173,181,189;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#495057;
  --bs-btn-active-border-color:#ced4da;
}

@media (max-width:760px) {
  .bs-cp-layout { grid-template-columns:1fr; }
  .bs-cp-layout > section { padding:.75rem; }
  .bs-cp-ranges { grid-template-columns:1fr; }
  .bs-cp-ranges .form-range { margin-bottom:.35rem; }
}

@media (max-width:420px) {
  .bs-cp-numeric { grid-template-columns:1fr; }
  .bs-cp-layout > section { padding:.5rem; }
  .bs-cp-palette,.bs-cp-palette-row { gap:.2rem; }
  .bs-cp-palette-row { grid-template-columns:repeat(8,minmax(1.5rem,1fr)); }
}

@media (forced-colors:active) {
  .bs-cp-swatch,.bs-cp-spectrum,.bs-cp-spectrum-marker { forced-color-adjust:none; }
  .bs-cp-layout > section,.bs-color-picker .modal-content { border-color:CanvasText; }
  .bs-cp-swatch:focus-visible { outline-color:Highlight; }
}

@media (prefers-reduced-motion:reduce) {
  .bs-color-picker.fade,.bs-color-picker .modal-dialog { transition:none!important; }
}