/* ==========================================================================
   admin.css — Этап 3D: редизайн админ-панели SEObox.
   Подключается ПОСЛЕ design-system.css/site.css — переопределяет только то,
   что относится к body.admin-page-active, поэтому изолирован и обратим:
   удаление этого файла вернёт админку к прежнему виду без побочных эффектов
   на остальной сайт.
   ========================================================================== */

/* ---------- Токены: светлая тема по умолчанию, переиспользуем фирменную
   бирюзово-фиолетовую палитру из design-system.css, не изобретаем новую. */
body.admin-page-active{
  --sba-bg:#F7F8FC;
  --sba-surface:#FFFFFF;
  --sba-surface-soft:#F0EEFF;
  --sba-text:#08142E;
  --sba-text-secondary:#5F6B85;
  --sba-border:#E3E7F0;
  --sba-cyan:#20C7D9;
  --sba-blue:#5C7CFA;
  --sba-violet:#8B5CF6;
  --sba-success:#22C55E;
  --sba-warning:#F59E0B;
  --sba-danger:#EF4444;
  --sba-grad:linear-gradient(135deg,var(--sba-cyan),var(--sba-blue) 55%,var(--sba-violet));
  --sba-radius-sm:10px;
  --sba-radius-md:12px;
  --sba-radius-lg:14px;
  --sba-shadow-sm:0 1px 3px rgba(8,20,46,0.06);
  --sba-shadow-md:0 4px 16px rgba(8,20,46,0.08);
  --sba-topbar-h:64px;
  --sba-side-w:252px;
  --sba-side-w-collapsed:72px;
  background:var(--sba-bg);
  color:var(--sba-text);
}

/* Публичный сайт рисует фон фиксированными body::before/body::after.
   У topbar есть собственный z-index, поэтому он оставался виден, а
   незафиксированная оболочка админки могла оказаться под этими слоями:
   получался ровно экран «одна шапка и пустой градиент». В админке эти
   декоративные слои не нужны — её фон задаётся токеном --sba-bg. */
body.admin-page-active::before,
body.admin-page-active::after{
  content:none!important;
  display:none!important;
}
html[data-theme="dark"] body.admin-page-active{
  --sba-bg:#0B1220;
  --sba-surface:#131B2E;
  --sba-surface-soft:#1B2540;
  --sba-text:#E8ECF5;
  --sba-text-secondary:#8B96AD;
  --sba-border:#232D45;
  --sba-cyan:#2DD4DD;
  --sba-blue:#7C93FF;
  --sba-violet:#A78BFA;
  --sba-success:#34D399;
  --sba-warning:#FBBF24;
  --sba-danger:#F87171;
  --sba-shadow-sm:0 1px 3px rgba(0,0,0,0.3);
  --sba-shadow-md:0 4px 16px rgba(0,0,0,0.4);
}

/* ---------- Скрываем маркетинговое окружение, как это уже сделано для
   body.app-page-active — та же логика, отдельный класс, чтобы не тянуть
   за собой app-специфичные style-правила (.app-nav, .app-side и т.д.),
   рассчитанные на другую структуру. */
body.admin-page-active footer{display:none}
body.admin-page-active nav:not(.ds-bottomnav){display:none}
body.admin-page-active .back-top,
body.admin-page-active .mobile-sticky-cta{display:none!important}

/* ---------- Общий сброс шума внутри админки ---------- */
body.admin-page-active #page-admin{
  font-family:var(--sb-font,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);
  font-size:14px;
  line-height:1.5;
  color:var(--sba-text);
  min-height:100vh;
  position:relative;
  z-index:1;
  isolation:isolate;
  background:var(--sba-bg);
}
body.admin-page-active #page-admin *{box-sizing:border-box}
body.admin-page-active #page-admin svg.ic{width:16px;height:16px;flex-shrink:0}

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.sba-topbar{
  position:sticky;top:0;z-index:40;
  height:var(--sba-topbar-h);
  display:flex;align-items:center;gap:16px;
  padding:0 20px;
  background:var(--sba-surface);
  border-bottom:1px solid var(--sba-border);
}
.sba-topbar-logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}
.sba-topbar-logo img{height:26px;display:block}
.sba-topbar-logo-text{font-weight:900;font-size:15px;color:var(--sba-text);white-space:nowrap}
.sba-topbar-logo-text span{color:var(--sba-violet)}
.sba-topbar-collapse-btn{
  width:34px;height:34px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);
  background:var(--sba-surface);color:var(--sba-text-secondary);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.sba-topbar-collapse-btn:hover{background:var(--sba-surface-soft);color:var(--sba-violet)}
.sba-topbar-crumb{
  flex:1;min-width:0;
  font-weight:700;font-size:14px;color:var(--sba-text-secondary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.sba-topbar-crumb b{color:var(--sba-text);font-weight:800}
.sba-topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sba-topbar-search{
  position:relative;display:flex;align-items:center;
  width:220px;height:38px;padding:0 12px;gap:8px;
  background:var(--sba-bg);border:1px solid var(--sba-border);border-radius:var(--sba-radius-sm);
  color:var(--sba-text-secondary);
}
.sba-topbar-search input{
  flex:1;border:none;background:none;outline:none;color:var(--sba-text);font-size:13px;min-width:0;
}
.sba-topbar-search input::placeholder{color:var(--sba-text-secondary)}
.sba-topbar-btn{
  height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);background:var(--sba-surface);
  color:var(--sba-text-secondary);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.sba-topbar-btn:hover{background:var(--sba-surface-soft);color:var(--sba-violet);border-color:var(--sba-violet)}
.sba-topbar-icon-btn{
  width:38px;height:38px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);background:var(--sba-surface);
  color:var(--sba-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.sba-topbar-icon-btn:hover{background:var(--sba-surface-soft);color:var(--sba-violet)}
.sba-topbar-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--sba-grad);color:#fff;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;
}
.sba-topbar-burger{display:none}

/* ==========================================================================
   ОБОЛОЧКА: sidebar + main
   ========================================================================== */
.sba-shell{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative;
  z-index:1;
  min-height:calc(100vh - var(--sba-topbar-h));
}
.sba-side{
  width:var(--sba-side-w);flex-shrink:0;
  background:var(--sba-surface);border-right:1px solid var(--sba-border);
  padding:16px 12px;overflow-y:auto;
  transition:width 0.18s ease;
  height:calc(100vh - var(--sba-topbar-h));position:sticky;top:var(--sba-topbar-h);
}
.sba-side.collapsed{width:var(--sba-side-w-collapsed)}
/* Ширина 1280 была зашита прямо здесь: на широком мониторе рабочая
   область упиралась в неё, а справа оставалось пустое поле. Отступы
   и ограничение ширины перенесены на .sba-main-inner. */
.sba-main{flex:1;min-width:0}
/* Прежнее правило резало рабочую область до 1400 px на широких экранах —
   отсюда и огромное пустое поле справа, о котором шла речь. Ограничение
   ширины теперь живёт на .sba-main-inner с центрированием: содержимое
   занимает доступное место, но строки не растягиваются бесконечно. */

/* Группы разделов */
.sba-grp{margin-bottom:4px}
.sba-grp-head{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--sba-radius-sm);
  cursor:pointer;user-select:none;color:var(--sba-text-secondary);font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.04em;
}
.sba-grp-head:hover{background:var(--sba-surface-soft)}
.sba-grp-ic{width:16px;height:16px;flex-shrink:0;color:var(--sba-text-secondary)}
.sba-grp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sba-grp-arr{transition:transform 0.15s ease;color:var(--sba-text-secondary)}
.sba-grp.open .sba-grp-arr{transform:rotate(180deg)}
.sba-grp-body{overflow:hidden;max-height:0;transition:max-height 0.18s ease}
.sba-grp.open .sba-grp-body{max-height:800px}
.sba-side.collapsed .sba-grp-name,
.sba-side.collapsed .sba-grp-arr{display:none}
.sba-side.collapsed .sba-grp-head{justify-content:center}
.sba-side.collapsed .sba-grp-body{max-height:none}

.sba-nav{
  display:flex;align-items:center;gap:10px;padding:9px 10px;margin:1px 0;border-radius:var(--sba-radius-sm);
  cursor:pointer;color:var(--sba-text);font-size:13.5px;font-weight:600;
  outline:none;
}
.sba-nav svg{color:var(--sba-text-secondary);flex-shrink:0}
.sba-nav span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sba-nav:hover{background:var(--sba-surface-soft);color:var(--sba-violet)}
.sba-nav:hover svg{color:var(--sba-violet)}
.sba-nav.active{background:var(--sba-surface-soft);color:var(--sba-violet);font-weight:800}
.sba-nav.active svg{color:var(--sba-violet)}
.sba-nav:focus-visible{outline:2px solid var(--sba-violet);outline-offset:1px}
.sba-side.collapsed .sba-nav span:first-of-type{display:none}
.sba-side.collapsed .sba-nav{justify-content:center}
.sba-nav-badge{
  background:var(--sba-danger);color:#fff;font-size:10px;font-weight:800;border-radius:8px;
  padding:1px 6px;flex-shrink:0;
}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.sba-side-backdrop{
  display:none;position:fixed;inset:0;background:rgba(8,20,46,0.5);z-index:49;
}
.sba-side-backdrop.open{display:block}
/* Порог приведён к 1199: до этой ширины меню админки выдвижное.
   Значение 1023 осталось от прежней раскладки и включало постоянную
   панель уже на 1024 — в середине планшетного диапазона, где для неё
   нет места. */
