/* Переменные темы (CSS переменные) */
:root{
  --bg0:#FFFFFF;
  --bg1:#FFFFFF;
  --card:rgba(0,0,0,.03);
  --card2:rgba(0,0,0,.04);
  --stroke:rgba(0,0,0,.08);
  --stroke2:rgba(0,0,0,.14);
  --text:#101427;
  --muted:rgba(16,20,39,.70);
  --muted2:rgba(16,20,39,.52);
  --accent:#101427;
  --accent2:#101427;
  --good:#34D399;
  --warn:#FBBF24;
  --bad:#FB7185;
  --shadow:0 18px 60px rgba(15,18,30,.12);
  --radius:16px;
  --radius2:22px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  --ring:0 0 0 3px rgba(16,20,39,.18);
}

/* Анимации */
@keyframes floaty{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-2px)}
}

/* Системная тёмная тема (prefers-color-scheme) */
@media (prefers-color-scheme: dark){
  :root{
    --bg0:#070A12;
    --bg1:#0B1022;
    --card:rgba(255,255,255,.06);
    --card2:rgba(255,255,255,.09);
    --stroke:rgba(255,255,255,.10);
    --stroke2:rgba(255,255,255,.16);
    --text:#EAF0FF;
    --muted:rgba(234,240,255,.72);
    --muted2:rgba(234,240,255,.52);
    --accent:#7C5CFF;
    --accent2:#22D3EE;
    --shadow:0 18px 60px rgba(0,0,0,.45);
    --ring:0 0 0 3px rgba(124,92,255,.35);
  }
}

/* Явно выбранная тема (установка из админки) */
:root[data-theme="light"]{
  --bg0:#FFFFFF;
  --bg1:#FFFFFF;
  --card:rgba(0,0,0,.03);
  --card2:rgba(0,0,0,.04);
  --stroke:rgba(0,0,0,.08);
  --stroke2:rgba(0,0,0,.14);
  --text:#101427;
  --muted:rgba(16,20,39,.70);
  --muted2:rgba(16,20,39,.52);
  --shadow:0 18px 60px rgba(15,18,30,.12);
  --accent:#101427;
  --accent2:#101427;
  --ring:0 0 0 3px rgba(16,20,39,.18);
}

:root[data-theme="dark"]{
  --bg0:#070A12;
  --bg1:#0B1022;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.72);
  --muted2:rgba(234,240,255,.52);
  --shadow:0 18px 60px rgba(0,0,0,.45);
}

/* Базовый reset и дефолтные стили документа */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}

/* Контейнер приложения */
#app{min-height:100%}

/* Общие вспомогательные классы для лейаута */
.wrap{
  width:min(1200px, calc(100% - 32px));
  margin:0 auto;
}

/* Каркас админки */
.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:18px;
  padding:18px;
}

@media (max-width: 980px){
  .shell{grid-template-columns:1fr;}
}

/* Базовые панели/карточки (админка) */
.panel{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Сайдбар (админка) */
.sidebar{padding:14px}

/* Блок бренда/логотипа (админка) */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(124,92,255,.18), rgba(34,211,238,.06));
  border:1px solid rgba(124,92,255,.25);
}

.brandMark{
  width:38px;height:38px;
  border-radius:14px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), transparent 55%),
             linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 10px 30px rgba(124,92,255,.28);
  animation: floaty 7.5s ease-in-out infinite;
}

.brandTitle{font-weight:800; letter-spacing:.2px; font-size:14px}
.brandSub{font-size:12px; color:var(--muted)}

/* Навигация (админка) */
.nav{margin-top:14px; display:grid; gap:6px}
.nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--muted);
}
.nav a:hover{background:rgba(255,255,255,.05); color:var(--text)}
.nav a.active{background:rgba(124,92,255,.14); border-color:rgba(124,92,255,.30); color:var(--text)}

/* Бейджи */
.badge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  color:var(--muted);
}

/* Основная область (админка) */
.main{
  padding:14px;
}

/* Верхняя панель (админка) */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
}

/* Текст верхней панели */
.topbarTitle{font-weight:750}
.topbarMeta{font-size:12px; color:var(--muted)}

