/* ============================================================================
 * customizer/ux.css — оболочка интерфейса (рейка групп, инспектор, Quick Edit, поиск).
 * Подключается после customizer.css и ux-kit.css. Классы: lcb-* (общие) и ux-*.
 * Меньше рамок, меньше акцентов: один акцентный цвет на экран, остальное — тон.
 * ========================================================================== */
:root {
  --ux-bg: #1b1530; --ux-bg2: #241c3d; --ux-bg3: #120e1f; --ux-fg: #efe9ff; --ux-fg2: #a99fcc;
  --ux-border: #352a55; --ux-accent: #ff7bac; --ux-radius: 12px;
  --ux-panel-w: 372px; --ux-rail-w: 78px;
}

/* ---------- сетка: рейка | панель | превью ---------- */
body.lcb { grid-template-columns: var(--ux-rail-w) var(--ux-panel-w) minmax(0, 1fr); }
body.lcb.lcb-nopanel { grid-template-columns: var(--ux-rail-w) 0 minmax(0, 1fr); }
body.lcb.lcb-nopanel .lcb-panel { visibility: hidden; overflow: hidden; border: 0; }
body.lcb.lcb-focus { grid-template-columns: 0 0 minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr); }
body.lcb.lcb-focus .lcb-top, body.lcb.lcb-focus .lcb-rail, body.lcb.lcb-focus .lcb-panel { display: none; }
body.lcb.lcb-focus .lcb-pbar > :not(.lcb-sp):not(#lcbFocusBtn):not(#lcbPState):not(#lcbPPlay):not(.lcb-pstate) { display: none; }
.lcb-focus #lcbFocusBtn { border-color: var(--u-acc); }

/* ---------- верхняя панель ---------- */
.lcb-search { display: inline-flex; align-items: center; gap: 8px; min-width: 190px; max-width: 280px; flex: 0 1 240px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid var(--u-line); background: var(--u-panel); color: var(--u-dim); cursor: pointer; text-align: left; }
.lcb-search:hover { border-color: var(--u-line2); color: var(--u-ink); }
.lcb-search__tx { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcb-search kbd { font: 600 10.5px var(--u-font); padding: 2px 6px; border-radius: 6px; background: var(--u-panel2); border: 1px solid var(--u-line); color: var(--u-dim); }
.lcb-savest { padding: 0 6px; }
.lcb-menuwrap { position: relative; flex: none; }
.lcb-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 270px; padding: 6px; border-radius: 12px; border: 1px solid var(--u-line2);
  background: var(--u-panel2); box-shadow: 0 18px 50px rgba(5,3,14,.6); display: flex; flex-direction: column; gap: 1px; }
.lcb-menu button { display: flex; gap: 8px; align-items: center; text-align: left; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: 12.5px; }
.lcb-menu button:hover, .lcb-menu button:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.lcb-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--u-line); }
.lcb-menu__lang { display: flex; gap: 4px; padding: 6px 4px 2px; }
.lcb-menu__lang button { justify-content: center; border: 1px solid var(--u-line); }
.lcb-menu__lang button.on { background: var(--u-acc); color: #1a1030; }
.lcb-top .lcb-seg--top button.on { background: var(--u-panel2); color: var(--u-ink); box-shadow: inset 0 0 0 1px var(--u-acc); }

/* ---------- рейка: 5–6 групп ---------- */
.lcb-rail { padding: 10px 6px; gap: 6px; align-items: stretch; }
.lcb-rail__btn { padding: 9px 2px 8px; gap: 3px; border-radius: 12px; }
.lcb-rail__ic { font-size: 20px; }
.lcb-rail__tx { font-size: 10px; font-weight: 700; word-break: normal; overflow-wrap: normal; }
.lcb-rail__btn.on { background: var(--u-panel2); border-color: transparent; box-shadow: inset 3px 0 0 var(--u-acc); }
.lcb-rail__btn:focus-visible, .ux-tab:focus-visible, .ux-grp__h:focus-visible, .ux-chip:focus-visible, .lcb-btn:focus-visible, .lcb-mini-btn:focus-visible,
.ux-step:focus-visible, .lcb-preset:focus-visible, .lcb-mat:focus-visible, .lcb-search:focus-visible, .ux-link:focus-visible { outline: 2px solid var(--u-acc2); outline-offset: 2px; }

/* ---------- панель ---------- */
.lcb-panel { min-width: 0; }
.lcb-panel__head { padding: 12px 12px 10px 14px; border-bottom: 0; }
.lcb-panel__head h2 { font-size: 16px; letter-spacing: -.01em; }
.ux-close { display: none; }
.ux-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--u-line); overflow-x: auto; scrollbar-width: none; }
.ux-tabs::-webkit-scrollbar { display: none; }
.ux-tab { flex: none; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--u-dim); cursor: pointer; font-weight: 700; font-size: 12.5px; }
.ux-tab:hover { color: var(--u-ink); }
.ux-tab.on { color: #fff; border-bottom-color: var(--u-acc); }
.lcb-panel__body { padding: 12px 16px 48px; gap: 12px; }
.ux-link { align-self: flex-start; padding: 2px 0; border: 0; background: none; color: var(--u-acc2); cursor: pointer; font-size: 12px; text-align: left; }
.ux-link:hover { text-decoration: underline; }

/* первый запуск */
.ux-strip { position: relative; margin: 8px 14px 0; padding: 8px 28px 6px 8px; border-radius: 12px; background: var(--u-panel2); display: flex; flex-direction: column; gap: 6px; }
.ux-strip__row { display: flex; flex-wrap: wrap; gap: 4px; }
.ux-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border-radius: 999px; border: 1px solid var(--u-line); background: var(--u-panel); cursor: pointer; font-size: 11.5px; font-weight: 700; }
.ux-step i { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--u-acc); color: #1a1030; font-style: normal; font-size: 10.5px; }
.ux-step:hover { border-color: var(--u-line2); }
.ux-strip__x { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border: 0; background: none; color: var(--u-dim); cursor: pointer; border-radius: 6px; }
.ux-strip__x:hover { color: var(--u-ink); background: rgba(255,255,255,.08); }