@media(max-width:1199px){
  .sba-side{
    position:fixed;top:0;left:0;height:100vh;z-index:50;
    width:min(360px,calc(100vw - 24px));
    transform:translateX(-100%);transition:transform 0.2s ease;
  }
  .sba-side.drawer-open{transform:translateX(0)}
  .sba-side.collapsed{width:min(360px,calc(100vw - 24px))}
  .sba-side.collapsed .sba-nav span:first-of-type,
  .sba-side.collapsed .sba-grp-name,
  .sba-side.collapsed .sba-grp-arr{display:block}
  .sba-side.collapsed .sba-nav,
  .sba-side.collapsed .sba-grp-head{justify-content:flex-start}
  .sba-topbar-collapse-btn{display:none}
  .sba-topbar-burger{
    display:flex;width:38px;height:38px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);
    background:var(--sba-surface);color:var(--sba-text-secondary);align-items:center;justify-content:center;cursor:pointer;
  }
  .sba-topbar-search{display:none}
  .sba-main{padding:16px}
}
.sba-drawer-head{display:none}
/* Порог приведён к 1199: до этой ширины меню админки выдвижное.
   Значение 1023 осталось от прежней раскладки и включало постоянную
   панель уже на 1024 — в середине планшетного диапазона, где для неё
   нет места. */
@media(max-width:1199px){
  .sba-drawer-head{
    display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px;
    border-bottom:1px solid var(--sba-border);margin-bottom:12px;
  }
  .sba-drawer-head h3{font-size:15px;font-weight:900;margin:0}
  .sba-drawer-close{
    width:32px;height:32px;border-radius:var(--sba-radius-sm);border:none;background:var(--sba-surface-soft);
    color:var(--sba-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
}

/* ==========================================================================
   ГЛАВНАЯ ОБЛАСТЬ: типографика, карточки, формы
   ========================================================================== */
.sba-page-title{font-size:28px;font-weight:900;margin:0 0 4px;color:var(--sba-text)}
@media(min-width:1200px){.sba-page-title{font-size:30px}}
.sba-page-sub{font-size:13.5px;color:var(--sba-text-secondary);margin:0 0 22px}

.sba-card{
  background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-lg);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--sba-shadow-sm);
}
.sba-card h3{font-size:15px;font-weight:800;margin:0 0 4px;color:var(--sba-text)}
.sba-card .sba-hint{font-size:12.5px;color:var(--sba-text-secondary);margin:0 0 16px;line-height:1.5}

.sba-field{margin-bottom:16px}
.sba-field label{display:block;font-size:12.5px;font-weight:700;color:var(--sba-text);margin-bottom:6px}
.sba-field .sba-field-desc{font-size:11.5px;color:var(--sba-text-secondary);margin:4px 0 0;line-height:1.5}
.sba-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

.sba-input,.sba-select,.sba-textarea{
  width:100%;height:42px;padding:0 14px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);
  background:var(--sba-bg);color:var(--sba-text);font-size:13.5px;font-family:inherit;outline:none;
}
.sba-textarea{height:auto;min-height:110px;padding:12px 14px;line-height:1.5;resize:vertical}
.sba-input:focus,.sba-select:focus,.sba-textarea:focus{border-color:var(--sba-violet);box-shadow:0 0 0 3px rgba(139,92,246,0.12)}
.sba-input::placeholder,.sba-textarea::placeholder{color:var(--sba-text-secondary)}

.sba-btn{
  height:42px;padding:0 18px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);
  background:var(--sba-surface);color:var(--sba-text);font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
}
.sba-btn:hover{background:var(--sba-surface-soft)}
.sba-btn-primary{background:var(--sba-grad);color:#fff;border:none}
.sba-btn-primary:hover{filter:brightness(1.06)}
.sba-btn-danger{color:var(--sba-danger);border-color:rgba(239,68,68,0.3)}
.sba-btn-danger:hover{background:rgba(239,68,68,0.08)}
.sba-btn:disabled{opacity:0.5;cursor:not-allowed}
.sba-btn:focus-visible,.sba-input:focus-visible,.sba-select:focus-visible,.sba-textarea:focus-visible{
  outline:2px solid var(--sba-violet);outline-offset:2px;
}

/* Sticky save-bar */
.sba-savebar{
  position:sticky;bottom:0;margin:20px -22px -20px;padding:14px 22px;
  background:var(--sba-surface);border-top:1px solid var(--sba-border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-radius:0 0 var(--sba-radius-lg) var(--sba-radius-lg);
}
.sba-savebar-status{font-size:12.5px;color:var(--sba-text-secondary);display:flex;align-items:center;gap:6px}
.sba-savebar-status.dirty{color:var(--sba-warning);font-weight:700}
.sba-savebar-status.saved{color:var(--sba-success);font-weight:700}

.sba-danger-zone{border-color:rgba(239,68,68,0.3);background:rgba(239,68,68,0.03)}

/* Бейджи источника данных (server-backed / local-only / placeholder) */
.sba-source-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:8px;margin-left:8px;vertical-align:middle;
}
.sba-source-server{background:rgba(34,197,94,0.12);color:#15803D}
.sba-source-local{background:rgba(245,158,11,0.14);color:#B45309}
.sba-source-placeholder{background:rgba(148,163,184,0.15);color:var(--sba-text-secondary)}
html[data-theme="dark"] .sba-source-server{color:#4ADE80}
html[data-theme="dark"] .sba-source-local{color:#FBBF24}

/* ==========================================================================
   ТАБЛИЦЫ / КАРТОЧКИ СПИСКОВ
   ========================================================================== */
.sba-table-wrap{overflow-x:auto}
.sba-table{width:100%;border-collapse:collapse;font-size:13px}
.sba-table th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:800;color:var(--sba-text-secondary);
  text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--sba-border);white-space:nowrap;
}
.sba-table td{padding:12px 14px;border-bottom:1px solid var(--sba-border);vertical-align:middle}
.sba-table tr:last-child td{border-bottom:none}
.sba-table tr:hover td{background:var(--sba-surface-soft)}
.sba-status-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;font-size:11.5px;font-weight:700;
}
.sba-status-new{background:rgba(245,158,11,0.14);color:#B45309}
.sba-status-done{background:rgba(34,197,94,0.12);color:#15803D}
.sba-status-default{background:var(--sba-surface-soft);color:var(--sba-text-secondary)}

/* Мобильные карточки вместо таблиц */
.sba-cards{display:none}
@media(max-width:767px){
  .sba-table-wrap{display:none}
  .sba-cards{display:flex;flex-direction:column;gap:10px}
  .sba-item-card{
    background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-md);
    padding:14px;
  }
  .sba-item-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
  .sba-item-card-title{font-weight:800;font-size:14px;color:var(--sba-text)}
  .sba-item-card-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sba-text-secondary);padding:3px 0}
  .sba-item-card-actions{display:flex;gap:8px;margin-top:10px}
  .sba-item-card-main-act{
    flex:1;height:44px;border-radius:var(--sba-radius-sm);border:none;background:var(--sba-grad);color:#fff;
    font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .sba-item-card-more{
    width:44px;height:44px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);
    background:var(--sba-surface);color:var(--sba-text-secondary);display:flex;align-items:center;justify-content:center;
  }
}

/* ==========================================================================
   ОБЗОР (Overview dashboard)
   ========================================================================== */
.sba-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.sba-kpi{
  background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-lg);
  padding:18px 20px;box-shadow:var(--sba-shadow-sm);cursor:pointer;
}
.sba-kpi:hover{border-color:var(--sba-violet)}
.sba-kpi-label{font-size:11.5px;font-weight:700;color:var(--sba-text-secondary);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:8px}
.sba-kpi-val{font-size:26px;font-weight:900;color:var(--sba-text)}
.sba-kpi-val.na{color:var(--sba-text-secondary);font-size:20px}

.sba-attn-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--sba-radius-sm);
  background:rgba(245,158,11,0.08);margin-bottom:8px;cursor:pointer;
}
.sba-attn-item:hover{background:rgba(245,158,11,0.14)}
.sba-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sba-quick-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:var(--sba-radius-md);
  border:1px solid var(--sba-border);background:var(--sba-surface);cursor:pointer;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--sba-text);
}
.sba-quick-btn:hover{border-color:var(--sba-violet);color:var(--sba-violet)}
.sba-quick-btn svg{color:var(--sba-violet)}

.sba-empty-note{
  padding:14px 16px;border-radius:var(--sba-radius-sm);background:var(--sba-surface-soft);
  color:var(--sba-text-secondary);font-size:12.5px;text-align:center;
}

/* ==========================================================================
   ГЛОБАЛЬНЫЙ ПОИСК АДМИНКИ
   ========================================================================== */