/* Вспомогательный flex-ряд */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* Кнопки */
.btn{
  appearance:none;
  border:1px solid var(--stroke2);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  color:var(--text);
  padding:10px 14px;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(15,18,30,.10);
  transition: transform .10s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
  position:relative;
  overflow:hidden;
}

/* Кнопки: переливание (блик) */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,.70) 50%, rgba(34,211,238,.38) 60%, transparent 78%);
  transform: translateX(-120%) skewX(-20deg);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* Кнопки: анимация переливания */
@keyframes btnShimmer{
  0%{transform: translateX(-120%) skewX(-20deg)}
  100%{transform: translateX(220%) skewX(-20deg)}
}

@media (hover:hover) and (pointer:fine){
  .btn:hover::after{opacity:1; animation: btnShimmer 1.05s linear infinite}
}

@media (prefers-reduced-motion: reduce){
  .btn:hover::after{animation:none}
}
.btn:hover{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.22); box-shadow:0 16px 36px rgba(15,18,30,.12)}
.btn:active{transform: translateY(1px) scale(.99); filter:saturate(.98)}

/* Кнопки: варианты */
.btn.primary{
  position:relative;
  border-color:rgba(124,92,255,.55);
  background:linear-gradient(180deg, rgba(124,92,255,.92), rgba(124,92,255,.62));
  box-shadow:0 18px 50px rgba(124,92,255,.22);
}
.btn.primary::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 58%);
  opacity:.7;
  pointer-events:none;
}
.btn.primary:hover{box-shadow:0 22px 60px rgba(124,92,255,.28); filter:saturate(1.06)}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.12)}
.btn:focus{outline:none; box-shadow:var(--ring)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}

/* Поля ввода */
.input{
  width:100%;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
}
.input:focus{outline:none; box-shadow:var(--ring); border-color:rgba(124,92,255,.55)}

/* Прогрессивное улучшение: color-mix для более красивых акцентов */
@supports (color: color-mix(in srgb, white 50%, black)){
  .brandMark{
    box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 35%, transparent);
  }

  .nav a.active{
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  }

  .btn.primary{
    border-color:color-mix(in srgb, var(--accent) 55%, transparent);
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white 0%), color-mix(in srgb, var(--accent) 62%, transparent));
    box-shadow:0 18px 50px color-mix(in srgb, var(--accent) 26%, transparent);
  }
}

/* Общие сетки/секции */
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}}

.section{
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
}

/* Заголовки/лейблы секций */
.h{
  margin:0;
  font-size:13px;
  letter-spacing:.2px;
  color:var(--muted);
  text-transform:uppercase;
}

/* Таблицы */
.table{width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:8px}
.table th{font-size:12px; color:var(--muted); font-weight:650; text-align:left; padding:0 10px}
.table td{
  padding:12px 10px;
  background:rgba(255,255,255,.04);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.table tr td:first-child{border-left:1px solid var(--stroke); border-top-left-radius:16px; border-bottom-left-radius:16px}
.table tr td:last-child{border-right:1px solid var(--stroke); border-top-right-radius:16px; border-bottom-right-radius:16px}

/* Подсказки клавиш */
.kbd{font-family:var(--mono); font-size:12px; padding:2px 6px; border-radius:8px; border:1px solid var(--stroke2); color:var(--muted)}

/* Уведомления (toast) */
.toastWrap{
  position:fixed;
  right:14px;
  bottom:14px;
  display:grid;
  gap:10px;
  width:min(380px, calc(100% - 28px));
  z-index:1000;
}

.toast{
  padding:12px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
}

/* Редактор (админка) */
.editorToolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
}

.toolBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  color:var(--muted);
}
.toolBtn:hover{color:var(--text); background:rgba(255,255,255,.06)}

/* Поле редактора */
.editor{
  margin-top:10px;
  min-height:320px;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--stroke2);
  background:rgba(0,0,0,.10);
  outline:none;
}

.editor:focus{box-shadow:var(--ring); border-color:rgba(124,92,255,.55)}

.editor img{max-width:100%; border-radius:14px; border:1px solid var(--stroke)}
.editor img.editorImgSelected{outline:2px solid rgba(124,92,255,.85); outline-offset:2px}

