/* Своё меню выбора цвета (js/ui/hd-color-picker.js). Карточка — как
   «Обозначение» в графике; кнопки — как в модалках массовых действий.
   По умолчанию всплывает под host (host должен быть позиционирован);
   .hd-cp-inline — встаёт в поток, без своей карточки. */
.hd-cp{
  position:absolute; left:0; top:calc(100% + 8px); z-index:30;
  width:252px; box-sizing:border-box; padding:13px 14px 12px;
  border-radius:14px; background:#fff;
  border:1px solid rgba(165,180,252,.40);
  box-shadow:0 2px 8px rgba(79,134,198,.10), 0 18px 40px rgba(30,41,59,.22);
  font-family:inherit; text-align:left;
}
.hd-cp.hd-cp-inline{
  position:static; width:auto; padding:0; border:none; border-radius:0;
  background:none; box-shadow:none;
}
.hd-cp-title{
  margin:0 0 9px; font-size:10px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:#94a3b8;
}
.hd-cp-sv{
  position:relative; height:140px; border-radius:10px; cursor:crosshair; touch-action:none;
  background-color:hsl(0,100%,50%);
  background-image:linear-gradient(to top,#000,rgba(0,0,0,0)), linear-gradient(to right,#fff,rgba(255,255,255,0));
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.hd-cp-inline .hd-cp-sv{ height:120px; }
.hd-cp-sv:focus-visible,
.hd-cp-hue:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.30); }
.hd-cp-sv-thumb{
  position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  border:2px solid #fff; box-sizing:border-box; pointer-events:none;
  box-shadow:0 0 0 1px rgba(15,23,42,.35), 0 2px 6px rgba(15,23,42,.35);
}
.hd-cp-hue{
  position:relative; height:12px; margin:12px 0; border-radius:999px; cursor:pointer; touch-action:none;
  background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
}
.hd-cp-hue-thumb{
  position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:#fff; pointer-events:none;
  box-shadow:0 0 0 1px rgba(15,23,42,.30), 0 2px 5px rgba(15,23,42,.30);
}
.hd-cp-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hd-cp-preview{
  width:38px; height:38px; flex:none; border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.10);
}
/* .hd-cp .hd-cp-hex — чтобы общие правила страниц для input (.modal-field
   input и т.п.) не перебивали поле меню. */
.hd-cp .hd-cp-hex{
  flex:1; min-width:0; width:auto; height:38px; box-sizing:border-box; margin:0; padding:0 12px;
  border:1px solid rgba(203,213,225,.75); border-radius:9px; outline:none;
  background:#fff; color:#1e293b; text-align:left;
  font:600 13px/1 ui-monospace,Consolas,monospace; letter-spacing:.3px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hd-cp .hd-cp-hex:focus{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.hd-cp-actions{ display:flex; justify-content:flex-end; gap:8px; }
.hd-cp-btn{
  padding:7px 14px; border-radius:10px; cursor:pointer;
  font:600 12.5px/1.2 inherit; transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.hd-cp-cancel{ border:1px solid #dbe5f0; background:#fff; color:#374151; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.hd-cp-cancel:hover{ background:#eef2ff; border-color:#e0e7ff; color:#2a44d8; }
.hd-cp-apply{
  border:none; color:#fff; background:linear-gradient(180deg,#6366f1 0%,#4f46e5 100%);
  box-shadow:0 2px 6px rgba(99,102,241,.18), 0 4px 12px rgba(99,102,241,.10);
}
.hd-cp-apply:hover{ background:linear-gradient(180deg,#7274f4 0%,#4f46e5 100%); }

/* ── тёмная тема ── */
html[data-theme="dark"] .hd-cp{ background:#1b2433; border-color:#2c3a4f; box-shadow:0 18px 40px rgba(0,0,0,.55); }
html[data-theme="dark"] .hd-cp.hd-cp-inline{ background:none; box-shadow:none; }
html[data-theme="dark"] .hd-cp-title{ color:#64748b; }
html[data-theme="dark"] .hd-cp-sv,
html[data-theme="dark"] .hd-cp-hue,
html[data-theme="dark"] .hd-cp-preview{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
html[data-theme="dark"] .hd-cp .hd-cp-hex{ background:#0f1420; border-color:#2c3a4f; color:#e5e7eb; }
html[data-theme="dark"] .hd-cp .hd-cp-hex:focus{ border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.22); }
html[data-theme="dark"] .hd-cp-cancel{ background:#1f2a3b; border-color:#2c3a4f; color:#cbd5e1; box-shadow:none; }
html[data-theme="dark"] .hd-cp-cancel:hover{ background:#243145; border-color:#6366f1; color:#c7d2fe; }