.sba-search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:360px;overflow-y:auto;
  background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-md);
  box-shadow:var(--sba-shadow-md);z-index:60;display:none;
}
.sba-search-results.open{display:block}
.sba-search-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:13px;color:var(--sba-text);
}
.sba-search-item:hover,.sba-search-item.active{background:var(--sba-surface-soft);color:var(--sba-violet)}
.sba-search-group{font-size:10.5px;font-weight:800;color:var(--sba-text-secondary);text-transform:uppercase;padding:8px 14px 4px}

.sba-admin-login-card{
  max-width:380px;margin:80px auto;padding:36px 32px;text-align:center;
  background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-lg);
  box-shadow:var(--sba-shadow-md);
}
.sba-admin-login-card h2{font-size:20px;font-weight:900;margin:14px 0 6px;color:var(--sba-text)}
.sba-admin-login-card p{font-size:13px;color:var(--sba-text-secondary);margin:0 0 8px;line-height:1.5}

/* Порог приведён к 1199: до этой ширины меню админки выдвижное.
   Значение 1023 осталось от прежней раскладки и включало постоянную
   панель уже на 1024 — в середине планшетного диапазона, где для неё
   нет места. */
@media(max-width:1199px){
  .sba-kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Таблицы → карточки на мобильных. Работает вместе с JS-постобработкой
   (admCardifyTables), которая проставляет data-label на <td> по тексту
   соответствующего <th> — не переписывает ни одну из ~21 функции,
   генерирующей .adm-table, только оформляет то, что уже отрисовано. */
@media(max-width:767px){
  .sba-main .adm-table thead{display:none}
  .sba-main .adm-table,.sba-main .adm-table tbody{display:block;width:100%}
  .sba-main .adm-table tr{
    display:block;margin-bottom:10px;border:1px solid var(--sba-border);border-radius:var(--sba-radius-md);
    padding:4px 12px;background:var(--sba-surface);
  }
  .sba-main .adm-table td{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--sba-border);text-align:right;
  }
  .sba-main .adm-table td:last-child{border-bottom:none}
  .sba-main .adm-table td[data-label]::before{
    content:attr(data-label);font-weight:700;color:var(--sba-text-secondary);font-size:11px;
    text-transform:uppercase;letter-spacing:0.03em;text-align:left;flex-shrink:0;
  }
  .sba-main .adm-table td.sba-td-actions{justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .sba-main .adm-table td.sba-td-actions::before{display:none}
  .sba-main .adm-table td.sba-td-actions .actions,
  .sba-main .adm-table td.sba-td-actions button{width:100%}
  .sba-main .adm-table td.sba-td-actions .actions{flex-direction:column;gap:8px}
  .sba-main .adm-table td.sba-td-actions .actions button{min-height:44px;font-size:13px}
}

/* ==========================================================================
   ПЕРЕОПРЕДЕЛЕНИЕ существующих .adm-* классов внутри новой оболочки.
   21 вкладка админки генерируют разметку через эти классы — переписывать
   каждую из 21 функции ради редизайна значило бы дублировать формы
   (прямо запрещено заданием). Вместо этого те же самые классы, что уже
   используются в разметке, получают новый внешний вид через каскад,
   строго ограниченный контейнером .sba-main — вне админки эти классы
   продолжают выглядеть как раньше (не трогаем остальной сайт). */
.sba-main .adm-panel{
  background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-lg);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--sba-shadow-sm);
}
.sba-main .adm-panel h3{font-size:15px;font-weight:800;margin:0 0 4px;color:var(--sba-text)}
.sba-main .adm-panel .hint{font-size:12.5px;color:var(--sba-text-secondary);margin:0 0 16px;line-height:1.5}
.sba-main .adm-field{margin-bottom:16px}
.sba-main .adm-field label{display:block;font-size:12.5px;font-weight:700;color:var(--sba-text);margin-bottom:6px}
.sba-main .adm-input,.sba-main .adm-textarea,.sba-main select{
  width:100%;height:42px;padding:0 14px;border-radius:var(--sba-radius-sm);border:1px solid var(--sba-border);
  background:var(--sba-bg);color:var(--sba-text);font-size:13.5px;font-family:inherit;outline:none;
}
.sba-main .adm-textarea{height:auto;min-height:110px;padding:12px 14px;line-height:1.5;resize:vertical}
.sba-main .adm-input:focus,.sba-main .adm-textarea:focus,.sba-main select:focus{
  border-color:var(--sba-violet);box-shadow:0 0 0 3px rgba(139,92,246,0.12);
}
.sba-main .adm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.sba-main .adm-row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.sba-main .adm-save{
  height:42px;padding:0 22px;border-radius:var(--sba-radius-sm);border:none;
  background:var(--sba-grad);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.sba-main .adm-save:hover{filter:brightness(1.06);box-shadow:none}
.sba-main .adm-save:focus-visible{outline:2px solid var(--sba-violet);outline-offset:2px}
.sba-main .adm-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  background:var(--sba-danger);color:#fff;border-radius:8px;font-size:11px;font-weight:900;margin-left:6px;
}
.sba-main label.adm-toggle{
  width:42px;height:24px;padding:0;background:var(--sba-border);border:none;border-radius:12px;
  position:relative;cursor:pointer;margin:0;flex-shrink:0;
}
.sba-main label.adm-toggle span{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.15s}
.sba-main label.adm-toggle.on{background:var(--sba-grad)}
.sba-main label.adm-toggle.on span{left:20px}
.sba-main .adm-toggle{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--sba-radius-sm);
  background:var(--sba-bg);border:1px solid var(--sba-border);margin-bottom:8px;
}
.sba-main .adm-table{width:100%;border-collapse:collapse;font-size:13px}
.sba-main .adm-table th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:800;color:var(--sba-text-secondary);
  text-transform:uppercase;letter-spacing:0.04em;border-bottom:1px solid var(--sba-border);background:transparent;
}
.sba-main .adm-table td{padding:12px 14px;border-bottom:1px solid var(--sba-border);color:var(--sba-text)}
.sba-main .adm-table tr:hover td{background:var(--sba-surface-soft)}
.sba-main .adm-toolbar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.sba-main .adm-toolbar input{
  flex:1;min-width:200px;height:42px;padding:0 14px;border-radius:var(--sba-radius-sm);
  background:var(--sba-bg);border:1px solid var(--sba-border);color:var(--sba-text);font-size:13.5px;
}
.sba-main .adm-add{
  height:42px;padding:0 18px;border-radius:var(--sba-radius-sm);background:var(--sba-grad);color:#fff;
  font-weight:700;font-size:13.5px;border:none;cursor:pointer;
}
.sba-main .adm-editor{background:var(--sba-bg);border:1px solid var(--sba-border);border-radius:var(--sba-radius-md);padding:18px;margin-bottom:16px}
.sba-main .adm-editor input,.sba-main .adm-editor textarea,.sba-main .adm-editor select{
  width:100%;padding:10px 14px;border-radius:var(--sba-radius-sm);background:var(--sba-surface);
  border:1px solid var(--sba-border);color:var(--sba-text);font-size:13.5px;font-family:inherit;margin-bottom:10px;
}
.sba-main .adm-editor textarea{min-height:90px;resize:vertical}
.sba-main .adm-editor label{display:block;font-size:12px;font-weight:700;color:var(--sba-text-secondary);margin-bottom:6px}
.sba-main .adm-editor-buttons{display:flex;gap:10px;margin-top:8px}
.sba-main .adm-editor-buttons button{padding:10px 18px;border-radius:var(--sba-radius-sm);font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--sba-border)}
.sba-main .adm-editor-buttons .save{background:var(--sba-grad);color:#fff;border:none}
.sba-main .adm-editor-buttons .cancel{background:var(--sba-surface);color:var(--sba-text-secondary)}
.sba-main .adm-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}
.sba-main .adm-stat{background:var(--sba-surface);border:1px solid var(--sba-border);border-radius:var(--sba-radius-md);padding:16px}
.sba-main .adm-stat .v{font-size:24px;font-weight:900;color:var(--sba-text)}
.sba-main .adm-stat .l{font-size:11.5px;font-weight:700;color:var(--sba-text-secondary);margin-top:4px}
.sba-main .actions{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}
.sba-main .actions button,.sba-main .adm-table .actions button{
  padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:700;
  border:1px solid var(--sba-border);background:var(--sba-surface);color:var(--sba-text);cursor:pointer;
}
.sba-main .actions button:hover{background:var(--sba-surface-soft);border-color:var(--sba-violet);color:var(--sba-violet)}
.sba-main .actions button.danger{color:var(--sba-danger)}
.sba-main .actions button.danger:hover{background:rgba(239,68,68,0.08);border-color:var(--sba-danger)}
@media(max-width:767px){
  .sba-main .adm-row,.sba-main .adm-row3,.sba-main .adm-stat-grid{grid-template-columns:1fr}
}

/* Состояние системы на Обзоре: строки «показатель — статус».
   Значения приходят с сервера, оформление нейтральное — цвет несёт
   смысл (работает / не настроено / ошибка), но не кричит. */