/* инспектор элемента */
.ux-insp { display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 7px 10px; border-radius: 10px; background: rgba(124,196,255,.12); color: #dff1ff; font-weight: 700; font-size: 12.5px; }
.ux-insp > span { flex: 1; }
.ux-insp__x { width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.ux-insp__x:hover { background: rgba(255,255,255,.12); }

/* сворачиваемые группы вместо стены ползунков */
.ux-grp { border-top: 1px solid var(--u-line); margin: 0 -2px; }
.ux-grp.is-empty { display: none; }
.ux-grp__h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 2px; border: 0; background: none; cursor: pointer; text-align: left; font-weight: 800; font-size: 12.5px; color: var(--u-ink); }
.ux-grp__h:hover .ux-grp__t { color: #fff; }
.ux-grp__t { flex: 1; }
.ux-grp__n { font-size: 11px; font-weight: 700; color: var(--u-dim); }
.ux-chev { width: 7px; height: 7px; border-right: 2px solid var(--u-dim); border-bottom: 2px solid var(--u-dim); transform: rotate(-45deg); transition: transform .15s; margin: 0 3px 0 2px; flex: none; }
.ux-grp.is-open > .ux-grp__h .ux-chev { transform: rotate(45deg); }
.ux-grp__b { display: none; flex-direction: column; gap: 12px; padding: 2px 2px 14px; }
.ux-grp.is-open > .ux-grp__b { display: flex; }

/* строка с кнопкой сброса: только у изменённых значений, только по наведению */
.ux-ctl { position: relative; }
.ux-r { position: absolute; left: -15px; top: 1px; width: 14px; height: 18px; padding: 0; border: 0; background: none; color: var(--u-acc); cursor: pointer; font-size: 12px; line-height: 1; opacity: 0; display: none; }
.ux-ctl.is-mod > .ux-r { display: block; }
.ux-ctl:hover > .ux-r, .ux-r:focus-visible { opacity: 1; }
.ux-flash { animation: ux-flash 1.6s ease-out; border-radius: 10px; }
@keyframes ux-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--u-acc2); background: rgba(124,196,255,.16); } 100% { box-shadow: 0 0 0 3px transparent; background: transparent; } }

/* блоки страницы «Стиль» */
.ux-blk { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--u-line); }
.ux-blk > h3 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--u-dim); }
.ux-cur { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--u-panel2); flex-wrap: wrap; }
.ux-cur__t { display: flex; flex-direction: column; flex: 1; min-width: 100px; }
.ux-cur__t small { color: var(--u-dim); font-size: 10.5px; }
.ux-cur__t b { font-size: 14px; }
.ux-cur__b { display: flex; gap: 6px; flex-wrap: wrap; }
.ux-sw { display: inline-flex; }
.ux-sw i { width: 14px; height: 28px; }
.ux-sw i:first-child { border-radius: 8px 0 0 8px; } .ux-sw i:last-child { border-radius: 0 8px 8px 0; }

.ux-rand { display: flex; flex-direction: column; gap: 8px; }
.ux-rand__main { width: 100%; padding: 10px; font-size: 13.5px; }
.ux-rand.is-active { padding: 10px; border-radius: 12px; background: rgba(255,123,172,.1); }
.ux-rand__t { font-weight: 800; }
.ux-rand__b { display: flex; gap: 6px; flex-wrap: wrap; }
.ux-locks summary { cursor: pointer; color: var(--u-dim); font-size: 12px; padding: 4px 0; }
.ux-locks[open] summary { margin-bottom: 6px; }
.ux-lv { display: flex; flex-direction: column; gap: 6px; }
.ux-lv__t { font-size: 12px; color: var(--u-dim); }

