:root {
  /* акцент */
  --ac:        #2e5bdb;   /* акцент (кобальт) */
  --ac-tint:   #f2f5fd;   /* светлая заливка выбранного */
  --ac-soft:   #e8eefc;   /* hover-заливка */
  --ac-ring:   rgba(46,91,219,.14); /* focus-кольцо */
  --on-ac:     #fff;      /* текст/иконки на акценте */
  color-scheme: light;

  /* текст */
  --ink:   #1b1c1f;
  --ink-2: #2e3036;
  --mut:   #45484f;
  --mut-2: #5f626a;
  --faint: #8a8d94;
  --hint:  #b4b1a9;

  /* поверхности */
  --paper:  #f4f4f1;   /* фон страницы */
  --panel:  #fff;      /* карточки */
  --field:  #fff;      /* поля ввода */
  --fill:   #f1f1ee;   /* заливка кнопок-иконок */
  --fill-2: #f5f4f1;
  --surf-1: #fcfcfb;   /* тулбар блока */
  --surf-2: #fbfbf9;   /* карточка модуля */
  --surf-3: #faf9f6;   /* колонка */
  --surf-4: #f6f5f1;   /* тулбар колонки / hover списка */

  /* линии */
  --line:      #e7e7e3;
  --line-2:    #efefeb; /* внутренние разделители */
  --line-3:    #eceae5; /* рамка колонки */
  --line-4:    #ededea; /* вертикальный сепаратор */
  --line-dash: #d8d6cf; /* пунктирные рамки */
  --line-dot:  #c4c1ba; /* пунктир дерева */

  /* статусы */
  --danger:      #b4312a; /* текст/иконка удаления */
  --danger-bg:   #faeeea; /* заливка удаления */
  --danger-line: #efd9d2; /* рамка удаления */

  /* редакторы кода */
  --code-bg: #17181b;
  --code-fg: #d9d9d4;

  /* заглушка изображения */
  --img-ph:      repeating-linear-gradient(45deg,rgba(0,0,0,.015) 0 12px,transparent 12px 24px),linear-gradient(135deg,#efefec,#e7e7e2);
  --img-ph-flat: linear-gradient(135deg,#efefec,#e7e7e2);
  --hatch:       repeating-linear-gradient(45deg,rgba(0,0,0,.015) 0 12px,transparent 12px 24px);

  /* скругления */
  --r-xs:  6px;
  --r-sm:  7px;
  --r-8:   8px;
  --r:     9px;
  --r-md:  10px;
  --r-lg:  11px;
  --r-xl:  12px;
  --r-13:  13px;
  --r-2xl: 14px;
  --r-3xl: 16px;
  --pop-shadow: 0 16px 40px rgba(20,20,20,.16), 0 0 0 1px #e7e7e3;
  --shadow-card: 0 1px 3px rgba(20,20,20,.05), 0 0 0 1px #e7e7e3;
  --ok: #1f8a5b;
  --surf:        #fafaf8;   /* мягкая поверхность (сайдбар, модуль, подсказки) */
  --line-strong: #d6d6d1;   /* пунктир колонок, рамки зон загрузки */
  --inv-bg:      #1b1c1f;   /* «тёмные» кнопки и бейджи */
  --inv-fg:      #fff;
  --knob:        #fff;      /* ручка переключателя */
  --warn:        #d38a1f;

  /* размеры шрифта — 4 ступени, по умолчанию 16px, минимум 12px */
  --fs-xs: 12px;  /* крайние случаи: mono-бейджи, мелкие подписи */
  --fs-sm: 14px;  /* компактный интерфейсный текст, кнопки */
  --fs-md: 16px;  /* базовый размер по умолчанию */
  --fs-lg: 18px;  /* заголовки */

  /* шрифты */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ============================================================
   ТЁМНАЯ ТЕМА — только значения токенов. data-theme на <html> ставит
   скрипт в index.html («Авто» следует системной настройке).
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ac: #7b97f7; --ac-tint: rgba(123,151,247,.10); --ac-soft: rgba(123,151,247,.18); --ac-ring: rgba(123,151,247,.30); --on-ac: #0e1430;
  --ink: #ececea; --ink-2: #d4d5d2; --mut: #b6b8bd; --mut-2: #9b9ea5; --faint: #75787f; --hint: #6c6f76;
  --paper: #121315; --panel: #1b1c1f; --field: #1b1c1f; --fill: #26272b; --fill-2: #26272b;
  --surf: #202124; --surf-1: #202124; --surf-2: #202124; --surf-3: #1f2023; --surf-4: #2a2b2f;
  --line: #2d2f34; --line-2: #26282c; --line-3: #2d2f34; --line-4: #2d2f34; --line-dash: #3d3f45; --line-dot: #4b4d54; --line-strong: #3d3f45;
  --danger: #f08a80; --danger-bg: rgba(240,138,128,.12); --danger-line: rgba(240,138,128,.3);
  --code-bg: #0e0f11; --ok: #3fb67d; --warn: #e3a23c;
  --inv-bg: #ececea; --inv-fg: #17181b; --knob: #f4f4f2;
  --img-ph: linear-gradient(135deg,#26272b,#202124); --img-ph-flat: linear-gradient(135deg,#26272b,#202124); --hatch: none;
  --shadow-card: 0 0 0 1px #2d2f34;
  --pop-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px #34363c;
}


/* --- разделитель / отступы ---------------------------------------------- */

/* --- выпадающий список (trigger + popover) ------------------------------ */
.ad-dd            { position:relative; }
.ad-dd__trigger   { height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; border-bottom:1px solid var(--line-2); }
.ad-dd__value     { flex:1; font:600 var(--fs-sm) var(--font); color:var(--ac); }

.ad-popover {                     /* панель списка — плавающий оверлей: не влияет на поток, не двигает соседние модули */
  position:absolute; top:calc(100% + 4px); left:0; right:0; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--pop-shadow);
  padding:5px; z-index:100;
}
/* пока открыт список — поднимаем его контейнер над соседними триггерами */
.ad-dd:has(> .ad-popover) { z-index:60; }
.ad-popover--scroll { max-height:196px; overflow:auto; }
.ad-popover__row {
  height:36px; border-radius:var(--r-8); display:flex; align-items:center; gap:8px;
  padding:0 10px; cursor:pointer; font:500 var(--fs-sm) var(--font); color:var(--ink);
}
.ad-popover__row:hover        { background:var(--surf-4); }
.ad-popover__row--active      { background:var(--ac-tint); font-weight:600; }

/* --- редакторы кода (тёмная тема) --------------------------------------- */
.ad-code-wrap { position:relative; border-radius:var(--r-lg); background:var(--code-bg); overflow:hidden; }
.ad-code-hl   { margin:0; padding:16px 18px; min-height:210px; font:400 var(--fs-sm)/1.65 var(--mono); color:var(--code-fg); white-space:pre-wrap; word-break:break-word; }
.ad-code-ta   { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; margin:0; padding:16px 18px; font:400 var(--fs-sm)/1.65 var(--mono); color:transparent; caret-color:var(--code-fg); background:transparent; border:none; outline:none; resize:none; white-space:pre-wrap; word-break:break-word; overflow:hidden; }

/* --- rich-редактор (визуальный / код) ----------------------------------- */
.ad-rich       { min-height:120px; box-sizing:border-box; border:1px solid var(--line); border-radius:var(--r); background:var(--field); padding:12px 14px; font-size:var(--fs-sm); line-height:1.6; color:var(--ink); outline:none; }
.ad-rich:focus { border-color:var(--ac); box-shadow:0 0 0 3px var(--ac-ring); }

/* --- плейсхолдер изображения (галерея / загрузка) ----------------------- */
.meph      { position:relative; background-image:repeating-linear-gradient(45deg,var(--line) 0 9px,var(--surf) 9px 18px); display:flex; align-items:center; justify-content:center; }
.meph span { font:500 var(--fs-xs) var(--mono); color:var(--faint); }

/* кнопки перемещения / удаления (стрелки, крестик) */
.ad-mv       { display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:var(--r-xs); background:var(--fill-2); color:var(--mut); }

/* ============================================================
   Настройки фона (BackgroundSettings)
   ============================================================ */
/* color picker */
/* переключатель (тумблер) — геометрия в классе, цвета динамические inline */
.ad-toggle       { width:36px; height:21px; border-radius:var(--r-lg); position:relative; flex:none; cursor:pointer; transition:background .18s; }
.ad-toggle__knob { position:absolute; top:2px; width:17px; height:17px; background: var(--panel); border-radius:50%; transition:left .18s; }
/* строка модуля в «Основные» */
.ad-modrow        { display:flex; align-items:center; gap:11px; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:10px 12px; }
.ad-modrow__icon  { width:38px; height:38px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex:none; }
.ad-modrow__label { font-size:var(--fs-sm); font-weight:500; flex:1; }
.ad-modgrid       { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ============================================================
   КАРКАС: сайдбар + холст + инспектор
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-sm) var(--font); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.ad-app { display: flex; height: 100vh; overflow: hidden; }
.ad-center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ad-main { flex: 1 1 auto; overflow: auto; padding: 28px 40px 80px; }
.ad-main__inner { max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ad-main__inner--wide { max-width: 1180px; }

/* ── Кнопки ───────────────────────────────────────────── */
.ad-b { height: 34px; padding: 0 14px; border: none; border-radius: var(--r-8); background: transparent; color: var(--ink-2);
  font: 500 13px var(--font); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.ad-b:hover { background: var(--fill); }
.ad-b--line { border: 1px solid var(--line); background: var(--panel); }
.ad-b--primary { background: var(--ac); color: var(--on-ac); font-weight: 600; }
.ad-b--primary:hover { background: var(--ac); filter: brightness(.92); }
.ad-b--dark { background: var(--inv-bg); color: var(--inv-fg); font-weight: 600; }
.ad-b--dark:hover { background: var(--inv-bg); filter: brightness(1.15); }
.ad-b--danger { color: var(--danger); }
.ad-b--danger:hover { background: var(--danger-bg); }
.ad-b--accent { color: var(--ac); }
.ad-b--sm { height: 30px; padding: 0 10px; }
.ad-b--block { width: 100%; justify-content: center; }
.ad-ib { width: 28px; height: 28px; flex: none; border: none; border-radius: 7px; background: transparent; color: var(--mut-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ad-ib:hover { background: var(--fill); color: var(--ink); }
.ad-ib--danger { color: var(--danger); }
.ad-ib--danger:hover { background: var(--danger-bg); color: var(--danger); }
.ad-ib[disabled] { opacity: .3; pointer-events: none; }

/* ── Сегменты, переключатели, поля ────────────────────── */
.ad-segm { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 2px; padding: 3px; border-radius: 9px; background: var(--fill); }
.ad-segm__o { height: 30px; padding: 0 3px; letter-spacing: -.005em; min-width: 0; overflow: hidden; text-overflow: ellipsis; border: none; border-radius: 7px; background: transparent; color: var(--mut-2);
  font: 500 13px var(--font); cursor: pointer; white-space: nowrap; }
.ad-segm__o.is-on { background: var(--panel); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(20,20,20,.1); }
.ad-f { display: flex; flex-direction: column; gap: 6px; }
.ad-f__l { font-size: 12px; font-weight: 600; color: var(--mut); }
.ad-f__hint { font-size: 12px; line-height: 1.5; color: var(--mut-2); }
.ad-in { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--panel);
  font: 400 14px var(--font); color: var(--ink); outline: none; }
.ad-in:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.ad-in--mono { font-family: var(--mono); font-size: 13px; }
.ad-in--sm { height: 34px; }
.ad-affix { display: flex; align-items: center; height: 38px; border: 1px solid var(--line); border-radius: var(--r-8); overflow: hidden; background: var(--panel); font: 400 14px var(--mono); }
.ad-affix:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); }
.ad-affix > span { padding: 0 10px; height: 100%; display: flex; align-items: center; color: var(--mut-2); background: var(--surf); }
.ad-affix > input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; padding: 0 8px; font: inherit; color: var(--ink); background: transparent; }
.ad-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 14px; cursor: pointer; }
.ad-eyebrow2 { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mut-2); }
.ad-chip { height: 26px; padding: 0 10px; border-radius: 13px; background: var(--panel); box-shadow: 0 0 0 1px var(--line);
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mut); border: none; }
.ad-chip--mono { font-family: var(--mono); font-weight: 500; }
.ad-chip--link { box-shadow: none; background: transparent; color: var(--ac); font-weight: 500; cursor: pointer; }
.ad-chip--link:hover { background: var(--ac-soft); }
.ad-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.ad-dot--off { background: var(--line-strong); }