/* Редактор: хендлы для ресайза изображений */
.editorImgHandle{
  position:fixed;
  width:14px;
  height:14px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg, rgba(124,92,255,.95), rgba(124,92,255,.55));
  box-shadow:0 10px 22px rgba(0,0,0,.30);
  cursor:nwse-resize;
  z-index:2000;
  touch-action:none;
}

@media (prefers-color-scheme: light){
  .editor img.editorImgSelected{outline-color: rgba(124,92,255,.95)}
  .editorImgHandle{border-color: rgba(0,0,0,.12)}
}

/* Разделители / пилюли */
.hr{height:1px; background:var(--stroke); margin:12px 0}

.pill{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke2); color:var(--muted)}
.pill.good{border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.10); color:var(--text)}
.pill.warn{border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.10); color:var(--text)}
.pill.bad{border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.10); color:var(--text)}

/* Публичная часть: общий лейаут */
.publicWrap{padding:18px 12px}
.publicWrap{position:relative}
.publicWrap::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(124,92,255,.12), transparent 62%),
    radial-gradient(740px 460px at 82% 12%, rgba(34,211,238,.10), transparent 58%),
    radial-gradient(680px 420px at 40% 92%, rgba(16,20,39,.06), transparent 60%);
  pointer-events:none;
  z-index:-1;
}

@media (max-width: 720px){
  .publicWrap::before{content:none; background:none}
  .siteHeader{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg0)}
  .publicCard{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg0)}
}
/* Публичная часть: шапка/верхняя навигация */
.siteHeader{
  position:relative;
  z-index:1500;
  border-bottom:1px solid var(--stroke);
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.siteHeader{background:rgba(255,255,255,.72)}
.siteHeader::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,92,255,.28), rgba(34,211,238,.18), transparent);
  pointer-events:none;
}
.publicWrap .btn,
.siteHeader .btn{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  padding:10px 14px;
  box-shadow:0 12px 34px rgba(15,18,30,.10);
  transition: transform .10s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}
.publicWrap .btn:hover,
.siteHeader .btn:hover{background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.24); box-shadow:0 18px 44px rgba(15,18,30,.12)}
.publicWrap .btn:active,
.siteHeader .btn:active{transform: translateY(1px) scale(.99); filter:saturate(.98)}

.publicWrap .btn.primary,
.siteHeader .btn.primary{position:relative}
.publicWrap .btn.primary::before,
.siteHeader .btn.primary::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%);
  opacity:.65;
  pointer-events:none;
}
.publicWrap .btn.primary:hover,
.siteHeader .btn.primary:hover{box-shadow:0 24px 64px rgba(124,92,255,.30); filter:saturate(1.08)}
.siteHeader.sticky{
  position:sticky;
  top:0;
}

/* Публичная часть: контейнер-карточка */
.publicCard{
  width:min(1080px, calc(100% - 16px));
  margin:0 auto;
  padding:22px;
  border-radius:26px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
  box-shadow:0 30px 90px rgba(15,18,30,.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.topNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:0;
  border:0;
  background:transparent;
}

.topNavBrand{font-weight:850; letter-spacing:-.2px}

.topNavLinks{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.topNavLinks .btn[aria-current="page"]{box-shadow:var(--ring)}

.navDrop{position:relative}
.navDrop > summary{list-style:none; cursor:pointer}
.navDrop > summary::-webkit-details-marker{display:none}
.navDrop[open] > summary{box-shadow:var(--ring); border-radius:14px}

.navDropParent{justify-content:flex-start}

/* Публичная часть: выпадающее меню */
.navDropMenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:240px;
  padding:10px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  box-shadow:var(--shadow);
  display:grid;
  gap:8px;
  z-index:100;
}

@media (max-width: 980px){
  .navDropMenu{left:0; right:auto}
}

/* Публичная часть: типографика и контент */
.publicTitle{margin:0 0 10px 0; font-size:clamp(28px, 3.2vw, 44px); letter-spacing:-1.2px; line-height:1.05}
.publicMeta{font-size:13px; color:var(--muted); margin-bottom:18px}
.publicContent{line-height:1.78; color:var(--text); font-size:16px}
.publicContent > :first-child{margin-top:0}
.publicContent h2{margin:22px 0 10px 0; font-size:22px; letter-spacing:-.6px}
.publicContent h3{margin:18px 0 8px 0; font-size:18px; letter-spacing:-.3px}
.publicContent p{margin:12px 0}
.publicContent a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(124,92,255,.35); transition:border-color .18s ease, color .18s ease, background .18s ease}
.publicContent a:hover{border-bottom-color:rgba(124,92,255,.70); color:color-mix(in srgb, var(--text) 84%, var(--accent) 16%)}
.publicContent img{max-width:100%; border-radius:16px; border:1px solid var(--stroke)}
.publicContent pre{padding:12px; border-radius:16px; border:1px solid var(--stroke); background:rgba(0,0,0,.16); overflow:auto}
.publicContent blockquote{margin:14px 0; padding:10px 14px; border-left:3px solid var(--stroke2); background:var(--card); border-radius:14px}

