/* ============================================================================
 * CUSTOMIZER UX KIT — стили общих компонентов (core/ux-kit.js)
 * ----------------------------------------------------------------------------
 * Копируется в другой проект без изменений. Цвета берутся из переменных
 * --ux-*: каждый кастомайзер переопределяет их на :root под свою палитру.
 * Здесь только компоненты kit: ux-save, ux-notice, ux-pop, ux-palette (ux-pal-*).
 * Оболочка (рейка, панель, инспектор) — у конкретного кастомайзера.
 * ========================================================================== */
:root {
  --ux-bg: #151936;
  --ux-bg2: #1b2043;
  --ux-bg3: #0f1330;
  --ux-fg: #e8e9ff;
  --ux-fg2: #aab0e8;
  --ux-border: #343a70;
  --ux-accent: #6b78ff;
  --ux-ok: #5ad19a;
  --ux-warn: #e8b84a;
  --ux-err: #ee6a7a;
  --ux-radius: 12px;
  --ux-shadow: 0 18px 50px rgba(5, 7, 24, .55);
}

/* ---- статус сохранения ---- */
.ux-save { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ux-fg2); white-space: nowrap; }
.ux-save i { width: 8px; height: 8px; border-radius: 50%; background: var(--ux-ok); flex: none; transition: background .2s; }
.ux-save[data-state="saving"] i { background: var(--ux-warn); animation: ux-pulse 1s ease-in-out infinite; }
.ux-save[data-state="error"] { color: #ffb4c0; }
.ux-save[data-state="error"] i { background: var(--ux-err); }
@keyframes ux-pulse { 50% { opacity: .35; } }

/* ---- сообщение в строке состояния ---- */
.ux-notice { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--ux-bg3); border: 1px solid var(--ux-border);
  color: var(--ux-fg); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-notice[data-kind="ok"] { border-color: #2e7d5b; color: #a8f0cd; }
.ux-notice[data-kind="err"] { border-color: #7d2e3e; color: #ffb4c0; }

/* ---- всплывающее окно ---- */
.ux-pop { position: fixed; z-index: 80; min-width: 220px; max-width: min(92vw, 420px); overflow: auto;
  background: var(--ux-bg2); color: var(--ux-fg); border: 1px solid var(--ux-border); border-radius: var(--ux-radius);
  box-shadow: var(--ux-shadow); padding: 10px; animation: ux-in .12s ease-out; }
@keyframes ux-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---- командная палитра (Ctrl/Cmd + K) ---- */
.ux-palette { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding-top: 11vh; }
.ux-palette[hidden] { display: none; }
.ux-pal-bg { position: absolute; inset: 0; background: rgba(6, 8, 24, .62); }
.ux-pal-win { position: relative; width: min(560px, 92vw); background: var(--ux-bg2); border: 1px solid var(--ux-border); border-radius: 16px;
  box-shadow: var(--ux-shadow); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.ux-pal-input { width: 100%; padding: 15px 18px; font-size: 15px; font-family: inherit; color: var(--ux-fg); background: var(--ux-bg3);
  border: 0; border-bottom: 1px solid var(--ux-border); outline: none; }
.ux-pal-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ux-pal-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--ux-fg); font: inherit; font-size: 13px; cursor: pointer; }
.ux-pal-row.on, .ux-pal-row:focus-visible { background: color-mix(in srgb, var(--ux-accent) 28%, transparent); outline: none; }
.ux-pal-k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ux-fg2); }
.ux-pal-l mark { background: transparent; color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.ux-pal-w { font-size: 11.5px; color: var(--ux-fg2); }
.ux-pal-empty { padding: 18px; font-size: 13px; color: var(--ux-fg2); }
.ux-pal-foot { padding: 7px 14px; font-size: 11px; color: var(--ux-fg2); border-top: 1px solid var(--ux-border); }

/* ---- видимый фокус для сеток миниатюр ---- */
.ux-focusable:focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 2px; }