.sba-sys-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sba-sys-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px;
  background: var(--sb-surface-soft, rgba(148,163,184,0.06));
  border: 1px solid var(--sb-border, rgba(148,163,184,0.18));
  border-radius: 10px; font-size: 13.5px;
}
.adm-badge.ok   { background: rgba(34,197,94,0.14);  color: #15803d; }
.adm-badge.na   { background: rgba(100,116,139,0.14); color: #64748b; }
.adm-badge.warn { background: rgba(245,158,11,0.16); color: #b45309; }
.adm-badge.bad  { background: rgba(239,68,68,0.14);  color: #dc2626; }
/* На тёмном полупрозрачный белый ВЫСВЕТЛЯЕТ строку — тот же промах,
   что был в таблице позиций. Чередование должно затемнять. */
html[data-theme="dark"] .sba-sys-row { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .adm-badge.ok   { color: #4ade80; }
html[data-theme="dark"] .adm-badge.warn { color: #fbbf24; }
html[data-theme="dark"] .adm-badge.bad  { color: #f87171; }

/* ═══ Шапка админки на телефоне ═══
   Правая группа (На сайт · тема · уведомления · аватар · бургер)
   не помещается: на 320–390 её край уходил на 424 px. Прокрутки
   не возникало — элементы просто обрезались и становились
   недоступными, поэтому автоматическая проверка scrollWidth их
   не ловила. Именно так дефект и дожил до независимого аудита.

   Оставляем на телефоне только необходимое: подпись раздела,
   уведомления, аватар и бургер. «На сайт» и переключатель темы
   доступны в меню профиля и в выдвижной панели. */
@media (max-width: 767px) {
  .sba-topbar { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .sba-topbar-right { margin-left: auto; gap: 4px; flex-shrink: 0; }
  /* Скрытые кнопки не должны занимать место в потоке. */
  .sba-topbar-right .sba-topbar-btn,
  .sba-topbar-right .sba-theme-toggle { display: none; }
  .sba-topbar-left { min-width: 0; overflow: hidden; }
  .sba-topbar-left .sba-page-title,
  .sba-topbar-left .sba-crumb {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 15px;
  }
  .sba-topbar-avatar, .sba-topbar-icon-btn { width: 40px; height: 40px; flex-shrink: 0; }
  /* Ничто не должно выходить за экран. */
  #page-admin, .sba-shell, .sba-topbar, .sba-main { max-width: 100vw; }
  .sba-main { overflow-x: hidden; }
}

/* Подтверждение опасного действия в админке. Заменяет браузерный
   confirm(): тот выглядит системным предупреждением, не показывает
   последствий и не различает «очистить черновик» и «удалить
   пользователя». */
.adm-confirm-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(15,20,32,0.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.adm-confirm{
  background:var(--sba-surface,#fff);border:1px solid var(--sba-border,rgba(148,163,184,0.22));
  border-radius:14px;padding:22px;max-width:440px;width:100%;
  box-shadow:0 18px 48px rgba(15,23,42,0.22);
}
.adm-confirm-title{font-size:17px;font-weight:800;margin-bottom:8px;}
.adm-confirm-title.danger{color:#dc2626;}
.adm-confirm-text{font-size:13.5px;color:var(--sba-muted,#64748b);line-height:1.5;margin-bottom:12px;}
.adm-confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;}
.adm-confirm .ws-btn.danger{background:#dc2626;border-color:#dc2626;color:#fff;}
.adm-confirm .ws-btn[disabled]{opacity:.5;cursor:not-allowed;}
html[data-theme="dark"] .adm-confirm{background:#171F2E;border-color:rgba(255,255,255,0.12);}

/* ═══ Вариант 6: раскладка Обзора ═══
   Блоки шли одной колонкой сверху вниз — экран вытягивался на 1700 px,
   и «Состояние системы» оказывалось ниже сгиба, хотя это первое,
   что администратор хочет видеть. Раскладываем в две колонки:
   слева работа, справа состояние и быстрые действия. */
@media (min-width: 1200px) {
  .sba-ov-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    gap: 16px;
    align-items: start;
  }
  .sba-ov-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}
@media (max-width: 1199px) {
  .sba-ov-grid { display: flex; flex-direction: column; gap: 14px; }
  .sba-ov-col  { display: flex; flex-direction: column; gap: 14px; }
}

/* Единый вид карточек: один фон, одна граница, один радиус.
   Раньше в админке соседствовали панели с разными радиусами и тенями. */
.sba-card, .adm-panel {
  background: var(--sba-surface, #fff);
  border: 1px solid var(--sba-border, rgba(148,163,184,0.18));
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.sba-card h3, .adm-panel h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 800; margin-bottom: 4px;
}
.sba-card-ic { width: 16px; height: 16px; color: var(--sba-violet, #8B5CF6); }
.sba-card-ic.warn { color: #d97706; }
.sba-page-sub { font-size: 13px; color: var(--sba-muted, #64748b); margin-top: 2px; }

html[data-theme="dark"] .sba-card,
html[data-theme="dark"] .adm-panel {
  background: #171F2E;
  border-color: #2A3548;
  box-shadow: none;
}

/* ═══ Кнопки админки ═══
   Админка использовала классы кабинета (.ws-btn, .ws-btn-sm), но их
   переменные --ws-* объявлены внутри .ws-shell, а админка вне этой
   оболочки. Переменные не разрешались, и кнопка получала пустой фон
   и пустой цвет текста: в разметке она есть, на экране — невидима.
   Так «Отмена» в окне подтверждения и шесть из семи вкладок CMS
   выглядели пустыми.

   Свои классы на своих переменных — админка больше не зависит
   от каскада чужой оболочки. */
.sba-btn, .sba-btn-sm {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; white-space: nowrap; font-weight: 600;
  border-radius: 10px; border: 1px solid var(--sba-border, rgba(148,163,184,0.28));
  background: var(--sba-surface, #fff); color: var(--sba-text, #0f172a);
  transition: background .15s, border-color .15s, color .15s;
}
.sba-btn    { padding: 10px 16px; font-size: 14px; }
.sba-btn-sm { padding: 7px 12px;  font-size: 13px; }
.sba-btn:hover, .sba-btn-sm:hover { border-color: var(--sba-violet, #8B5CF6); }

.sba-btn-primary, .sba-btn-sm.sba-btn-primary {
  background: var(--sba-violet, #8B5CF6); border-color: transparent; color: #fff;
}
.sba-btn-primary:hover { background: #7c3aed; }
/* «Отмена» должна быть видимой кнопкой, а не текстом на фоне окна:
   прозрачный фон делал её неразличимой — проверка это и поймала. */
.sba-btn-secondary {
  background: var(--sba-surface-2, #f1f5f9);
  border-color: var(--sba-border, rgba(148,163,184,0.32));
  color: var(--sba-text, #0f172a);
}
html[data-theme="dark"] .sba-btn-secondary { background: #1D2637; color: #e2e8f0; }
.sba-btn-danger {
  background: var(--sba-danger, #EF4444); border-color: transparent; color: #fff;
}
.sba-btn-danger:hover { background: #dc2626; }
.sba-btn[disabled], .sba-btn-sm[disabled] { opacity: .5; cursor: not-allowed; }

html[data-theme="dark"] .sba-btn,
html[data-theme="dark"] .sba-btn-sm {
  background: #1D2637; border-color: #2A3548; color: #e2e8f0;
}
html[data-theme="dark"] .sba-btn-primary { background: var(--sba-violet, #8B5CF6); color: #fff; }
html[data-theme="dark"] .sba-btn-danger  { background: #EF4444; color: #fff; }

/* Публичный баннер cookie не должен перекрывать рабочий интерфейс
   администратора: он адресован посетителю сайта. На публичных
   страницах и в кабинете остаётся как был. */
body.admin-page-active .cookie-banner { display: none !important; }

/* ═══ Защита оболочки админки ═══
   В рабочей среде что-то приводит .sba-side и .sba-main к display:none —
   источник найти не удалось, он вне этой сборки. Правило ниже перебивает
   его для АКТИВНОЙ админки и только там: публичные страницы, кабинет
   и мобильное меню не затрагиваются.

   Это не маскировка причины: без такой защиты одно чужое правило
   оставляет администратора перед белым экраном, и вернуть его нечем. */
@media (min-width: 1200px) {
  body.admin-page-active #page-admin.active .sba-shell {
    display: flex !important;
  }
  body.admin-page-active #page-admin.active .sba-side {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body.admin-page-active #page-admin.active .sba-main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
  }
}

/* На узкой ширине панель закрыта и уведена за край через transform —
   это нормальное состояние выдвижного меню, его не трогаем. Рабочая
   область обязана быть видимой на любой ширине. */
@media (max-width: 1199px) {
  body.admin-page-active #page-admin.active .sba-shell { display: flex !important; }
  body.admin-page-active #page-admin.active .sba-main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Аварийный экран: ни одного общего класса с оболочкой, поэтому
   правило, скрывающее .sba-main, до него не дотягивается. Свойства
   продублированы в атрибуте style на случай, если таблица стилей
   не загрузится. */
.sba-emergency-shell {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: calc(100vh - 64px) !important;
  position: relative !important;
  z-index: 2147483000 !important;
  align-items: center !important;
  justify-content: center !important;
}
.sba-emergency-card {
  max-width: 560px; width: 100%; text-align: center;
  padding: 28px 24px; border-radius: 14px;
  background: #fff; color: #0f172a;
  border: 1px solid rgba(148,163,184,0.28);
  box-shadow: 0 18px 48px rgba(15,23,42,0.14);
}
html[data-theme="dark"] .sba-emergency-card {
  background: #171F2E; color: #e2e8f0; border-color: #2A3548;
}

/* ═══ KPI-карточки по референсу ═══
   Раньше это были узкие поля с подписью и числом. В макете — полноценные
   карточки: иконка в цветной плашке, крупное значение, изменение
   за период и мини-график. */
.sba-kpi{
  position:relative; overflow:hidden;
  background:var(--sba-surface,#fff);
  border:1px solid var(--sba-border,rgba(148,163,184,0.18));
  border-radius:16px; padding:20px 22px 34px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
  min-height:150px;
}
.sba-kpi.clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sba-kpi.clickable:hover{border-color:rgba(139,92,246,0.35);box-shadow:0 6px 20px rgba(15,23,42,0.07)}
.sba-kpi-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sba-kpi-ic{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sba-kpi-ic .ic{width:20px;height:20px}
.sba-kpi-ic.blue{background:rgba(59,130,246,0.10);color:#3b82f6}
.sba-kpi-ic.violet{background:rgba(139,92,246,0.10);color:#8b5cf6}
.sba-kpi-ic.teal{background:rgba(20,184,166,0.10);color:#14b8a6}
.sba-kpi-ic.green{background:rgba(34,197,94,0.10);color:#22c55e}
.sba-kpi-ic.red{background:rgba(239,68,68,0.10);color:#ef4444}
.sba-kpi-label{font-size:14px;font-weight:600;color:var(--sba-muted,#64748b)}
.sba-kpi-val{font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-0.02em}
.sba-kpi-val.na{font-size:16px;font-weight:600;color:var(--sba-muted,#94a3b8)}
.sba-kpi-foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
.sba-kpi-delta{font-weight:700}
.sba-kpi-delta.up{color:#22c55e}
.sba-kpi-delta.down{color:#ef4444}
.sba-kpi-period{color:var(--sba-muted,#94a3b8)}
.sba-kpi-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:46px;opacity:.9}

html[data-theme="dark"] .sba-kpi{background:#171F2E;border-color:#2A3548;box-shadow:none}

/* ═══ Сетка Обзора по референсу ═══
   Прежняя раскладка прижимала содержимое влево и оставляла справа
   пустое поле: рабочая область не растягивалась. Теперь она занимает
   доступную ширину, а на очень широких экранах содержимое
   центрируется с разумным пределом — иначе строки таблиц растянулись
   бы на три метра и стали нечитаемыми. */
.sba-main{ width:100%; }
.sba-main-inner{
  width:100%;
  max-width:1880px;
  margin:0 auto;
  padding:24px 28px 40px;
  box-sizing:border-box;
}
@media (max-width:767px){ .sba-main-inner{ padding:16px 14px 28px; } }

/* Шапка страницы: крупный заголовок, описание, действие справа. */
.sba-page-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.sba-page-head h1{ font-size:30px; font-weight:800; letter-spacing:-0.02em; margin:0 0 4px; }
.sba-page-head .sba-page-sub{ font-size:14px; color:var(--sba-muted,#64748b); margin:0; }

/* Первый ряд: четыре карточки. */
.sba-kpi-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
@media (max-width:1199px){ .sba-kpi-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px){ .sba-kpi-row{ grid-template-columns:1fr; } }

/* Второй ряд: график и статус, примерно 3/2. */
.sba-row-chart{ display:grid; grid-template-columns:minmax(0,3fr) minmax(320px,2fr); gap:18px; margin-bottom:18px; }
/* Третий и четвёртый: примерно 1/1.25. */
.sba-row-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:18px; margin-bottom:18px; }
@media (max-width:1199px){
  .sba-row-chart,.sba-row-split{ grid-template-columns:1fr; }
}

/* Типографика: основной текст не мельче 14 px. */
.sba-main{ font-size:14px; }
.sba-card h3,.sbadm-panel h3{ font-size:16px; }

/* График активности. */
.sba-chart{ width:100%; height:280px; }
.sba-chart-empty{
  display:flex; align-items:center; justify-content:center;
  height:280px; color:var(--sba-muted,#94a3b8); font-size:14px;
}

.sba-chart-legend{display:flex;gap:18px;margin:6px 0 10px;font-size:13px;color:var(--sba-muted,#64748b)}
.sba-chart-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}

/* Подписи KPI в макете обычным регистром, не капсом. */
.sba-kpi-label{text-transform:none;letter-spacing:normal}

/* ═══ Верхняя панель по референсу ═══ */
.sba-topbar-search{ flex:1 1 auto; max-width:560px; margin:0 auto; }
.sba-topbar-bell{ position:relative; }
.sba-bell-dot{
  position:absolute; top:2px; right:2px; min-width:17px; height:17px;
  padding:0 4px; border-radius:9px; background:#3b82f6; color:#fff;
  font-size:10.5px; font-weight:800; line-height:17px; text-align:center;
}
.sba-topbar-profile{
  display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px;
  border:none; background:transparent; cursor:pointer; border-radius:22px;
  transition:background .15s;
}
.sba-topbar-profile:hover{ background:rgba(148,163,184,0.12); }
.sba-topbar-profile .sba-topbar-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff;
  font-weight:800; font-size:14px;
}
.sba-topbar-profile-name{ font-size:14px; font-weight:600; white-space:nowrap; }
.sba-topbar-profile-arr{ color:var(--sba-muted,#94a3b8); }
@media (max-width:1199px){ .sba-topbar-profile-name,.sba-topbar-profile-arr{ display:none; } }

/* ═══ Боковое меню плотнее, как в макете ═══
   Активный пункт — сине-фиолетовый градиент. Длинные названия
   переносятся, а не обрезаются без возможности прочитать. */
.sba-side .sba-nav{
  padding:9px 12px; font-size:14px; line-height:1.35;
  white-space:normal; word-break:break-word;
}
.sba-side .sba-nav.active{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6) !important;
  color:#fff !important;
}
.sba-side .sba-nav.active .ic{ color:#fff !important; }
.sba-side .sba-grp-name{ font-size:11.5px; letter-spacing:.05em; }

/* ═══ Плотность Обзора ═══
   На 1536×1044 нижняя половина не помещалась: карточки и график были
   слишком высокими. Уменьшаем без потери читаемости — текст остаётся
   не мельче 14 px. */
.sba-main-inner{ padding:18px 24px 32px; }
.sba-page-head{ margin-bottom:16px; }
.sba-page-head h1{ font-size:26px; }

.sba-kpi{ min-height:118px; padding:16px 18px 26px; border-radius:14px; }
.sba-kpi-head{ margin-bottom:8px; gap:10px; }
.sba-kpi-ic{ width:36px; height:36px; border-radius:10px; }
.sba-kpi-ic .ic{ width:18px; height:18px; }
.sba-kpi-val{ font-size:27px; }
.sba-kpi-foot{ margin-top:5px; font-size:12.5px; }
.sba-kpi-spark{ height:34px; }
.sba-kpi-row{ gap:14px; margin-bottom:14px; }

.sba-row-chart,.sba-row-split{ gap:14px; margin-bottom:14px; }
.sba-chart{ height:190px; }
.sba-chart-empty{ height:190px; }
.sba-card,.sbadm-panel{ padding:16px 18px; }
.sba-card h3,.sbadm-panel h3{ margin-bottom:10px; }

/* Быстрые действия — четыре карточки в ряд, как в макете. */
.sba-qa-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.sba-qa-grid > *{ margin:0 !important; }
@media (max-width:1199px){ .sba-qa-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:479px){ .sba-qa-grid{ grid-template-columns:1fr; } }

/* Компактные таблицы для записей: строки, а не крупные карточки. */
.sba-mini-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.sba-mini-table th{
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--sba-muted,#94a3b8);
  padding:6px 8px; border-bottom:1px solid var(--sba-border,rgba(148,163,184,0.18));
}
.sba-mini-table td{
  padding:8px; border-bottom:1px solid var(--sba-border,rgba(148,163,184,0.10));
  vertical-align:middle;
}
.sba-mini-table tr:last-child td{ border-bottom:none; }

/* Мобильная шапка: заголовок не должен рваться после «админ-». */
@media (max-width:767px){
  .sba-page-head h1{ font-size:21px; hyphens:none; word-break:normal; }
  .sba-main-inner{ padding:14px 12px 28px; }
  .sba-kpi-val{ font-size:24px; }
}

/* Быстрые действия — четыре карточки в ряд, как в макете.
   Прежде они выстраивались вертикальной колонкой и занимали много
   высоты, из-за чего нижний ряд уходил за экран. */
.sba-quick-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
.sba-quick-btn{
  display:flex !important; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center;
  padding:16px 10px !important; min-height:96px;
  border-radius:12px; font-size:13px; font-weight:600; line-height:1.3;
}
.sba-quick-btn .ic{ width:22px; height:22px; }
@media (max-width:1199px){ .sba-quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:479px){ .sba-quick-grid{ grid-template-columns:1fr !important; } }

/* ═══ 1. Раскладка верхней панели по референсу ═══
   Все элементы жались к левой половине. Бренд занимает область
   шириной с боковое меню, поиск начинается сразу за ней, а правая
   группа уходит к краю за счёт свободного пространства между ними. */
@media (min-width: 1200px) {
  .sba-topbar{ gap:0; padding-left:0; padding-right:20px; }
  .sba-topbar-logo{
    width:252px; box-sizing:border-box;
    padding-left:20px; flex:0 0 252px; margin-right:8px;
  }
  .sba-topbar-search{
    flex:0 0 auto; width:500px; max-width:500px; margin:0;
  }
  .sba-topbar-right{
    flex:1 1 auto; display:flex; align-items:center;
    justify-content:flex-end; gap:8px;
  }
  /* Поиск живёт внутри правой группы — выталкиваем остальные к краю. */
  .sba-topbar-right .sba-topbar-search{ margin-right:auto; }
}
.sba-topbar-search input{
  width:100%; min-width:0; text-overflow:ellipsis;
}

/* ═══ 2. Второй ряд плотнее: 395 → ~285 px ═══ */
.sba-row-chart .sba-card{ padding:14px 16px; }
.sba-row-chart .sba-card h3{ margin-bottom:6px; font-size:15px; }
.sba-chart-legend{ margin:2px 0 6px; font-size:12.5px; }
.sba-chart{ height:170px; }
.sba-chart-empty{ height:170px; }
/* Строки статуса: высота ~33 px, промежуток ~4 px. Все семь остаются. */
.sba-row-chart .sba-sys-list{ display:flex; flex-direction:column; gap:4px; }
.sba-row-chart .sba-sys-row{
  min-height:33px; padding:6px 12px; font-size:13.5px; border-radius:9px;
}

/* Таблица последних изменений. */
.sba-table-wrap{ overflow-x:auto; }
.sba-mini-row{ cursor:pointer; transition:background .12s; }
.sba-mini-row:hover{ background:rgba(139,92,246,0.05); }
.sba-td-who{ font-weight:600; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sba-td-sec{ color:var(--sba-muted,#64748b); }
.sba-td-when{ color:var(--sba-muted,#94a3b8); white-space:nowrap; font-size:12.5px; }
html[data-theme="dark"] .sba-mini-row:hover{ background:rgba(139,92,246,0.10); }

/* Ряд графика: замер показал 342 px вместо целевых ~285. Семь строк
   статуса и есть основная высота — ужимаем их и график ещё немного,
   не трогая содержимое: все семь статусов остаются. */
@media (min-width: 1200px) {
  .sba-row-chart .sba-card{ padding:12px 14px; }
  .sba-row-chart .sba-card h3{ margin-bottom:4px; font-size:14.5px; }
  .sba-chart-legend{ margin:0 0 4px; }
  .sba-chart, .sba-chart-empty{ height:150px; }
  .sba-row-chart .sba-sys-list{ gap:3px; }
  .sba-row-chart .sba-sys-row{ min-height:30px; padding:4px 11px; font-size:13px; }
}

/* Нижний отступ: таблица не должна упираться в край экрана. */
@media (min-width: 1200px){
  .sba-main-inner{ padding-bottom:24px; }
  .sba-mini-table td{ padding:6px 8px; }
  .sba-ov-grid .sba-card{ padding:14px 16px; }
}

/* Замер дал 1052 при окне 1044: восемь пикселей лишних. Подрезаем
   промежутки между рядами — содержимое не трогаем. */
@media (min-width: 1200px){
  .sba-kpi-row{ margin-bottom:12px; }
  .sba-row-chart{ margin-bottom:12px; }
  .sba-page-head{ margin-bottom:12px; }
}

/* ═══ Кнопка экспорта пользователей ═══
   Прежде фон задавался inline-стилем и в тёмной теме кнопка терялась.
   Теперь отдельный класс с собственным оформлением. */
.sba-users-export{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; min-height:38px;
  border:none; border-radius:10px; cursor:pointer;
  font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#10b981,#0ea5e9);
  box-shadow:0 1px 2px rgba(15,23,42,0.10);
  transition:filter .15s, box-shadow .15s, transform .05s;
}
.sba-users-export:hover{ filter:brightness(1.07); box-shadow:0 4px 14px rgba(14,165,233,0.28); }
.sba-users-export:active{ transform:translateY(1px); }
.sba-users-export:focus-visible{
  outline:0; box-shadow:0 0 0 3px rgba(14,165,233,0.35);
}
.sba-users-export .ic{ width:16px; height:16px; color:#fff; }
html[data-theme="dark"] .sba-users-export{ color:#fff; box-shadow:none; }

/* Карточка подробностей пользователя. */
.sba-confirm-html{ text-align:left; margin:4px 0 14px; }
.sba-ud-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:7px 0; border-bottom:1px solid var(--sba-border,rgba(148,163,184,0.14));
  font-size:13.5px;
}
.sba-ud-row:last-child{ border-bottom:none; }
.sba-ud-k{ color:var(--sba-muted,#64748b); }
.sba-ud-v{ font-weight:600; text-align:right; word-break:break-word; }
.sba-badge{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:700; }
.sba-badge.ok{ background:rgba(34,197,94,0.14); color:#16a34a; }
.sba-badge.warn{ background:rgba(245,158,11,0.16); color:#b45309; }
.sba-badge.bad{ background:rgba(239,68,68,0.14); color:#dc2626; }
.sba-badge.plan{ background:rgba(139,92,246,0.14); color:#7c3aed; }

/* Кнопки действий в строке пользователя: не микроскопические,
   на телефоне — вертикально, высотой не меньше 44 px. */
.sba-user-actions{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.sba-user-actions button{ min-height:34px; padding:6px 12px; font-size:13px; }
@media (max-width:767px){
  .sba-user-actions{ flex-direction:column; align-items:stretch; }
  .sba-user-actions button{ min-height:44px; width:100%; }
}

/* ═══ Поле поиска в шапке админки ═══
   Внутри скруглённой оболочки рисовалась вторая прямоугольная рамка.
   Её ставит базовое правило из public-site.css, который подключается
   ПОСЛЕ admin.css:

       input, textarea, select, … { border:1px solid var(--bd-ui)!important; }

   Оно с !important и действует всегда, а не только в фокусе. Правило
   нужное — оформляет поля публичного сайта, поэтому трогать его нельзя.
   Перебиваем тем же весом и строго внутри админки. */
body.admin-page-active .sba-topbar-search input,
body.admin-page-active .sba-topbar-search input:focus,
body.admin-page-active .sba-topbar-search input:focus-visible {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
}
/* Фокус переходит на оболочку: виден, но по скруглённому контуру. */
body.admin-page-active .sba-topbar-search:focus-within {
  border-color: var(--sba-violet, #8B5CF6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

/* ═══ Боковое меню админки в духе кабинета ═══
   Оформление повторяет .ws-sidebar из workspace.css, но на собственных
   классах: смешивать интерфейсы нельзя, а классы .ad-* возвращать тем
   более — их скрывал блокировщик рекламы.

   Панель закреплена на всю высоту окна и прокручивается отдельно;
   шапка и содержимое начинаются справа от неё, а не поверх. */
@media (min-width: 1200px) {
  /* Переменная уже была объявлена выше со значением 252px и перебивала
     новую. Задаём на body — оно специфичнее :root, и старое объявление
     трогать не нужно: оно ещё используется другими правилами. */
  body.admin-page-active{ --sba-side-w: 220px; --sba-side-w-collapsed: 68px; }

  body.admin-page-active .sba-side{
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: var(--sba-side-w);
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    background: var(--sba-surface, #fff);
    border-right: 1px solid var(--sba-border, rgba(148,163,184,0.18));
    transition: width .18s ease;
  }
  /* Шапка и рабочая область сдвигаются вместе с панелью — одним
     переходом, чтобы при сворачивании не мелькала пустота. */
  /* Панель вынута из потока (position:fixed), поэтому оболочка её больше
     не учитывает: отступ ставим на неё, а не на каждый блок — иначе
     .sba-main получал сдвиг дважды и сжимался до двухсот пикселей. */
  /* Оболочка — flex-контейнер, и панель раньше была его первым
     элементом. Теперь она вынута из потока, поэтому оболочке нужен
     не только отступ, но и полная ширина: иначе .sba-main получал
     остаток от старой раскладки и сжимался до двухсот пикселей. */
  body.admin-page-active .sba-shell{
    margin-left: var(--sba-side-w);
    width: auto;
    transition: margin-left .18s ease;
  }
  body.admin-page-active .sba-shell > .sba-main{ flex: 1 1 auto; width: auto; }
  body.admin-page-active .sba-topbar{
    margin-left: var(--sba-side-w);
    width: auto;
    transition: margin-left .18s ease;
  }
  body.admin-page-active .sba-main{ margin-left: 0; }

  body.admin-page-active.sba-side-collapsed .sba-side{ width: var(--sba-side-w-collapsed); }
  body.admin-page-active.sba-side-collapsed .sba-shell,
  body.admin-page-active.sba-side-collapsed .sba-topbar{ margin-left: var(--sba-side-w-collapsed); }

  /* Область логотипа по высоте равна шапке — линии совпадают. */
  body.admin-page-active .sba-side-head{
    height: 64px; flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px; box-sizing: border-box;
    border-bottom: 1px solid var(--sba-border, rgba(148,163,184,0.14));
  }
  body.admin-page-active.sba-side-collapsed .sba-side-head{ justify-content: center; padding: 0; }
  body.admin-page-active.sba-side-collapsed .sba-side-head-text{ display: none; }

  body.admin-page-active .sba-side-scroll{ flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; }
  body.admin-page-active .sba-side-foot{
    flex-shrink: 0; padding: 10px; border-top: 1px solid var(--sba-border, rgba(148,163,184,0.14));
    display: flex; flex-direction: column; gap: 2px;
  }

  /* Свёрнутое состояние: только иконки, подсказка при наведении. */
  body.admin-page-active.sba-side-collapsed .sba-nav-text,
  body.admin-page-active.sba-side-collapsed .sba-nav-group-title{ display: none; }
  body.admin-page-active.sba-side-collapsed .sba-nav-item{ justify-content: center; padding: 10px 0; }
  body.admin-page-active.sba-side-collapsed .sba-nav-item[data-tip]:hover::after,
  body.admin-page-active.sba-side-collapsed .sba-nav-item[data-tip]:focus-visible::after{
    content: attr(data-tip);
    position: fixed; left: calc(var(--sba-side-w-collapsed) + 8px);
    transform: translateY(-50%);
    background: #0f172a; color: #fff; font-size: 12.5px; font-weight: 600;
    padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 200;
    box-shadow: 0 6px 18px rgba(15,23,42,0.22);
  }
}

/* Пункты меню — как в кабинете: настоящие кнопки, спокойный активный фон. */
body.admin-page-active .sba-nav-item{
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; padding: 9px 10px; margin-bottom: 2px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: 9px;
  color: var(--sba-text-secondary, #475569);
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
}
body.admin-page-active .sba-nav-item .ic{ width: 18px; height: 18px; flex-shrink: 0; }
body.admin-page-active .sba-nav-item:hover{ background: rgba(148,163,184,0.14); }
body.admin-page-active .sba-nav-item:focus-visible{
  outline: 0; box-shadow: 0 0 0 2px rgba(139,92,246,0.45);
}
/* Активный: мягкая фиолетовая подложка вместо яркой заливки. */
/* Активный пункт — фирменный градиент с белым текстом, как «Главная»
   в меню кабинета. */
body.admin-page-active .sba-nav-item[aria-current="page"]{
  background: linear-gradient(135deg,#3b82f6,#8b5cf6) !important;
  color: #fff !important;
  font-weight: 650;
  box-shadow: 0 2px 8px rgba(99,102,241,0.28);
}
body.admin-page-active .sba-nav-item[aria-current="page"] .ic{ color: #fff !important; }

body.admin-page-active .sba-nav-group-title{
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sba-muted, #94a3b8);
  padding: 12px 10px 6px; margin: 0;
}
body.admin-page-active .sba-nav-item.danger:hover{
  background: rgba(239,68,68,0.12); color: #dc2626;
}

html[data-theme="dark"] body.admin-page-active .sba-side{ background: #171F2E; border-color: #2A3548; }
html[data-theme="dark"] body.admin-page-active .sba-nav-item{ color: #cbd5e1; }
html[data-theme="dark"] body.admin-page-active .sba-nav-item:hover{ background: rgba(255,255,255,0.06); }
/* В тёмной теме активный пункт тот же градиент — как в кабинете. */

/* До 1200 — выдвижная панель поверх содержимого. */
@media (max-width: 1199px) {
  body.admin-page-active .sba-side{
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 120;
    width: min(300px, 86vw);
    background: var(--sba-surface, #fff);
    transform: translateX(-100%); transition: transform .2s ease;
    display: flex; flex-direction: column; overflow-y: auto;
  }
  /* Класс ставит openAdminDrawer — он называется drawer-open. */
  body.admin-page-active .sba-side.drawer-open{ transform: translateX(0); }
  body.admin-page-active .sba-shell,
  body.admin-page-active .sba-topbar,
  body.admin-page-active .sba-main{ margin-left: 0; }
  /* Свёрнутое состояние настольной версии на узком экране не применяется. */
  body.admin-page-active.sba-side-collapsed .sba-nav-text,
  body.admin-page-active.sba-side-collapsed .sba-nav-group-title{ display: block; }
  body.admin-page-active.sba-side-collapsed .sba-nav-item{ justify-content: flex-start; padding: 9px 10px; }
}


/* Логотип в верхней строке скрыт: он теперь в шапке боковой панели,
   как в кабинете, и дублировать его незачем. На узкой ширине панель
   выдвижная и скрыта, поэтому логотип в строке остаётся. */
@media (min-width: 1200px) {
  body.admin-page-active .sba-topbar-logo{ display: none !important; }
  body.admin-page-active .sba-topbar{ padding-left: 20px; }
}

/* ═══ Кнопки админки: единая система ═══
   Классы .adm-save и .adm-add задают белый текст и градиент. Отдельные
   кнопки подменяли inline-стилем ТОЛЬКО фон — на светлый. Текст при этом
   оставался белым, и кнопка выглядела пустой или отключённой.
   Так вышло с «Проверить перевод», «Отмена», фильтрами заявок,
   провайдерами в «Безопасности» и другими — всего 14 мест.

   Ниже — роли вместо случайных подмен. Всё ограничено админкой. */

/* Второстепенное действие: светлый фон, тёмный читаемый текст, рамка. */
body.admin-page-active #page-admin .sba-btn-ghost,
body.admin-page-active #page-admin .adm-save.is-secondary,
body.admin-page-active #page-admin .adm-add.is-secondary{
  background: var(--sba-surface-2, #f1f5f9) !important;
  color: var(--sba-text, #0f172a) !important;
  border: 1px solid var(--sba-border, rgba(148,163,184,0.32)) !important;
  font-weight: 600;
}
body.admin-page-active #page-admin .sba-btn-ghost:hover,
body.admin-page-active #page-admin .adm-save.is-secondary:hover,
body.admin-page-active #page-admin .adm-add.is-secondary:hover{
  background: var(--sba-surface-3, #e2e8f0) !important;
  border-color: var(--sba-violet, #8B5CF6) !important;
}

/* Опасное действие. */
body.admin-page-active #page-admin .adm-save.is-danger,
body.admin-page-active #page-admin .adm-add.is-danger{
  background: #dc2626 !important; color: #fff !important; border: none !important;
}
body.admin-page-active #page-admin .adm-save.is-danger:hover{ background: #b91c1c !important; }

/* Страховка: если фон всё-таки подменён светлым inline-стилем, текст
   не должен оставаться белым — иначе кнопка снова станет невидимой. */
body.admin-page-active #page-admin .adm-save[style*="var(--bg2)"],
body.admin-page-active #page-admin .adm-add[style*="var(--bg2)"],
body.admin-page-active #page-admin .adm-save[style*="background:#fff"],
body.admin-page-active #page-admin .adm-save[style*="background: #fff"]{
  color: var(--sba-text, #0f172a) !important;
  border: 1px solid var(--sba-border, rgba(148,163,184,0.32)) !important;
  font-weight: 600;
}

/* Фильтры-переключатели: активный градиентом, остальные светлые. */
body.admin-page-active #page-admin .sba-filter{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 7px 14px; border-radius: 9px; cursor: pointer;
  font-size: 13.5px; font-weight: 600;
  background: var(--sba-surface-2, #f1f5f9);
  color: var(--sba-text, #0f172a);
  border: 1px solid var(--sba-border, rgba(148,163,184,0.28));
  transition: background .15s, color .15s, border-color .15s;
}
body.admin-page-active #page-admin .sba-filter:hover{ border-color: var(--sba-violet, #8B5CF6); }
body.admin-page-active #page-admin .sba-filter:focus-visible{
  outline: 0; box-shadow: 0 0 0 3px rgba(139,92,246,0.30);
}
body.admin-page-active #page-admin .sba-filter.active,
body.admin-page-active #page-admin .sba-filter[aria-pressed="true"]{
  background: linear-gradient(135deg,#3b82f6,#8b5cf6) !important;
  color: #fff !important; border-color: transparent !important;
}

/* Отключённая кнопка: серая, но текст читается. */
body.admin-page-active #page-admin button[disabled],
body.admin-page-active #page-admin .adm-save[disabled],
body.admin-page-active #page-admin .adm-add[disabled]{
  background: var(--sba-surface-3, #e2e8f0) !important;
  color: #64748b !important;
  border: 1px solid var(--sba-border, rgba(148,163,184,0.28)) !important;
  cursor: not-allowed; opacity: 1 !important; filter: none !important;
}

/* Общие состояния для основных кнопок. */
body.admin-page-active #page-admin .adm-save:active,
body.admin-page-active #page-admin .adm-add:active{ transform: translateY(1px); }
body.admin-page-active #page-admin .adm-add:focus-visible{
  outline: 2px solid var(--sba-violet, #8B5CF6); outline-offset: 2px;
}

html[data-theme="dark"] body.admin-page-active #page-admin .sba-btn-ghost,
html[data-theme="dark"] body.admin-page-active #page-admin .adm-save.is-secondary,
html[data-theme="dark"] body.admin-page-active #page-admin .adm-add.is-secondary,
html[data-theme="dark"] body.admin-page-active #page-admin .sba-filter{
  background: #1D2637 !important; color: #e2e8f0 !important; border-color: #2A3548 !important;
}
html[data-theme="dark"] body.admin-page-active #page-admin .adm-save[style*="var(--bg2)"],
html[data-theme="dark"] body.admin-page-active #page-admin .adm-add[style*="var(--bg2)"]{
  color: #e2e8f0 !important; border-color: #2A3548 !important;
}
html[data-theme="dark"] body.admin-page-active #page-admin button[disabled]{
  background: #1D2637 !important; color: #94a3b8 !important; border-color: #2A3548 !important;
}

/* ═══ Нечитаемый текст в админке ═══
   Часть разметки задаёт color:#fff прямо в inline-стиле — так было
   написано под тёмный фон старой админки. На светлой теме получался
   белый текст на белом: названия провайдеров, «Резервный режим»
   и подписи запасных в «Безопасности» пропадали совсем.

   Правим общим правилом: внутри рабочей области белый текст возможен
   только на градиенте или на явно тёмной подложке — там он и нужен. */
body.admin-page-active #page-admin .sba-main [style*="color:#fff"]:not(.adm-save):not(.adm-add):not(.sba-btn):not([class*="badge"]),
body.admin-page-active #page-admin .sba-main [style*="color: #fff"]:not(.adm-save):not(.adm-add):not(.sba-btn):not([class*="badge"]){
  color: var(--sba-text, #0f172a) !important;
}
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main [style*="color:#fff"]:not(.adm-save):not(.adm-add):not(.sba-btn):not([class*="badge"]),
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main [style*="color: #fff"]:not(.adm-save):not(.adm-add):not(.sba-btn):not([class*="badge"]){
  color: #e2e8f0 !important;
}

/* Поля ввода в админке: цвет текста и фон от темы, а не унаследованный
   белый — иначе поле пароля выглядело пустым. */
body.admin-page-active #page-admin .sba-main input,
body.admin-page-active #page-admin .sba-main textarea,
body.admin-page-active #page-admin .sba-main select{
  color: var(--sba-text, #0f172a);
  background: var(--sba-surface, #fff);
}
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main input,
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main textarea,
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main select{
  color: #e2e8f0; background: #1D2637;
}

/* Предупреждения на янтарной подложке: в тёмной теме тёмно-коричневый
   текст на ней не читался. */
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main [style*="rgba(245,158,11"],
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main [style*="rgba(245, 158, 11"]{
  color: #fcd34d !important;
}

/* Кнопка на красной полупрозрачной подложке. */
body.admin-page-active #page-admin .sba-main button[style*="rgba(239,68,68"],
body.admin-page-active #page-admin .sba-main button[style*="rgba(239, 68, 68"]{
  color: #b91c1c !important; border: 1px solid rgba(239,68,68,0.4) !important;
}
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main button[style*="rgba(239,68,68"],
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main button[style*="rgba(239, 68, 68"]{
  color: #fca5a5 !important;
}

/* «нет ключа» — янтарный на светлой бирюзовой подложке выбранного
   провайдера читался плохо. */
body.admin-page-active #page-admin .sba-main span[style*="color:#fbbf24"],
body.admin-page-active #page-admin .sba-main span[style*="color: #fbbf24"]{
  color: #b45309 !important; font-weight: 700;
}
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main span[style*="color:#fbbf24"],
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main span[style*="color: #fbbf24"]{
  color: #fcd34d !important;
}

/* Кнопка «Открыть кабинет» на карточке пароля: класс ws-btn-sm берёт
   цвет из переменных кабинета, которых в админке нет. */
body.admin-page-active #page-admin .sba-main .ws-btn-sm,
body.admin-page-active #page-admin .sba-main .ws-btn{
  background: var(--sba-surface-2, #f1f5f9) !important;
  color: var(--sba-text, #0f172a) !important;
  border: 1px solid var(--sba-border, rgba(148,163,184,0.32)) !important;
  padding: 8px 14px; border-radius: 9px; font-weight: 600; cursor: pointer;
}
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main .ws-btn-sm,
html[data-theme="dark"] body.admin-page-active #page-admin .sba-main .ws-btn{
  background: #1D2637 !important; color: #e2e8f0 !important; border-color: #2A3548 !important;
}

/* Карточка пользователя: пояснение и действие. */
.sba-ud-note{
  margin:12px 0 0; padding:10px 12px; border-radius:10px;
  background:rgba(148,163,184,0.12); color:var(--sba-muted,#64748b);
  font-size:12.5px; line-height:1.5; text-align:left;
}
.sba-ud-actions{ display:flex; gap:10px; justify-content:center; margin-top:12px; }
.sba-ud-actions button{ padding:8px 16px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; }
html[data-theme="dark"] .sba-ud-note{ background:rgba(255,255,255,0.06); color:#94a3b8; }

/* Предупреждение о несохранённых изменениях. */
.sba-dirty-note{
  margin:10px 0 0; padding:8px 12px; border-radius:9px;
  background:rgba(245,158,11,0.14); color:#b45309;
  font-size:13px; font-weight:600;
}
html[data-theme="dark"] .sba-dirty-note{ background:rgba(245,158,11,0.18); color:#fcd34d; }

/* ═══ Панель уведомлений ═══ */
.sba-notif-panel{
  position:fixed; z-index:2147482000; width:min(360px,92vw);
  max-height:min(70vh,520px); overflow:auto;
  background:var(--sba-surface,#fff); color:var(--sba-text,#0f172a);
  border:1px solid var(--sba-border,rgba(148,163,184,0.22));
  border-radius:14px; box-shadow:0 18px 48px rgba(15,23,42,0.18);
}
.sba-notif-head{ padding:12px 16px; border-bottom:1px solid var(--sba-border,rgba(148,163,184,0.16)); font-size:14px; }
.sba-notif-item{ padding:11px 16px; cursor:pointer; border-bottom:1px solid var(--sba-border,rgba(148,163,184,0.10)); }
.sba-notif-item:hover{ background:rgba(139,92,246,0.06); }
.sba-notif-item.read{ opacity:.55; }
.sba-notif-title{ font-size:13.5px; font-weight:700; margin-bottom:2px; }
.sba-notif-text{ font-size:12.5px; color:var(--sba-muted,#64748b); }
.sba-notif-foot{ padding:10px 16px; }
.sba-notif-foot button{ width:100%; padding:8px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; }
html[data-theme="dark"] .sba-notif-panel{ background:#171F2E; color:#e2e8f0; border-color:#2A3548; }
html[data-theme="dark"] .sba-notif-item:hover{ background:rgba(139,92,246,0.14); }

/* ═══ Состояния кнопок ═══
   hover, focus-visible и disabled уже были. Не хватало трёх состояний
   самого действия: идёт, получилось, не получилось. Без них человек
   жал кнопку повторно, не понимая, началось ли что-то. */
body.admin-page-active #page-admin .adm-save.is-loading,
body.admin-page-active #page-admin .adm-add.is-loading,
body.admin-page-active #page-admin .sba-btn-ghost.is-loading{
  pointer-events:none; opacity:.75;
  position:relative; padding-left:34px !important;
}
/* Кружок вращается — видно, что действие идёт, а не зависло. */
body.admin-page-active #page-admin .is-loading::before{
  content:''; position:absolute; left:13px; top:50%;
  width:14px; height:14px; margin-top:-7px;
  border:2px solid rgba(255,255,255,0.45); border-top-color:#fff;
  border-radius:50%; animation:sbaSpin .7s linear infinite;
}
body.admin-page-active #page-admin .sba-btn-ghost.is-loading::before,
body.admin-page-active #page-admin .is-secondary.is-loading::before{
  border-color:rgba(15,23,42,0.25); border-top-color:#0f172a;
}
@keyframes sbaSpin{ to{ transform:rotate(360deg); } }

body.admin-page-active #page-admin .adm-save.is-success,
body.admin-page-active #page-admin .adm-add.is-success{
  background:#16a34a !important; color:#fff !important;
}
body.admin-page-active #page-admin .adm-save.is-error,
body.admin-page-active #page-admin .adm-add.is-error{
  background:#dc2626 !important; color:#fff !important;
}

/* Отключённая кнопка обязана объяснять причину: курсор подсказки
   и подпись через title. */
body.admin-page-active #page-admin button[disabled][title]{ cursor:help; }