/* Публичная часть: блоки конструктора главной */
.bSec{margin-top:22px}
.bSecTitle{font-weight:880; letter-spacing:-.8px; font-size:clamp(18px, 2.2vw, 24px); margin:0 0 10px 0}
.bSecSub{color:var(--muted); margin:0 0 14px 0; max-width:72ch}

.bHero{padding:14px 0 0 0}
.bHeroTitle{margin:0; font-size:clamp(32px, 4.1vw, 52px); letter-spacing:-1.6px; line-height:1.02}
.bHeroSub{margin-top:12px; color:var(--muted); font-size:16px; line-height:1.72; max-width:70ch}
.bHeroBtns{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.bHeroMedia img{box-shadow:0 22px 70px rgba(15,18,30,.18)}

.bCard,
.bFaqItem,
.bPriceCard,
.bCol,
.bGalleryItem,
.bVideo{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.bCard,
.bPriceCard,
.bCol{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bCard:hover,
.bPriceCard:hover,
.bCol:hover{
  transform: translateY(-2px);
  border-color:rgba(124,92,255,.22);
  box-shadow:0 20px 60px rgba(15,18,30,.10);
}

.bFaqItem > summary{position:relative}
.bFaqItem > summary::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid rgba(16,20,39,.45);
  border-bottom:2px solid rgba(16,20,39,.45);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .16s ease, opacity .16s ease;
  opacity:.7;
}
.bFaqItem[open] > summary::after{transform: translateY(-35%) rotate(225deg); opacity:1}

/* Публичная часть: подстройки тёмной темы */
@media (prefers-color-scheme: dark){
  .siteHeader{background:rgba(11,16,34,.78)}
}

/* Админка: интерфейс */
/* Админка: редактор меню */
.menuEditor{display:grid; grid-template-columns: 360px 1fr; gap:14px}
@media (max-width: 980px){.menuEditor{grid-template-columns:1fr}}

.menuPane{padding:12px; border-radius:18px; border:1px solid var(--stroke); background:rgba(255,255,255,.03)}
@media (prefers-color-scheme: light){.menuPane{background:rgba(0,0,0,.02)}}

.menuSource{display:grid; gap:10px; margin-top:10px}
.menuSourceItem{padding:10px 12px; border-radius:14px; border:1px solid var(--stroke2); background:rgba(255,255,255,.04); cursor:grab}
.menuSourceItem:active{cursor:grabbing}

.menuTreeRoot{margin-top:10px}
.menuEmpty{padding:14px; border-radius:16px; border:1px dashed var(--stroke2); color:var(--muted)}

.menuItem{border:1px solid var(--stroke); border-radius:16px; background:rgba(255,255,255,.04); margin-top:10px; overflow:hidden}
.menuItemRow{display:flex; align-items:center; gap:10px; padding:10px 12px}
.menuDrag{width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--stroke2); color:var(--muted); cursor:grab; -webkit-user-select:none; user-select:none}
.menuItemText{flex:1; min-width:0}
.menuItemTitle{font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menuItemMeta{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menuItemActions{display:flex; gap:8px}
.menuChildren{padding:0 12px 12px 36px}

.menuLinkForm{display:grid; gap:10px; margin-top:10px}

/* Админка: конструктор главной */
.hbWrap{display:grid; grid-template-columns: 1fr 420px; gap:14px}
@media (max-width: 1100px){.hbWrap{grid-template-columns:1fr}}

.hbPane{padding:12px; border-radius:18px; border:1px solid var(--stroke); background:rgba(0,0,0,.02)}
@media (prefers-color-scheme: dark){.hbPane{background:rgba(255,255,255,.03)}}

.hbPalette{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px}
@media (max-width: 520px){.hbPalette{grid-template-columns:1fr}}

.hbTpl{justify-content:flex-start}

.hbTree{margin-top:10px; display:grid; gap:10px}
.hbBlock{border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.03); overflow:hidden}
@media (prefers-color-scheme: light){.hbBlock{background:rgba(0,0,0,.02)}}
.hbBlock.sel{box-shadow:var(--ring)}

.hbRow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; cursor:grab}
.hbRow:active{cursor:grabbing}
.hbRowMain{display:flex; align-items:center; gap:10px; min-width:0}
.hbHandle{width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--stroke2); color:var(--muted); -webkit-user-select:none; user-select:none}
.hbRowText{min-width:0}
.hbRowTitle{font-weight:750; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbRowMeta{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbRowActions{display:flex; gap:8px}

.hbColsWrap{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; padding:0 12px 12px 12px}
@media (max-width: 820px){.hbColsWrap{grid-template-columns:1fr}}

.hbColDrop{border-radius:16px; border:1px dashed var(--stroke2); padding:10px; background:rgba(0,0,0,.01)}
@media (prefers-color-scheme: dark){.hbColDrop{background:rgba(255,255,255,.02)}}
.hbColTitle{font-size:12px; color:var(--muted); margin-bottom:8px}

.hbField{display:grid; gap:8px; margin-top:10px}
.hbLabel{font-size:12px; color:var(--muted)}
.hbItems{display:grid; gap:10px}
.hbItem{padding:10px; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.03); display:grid; gap:10px}
@media (prefers-color-scheme: light){.hbItem{background:rgba(0,0,0,.02)}}
.hbItemHead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.hbEmpty{padding:12px; border-radius:16px; border:1px dashed var(--stroke2); color:var(--muted)}

.bSec{margin-top:18px}
.bSecTitle{font-weight:850; letter-spacing:-.4px; font-size:20px; margin:0 0 10px 0}
.bSecSub{color:var(--muted); margin:0 0 12px 0}

.bHero{padding:10px 0 0 0}
.bHeroInner{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:center}
@media (max-width: 920px){.bHeroInner{grid-template-columns:1fr}}
.bHeroTitle{margin:0; font-size:40px; letter-spacing:-1px}
@media (max-width: 720px){.bHeroTitle{font-size:30px}}
.bHeroSub{margin-top:10px; color:var(--muted); font-size:15px; line-height:1.6}
.bHeroBtns{margin-top:14px}
.bHeroMedia img{width:100%; border-radius:18px; border:1px solid var(--stroke); display:block}

.bCards{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
@media (max-width: 920px){.bCards{grid-template-columns:1fr}}
.bCard{border:1px solid var(--stroke); border-radius:18px; background:var(--card); padding:14px}
.bCardTitle{font-weight:800; letter-spacing:-.2px}
.bCardText{margin-top:8px; color:var(--muted); line-height:1.6}

.bFaq{display:grid; gap:10px}
.bFaqItem{border:1px solid var(--stroke); border-radius:18px; background:var(--card); overflow:hidden}
.bFaqItem > summary{padding:12px 14px; cursor:pointer; font-weight:750; list-style:none}
.bFaqItem > summary::-webkit-details-marker{display:none}
.bFaqBody{padding:0 14px 14px 14px; color:var(--muted)}

.bPricing{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
@media (max-width: 980px){.bPricing{grid-template-columns:1fr}}
.bPriceCard{border:1px solid var(--stroke); border-radius:18px; background:var(--card); padding:14px}
.bPriceHead{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.bPriceName{font-weight:800}
.bPriceVal{font-weight:900}
.bPriceList{margin:10px 0 0 18px; padding:0; color:var(--muted)}
.bPriceList li{margin:6px 0}

.bGallery{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px}
@media (max-width: 980px){.bGallery{grid-template-columns: repeat(2, minmax(0, 1fr))}}
.bGalleryItem{display:block; border-radius:18px; overflow:hidden; border:1px solid var(--stroke); background:var(--card)}
.bGalleryItem img{width:100%; height:160px; object-fit:cover; display:block}

.bForm{display:grid; gap:10px; max-width:640px}
.bFormNote{font-size:12px; color:var(--muted)}

.bContacts{display:grid; gap:10px}

.bCols{display:grid; gap:12px}
.bCols2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.bCols3{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width: 980px){.bCols2,.bCols3{grid-template-columns:1fr}}
.bCol{border:1px solid var(--stroke); border-radius:18px; background:var(--card); padding:12px}

.bVideo{border:1px solid var(--stroke); border-radius:18px; background:var(--card); overflow:hidden}
.bVideo iframe{width:100%; aspect-ratio: 16 / 9; border:0; display:block}

/* Админка: менеджер медиа */
.gallery{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}

@media (max-width: 980px){
  .gallery{grid-template-columns: repeat(2, 1fr)}
}

.mediaCard{
  border-radius:18px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  overflow:hidden;
}

.mediaThumb{
  aspect-ratio: 4 / 3;
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}

.mediaThumb img{width:100%; height:100%; object-fit:cover}

.mediaMeta{padding:10px; display:grid; gap:8px}
.mediaName{font-weight:750; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mediaSub{font-size:12px; color:var(--muted)}

/* Зона Drag & Drop */
.drop{
  margin-top:10px;
  padding:16px;
  border-radius:18px;
  border:1px dashed rgba(124,92,255,.55);
  background:rgba(124,92,255,.10);
  color:var(--muted);
}

.drop.drag{background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.55); color:var(--text)}

/* Модальные окна (публичная часть и админка) */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
  z-index:2000;
}

.modal{
  width:min(980px, 100%);
  max-height:min(82vh, 760px);
  overflow:auto;
  border-radius:26px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  box-shadow:var(--shadow);
  color:#101427;
  padding:14px;
}

.modal .h{color:rgba(16,20,39,.70)}

.cmsModalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  z-index:2100;
}

.cmsModal{
  width:min(980px, 100%);
  max-height:min(82vh, 760px);
  overflow:auto;
  border-radius:26px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  padding:14px;
}

.cmsModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.cmsModalBody{margin-top:12px}

.cmsMediaGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

.cmsMediaItem{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:10px;
  display:grid;
  gap:10px;
}

.cmsMediaItem img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--stroke);
}