/* ── Сайдбар ──────────────────────────────────────────── */
.ad-side { width: 252px; flex: none; display: flex; flex-direction: column; background: var(--surf); border-right: 1px solid var(--line); overflow: hidden; }
.ad-side__scroll { flex: 1 1 auto; overflow: auto; padding-bottom: 12px; }
.ad-brand { display: flex; align-items: center; gap: 8px; padding: 18px 14px 14px 18px; }
.ad-brand > div:nth-child(2) { min-width: 0; }   /* название сайта сжимается, кнопки языка и темы — нет */
.ad-brand__mark { flex: none;  width: 30px; height: 30px; border-radius: 8px; background: var(--inv-bg); color: var(--inv-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.ad-brand__name { font-weight: 600; font-size: 14px; }
.ad-brand__site { font-size: 12px; color: var(--mut-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.ad-brand__theme { flex: none; }
.ad-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.ad-nav__i { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: none; border-radius: 8px; background: transparent;
  color: var(--mut); font: 400 14px var(--font); cursor: pointer; text-align: left; }
.ad-nav__i:hover { background: var(--fill); color: var(--ink); }
.ad-nav__i.is-on { background: var(--panel); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(20,20,20,.06), 0 0 0 1px var(--line); }
.ad-side__h { display: flex; align-items: center; justify-content: space-between; padding: 18px 12px 6px 20px; }
.ad-list { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
.ad-list__i { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: 400 14px var(--font); cursor: pointer; text-align: left; }
.ad-list__i:hover { background: var(--fill); }
.ad-list__i.is-on { background: var(--ac-soft); color: var(--ac); font-weight: 500; }
.ad-list__i small { margin-left: auto; font-size: 12px; color: var(--mut-2); font-weight: 400; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-list__i.is-on small { color: var(--ac); opacity: .8; }
.ad-list__i--tree { min-height: 28px; font-size: 13px; gap: 7px; }
.ad-list__i--tree svg { opacity: .7; flex: none; }
.ad-list__i--tree code { font: 500 11px var(--mono); color: var(--mut-2); }
.ad-status { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mut-2); }
.ad-status .ad-b { margin-left: auto; }
.ad-status.is-dirty .ad-dot { background: var(--warn); }

/* ── Верхняя панель ───────────────────────────────────── */
.ad-top { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ad-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.ad-crumbs span { color: var(--mut-2); }
.ad-crumbs b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-top__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Шапка страницы на холсте ─────────────────────────── */
.ad-ph { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.ad-ph__pages { display: none; }
.ad-ph__t { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.ad-ph__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ── Блок ─────────────────────────────────────────────── */
.ad-blk { position: relative; background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.ad-blk.is-sel { box-shadow: 0 0 0 2px var(--ac); }
.ad-blk__head { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line-2); cursor: pointer; border-radius: 14px 14px 0 0; }
.ad-blk__head:hover { background: var(--surf); }
.ad-blk__grip { color: var(--faint); display: flex; }
.ad-blk__name { font-size: 13px; font-weight: 600; }
.ad-blk.is-sel .ad-blk__name { color: var(--ac); }
.ad-blk__cls { height: 22px; padding: 0 8px; border-radius: 6px; background: var(--fill); font: 500 12px var(--mono); color: var(--ink-2); display: inline-flex; align-items: center; border: none; }
.ad-blk__cls--add { background: transparent; border: 1px dashed var(--line-strong); font: 500 12px var(--font); color: var(--mut-2); cursor: pointer; }
.ad-blk__tools { margin-left: auto; display: flex; gap: 2px; }
.ad-blk__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ad-blk__foot { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 8px 8px; }
.ad-empty2 { padding: 18px; border-radius: 10px; border: 1px dashed var(--line-strong); text-align: center; font-size: 13px; color: var(--mut-2); }
.ad-addblk { height: 52px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: transparent; font: 600 14px var(--font); color: var(--mut);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ad-addblk:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-tint); }

/* ── Колонки ──────────────────────────────────────────── */
.ad-cols2 { display: grid; gap: 12px; }
.ad-col2 { min-width: 0; border-radius: 10px; border: 1px dashed var(--line-strong); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.ad-col2__h { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px; color: var(--mut-2); }
.ad-col2__w { margin-left: auto; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--fill); font: 500 12px var(--mono); color: var(--ink-2); display: flex; align-items: center; }
.ad-col2__foot { position: relative; display: flex; }

/* ── Модуль на холсте ─────────────────────────────────── */
.ad-mc { position: relative; padding: 8px 12px 12px; border-radius: 9px; background: var(--surf); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; }
.ad-mc:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.ad-mc.is-sel { background: var(--ac-tint); box-shadow: 0 0 0 2px var(--ac); }
.ad-mc__h { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut-2); }
.ad-mc.is-sel .ad-mc__h { color: var(--ac); }
.ad-mc__h svg { flex: none; }
.ad-mc__tools { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.ad-mc:hover .ad-mc__tools, .ad-mc.is-sel .ad-mc__tools, .ad-mc:focus-within .ad-mc__tools { opacity: 1; }
.ad-mc__link { font-size: 12px; color: var(--mut-2); display: flex; align-items: center; gap: 4px; }

/* превью содержимого */
.ad-pv { min-width: 0; overflow: hidden; color: var(--ink-2); }
.ad-pv--t1 { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.ad-pv--t2 { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.ad-pv--t3 { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ad-pv--t4 { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.ad-pv--text { font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.ad-pv--muted { font-size: 13px; color: var(--mut-2); }
.ad-pv--code { font: 400 12px/1.6 var(--mono); color: var(--mut); white-space: pre; max-height: 60px; }
.ad-pv__img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 7px; background: var(--img-ph-flat); }
.ad-pv__ph { height: 96px; border-radius: 7px; background: var(--img-ph-flat); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--mut-2); }
.ad-pv__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ad-pv__thumbs > * { aspect-ratio: 4 / 3; border-radius: 6px; background: var(--img-ph-flat); object-fit: cover; width: 100%; }
.ad-pv__btn { align-self: flex-start; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--inv-bg); color: var(--inv-fg); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; }
.ad-pv__hr { border: none; border-top: 2px solid var(--line-strong); margin: 8px 0; }

/* ── Палитра модулей ──────────────────────────────────── */
.ad-pal { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; width: 468px; max-width: calc(100vw - 40px); padding: 8px; border-radius: 12px;
  background: var(--panel); box-shadow: var(--pop-shadow); display: flex; flex-direction: column; gap: 6px; cursor: default; }
.ad-pal__h { padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--mut-2); }
.ad-pal__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ad-pal__i { height: 40px; padding: 0 8px; border: none; border-radius: 8px; background: transparent; display: flex; align-items: center; gap: 8px;
  font: 500 13px var(--font); color: var(--ink); cursor: pointer; text-align: left; }
.ad-pal__i:hover { background: var(--fill); }
.ad-pal__ic { width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--fill); color: var(--mut); display: flex; align-items: center; justify-content: center; }
.ad-pal__i:hover .ad-pal__ic { background: var(--ac-soft); color: var(--ac); }

/* ── Инспектор / панель параметров ────────────────────── */
.ad-insp { width: 430px; flex: none; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ad-insp--drawer { width: 420px; box-shadow: -12px 0 32px rgba(20,20,20,.06); }
.ad-insp__h { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); }
.ad-insp__ic { width: 28px; height: 28px; border-radius: 7px; background: var(--ac-soft); color: var(--ac); display: flex; align-items: center; justify-content: center; flex: none; }
.ad-insp__t { font-weight: 600; font-size: 14px; }
.ad-insp__h .ad-ib:last-child { margin-left: auto; }
.ad-insp__b { flex: 1 1 auto; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.ad-insp__f { flex: none; display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ad-insp__crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mut-2); }
.ad-insp__crumbs button { border: none; background: none; padding: 0; font: inherit; color: var(--mut); cursor: pointer; }
.ad-insp__crumbs button:hover { color: var(--ac); }
.ad-insp__crumbs b { color: var(--ink); font-weight: 500; }
.ad-insp__empty { margin: auto; max-width: 240px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--mut-2); font-size: 13px; line-height: 1.5; }
.ad-insp__empty svg { color: var(--faint); }
.ad-colrow { display: flex; align-items: center; gap: 6px; }
.ad-colrow__n { font-size: 13px; color: var(--ink-2); width: 72px; flex: none; }
.ad-colrow .ad-in { width: 66px; flex: none; }
.ad-note2 { padding: 10px 12px; border-radius: 9px; background: var(--surf); font-size: 12px; line-height: 1.5; color: var(--mut-2); }

/* ── Разделы настроек ─────────────────────────────────── */
.ad-sec-h { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ad-sec-h h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.ad-sec-h p { margin: 0; font-size: 14px; color: var(--mut-2); line-height: 1.5; max-width: 640px; }
.ad-panel { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ad-panel__t { font-size: 15px; font-weight: 600; }
.ad-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ad-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ad-theme { padding: 0; border: none; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); text-align: left; cursor: pointer; overflow: hidden; font-family: var(--font); }
.ad-theme.is-on { box-shadow: 0 0 0 2px var(--ac); }
.ad-theme__pv { height: 64px; background: var(--surf); display: flex; align-items: flex-end; padding: 10px 12px; font-size: 24px; font-weight: 700; color: var(--ink); }
.ad-theme__n { padding: 10px 12px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ad-theme__n svg { margin-left: auto; color: var(--ac); }
.ad-code { background: var(--code-bg); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; min-height: 560px; }
.ad-code__h { height: 50px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 16px; border-bottom: 1px solid #2a2c31; color: #f2f2ef; font-size: 14px; font-weight: 600; }
.ad-code__h small { font-weight: 400; font-size: 12px; color: #a4a7ae; }
.ad-code__h .ad-b { margin-left: auto; color: #e6e6e2; border: 1px solid #34363c; background: transparent; }
.ad-code__h .ad-b:hover { background: #24262b; }
.ad-code textarea { flex: 1 1 auto; min-height: 520px; width: 100%; border: none; outline: none; resize: vertical; padding: 16px 18px; background: transparent;
  color: var(--code-fg); font: 400 13px/1.7 var(--mono); tab-size: 2; }
.ad-code__f { height: 38px; flex: none; display: flex; align-items: center; padding: 0 16px; border-top: 1px solid #2a2c31; font: 400 12px var(--mono); color: #a4a7ae; }

/* ── Узкие экраны ─────────────────────────────────────── */
@media (max-width: 1280px) {
  .ad-insp { width: 320px; }
  .ad-main { padding: 24px 24px 80px; }
}
@media (max-width: 1080px) {
  .ad-grid2 { grid-template-columns: 1fr; }
  /* инспектор выезжает поверх холста */
  .ad-insp { position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: -12px 0 32px rgba(20,20,20,.12); }
  .ad-insp.is-idle { display: none; }
}
@media (max-width: 820px) {
  .ad-side { width: 68px; }
  .ad-side .ad-nav__i span, .ad-brand > div, .ad-side__h, .ad-list, .ad-status > span:not(.ad-dot) { display: none; }
  .ad-nav__i { justify-content: center; padding: 0; }
  .ad-status { justify-content: center; padding: 12px 6px; }
  .ad-status .ad-b { display: none; }
  .ad-cols2 { grid-template-columns: 1fr !important; }
  .ad-top { padding: 0 12px; }
  .ad-top .ad-b span { display: none; }
  .ad-insp, .ad-insp--drawer { width: 100%; }
  .ad-pal__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-ph__pages { display: block; max-width: 320px; }
  .ad-main { padding: 18px 14px 80px; }
}
/* Настройки фона внутри панели параметров — без собственной карточки */


/* ============================================================
   Редакторы модулей в инспекторе (ctx.ui)
   ============================================================ */
.ad-insp [data-mid] { display: flex; flex-direction: column; gap: 18px; }
.ad-f__row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ad-in--pick { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; color: var(--ink); }
.ad-in--pick > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-in--pick > svg { flex: none; color: var(--mut-2); }
.ad-b--glass { background: rgba(20, 20, 20, .62); color: #fff; backdrop-filter: blur(4px); }
.ad-b--glass:hover { background: rgba(20, 20, 20, .78); }
.ad-b[disabled] { opacity: .4; pointer-events: none; }

/* переключатель */
.ad-toggle { width: 36px; height: 22px; flex: none; padding: 0; border: none; border-radius: 11px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .18s; }
.ad-toggle.is-on { background: var(--ac); }
.ad-toggle__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .18s; }
.ad-toggle.is-on .ad-toggle__knob { left: 17px; }

/* счётчик */
.ad-step { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-8); align-self: flex-start; }
.ad-step > span { min-width: 64px; text-align: center; font: 500 14px var(--mono); color: var(--ink); }

/* загрузка изображения */
.ad-drop { height: 132px; width: 100%; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--surf); color: var(--mut);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-family: var(--font); }
.ad-drop:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-tint); }
.ad-drop b { font-size: 13px; font-weight: 600; }
.ad-drop small { font-size: 12px; color: var(--mut-2); }
.ad-media { position: relative; border-radius: 12px; overflow: hidden; background: var(--img-ph-flat); }
.ad-media img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.ad-media__bar { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }

/* текст: панель разметки */
.ad-tbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 9px; background: var(--fill); align-self: flex-start; }
.ad-tb { width: 32px; height: 30px; border: none; border-radius: 7px; background: transparent; color: var(--ink-2); font: 500 14px var(--font);
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ad-tb:hover { background: var(--panel); box-shadow: 0 1px 2px rgba(20,20,20,.1); }
.ad-rich { min-height: 160px; }

/* галерея: список изображений */
.ad-gi-list { display: flex !important; flex-direction: column; gap: 10px; }
.ad-gi { padding: 10px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 12px; cursor: grab; }
.ad-gi:active { cursor: grabbing; }
.ad-gi__row { display: flex; gap: 10px; align-items: flex-start; }
.ad-gi__thumb { width: 76px; height: 76px; flex: none; border: 1.5px dashed var(--line-strong); border-radius: 8px; background: var(--surf); color: var(--mut-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; padding: 0; }
.ad-gi__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
div.ad-gi__thumb { border-style: solid; border-color: transparent; }
.ad-gi__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-gi__fields .ad-in { height: 35px; }
.ad-gi__tools { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-gi__n { font: 500 11px var(--mono); color: var(--mut-2); padding-top: 4px; }

/* видео */
.ad-vprev { position: relative; width: 100%; aspect-ratio: 16 / 9; border: none; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, #1a1d22, #0c0e12); }
.ad-vprev[disabled] { cursor: default; }
.ad-vprev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-vprev__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ad-vprev__tag { position: absolute; left: 10px; top: 10px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff;
  font: 500 11px var(--font); display: flex; align-items: center; }
.ad-vmodal { position: fixed; inset: 0; z-index: 200; background: rgba(12,14,18,.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 32px; }
.ad-vmodal__box { position: relative; width: min(860px, 100%); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.ad-vmodal__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.ad-vmodal__x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: none; border-radius: 9px; background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* меню: выбор страниц */
.ad-checks { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.ad-check { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: none; border-radius: 7px; background: transparent;
  font: 400 14px var(--font); color: var(--ink-2); cursor: pointer; text-align: left; }
.ad-check:hover { background: var(--fill); }
.ad-check__box { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--on-ac); }
.ad-check.is-on .ad-check__box { background: var(--ac); border-color: var(--ac); }

/* разное */
.ad-hrprev { background: var(--ink); border-radius: 2px; }
.ad-frame { width: 100%; min-height: 220px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ad-note2 b { color: var(--ink); font-weight: 600; }
code { font: 500 .92em var(--mono); }

/* ============================================================
   Перетаскивание
   ============================================================ */
.ad-mods { display: flex; flex-direction: column; gap: 8px; }
.ad-mc { cursor: grab; }
.ad-mc:active { cursor: grabbing; }
.ad-blk__grip { cursor: grab; padding: 4px 2px; border-radius: 5px; }
.ad-blk__grip:hover { background: var(--fill); color: var(--ink); }
.is-drag-src { opacity: .45; }
/* Пустые списки подсвечиваются без изменения раскладки (иначе цель «уезжает» из-под курсора) */
.is-dragging .ad-mods:not(:has([data-card])) .ad-empty2 { border-color: var(--ac); background: var(--ac-tint); color: var(--ac); }
.is-dragging .ad-mc__tools { opacity: 0 !important; }
.ad-dropline { position: fixed; z-index: 300; height: 3px; border-radius: 2px; background: var(--ac); box-shadow: 0 0 0 3px var(--ac-ring); pointer-events: none; display: none; }
.ad-brand__theme { margin-left: auto; }
@media (max-width: 820px) { .ad-brand__theme { display: none; } }

/* ============================================================
   Переводы
   ============================================================ */
.ad-tr { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-radius: 12px; background: var(--ac-tint); box-shadow: 0 0 0 1px var(--ac-soft); }
.ad-tr__h { display: flex; align-items: center; gap: 8px; color: var(--ac); font-size: 13px; }
.ad-tr__h b { font-weight: 600; }
.ad-tr__h span { margin-left: auto; font-size: 12px; color: var(--mut-2); }
.ad-tr__orig { padding: 8px 10px; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--line-2); font-size: 13px; line-height: 1.5; color: var(--mut-2); white-space: pre-wrap; word-break: break-word; }
.ad-tr__ta { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ad-tr__base { padding-top: 6px; border-top: 1px solid var(--line); }
.ad-mc__tr { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--warn); }


/* ============================================================
   Фон (страница/блок) и поле цвета Coloris
   ============================================================ */
.ad-bg { display: flex; flex-direction: column; gap: 14px; }
.ad-bg__prev { height: 72px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.ad-bg__prev--img { height: 140px; box-shadow: none; border-radius: 0; }
.ad-bg__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ad-bg__val { font: 500 12px var(--mono); color: var(--mut-2); }
.ad-range { width: 100%; accent-color: var(--ac); }
.clr-field { display: block; position: relative; color: transparent; }
.clr-field .ad-color { padding-left: 40px; }
.clr-field button { left: 8px !important; right: auto !important; width: 24px !important; height: 24px !important; border-radius: 6px !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; }
.clr-picker { z-index: 1000; border-radius: 12px; box-shadow: var(--pop-shadow); font-family: var(--font); }

/* ── Инспектор блока: группы, метки настроек на холсте ── */
.ad-grp { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.ad-grp:last-child { border-bottom: none; padding-bottom: 0; }
.ad-grp__t { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mut-2); }
.ad-blk__sw { width: 18px; height: 18px; flex: none; border-radius: 5px; box-shadow: 0 0 0 1px var(--line) inset; }
.ad-blk__badge { height: 22px; padding: 0 7px; border-radius: 6px; background: var(--ac-tint); color: var(--ac); font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ad-blk__badge--mono { font-family: var(--mono); }
.ad-blk__head { min-width: 0; overflow: hidden; }

/* ── Модули-списки (FAQ, преимущества) ── */
.ad-li-list { display: flex; flex-direction: column; gap: 10px; }
.ad-li { padding: 8px 10px 10px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.ad-li__h { display: flex; align-items: center; gap: 2px; }
.ad-li__row { display: flex; gap: 8px; }
.ad-li__icon { width: 52px; flex: none; text-align: center; font-size: 18px; padding: 0 4px; }
.ad-pv__spacer { border-radius: 6px; background: repeating-linear-gradient(45deg, transparent 0 6px, var(--line) 6px 7px); box-shadow: 0 0 0 1px var(--line) inset; }
.ad-pv__faq { display: flex; flex-direction: column; }
.ad-pv__faq > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); }
.ad-pv__faq span { color: var(--ac); }
.ad-pv__feat { display: grid; gap: 10px; }
.ad-pv__feat > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ad-pv__feat b { width: 30px; height: 30px; border-radius: 8px; background: var(--ac-soft); color: var(--ac); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ad-pv__feat span { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* превью новых модулей */
.ad-pv__cards { display: grid; gap: 8px; }
.ad-pv__cards > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); font-size: 12px; }
.ad-pv__cards > div.is-hl { box-shadow: 0 0 0 2px var(--ac); }
.ad-pv__cards img, .ad-pv__cards i { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--img-ph-flat); }
.ad-pv__cards span { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-pv__cards b { font-size: 15px; color: var(--ink); }
.ad-pv__num { text-align: center; }
.ad-pv__num b { font-size: 20px; color: var(--ac); }
.ad-pv__num span { font-weight: 400; color: var(--mut-2); }
.ad-pv__quote { padding-left: 12px; border-left: 3px solid var(--ac); font-style: italic; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad-pv__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ad-pv__table th, .ad-pv__table td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-2); }
.ad-pv__table th { font-weight: 600; }
.ad-pv__social { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-pv__social span { height: 24px; padding: 0 9px; border-radius: 12px; background: var(--ac-soft); color: var(--ac); font-size: 12px; display: flex; align-items: center; }
.ad-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ad-select { appearance: auto; cursor: pointer; }
/* шаблоны секций, SEO */
.ad-addrow { display: flex; gap: 10px; }
.ad-addrow > .ad-addblk { flex: 1; }
.ad-addrow__tpl { position: relative; flex: 0 0 auto; }
.ad-addblk--tpl { padding: 0 22px; width: 100%; }
.ad-pal--tpl { left: auto; right: 0; top: auto; bottom: calc(100% + 6px); width: 340px; }
.ad-tpl { display: flex; align-items: center; gap: 2px; }
.ad-tpl .ad-pal__i { flex: 1; min-width: 0; }
.ad-tpl__n { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ad-tpl__n small { font-size: 11px; color: var(--mut-2); font-weight: 400; }
.ad-seo__count { font: 500 12px var(--mono); color: var(--mut-2); }
.ad-seo__count.is-over { color: var(--danger); }
.ad-seo__img img { max-height: 160px; }
.ad-pv__social span.is-empty { opacity: .5; }
/* Кнопка-обводка в поле инспектора — на всю ширину поля (иначе сжимается и съезжает) */
.ad-insp .ad-f > .ad-b--line { width: 100%; justify-content: center; }
/* публикация */
.ad-pub__bar { height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.ad-pub__bar span { display: block; height: 100%; background: var(--ac); border-radius: 4px; transition: width .3s; }
.ad-pub__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.ad-pub__msg { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.5; }
.ad-pub__msg svg { flex: none; margin-top: 3px; }
.ad-pub__msg.is-ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.ad-pub__msg.is-err { background: var(--danger-bg); color: var(--danger); word-break: break-word; }
/* колонки в инспекторе блока; превью выравнивания на холсте */
.ad-colcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.ad-colcard .ad-colrow .ad-in { width: 72px; }
[data-align="center"] { text-align: center; }
[data-align="right"] { text-align: right; }
[data-align="center"] .ad-pv__btn { align-self: center; }
[data-align="right"] .ad-pv__btn { align-self: flex-end; }
[data-align] .ad-mc__h { text-align: left; }
/* галерея: свои стрелки; преимущества: иконки-картинки */
.ad-arrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ad-arrow-up img, .ad-feat-ico img { object-fit: contain !important; padding: 6px; }
.ad-feat-emoji { font-size: 26px; line-height: 1; color: var(--ink); }
.ad-pv__feat b img { width: 22px; height: 22px; object-fit: contain; }
.ad-gi__fields .ad-b { align-self: flex-start; }
.ad-pxbox { display: flex; flex-direction: column; gap: 14px; padding: 12px; border-radius: 10px; background: var(--surf); box-shadow: 0 0 0 1px var(--line-2); }
/* текст: кнопка «Очистить стили» в панели */
.ad-tbar__sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.ad-tb--wide { width: auto; padding: 0 9px; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
/* карточки: ключевые слова фильтра */
.ad-tagchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-tagchip { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--mut);
  font: 500 12px var(--font); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ad-tagchip:hover { border-color: var(--ac); color: var(--ac); }
.ad-tagchip.is-on { background: var(--ac-soft); border-color: transparent; color: var(--ac); }
.ad-warn { color: var(--warn) !important; }
.ad-pv__cardbtn { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ac); }
/* перенос и резервные копии */
.ad-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
a.ad-b { text-decoration: none; }
.ad-import { line-height: 1.6; color: var(--ink-2); }
.ad-backups { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.ad-backup { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.ad-backup:hover { background: var(--fill); color: var(--ac); }
.ad-backup small { margin-left: auto; color: var(--mut-2); font-size: 12px; }
/* раздел «Сайт и модули»: левая колонка из нескольких панелей */
.ad-col-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* переключатель языка админки */
/* Язык интерфейса: выпадающее меню (i18n/index.js) */
.ad-langdd { position: relative; flex: none; }
.ad-brand__lang { margin-left: auto; }
.ad-brand__lang + .ad-brand__theme { margin-left: 0; }
.pj-lang { margin-left: auto; }
.ad-langdd__btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 7px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--ink-2); font: 600 11px var(--mono); letter-spacing: .03em; cursor: pointer; }
.ad-langdd__btn:hover, .ad-langdd__btn[aria-expanded="true"] { border-color: var(--ac); color: var(--ac); }
.ad-langdd__btn svg { flex: none; }
.ad-langdd__menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 170px; padding: 4px; border-radius: 10px;
  background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 0 0 1px var(--line); }
.pj-lang .ad-langdd__menu { left: auto; right: 0; }
.ad-langdd__menu[hidden] { display: none; }
.ad-langdd__i { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px;
  background: none; color: var(--ink-2); font: 400 14px var(--font); text-align: left; cursor: pointer; }
.ad-langdd__i:hover { background: var(--fill); }
.ad-langdd__i.is-on { color: var(--ac); font-weight: 500; }
.ad-langdd__i svg { margin-left: auto; }
.ad-langdd__code { width: 22px; font: 600 11px var(--mono); color: var(--mut-2); }
.ad-langdd__i.is-on .ad-langdd__code { color: var(--ac); }
/* иконка сайта */
.ad-fav { display: flex; gap: 12px; align-items: flex-start; }
.ad-fav__img { width: 64px; height: 64px; }
.ad-fav__img img { object-fit: contain !important; padding: 8px; }
.ad-fav__txt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* диалог ссылки в тексте */
.ad-tlink { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; padding: 12px; border-radius: 10px; background: var(--surf); box-shadow: 0 0 0 1px var(--line); }
.ad-tlink[hidden] { display: none; }
.ad-rich a { color: var(--ac); text-decoration: underline; }
/* ссылка «Все проекты» в сайдбаре; экран «проект переключён» */
.ad-nav__i--projects { margin-top: 6px; color: var(--mut-2); text-decoration: none; border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px; padding-top: 6px; height: 42px; }
.ad-gone { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--paper); }
.ad-gone__box { max-width: 460px; padding: 28px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
.ad-gone__box p { margin: 0; color: var(--mut-2); line-height: 1.5; }

/* ============================================================
   Стартовая страница: проекты
   ============================================================ */
.pj { min-height: 100vh; background: var(--paper); color: var(--ink); }
.pj-top { display: flex; align-items: center; gap: 10px; padding: 18px 32px; border-bottom: 1px solid var(--line); background: var(--panel); }
.pj-top__name { font-weight: 700; font-size: 15px; }
.pj-top__ver { font: 500 11px var(--mono); color: var(--mut-2); }
.pj-main { max-width: 1180px; margin: 0 auto; padding: 36px 32px 60px; display: flex; flex-direction: column; gap: 20px; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pj-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.pj-card.is-active { box-shadow: 0 0 0 2px var(--ac); }
.pj-card.is-missing { opacity: .8; }
.pj-card__top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.pj-card__mark { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ac-soft); color: var(--ac); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.pj-card__head { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-card__t { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-card__path { font: 400 12px var(--mono); color: var(--mut-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-card__meta { font-size: 12px; color: var(--mut-2); }
.pj-card__actions { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; }
.pj-badge { align-self: flex-start; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--ac-soft); color: var(--ac); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.pj-warn { color: var(--danger); }
.pj-new { min-height: 170px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: transparent; color: var(--mut); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font); }
.pj-new:hover { border-color: var(--ac); color: var(--ac); background: var(--ac-tint); }
.pj-new b { font-size: 15px; } .pj-new small { font-size: 12px; color: var(--mut-2); }
.pj-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pj-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 12, 16, .45); backdrop-filter: blur(2px); }
.pj-modal__box { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border-radius: 16px; background: var(--panel); box-shadow: var(--pop-shadow); display: flex; flex-direction: column; gap: 14px; }
.pj-modal__h { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 600; }
.pj-modal__hint { margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--mut-2); }
.pj-modal__f { margin-top: 4px; }
.pj-pathrow { display: flex; gap: 8px; }
.pj-pathrow .ad-in { flex: 1; min-width: 0; }
.pj-browse { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surf); box-shadow: 0 0 0 1px var(--line); }
.pj-browse__bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pj-browse__path { font: 500 12px var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pj-browse__roots { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-chip { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--mut); font: 500 12px var(--font); cursor: pointer; }
.pj-chip:hover { border-color: var(--ac); color: var(--ac); }
.pj-browse__list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 8px; background: var(--panel); }
.pj-dir { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border: none; border-radius: 6px; background: transparent; color: var(--ink-2); font: 400 13px var(--font); cursor: pointer; text-align: left; }
.pj-dir:hover { background: var(--fill); }
.pj-dir svg { color: var(--mut-2); flex: none; }
.pj-empty { padding: 10px; font-size: 13px; color: var(--mut-2); }
@media (max-width: 640px) { .pj-top, .pj-main { padding-left: 16px; padding-right: 16px; } }

/* ============================================================
   Медиатека и выбор картинки
   ============================================================ */
.md-tools { gap: 12px; }
.md-tools__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.md-tools__row .ad-segm { flex: 0 1 auto; }
.md-sum { font-size: 13px; color: var(--mut-2); }
.md-busy { font-size: 13px; font-weight: 600; color: var(--ac); }
.md-search { width: 220px; margin-left: auto; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.md-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; }
.md-thumb { position: relative; width: 100%; padding: 0; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: repeating-conic-gradient(var(--fill) 0 25%, var(--panel) 0 50%) 0 0 / 16px 16px; }
.md-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.md-file { font: 600 13px var(--mono); color: var(--mut-2); }
.md-card__b { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 8px; min-width: 0; }
.md-card__n { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-card__m { font: 400 11px var(--mono); color: var(--mut-2); }
.md-card__f { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.md-card__f .md-tag { margin-right: auto; }
.md-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--ac-soft); color: var(--ac); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.md-tag--free { background: var(--fill); color: var(--mut-2); }
.md-empty { padding: 28px; text-align: center; font-size: 13px; color: var(--mut-2); grid-column: 1 / -1; }
.md-cfg { display: flex; gap: 24px; flex-wrap: wrap; }
.md-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 12, 16, .45); backdrop-filter: blur(2px); }
.md-modal__box { width: min(820px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--pop-shadow); }
.md-modal__h { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.md-modal__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.md-modal__bar label { cursor: pointer; }
.md-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; overflow: auto; min-height: 120px; padding: 2px; }
.md-pick__i { display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; border: none; border-radius: 10px; background: var(--surf); box-shadow: 0 0 0 1px var(--line); cursor: pointer; overflow: hidden; text-align: left; font-family: var(--font); }
.md-pick__i:hover, .md-pick__i:focus-visible { box-shadow: 0 0 0 2px var(--ac); }
.md-pick__n { padding: 0 8px; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .md-search { width: 100%; margin-left: 0; } }

/* медиатека: папки, теги, выделение */
.md-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.md-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.md-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); }
.md-side__h { padding: 2px 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mut-2); }
.md-side__hint { margin-top: 10px; padding: 8px; font-size: 12px; line-height: 1.45; color: var(--mut-2); border-top: 1px solid var(--line-2); }
.md-fold { display: flex; align-items: center; border-radius: 8px; }
.md-fold:hover { background: var(--fill); }
.md-fold.is-on { background: var(--ac-tint); }
.md-fold.is-on .md-fold__b { color: var(--ac); font-weight: 600; }
.md-fold.is-drop { background: var(--ac-soft); box-shadow: 0 0 0 2px var(--ac) inset; }
.md-fold.is-edit { padding: 2px; }
.md-fold.is-edit .ad-in { height: 34px; }
.md-fold__b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 0; background: none; color: var(--ink-2); font: 400 14px var(--font); cursor: pointer; text-align: left; }
.md-fold__b span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-fold__b small { font: 500 11px var(--mono); color: var(--mut-2); }
.md-fold__b svg { flex: none; color: var(--mut-2); }
.md-fold__a { width: 26px; height: 26px; display: none; }
/* у папок с правкой кнопки появляются при наведении на месте счётчика — счётчики стоят ровно */
.md-fold:hover .md-fold__a, .md-fold:focus-within .md-fold__a { display: flex; }
.md-fold:hover .md-fold__b small:not(:only-child), .md-fold--edit:hover .md-fold__b small, .md-fold--edit:focus-within .md-fold__b small { display: none; }
.md-fold__new { display: flex; align-items: center; gap: 8px; height: 36px; margin-top: 4px; padding: 0 8px; border: 1px dashed var(--line-strong); border-radius: 8px; background: none; color: var(--mut); font: 500 13px var(--font); cursor: pointer; }
.md-fold__new:hover { border-color: var(--ac); color: var(--ac); }
.md-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.md-tags__l { font-size: 12px; color: var(--mut-2); margin-right: 2px; }
.md-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--ink-2); font: 500 12px var(--font); cursor: pointer; }
.md-chip small { color: var(--mut-2); font-weight: 400; }
.md-chip:hover { border-color: var(--ac); color: var(--ac); }
.md-chip.is-on { background: var(--ac); border-color: var(--ac); color: var(--on-ac); }
.md-chip.is-on small { color: inherit; opacity: .8; }
.md-chip--sm { height: 20px; padding: 0 3px 0 7px; font-size: 11px; cursor: default; background: var(--surf); }
.md-chip--sm:hover { border-color: var(--line); color: var(--ink-2); }
.md-chip--sm button { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mut-2); font-size: 13px; line-height: 1; cursor: pointer; }
.md-chip--sm button:hover { background: var(--danger-bg); color: var(--danger); }
.md-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.md-card.is-sel { box-shadow: 0 0 0 2px var(--ac); }
.md-card[draggable="true"] { cursor: grab; }
.md-check { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1.5px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity .12s; }
.md-thumb:hover .md-check, .md-card.is-sel .md-check { opacity: 1; }
.md-card.is-sel .md-check { background: var(--ac); box-shadow: none; }
.md-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ac-tint); box-shadow: 0 0 0 1px var(--ac-soft); }
.md-selbar b { font-size: 13px; color: var(--ac); margin-right: 4px; }
.md-selbar .ad-select { width: auto; height: 32px; }
.md-taginp { width: 200px; height: 32px; }
.md-selall { margin-left: auto; }
.md-card__m svg { vertical-align: -1px; }
@media (max-width: 1080px) { .md-layout { grid-template-columns: 1fr; } .md-side { position: static; } }

/* ── Коллекции (сайдбар, панель коллекции, поля записи) ── */
.ad-coll__h { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.ad-coll__h:hover, .ad-coll__h.is-on { background: var(--fill); }
.ad-coll__h .ad-ib { width: 26px; height: 26px; opacity: 0; }
.ad-coll__h:hover .ad-ib, .ad-coll__h.is-on .ad-ib, .ad-coll__h .ad-ib:focus-visible { opacity: 1; }
.ad-coll__t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 8px; border: none; background: transparent;
  color: var(--ink-2); font: 500 14px var(--font); cursor: pointer; text-align: left; }
.ad-coll__t svg { flex: none; color: var(--mut-2); }
.ad-coll__t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-coll__t small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--mut-2); }
.ad-coll__row { position: relative; display: flex; }
.ad-coll__row .ad-list__i { flex: 1; min-width: 0; }
.ad-coll__row .ad-list__i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-coll__mv { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; background: var(--ac-soft); border-radius: 7px; }
.ad-coll__row:has(.ad-coll__mv) small { visibility: hidden; }
.ad-list__i.is-draft span { color: var(--mut-2); font-style: italic; }
.ad-coll__draft { font-style: normal; color: var(--warn, #b26b00); }
.ad-coll-empty { padding: 4px 20px 8px; font-size: 12.5px; line-height: 1.5; color: var(--mut-2); }
.ad-linkbtn { padding: 0; border: none; background: none; color: var(--ac); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ad-linkbtn:hover { text-decoration: none; }
.ad-tagchip > button { margin: 0 -4px 0 6px; padding: 0 2px; border: none; background: none; color: inherit; font: 600 14px/1 var(--font); cursor: pointer; opacity: .7; }
.ad-tagchip > button:hover { opacity: 1; }
span.ad-tagchip { display: inline-flex; align-items: center; cursor: default; }

/* ── История: отмена/повтор в верхней панели, раздел «История» ── */
.ad-undo { display: flex; gap: 2px; margin-right: 4px; }
.ad-undo .ad-ib { width: 32px; height: 32px; color: var(--ink-2); }
.ad-undo .ad-ib:disabled { opacity: .35; cursor: default; background: transparent; }
.hs-save { display: flex; gap: 10px; }
.hs-save .ad-in { flex: 1; min-width: 0; }
.hs-list { gap: 4px; }
.hs-day + .hs-day { margin-top: 10px; }
.hs-day__t { padding: 4px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut-2); }
.hs-item { border-radius: 10px; }
.hs-item.is-open { background: var(--fill); }
.hs-item__h { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; border-radius: 10px; }
.hs-item__h:hover { background: var(--fill); }
.hs-item__h > .ad-ib { opacity: 0; }
.hs-item__h:hover > .ad-ib, .hs-item.is-open .hs-item__h > .ad-ib, .hs-item__h > .ad-ib:focus-visible { opacity: 1; }
.hs-time { flex: none; width: 46px; font: 500 13px var(--mono); color: var(--mut); }
.hs-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--ink-2); }
.hs-name > b, .hs-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-name > b { font-weight: 600; color: var(--ink); }
.hs-name small { flex: none; font-size: 12px; color: var(--mut-2); }
.hs-item.is-named .hs-time { color: var(--ac); }
.hs-rename { display: flex; gap: 8px; padding: 0 8px 10px 62px; }
.hs-rename .ad-in { flex: 1; }
.hs-diff { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 12px 62px; }
.hs-diff--muted { font-size: 13px; color: var(--mut-2); }
.hs-diff__h { font-size: 12px; color: var(--mut-2); padding: 2px 0 6px; }
.hs-row { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 13.5px; }
.hs-row__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hs-row__t em { font-style: normal; color: var(--mut-2); }
.hs-row__t small { color: var(--mut-2); }
.hs-note { font-size: 12px; color: var(--mut-2); }
.hs-chip { flex: none; min-width: 112px; text-align: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.hs-chip--changed { background: var(--ac-soft); color: var(--ac); }
.hs-chip--removed { background: color-mix(in srgb, #c0392b 14%, transparent); color: #c0392b; }
.hs-chip--added { background: color-mix(in srgb, #1f8a5b 14%, transparent); color: #1f8a5b; }
@media (max-width: 900px) {
  .hs-item__h { flex-wrap: wrap; }
  .hs-name { flex-basis: calc(100% - 60px); }
  .hs-diff, .hs-rename { padding-left: 8px; }
}

/* ── Предпросмотр сайта (preview.js) ── */
body.pv-open { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--bg, #f4f4f1); }
.pv-bar { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 56px; padding: 0 12px 0 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.pv-bar__l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pv-bar__l b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pv-addr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px var(--mono); color: var(--mut-2); }
.pv-bar__c { display: flex; align-items: center; gap: 8px; }
.pv-devs .ad-segm__o { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.pv-langs { min-width: 0; }
.pv-langs .ad-segm__o { padding: 0 10px; }
.pv-size { min-width: 110px; font: 500 12px var(--mono); color: var(--mut-2); white-space: nowrap; }
.pv-bar__r { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pv-bar__r .ad-ib { width: 34px; height: 34px; color: var(--ink-2); }
.pv-bar .ad-ib:disabled { opacity: .35; cursor: default; }
.pv-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow: hidden; }
.pv-fit { position: relative; flex: none; }
.pv-frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.14); border-radius: 8px; }
.pv-frame--tablet, .pv-frame--phone { border-radius: 22px; outline: 10px solid #1b1c1f; outline-offset: -1px; }
.pv-frame--phone { border-radius: 30px; }
.pv-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pv-wait { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px; background: var(--panel);
  box-shadow: var(--shadow-card); font-size: 13px; color: var(--mut); pointer-events: none; transition: opacity .2s; }
.pv.is-ready .pv-wait { opacity: 0; }
.pv-stage:has(.pv-frame--tablet), .pv-stage:has(.pv-frame--phone) { align-items: center; }
@media (max-width: 1100px) {
  .pv-bar { grid-template-columns: auto 1fr; height: auto; padding: 8px 12px; }
  .pv-bar__l { display: none; }
  .pv-devs .ad-segm__o span { display: none; }
  .pv-size { display: none; }
}

/* ── Стиль проекта (brand.js) ── */
.br { margin-bottom: 20px; }
.br-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.br-h > div:first-child { display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.br-h__r { display: flex; align-items: center; gap: 12px; flex: none; }
.br-h__r .ad-sw { gap: 10px; }
.br-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 24px; align-items: start; }
.br-grid.is-off .br-controls { opacity: .45; pointer-events: none; }
.br-controls { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.br-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.br-presets { align-items: center; }
.br-preset { position: relative; display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink-2); font: 500 13px var(--font); }
.br-preset:hover { border-color: var(--ac); }
.br-preset__b { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px 0 6px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.br-preset__b > span { display: inline-flex; gap: 3px; padding: 4px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); }
.br-preset i { width: 10px; height: 14px; border-radius: 3px; }
.br-preset__x { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--mut); font: 600 13px/1 var(--font); cursor: pointer; opacity: 0; transition: opacity .12s; }
.br-preset:hover .br-preset__x, .br-preset__x:focus-visible { opacity: 1; }
.br-preset__x:hover { color: #c0392b; border-color: #c0392b; }
.br-preset--add { padding: 0 12px; border-style: dashed; color: var(--mut); cursor: pointer; }
.br-preset--add:hover { color: var(--ac); }
.br-pal-add { display: inline-flex; align-items: center; gap: 6px; }
.br-pal-add .ad-in { width: 180px; }
.br-pal-restore { font-size: 12.5px; }
.br-font { position: relative; }
.br-font .ad-in { width: 100%; padding-right: 36px; }
.br-font__btn { position: absolute; top: 0; right: 0; width: 36px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--mut); cursor: pointer; }
.br-font__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; padding: 4px;
  border-radius: 10px; background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 0 0 1px var(--line); }
.br-font__list[hidden] { display: none; }
.br-font__i { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px;
  background: none; color: var(--ink-2); font: 400 14px var(--font); text-align: left; cursor: pointer; }
.br-font__i:hover, .br-font__i.is-hl { background: var(--fill); }
.br-font__i.is-on { color: var(--ac); font-weight: 500; }
.br-font__i--none { color: var(--mut); font-style: italic; }
.br-font__empty { padding: 8px 10px; font-size: 12.5px; color: var(--mut-2); }
.br-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.br-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.br-color__l { display: flex; flex-direction: column; min-width: 0; }
.br-color__l b { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.br-color__l small { font-size: 11.5px; color: var(--mut-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-color__in { display: flex; align-items: center; gap: 4px; flex: none; }
.br-color__in .clr-field { width: 130px; }
.br-theme { display: inline-flex; align-items: center; gap: 4px; width: 28px; font-size: 0; }
.br-theme i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); }
.br-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.br-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.br-sample { overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--b-paper); color: var(--b-ink);
  font-family: var(--b-font); font-size: var(--b-size); line-height: 1.55; }
.br-sample__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--b-panel); border-bottom: 1px solid var(--b-line); font-size: .85em; }
.br-sample__head b { margin-right: auto; font-family: var(--b-head); font-size: 1.1em; }
.br-sample__head span { color: var(--b-muted); }
.br-sample__head span.is-on { color: var(--b-accent); font-weight: 600; }
.br-sample__body { padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.br-sample__h { font-family: var(--b-head); font-size: 1.6em; font-weight: 700; line-height: 1.2; }
.br-sample p { margin: 0; }
.br-sample a { color: var(--b-accent); text-decoration: underline; }
.br-sample__muted { color: var(--b-muted); }
.br-sample__row { display: flex; align-items: stretch; gap: 12px; margin-top: 4px; }
.br-sample__btn { align-self: center; padding: 9px 16px; border-radius: var(--b-radius); background: var(--b-accent); color: #fff; font-weight: 600; font-size: .9em; white-space: nowrap; }
.br-sample__card { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--b-radius); background: var(--b-panel); border: 1px solid var(--b-line); font-size: .85em; }
.br-sample__card span { color: var(--b-muted); }
.br-warn { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  background: color-mix(in srgb, #b26b00 12%, transparent); color: #8a5300; }
:root[data-theme="dark"] .br-warn { color: #f0b45a; }
@media (max-width: 1100px) {
  .br-grid { grid-template-columns: 1fr; }
  .br-side { position: static; }
  .br-colors { grid-template-columns: 1fr; }
  .br-h { flex-direction: column; }
}
.br-warn[hidden] { display: none; }

/* ── Сайдбар: язык и тема над разделами, группа «Настройки сайта» ── */
.ad-tools { display: flex; gap: 6px; padding: 0 10px 8px; }
.ad-tools__lang { flex: 1; min-width: 0; }
.ad-tools__lang .ad-langdd__btn, .ad-tools__btn { width: 100%; height: 32px; padding: 0 10px; gap: 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink-2); font: 500 13px var(--font); letter-spacing: 0; cursor: pointer; display: inline-flex; align-items: center; }
.ad-tools__lang .ad-langdd__btn span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-tools__btn { width: auto; flex: none; margin: 0; }
.ad-tools__btn:hover { border-color: var(--ac); color: var(--ac); }
.ad-tools__lang .ad-langdd__menu { right: 0; }
.ad-nav__group .ad-nav__chev { margin-left: auto; opacity: .6; }
.ad-nav__sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 2px 17px; padding-left: 8px; border-left: 1px solid var(--line-2, var(--line)); }
.ad-nav__i--sub { height: 32px; font-size: 13.5px; }
.ad-segm__o--ico { display: inline-flex; align-items: center; justify-content: center; }
.ad-padrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ad-padin { display: flex; align-items: center; height: 36px; border: 1px solid var(--line); border-radius: var(--r-8, 8px); background: var(--panel); overflow: hidden; }
.ad-padin:focus-within { border-color: var(--ac); }
.ad-padin span { display: flex; align-items: center; justify-content: center; width: 30px; color: var(--mut-2); }
.ad-padin input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ink); font: 500 13px var(--mono); outline: none; }
.ad-padin em { padding: 0 10px; font-style: normal; font-size: 12px; color: var(--mut-2); }

/* ── «Вкладки» на холсте: переключатель и вложенный конструктор ── */
.ad-tabs { margin-top: 4px; cursor: default; }
.ad-tabs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ad-tabs__tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--mut); font: 500 13px var(--font); cursor: pointer; }
.ad-tabs__tab:hover { color: var(--ink); }
.ad-tabs__tab.is-on { background: var(--ac-soft); border-color: transparent; color: var(--ac); }
.ad-tabs__tab small { font-size: 11px; opacity: .7; }
.ad-tabs__add { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 8px;
  background: none; color: var(--mut); cursor: pointer; }
.ad-tabs__add:hover { color: var(--ac); border-color: var(--ac); }
.ad-tabs--v { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.ad-tabs--v .ad-tabs__list { flex-direction: column; align-items: stretch; padding: 0 12px 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
.ad-tabs--v .ad-tabs__tab { justify-content: space-between; }
.ad-tabs__body { padding-top: 12px; }
.ad-tabs--v .ad-tabs__body { padding-top: 0; }
.ad-tabs__blocks { display: flex; flex-direction: column; gap: 12px; }
.ad-tabs .ad-blk { box-shadow: none; border: 1px solid var(--line); }
.ad-tabs .ad-addrow { margin-top: 10px; }

/* Конфликт сохранения: поверх админки, правки на экране остаются (можно скопировать) */
.ad-gone--float { position: fixed; inset: 0; z-index: 99990; min-height: 0; background: rgba(20,20,24,.45); }

/* ── Обновление движка (страница «Проекты») ── */
.pj-upd { border-radius: 14px; background: var(--ac-tint); box-shadow: 0 0 0 1px var(--ac-ring); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pj-upd__h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--ac); }
.pj-upd__h > div:not(.pj-upd__act) { display: flex; flex-direction: column; gap: 2px; color: var(--ink); min-width: 0; flex: 1; }
.pj-upd__h small { color: var(--mut-2); font-size: 13px; }
.pj-upd__act { display: flex; gap: 8px; flex: none; }
.pj-upd__notes { padding: 4px 4px 2px 30px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pj-upd__notes p { margin: 8px 0 4px; font-weight: 600; }
.pj-upd__notes ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pj-upd__notes code { font: 12px var(--mono); background: var(--fill); padding: 1px 4px; border-radius: 4px; }
.pj-updp { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.pj-updp__row { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.pj-sw { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.pj-busy { align-items: center; text-align: center; padding: 32px 22px; }
.pj-busy small { color: var(--mut-2); }
.pj-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ac-soft); border-top-color: var(--ac); animation: pj-spin .8s linear infinite; }
@keyframes pj-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .pj-upd__act { width: 100%; } .pj-upd__notes { padding-left: 4px; } }
.ad-nav__upd { color: var(--ac); font-weight: 600; }
.ad-nav__upd:hover { background: var(--ac-tint); }

/* ── Проект на сервере: плашка вверху админки (правки с другого компьютера) ── */
.ad-syncbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: color-mix(in srgb, var(--warn) 16%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--ink); flex-wrap: wrap; }
.ad-syncbar > svg { flex: none; color: var(--warn); }
.ad-syncbar__t { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.ad-syncbar__t span { color: var(--mut); font-size: 13px; }
.ad-syncbar__a { display: flex; align-items: center; gap: 8px; }
.ad-syncbar__force { color: var(--danger); box-shadow: 0 0 0 1px var(--danger-line) inset; }
.ad-syncbar__busy { font-size: 13px; font-weight: 600; color: var(--mut); }
.ad-proj__st { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--fill); }
.pj-tab { flex: 1; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--mut); font: 500 13px var(--font); cursor: pointer; }
.pj-tab.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pj-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pj-row2:has(#pr-port) { grid-template-columns: minmax(0, 1fr) 96px; }
.pj-seg { display: flex; gap: 6px; }
.pj-chip.is-on { border-color: var(--ac); color: var(--ac); background: var(--ac-tint); }
.pj-found { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.pj-found > div { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.pj-found small { color: var(--mut-2); }
.pj-card.is-fresh { box-shadow: 0 0 0 2px var(--ok); }
@media (max-width: 520px) { .pj-row2 { grid-template-columns: 1fr; } }

/* ── Пользователи (веб-версия, «Настройки сайта → UCMS») ── */
.usr-list { display: flex; flex-direction: column; }
.usr-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.usr-row:first-child { border-top: 0; }
.usr-row__n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.usr-row__n b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.usr-row__n small { color: var(--mut-2); font-size: 12px; }
.usr-add { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; }
@media (max-width: 720px) { .usr-add { grid-template-columns: 1fr 1fr; } }
.usr-log { display: flex; flex-direction: column; max-height: 360px; overflow: auto; font-size: 12.5px; border-top: 1px solid var(--line); }
.usr-log__i { display: grid; grid-template-columns: 120px minmax(60px, 140px) 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.usr-log__i.is-bad { color: var(--danger); }
.usr-log__ip { color: var(--mut-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 720px) { .usr-log__i { grid-template-columns: 1fr 1fr; } }
.usr-add--3 { grid-template-columns: 1fr 1fr auto; }
.key-new { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--ac-soft, rgba(80,110,240,.1)); }
.key-new b { font-weight: 500; color: var(--ink); }
.key-new .ad-in { font-size: 12.5px; }
.ad-brand__srv { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ad-brand__srv svg { flex: none; }
.pj-badge--srv { background: var(--surf, rgba(0,0,0,.05)); color: var(--mut-2); }
.pj-card--remote .pj-card__mark { color: var(--ac); }
.usr-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--surf, rgba(0,0,0,.03)); }
.usr-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.usr-perm { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.usr-perm input { margin: 3px 0 0; accent-color: var(--ac); flex: none; }
.usr-perm b { display: block; font-weight: 500; font-size: 13px; color: var(--ink); }
.usr-perm small { display: block; font-size: 11.5px; color: var(--mut-2); line-height: 1.35; }
.usr-perm.is-off { opacity: .55; cursor: default; }
.usr-perm--owner { padding-bottom: 8px; border-bottom: 1px solid var(--line); }