/* галереи с настоящими мини-превью */
.lcb input[type=search] { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--u-line); background: var(--u-panel2); outline: none; }
.lcb input[type=search]:focus { border-color: var(--u-acc2); }
.ux-q { width: 100%; }
.ux-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ux-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px 2px; }
.ux-chips--scroll::-webkit-scrollbar { display: none; }
.ux-chips--scroll .ux-chip { flex: none; }
.ux-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--u-line); background: none; color: var(--u-dim); cursor: pointer; font-size: 12px; font-weight: 700; }
.ux-chip:hover { color: var(--u-ink); border-color: var(--u-line2); }
.ux-chip.on { color: #fff; background: var(--u-panel2); border-color: var(--u-acc); }
.ux-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ux-card { position: relative; border-radius: 14px; background: var(--u-panel); border: 1px solid var(--u-line); overflow: hidden; transition: border-color .12s, transform .12s; }
.ux-card:hover { border-color: var(--u-line2); transform: translateY(-1px); }
.ux-card.on { border-color: var(--u-acc); box-shadow: 0 0 0 2px rgba(255,123,172,.25); }
.ux-card__main { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.ux-card__name { padding: 8px 10px 9px; font-weight: 800; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-card__fav { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(15,10,28,.62); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; opacity: .8; }
.ux-card__fav.on { color: #ffd166; opacity: 1; }
.ux-card__fav:hover, .ux-card__fav:focus-visible { opacity: 1; background: rgba(15,10,28,.85); }
.ux-card__x { display: flex; gap: 4px; padding: 0 8px 8px; }
.ux-card__x .lcb-mini-btn { width: 26px; height: 26px; font-size: 12px; }
.ux-pv { position: relative; width: 100%; aspect-ratio: 3 / 5; overflow: hidden; background: linear-gradient(160deg, #2b4c6b 0%, #3f5a3a 45%, #6b4a2c 75%, #2a2140 100%); }
.ux-pv__f { position: absolute; left: 0; top: 0; width: 360px; height: 600px; border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.ux-pv.is-ready .ux-pv__f { opacity: 1; }

/* ---------- Quick Edit и панель превью ---------- */
.lcb-pbar { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--u-line); background: rgba(18,14,31,.7); flex-wrap: wrap; }
.lcb-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.ux-qb { display: inline-flex; align-items: center; gap: 6px; }
.ux-qb__i { font-size: 13px; }
.lcb-pstate { display: inline-flex; align-items: center; gap: 6px; color: var(--u-dim); font-size: 12px; }
.lcb-pstate select { width: auto; }
.lcb-btn.on { border-color: var(--u-acc); }
.ux-qpop { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.ux-qpop h4 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ux-fg2); }
.ux-pop { color: var(--u-ink); font-family: var(--u-font); font-size: 13px; }
.ux-pop .lcb-row__label, .ux-pop .lcb-hint { color: var(--u-dim); }

/* ---------- Тест: выдвижная панель ---------- */
.lcb-test { display: flex; flex-wrap: wrap; gap: 14px 26px; padding: 10px 14px; border-bottom: 1px solid var(--u-line); background: var(--u-panel); }
.lcb-test__col { display: flex; flex-direction: column; gap: 6px; }
.lcb-test__col > b { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--u-dim); }
.lcb-test__row { display: flex; gap: 5px; flex-wrap: wrap; }
.lcb-test select.lcb-btn { width: auto; }

/* ---------- выбор элемента в превью (только редактор) ---------- */
.lcb-sel { position: absolute; z-index: 15; pointer-events: none; border: 2px solid var(--u-acc2); border-radius: 8px; box-shadow: 0 0 0 1px rgba(8,6,16,.55); }
.lcb-sel > span { position: absolute; left: -2px; bottom: calc(100% + 3px); padding: 2px 8px; border-radius: 6px; background: var(--u-acc2); color: #0d1a2a; font-size: 11px; font-weight: 800; white-space: nowrap; }
.lcb-sel.is-top > span { bottom: auto; top: calc(100% + 3px); }
.lcb-sel--hov { border-style: dashed; border-color: rgba(255,255,255,.85); }
.lcb-sel--hov > span { background: rgba(15,10,28,.85); color: #fff; }
.lcb-area .lcb-stage:not(.is-obs) { cursor: default; }

/* ---------- модальные таблицы и подсказки ---------- */
.ux-keys { width: 100%; border-collapse: collapse; }
.ux-keys td { padding: 7px 4px; border-bottom: 1px solid var(--u-line); }
.ux-keys td:first-child { white-space: nowrap; width: 1%; padding-right: 16px; }
.ux-keys kbd { padding: 2px 7px; border-radius: 6px; background: var(--u-panel2); border: 1px solid var(--u-line2); font: 700 11.5px var(--u-font); }

/* ---------- планшет: панель выезжает поверх превью ---------- */
@media (max-width: 1100px) {
  :root { --ux-rail-w: 62px; }
  body.lcb, body.lcb.lcb-nopanel { grid-template-columns: var(--ux-rail-w) minmax(0, 1fr); grid-template-areas: "top top" "rail preview"; }
  body.lcb.lcb-focus { grid-template-columns: 0 minmax(0, 1fr); }
  .lcb-panel { position: fixed; left: var(--ux-rail-w); top: 56px; bottom: 0; width: min(380px, calc(100vw - var(--ux-rail-w))); z-index: 40;
    box-shadow: 18px 0 50px rgba(5,3,14,.55); transition: transform .2s ease; background: #1b1530; }
  body.lcb.lcb-nopanel .lcb-panel { visibility: hidden; transform: translateX(-110%); }
  .ux-close { display: inline-grid; }
  .lcb-brand { display: none; }
  .lcb-search { min-width: 0; flex: 0 0 auto; }
  .lcb-search__tx, .lcb-search kbd { display: none; }
  .ux-qb__t { display: none; }
}
/* телефон: рейка внизу, панель — шторка */
@media (max-width: 700px) {
  body.lcb, body.lcb.lcb-nopanel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 58px; grid-template-areas: "top" "preview" "rail"; overflow: hidden; }
  body.lcb.lcb-focus { grid-template-rows: 0 minmax(0, 1fr) 0; }
  .lcb-top { flex-wrap: wrap; height: auto; padding: 6px 8px; row-gap: 4px; }
  .lcb-profile { max-width: 120px; }
  #lcbRecolor, .lcb-savest > span { display: none; }
  .lcb-rail { flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--u-line); padding: 4px 6px; overflow-x: auto; }
  .lcb-rail__btn { flex: 1 1 0; min-width: 52px; flex-direction: column; box-shadow: none !important; }
  .lcb-rail__btn.on { box-shadow: inset 0 3px 0 var(--u-acc) !important; }
  .lcb-panel { left: 0; right: 0; top: auto; bottom: 58px; width: auto; height: 62vh; border-radius: 16px 16px 0 0; border-top: 1px solid var(--u-line2); }
  body.lcb.lcb-nopanel .lcb-panel { transform: translateY(110%); }
  .lcb-pbar { gap: 4px; padding: 6px 8px; }
  .lcb-pstate > span { display: none; }
  .lcb-foot { gap: 4px; padding: 6px 8px; }
  .lcb-foot > span:not(.lcb-sp) { display: none; }
  .ux-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  body.lcb, .lcb-panel, .ux-card, .ux-chev { transition: none; }
  .ux-flash { animation: none; box-shadow: 0 0 0 3px var(--u-acc2); }
}