.cmsMediaName{font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width: 920px){
  .cmsMediaGrid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

@media (max-width: 640px){
  .cmsMediaGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

/* Адаптивность */
@media (max-width: 720px){
  .shell{padding:12px; gap:12px}
  .sidebar{padding:12px}
  .main{padding:12px}
  .row{gap:8px}

  .topbar{flex-direction:column; align-items:flex-start}
  .topbar > .row{width:100%}

  .nav{grid-template-columns: 1fr 1fr; gap:8px}
  .nav a{padding:10px}

  .section{padding:10px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table td{padding:10px 8px}
  .table th{padding:0 8px}

  .editor{min-height:260px; padding:12px}

  .publicWrap{padding:12px 10px}
  .publicCard{padding:16px; border-radius:22px}
  .publicTitle{font-size:28px}

  .topNav{padding:8px 10px}
  .topNavBrand{width:100%}
  .topNavLinks{width:100%; justify-content:flex-start}
  .navDropMenu{min-width:min(240px, calc(100vw - 48px))}

  .modalOverlay{padding:12px}
  .modal{border-radius:22px; padding:12px; max-height:90vh}
  .cmsModalBackdrop{padding:12px}
  .cmsModal{border-radius:22px; padding:12px; max-height:90vh}
  .toastWrap{right:10px; bottom:10px}
}

@media (max-width: 420px){
  .publicTitle{font-size:24px}
  .btn{padding:10px 10px}
}

@media (max-width: 720px){
  .publicWrap::before{content:none !important; background:none !important}
  .siteHeader{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--bg0) !important}
  .publicCard{-webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--card) !important}
}