/* ============================================================================
 * LYSS UX layer · lyss-ux.css — оформление общей оболочки (см. lyss-ux.js)
 * Один и тот же файл во всех кастомизаторах. Цвета берутся из переменных
 * хоста (--bg2, --line, --ink…), запасные значения подходят всем.
 * ========================================================================== */
body.ux {
  --ux-bg: var(--bg2, #141833); --ux-bg2: var(--bg3, #1b2043); --ux-line: var(--line, #262b52); --ux-line2: var(--line2, #303663);
  --ux-ink: var(--ink, #e8e9ff); --ux-ink2: var(--ink2, #c3c8f0); --ux-mute: var(--mute, #8b91c4); --ux-acc: var(--acc, #7b86ff);
  --ux-on: rgba(123, 134, 255, .22);
}
body.ux :focus-visible { outline: 2px solid #b6bcff; outline-offset: 2px; border-radius: 6px; }

/* ---- шапка: меньше, спокойнее ---- */
.ux-tools { display: flex; align-items: center; gap: 4px; margin: 0 6px; }
.ux-tb { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: transparent !important;
  color: var(--ux-ink2); font-weight: 600; font-size: 12.5px; border: 1px solid transparent; }
.ux-tb:hover { background: var(--ux-bg2) !important; border-color: var(--ux-line2); }
.ux-tb--ico { padding: 6px 9px; font-size: 15px; }
.ux-tb[aria-pressed="true"] { background: var(--ux-on) !important; border-color: var(--ux-acc); }
.ux-tb kbd { font: 600 10px ui-monospace, Consolas, monospace; padding: 1px 5px; border-radius: 5px; background: var(--ux-bg2); color: var(--ux-mute); border: 1px solid var(--ux-line2); }
body.ux .top .ghost, body.ux .top button.ghost { background: transparent; border: 1px solid var(--ux-line2); }
body.ux .top .ghost:hover { background: var(--ux-bg2); }
.ux-saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ux-mute); min-width: 92px; }
.ux-saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #49c58e; flex: none; }
.ux-saved[data-state="saving"]::before { background: #ffc66b; animation: ux-pulse .7s ease-in-out infinite alternate; }
.ux-saved[data-state="error"]::before { background: #ff6b88; }
@keyframes ux-pulse { to { opacity: .3; } }

/* ---- раскладка: рейка + одна панель + превью ---- */
body.ux .app, body.ux .ux-app { grid-template-columns: var(--ux-nav, 176px) var(--ux-panel, clamp(320px, 26vw, 392px)) minmax(0, 1fr) !important; }
body.ux.ux-nopanel .app, body.ux.ux-nopanel .ux-app { grid-template-columns: 0 0 minmax(0, 1fr) !important; }
body.ux.ux-nopanel .nav, body.ux.ux-nopanel .panel, body.ux.ux-nopanel #nav, body.ux.ux-nopanel #panel { display: none !important; }
.ux-showpanel { display: none; position: fixed; left: 12px; top: 74px; z-index: 40; background: var(--ux-bg2); border: 1px solid var(--ux-line2); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.ux.ux-nopanel .ux-showpanel { display: block; }
.ux-exitfocus { display: none; position: fixed; right: 14px; top: 12px; z-index: 60; background: rgba(20,24,51,.88); border: 1px solid var(--ux-line2); font-size: 12px; }
body.ux.ux-focus .ux-exitfocus { display: block; }
body.ux.ux-focus .top, body.ux.ux-focus .nav, body.ux.ux-focus #nav, body.ux.ux-focus .panel, body.ux.ux-focus #panel,
body.ux.ux-focus .ux-quick, body.ux.ux-focus .ux-welcome, body.ux.ux-focus .pv-bar, body.ux.ux-focus .pv-ctl, body.ux.ux-focus .pv-demo, body.ux.ux-focus .pv-info { display: none !important; }
body.ux.ux-focus .app { grid-template-columns: 0 0 minmax(0, 1fr) !important; height: 100vh !important; }

/* ---- навигация: 5 групп, внутри — разделы ---- */
.ux-nav-host { padding: 10px 8px !important; }
.ux-nav-host > :not(.ux-nav) { display: none !important; }
.ux-group { margin-bottom: 4px; }
.ux-gb { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px;
  background: transparent !important; color: var(--ux-ink); font-weight: 700; font-size: 13px; border: 1px solid transparent; }
.ux-gb:hover { background: var(--ux-bg2) !important; }
.ux-gb.on { background: var(--ux-on) !important; border-color: rgba(123,134,255,.45); }
.ux-gi { width: 22px; text-align: center; font-size: 16px; }
.ux-gt { flex: 1; }
.ux-gc { color: var(--ux-mute); transition: transform .15s; }
.ux-gb.open .ux-gc { transform: rotate(90deg); }
.ux-gl { display: none; padding: 2px 0 6px 12px; margin-left: 11px; border-left: 1px solid var(--ux-line2); }
.ux-gl.open { display: block; }
.ux-sb { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 9px; border-radius: 8px;
  background: transparent !important; color: var(--ux-ink2); font-weight: 600; font-size: 12.5px; margin: 1px 0; }
.ux-sb:hover { background: var(--ux-bg2) !important; color: #fff; }
.ux-sb.on { background: var(--ux-bg2) !important; color: #fff; box-shadow: inset 2px 0 0 var(--ux-acc); }
.ux-si { width: 18px; text-align: center; font-size: 13px; opacity: .9; }
.ux-st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- панель: меньше шума ---- */
body.ux .panel__h { font-size: 16px; margin-bottom: 10px; }
.ux-more, .ux-grp { margin: 10px 0; border: 1px solid var(--ux-line); border-radius: 11px; background: rgba(255,255,255,.015); }
.ux-more > summary, .ux-grp > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-weight: 700; font-size: 12.5px; color: var(--ux-ink2);
  display: flex; align-items: center; gap: 8px; user-select: none; }
.ux-more > summary::-webkit-details-marker, .ux-grp > summary::-webkit-details-marker { display: none; }
.ux-more > summary::before, .ux-grp > summary::before { content: "▸"; color: var(--ux-mute); transition: transform .15s; }
.ux-more[open] > summary::before, .ux-grp[open] > summary::before { transform: rotate(90deg); }
.ux-more > summary:hover, .ux-grp > summary:hover { color: #fff; }
.ux-more[open], .ux-grp[open] { padding-bottom: 8px; }
.ux-more > :not(summary), .ux-grp > :not(summary) { margin-left: 12px; margin-right: 12px; }
.ux-grp > .f-head { display: none; }
.ux-i { padding: 0 4px !important; margin-left: 4px; background: transparent !important; color: var(--ux-mute); font-size: 12px; border-radius: 50%; }
.ux-i:hover { color: #fff; }
.f-hint.ux-tip:not(.ux-show) { display: none !important; }
.ux-flash { animation: ux-flash .9s ease; }
@keyframes ux-flash { 0% { box-shadow: inset 0 0 0 2px var(--ux-acc); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.ux-hit { animation: ux-hit 1.8s ease; border-radius: 8px; }
@keyframes ux-hit { 0%, 60% { background: rgba(123,134,255,.35); box-shadow: 0 0 0 4px rgba(123,134,255,.35); } 100% { background: transparent; box-shadow: none; } }

/* ---- превью: центр, под ним — спокойный тулбар ---- */
body.ux .preview { background: #0a0d1f; }
.ux-quick { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--ux-line); background: var(--ux-bg); flex-wrap: wrap; }
.ux-quick__t { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ux-mute); margin-right: 4px; }
.ux-qb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--ux-bg2) !important; border: 1px solid var(--ux-line2); font-size: 12.5px; color: var(--ux-ink); }
.ux-qb:hover { border-color: var(--ux-acc); }
.ux-qb__c { color: var(--ux-mute); font-size: 10px; }
.ux-q--seg { display: inline-flex; align-items: center; gap: 6px; }
.ux-q__l { font-size: 12px; color: var(--ux-ink2); }
.ux-qseg { display: inline-flex; background: var(--ux-bg2); border: 1px solid var(--ux-line2); border-radius: 999px; padding: 2px; }
.ux-qseg__b { padding: 3px 9px; border-radius: 999px; background: transparent !important; font-size: 11.5px; font-weight: 600; color: var(--ux-ink2); }
.ux-qseg__b[aria-pressed="true"] { background: var(--ux-acc) !important; color: #fff; }
.ux-testbtn, .ux-pickbtn { background: var(--ux-bg2) !important; border: 1px solid var(--ux-line2); font-size: 12.5px; }
.ux-pickbtn[aria-pressed="true"] { border-color: #ffd27d; color: #ffe3a8; box-shadow: 0 0 0 2px rgba(255,210,125,.2); }
.ux-testbody { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; max-width: 420px; align-items: center; }
.ux-dev { padding: 6px 10px 10px; border-top: 1px solid var(--ux-line); font-size: 12px; color: var(--ux-mute); }
.ux-dev > summary { cursor: pointer; padding: 4px 0; }
body.is-basic .ux-dev { display: none; }
body.ux.ux-picking .pv-stage, body.ux.ux-picking .scene { outline: 2px dashed #ffd27d; outline-offset: -4px; }

/* ---- всплывающие панели ---- */
.ux-popwrap { position: relative; display: inline-block; }
.ux-pop { position: absolute; z-index: 50; min-width: 220px; top: calc(100% + 6px); left: 0; padding: 6px; border-radius: 12px;
  background: #1a1f45; border: 1px solid var(--ux-line2); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.ux-pop[hidden] { display: none; }
.ux-pop--up { top: auto; bottom: calc(100% + 6px); }
.ux-pop--menu { right: 0; left: auto; min-width: 250px; }
.ux-popwrap--up .ux-pop { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.ux-pop__h { padding: 6px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ux-mute); }
.ux-menuitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent !important; padding: 8px 10px; border-radius: 8px; }
.ux-menuitem:hover { background: #262d63 !important; }
.ux-menuitem.on { box-shadow: inset 2px 0 0 var(--ux-acc); }
.ux-menuitem b { font-size: 12.5px; }
.ux-menuitem span { font-weight: 400; color: var(--ux-mute); font-size: 11.5px; }
.ux-sw { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); flex: none; }

/* ---- статус и первый запуск ---- */
.ux-status { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; z-index: 70;
  background: rgba(26,31,69,.96); border: 1px solid var(--ux-line2); padding: 8px 14px; border-radius: 999px; font-size: 12.5px; transition: .2s; }
.ux-status.on { opacity: 1; transform: translate(-50%, 0); }
.ux-toast-quiet { display: none !important; }
.ux-welcome { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: linear-gradient(90deg, rgba(123,134,255,.18), rgba(155,108,255,.12));
  border-bottom: 1px solid var(--ux-line); font-size: 12.5px; flex-wrap: wrap; }
.ux-welcome__s { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; color: var(--ux-ink); }
.ux-welcome__s b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ux-acc); color: #fff; font-size: 11px; }
.ux-welcome__more { background: transparent !important; border: 1px solid var(--ux-line2); font-size: 12px; }
.ux-welcome__x { background: transparent !important; padding: 2px 8px; font-size: 16px; color: var(--ux-mute); }

/* ---- поиск ---- */
.ux-palette { position: fixed; inset: 0; z-index: 100; background: rgba(5,7,18,.6); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.ux-palette__box { width: min(640px, 92vw); background: #141833; border: 1px solid var(--ux-line2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; }
.ux-palette__in { width: 100%; padding: 16px 18px; background: transparent; border: 0; border-bottom: 1px solid var(--ux-line); font-size: 15px; color: #fff; outline: none; }
.ux-palette__list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.ux-palette__r { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; background: transparent !important; }
.ux-palette__r.on { background: var(--ux-on) !important; }
.ux-palette__i { width: 24px; text-align: center; font-size: 16px; }
.ux-palette__t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ux-palette__t b { font-size: 13.5px; font-weight: 700; }
.ux-palette__t small { color: var(--ux-mute); font-weight: 400; font-size: 11.5px; }
.ux-palette__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ux-mute); }
.ux-palette__empty { padding: 22px; text-align: center; color: var(--ux-mute); }
.ux-scan { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(13,16,36,.96); color: var(--ux-ink2); font-size: 14px; }

/* ---- адаптив ---- */
.ux-mtabs { display: none; }
@media (max-width: 1180px) {
  body.ux .app, body.ux .ux-app { --ux-nav: 150px; --ux-panel: clamp(300px, 34vw, 360px); }
}
@media (max-width: 900px) {
  body.ux .app, body.ux .ux-app { grid-template-columns: minmax(0, 1fr) !important; height: calc(100vh - 56px - 46px) !important; }
  body.ux .nav, body.ux #nav, body.ux .panel, body.ux #panel { display: none !important; }
  body.ux.ux-m-panel #nav { display: block !important; position: static; max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--ux-line); }
  body.ux.ux-m-panel #panel { display: block !important; }
  body.ux.ux-m-panel .preview, body.ux.ux-m-panel .lcb-preview { display: none !important; }
  .ux-mtabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 46px; z-index: 80; background: #141833; border-top: 1px solid var(--ux-line2); }
  .ux-mtabs button { flex: 1; border-radius: 0; background: transparent; }
  .ux-mtabs button[aria-selected="true"] { background: var(--ux-on); box-shadow: inset 0 2px 0 var(--ux-acc); }
  .ux-tb__t, .ux-tb kbd { display: none; }
  .ux-showpanel { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { body.ux * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }