/* ==========================================================================
   SEObox — DESIGN SYSTEM (Этап 1)
   Подключается ПОСЛЕ site.css. Старые стили не удаляются — изменения
   обратимы. Новые классы имеют префикс ds- (design-system), чтобы не
   конфликтовать с существующими именами.
   ========================================================================== */

:root{
  --sb-bg:#f7f8fc;
  --sb-surface:#ffffff;
  --sb-surface-soft:#f0eeff;
  --sb-text:#08142e;
  --sb-text-secondary:#5f6b85;
  --sb-dark:#07142d;
  --sb-cyan:#20c7d9;
  --sb-blue:#5c7cfa;
  --sb-violet:#8b5cf6;
  --sb-border:#e3e7f0;
  --sb-success:#22c55e;
  --sb-warning:#f59e0b;
  --sb-danger:#ef4444;

  --sb-grad:linear-gradient(135deg,var(--sb-cyan),var(--sb-blue) 55%,var(--sb-violet));
  --sb-r-sm:12px;
  --sb-r-md:16px;
  --sb-r-lg:20px;
  --sb-r-xl:24px;
  --sb-shadow-sm:0 2px 8px rgba(8,20,46,0.04);
  --sb-shadow-md:0 8px 24px rgba(8,20,46,0.07);
  --sb-shadow-lg:0 20px 48px rgba(8,20,46,0.10);
  --sb-header-h:64px;
  --sb-font:'Manrope',system-ui,-apple-system,sans-serif;
}

/* ==========================================================================
   ТЁМНАЯ ТЕМА КАБИНЕТА — тёмно-синяя, не старый чёрный дизайн.
   Строго скоуплено на body.app-page-active — публичные страницы не
   переводятся на переключаемую тему, даже если html[data-theme] почему-то
   присутствует вне кабинета. :root не трогаем — паблик как был.
   ========================================================================== */
html[data-theme="dark"] body.app-page-active{
  --sb-bg:#0B1220;
  --sb-surface:#131B2E;
  --sb-surface-soft:#1B2540;
  --sb-text:#E8ECF5;
  --sb-text-secondary:#8B96AD;
  --sb-border:#232D45;
  --sb-cyan:#2DD4DD;
  --sb-blue:#7C93FF;
  --sb-violet:#A78BFA;
  --sb-success:#34D399;
  --sb-warning:#FBBF24;
  --sb-danger:#F87171;
  --sb-shadow-sm:0 2px 8px rgba(0,0,0,0.25);
  --sb-shadow-md:0 8px 24px rgba(0,0,0,0.35);
  --sb-shadow-lg:0 20px 48px rgba(0,0,0,0.45);
}

/* ===== БАЗА ===== */
.ds-scope{font-family:var(--sb-font);color:var(--sb-text);background:var(--sb-bg)}
.ds-scope *{box-sizing:border-box;min-width:0}

/* ===== КОНТЕЙНЕР ===== */
.ds-container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px;box-sizing:border-box}
@media(max-width:767px){.ds-container{padding:0 16px}}
@media(min-width:768px) and (max-width:1023px){.ds-container{padding:0 24px}}

/* ===== ЗАГОЛОВКИ И ТЕКСТ ===== */
.ds-h1{font-family:var(--sb-font);font-weight:800;font-size:clamp(32px,5vw,52px);line-height:1.12;letter-spacing:-0.02em;color:var(--sb-text);margin:0}
.ds-h2{font-family:var(--sb-font);font-weight:800;font-size:clamp(26px,4vw,36px);line-height:1.18;letter-spacing:-0.01em;color:var(--sb-text);margin:0}
.ds-h3{font-family:var(--sb-font);font-weight:700;font-size:20px;line-height:1.3;color:var(--sb-text);margin:0}
.ds-text{font-size:16px;line-height:1.55;color:var(--sb-text);word-break:normal;overflow-wrap:normal}
.ds-text-secondary{font-size:15px;line-height:1.55;color:var(--sb-text-secondary)}
.ds-text-sm{font-size:13px;line-height:1.5;color:var(--sb-text-secondary)}

/* ===== КНОПКИ ===== */
.ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sb-font);font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:var(--sb-r-sm);border:none;cursor:pointer;
  min-height:44px;box-sizing:border-box;transition:.18s ease;
  text-decoration:none;white-space:nowrap;
}
.ds-btn:focus-visible{outline:2px solid var(--sb-blue);outline-offset:2px}
.ds-btn-primary{background:var(--sb-grad);color:#fff;box-shadow:var(--sb-shadow-sm)}
.ds-btn-primary:hover{box-shadow:var(--sb-shadow-md);transform:translateY(-1px)}
.ds-btn-secondary{background:var(--sb-surface);color:var(--sb-text);border:1px solid var(--sb-border)}
.ds-btn-secondary:hover{border-color:var(--sb-blue);color:var(--sb-blue)}
.ds-btn-ghost{background:transparent;color:var(--sb-text-secondary);border:1px solid transparent}
.ds-btn-ghost:hover{background:var(--sb-surface-soft);color:var(--sb-text)}
.ds-btn-sm{padding:8px 16px;font-size:13px;min-height:36px}
.ds-btn-icon{width:44px;height:44px;padding:0;border-radius:var(--sb-r-sm)}
@media(max-width:767px){.ds-btn{min-height:44px}}

/* ===== КАРТОЧКИ ===== */
.ds-card{
  background:var(--sb-surface);border:1px solid var(--sb-border);border-radius:var(--sb-r-lg);
  padding:24px;box-shadow:var(--sb-shadow-sm);
}
.ds-card-dark{
  background:var(--sb-dark);color:#fff;border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--sb-r-lg);padding:24px;
}
@media(max-width:767px){.ds-card,.ds-card-dark{padding:18px;border-radius:var(--sb-r-md)}}

/* ===== ФОРМЫ: input / textarea / select ===== */
.ds-field{width:100%;max-width:100%;box-sizing:border-box}
.ds-input,.ds-textarea,.ds-select{
  width:100%;max-width:100%;box-sizing:border-box;min-width:0;
  background:var(--sb-surface);border:1px solid var(--sb-border);border-radius:var(--sb-r-sm);
  padding:12px 14px;font-family:var(--sb-font);font-size:15px;color:var(--sb-text);
  min-height:44px;transition:.15s;
}
.ds-textarea{min-height:110px;resize:vertical;line-height:1.5}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--sb-blue);box-shadow:0 0 0 3px rgba(92,124,250,0.15)}
.ds-input:focus-visible,.ds-textarea:focus-visible,.ds-select:focus-visible{outline:2px solid var(--sb-blue);outline-offset:1px}
.ds-input::placeholder,.ds-textarea::placeholder{color:#9aa4bb;overflow:visible;text-overflow:clip}
.ds-label{display:block;font-size:13px;font-weight:700;color:var(--sb-text-secondary);margin-bottom:6px}

/* checkbox */
.ds-checkbox{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--sb-text);cursor:pointer;min-height:44px}
.ds-checkbox input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;accent-color:var(--sb-blue);cursor:pointer}

/* ===== ТАБЛИЦЫ ===== */
.ds-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--sb-r-md);border:1px solid var(--sb-border)}
.ds-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.ds-table th{text-align:left;font-size:12px;font-weight:800;color:var(--sb-text-secondary);text-transform:uppercase;letter-spacing:.03em;padding:12px 16px;background:var(--sb-surface-soft);border-bottom:1px solid var(--sb-border)}
.ds-table td{padding:12px 16px;border-bottom:1px solid var(--sb-border);color:var(--sb-text)}
.ds-table tr:last-child td{border-bottom:none}

/* ===== ТАБЫ ===== */
.ds-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--sb-border);padding-bottom:0}
.ds-tab{padding:10px 16px;font-size:14px;font-weight:700;color:var(--sb-text-secondary);cursor:pointer;border-radius:var(--sb-r-sm) var(--sb-r-sm) 0 0;border-bottom:2px solid transparent;min-height:44px;display:flex;align-items:center}
.ds-tab.active{color:var(--sb-blue);border-bottom-color:var(--sb-blue)}
.ds-tab:focus-visible{outline:2px solid var(--sb-blue);outline-offset:-2px}

/* ===== БЕЙДЖИ ===== */
.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700}
.ds-badge-info{background:var(--sb-surface-soft);color:var(--sb-violet)}
.ds-badge-success{background:rgba(34,197,94,0.12);color:#16a34a}
.ds-badge-warning{background:rgba(245,158,11,0.12);color:#b45309}
.ds-badge-danger{background:rgba(239,68,68,0.12);color:#dc2626}

/* ===== ПУСТЫЕ СОСТОЯНИЯ ===== */
.ds-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 24px;color:var(--sb-text-secondary)}
.ds-empty svg{width:40px;height:40px;color:var(--sb-border);margin-bottom:4px}
.ds-empty-title{font-size:16px;font-weight:700;color:var(--sb-text)}

/* ===== LOADING / SKELETON ===== */
.ds-skeleton{background:linear-gradient(90deg,var(--sb-surface-soft) 25%,#e6e4fb 37%,var(--sb-surface-soft) 63%);background-size:400% 100%;animation:dsShimmer 1.4s ease infinite;border-radius:var(--sb-r-sm)}
@keyframes dsShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.ds-spinner{width:20px;height:20px;border:2.5px solid var(--sb-border);border-top-color:var(--sb-blue);border-radius:50%;animation:dsSpin .7s linear infinite}
@keyframes dsSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ds-skeleton,.ds-spinner{animation:none}}

/* ===== DROPDOWN ===== */
.ds-dropdown{position:relative;display:inline-block}
.ds-dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:220px;max-width:min(90vw,320px);
  background:var(--sb-surface);border:1px solid var(--sb-border);border-radius:var(--sb-r-md);
  box-shadow:var(--sb-shadow-lg);padding:8px;z-index:200;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s;
}
.ds-dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.ds-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--sb-r-sm);font-size:14px;color:var(--sb-text);cursor:pointer;min-height:44px}
.ds-dropdown-item:hover{background:var(--sb-surface-soft)}

/* ===== MODAL ===== */
.ds-modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(7,20,45,0.45);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.2s}
.ds-modal-overlay.open{opacity:1;visibility:visible}
.ds-modal{background:var(--sb-surface);border-radius:var(--sb-r-xl);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--sb-shadow-lg);position:relative;box-sizing:border-box}
.ds-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:none;background:var(--sb-surface-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
@media(max-width:767px){
  .ds-modal-overlay{padding:0;align-items:flex-end}
  .ds-modal{width:100%;max-width:100%;max-height:100dvh;border-radius:var(--sb-r-xl) var(--sb-r-xl) 0 0;
    padding-bottom:env(safe-area-inset-bottom)}
}

/* ===== TOAST ===== */
.ds-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;
  background:var(--sb-dark);color:#fff;padding:14px 20px;border-radius:var(--sb-r-md);
  font-size:14px;box-shadow:var(--sb-shadow-lg);max-width:calc(100vw - 32px)}
@media(max-width:767px){.ds-toast{bottom:calc(16px + env(safe-area-inset-bottom))}}

/* ===== DRAWER (общий) ===== */
.ds-drawer-backdrop{position:fixed;inset:0;z-index:299;background:rgba(7,20,45,0.45);opacity:0;visibility:hidden;transition:.25s}
.ds-drawer-backdrop.open{opacity:1;visibility:visible}
.ds-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(360px,100vw);max-width:100%;
  background:var(--sb-surface);z-index:300;box-shadow:-20px 0 60px rgba(8,20,46,0.18);
  transform:translateX(100%);transition:.28s ease;overflow-y:auto;box-sizing:border-box;
  padding:calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom))}
.ds-drawer.open{transform:translateX(0)}

/* ===== SIDEBAR (кабинет/админка, десктоп) ===== */
.ds-sidebar{width:260px;flex-shrink:0;background:var(--sb-surface);border-right:1px solid var(--sb-border);
  padding:20px 14px;box-sizing:border-box}
.ds-sidebar-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--sb-r-sm);
  font-size:14px;font-weight:600;color:var(--sb-text-secondary);cursor:pointer;min-height:44px}
.ds-sidebar-item:hover{background:var(--sb-surface-soft);color:var(--sb-text)}
.ds-sidebar-item.active{background:var(--sb-surface-soft);color:var(--sb-blue)}
.ds-sidebar-item svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:1023px){.ds-sidebar{width:72px}.ds-sidebar-item span{display:none}}

/* ===== TOPBAR (кабинет/админка) ===== */
.ds-topbar{height:var(--sb-header-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:var(--sb-surface);border-bottom:1px solid var(--sb-border);
  position:sticky;top:0;z-index:50;box-sizing:border-box}
@media(max-width:767px){.ds-topbar{padding:0 16px}}

/* ===== МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ (кабинет) ===== */
.ds-bottomnav{
  position:fixed;left:0;right:0;bottom:0;top:auto!important;z-index:120;display:none;
  background:var(--sb-surface);border-top:1px solid var(--sb-border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.ds-bottomnav-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.ds-bottomnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:48px;border-radius:var(--sb-r-sm);color:var(--sb-text-secondary);font-size:10.5px;font-weight:700;
  cursor:pointer;text-align:center}
.ds-bottomnav-item svg{width:20px;height:20px}
.ds-bottomnav-item.active{color:var(--sb-blue)}
@media(max-width:767px){.ds-bottomnav{display:block}}

/* ==========================================================================
   HEADER — светлая тема (переопределяет тёмные правила site.css каскадом,
   т.к. design-system.css подключается позже; сами правила не удаляем).
   ========================================================================== */
nav{background:rgba(255,255,255,0.86);backdrop-filter:blur(20px) saturate(1.2);
  border-bottom:1px solid var(--sb-border);box-shadow:0 1px 0 rgba(8,20,46,0.02)}
nav .logo-text-fb span:first-child{color:var(--sb-cyan)!important}
nav .logo-text-fb span:last-child{color:var(--sb-violet)!important}
.nav-link{color:var(--sb-text-secondary)}
.nav-link:hover{color:var(--sb-text);background:var(--sb-surface-soft)}
.nav-link[style*="color:#8B5CF6"]{color:var(--sb-violet)!important}
.nav-dropdown{background:var(--sb-surface);border:1px solid var(--sb-border);
  box-shadow:var(--sb-shadow-lg);color:var(--sb-text)}
.nav-dd-foot a,.nav-link{font-family:var(--sb-font)}
.notif-btn,.lang-btn,.user-menu-btn{background:var(--sb-surface-soft);color:var(--sb-text-secondary);
  border:1px solid var(--sb-border)}
.notif-btn:hover,.lang-btn:hover,.user-menu-btn:hover{border-color:var(--sb-blue);color:var(--sb-blue)}
.btn-ghost{color:var(--sb-text-secondary);border-color:var(--sb-border)}
.btn-ghost:hover{color:var(--sb-blue);border-color:var(--sb-blue)}
.btn-primary{background:var(--sb-grad)!important;color:#fff!important}
.notif-dropdown,.user-dropdown,.lang-menu{background:var(--sb-surface);border:1px solid var(--sb-border);
  box-shadow:var(--sb-shadow-lg);color:var(--sb-text)}
.notif-head,.user-card{border-bottom:1px solid var(--sb-border)}
.user-menu-list a,.lang-item,.notif-item{color:var(--sb-text)}
.user-menu-list a:hover,.lang-item:hover{background:var(--sb-surface-soft)}
.mobile-menu{background:var(--sb-surface);color:var(--sb-text)}
.mobile-menu a,.mobile-link{color:var(--sb-text)}
.burger{color:var(--sb-text)}
.burger svg{color:var(--sb-text)}

/* ===== КАБИНЕТ: нижняя навигация на мобильном ===== */
@media(max-width:767px){
  #appMain{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* Публичная sticky-CTA не должна показываться поверх кабинета —
     иначе она перекрывает нижнюю навигацию кабинета. */
  body.app-page-active .mobile-sticky-cta{display:none!important}
}

/* ===== ЭТАП 1: постоянная нижняя CTA-кнопка публичной страницы временно
   отключена явным пунктом задания — снимает конфликт с cookie/toast/
   нижней навигацией кабинета до отдельного решения в следующем этапе. ===== */
.mobile-sticky-cta{display:none!important}

/* ==========================================================================
   АДМИНКА: мобильный drawer вместо горизонтальной прокрутки.
   Старые правила на 900/820/700/480px делали .adm-side горизontal-scroll
   рядом плиток — перебиваем !important на ключевых свойствах, т.к. они
   разбросаны по нескольким медиа-блокам с разной специфичностью.
   ========================================================================== */
.adm-drawer-btn{display:none}
@media(max-width:1023px){
  .adm-drawer-btn{display:inline-flex!important;align-items:center;gap:8px;
    padding:10px 16px;border-radius:var(--sb-r-sm);border:1px solid var(--sb-border);
    background:var(--sb-surface);color:var(--sb-text);font-weight:700;font-size:14px;
    cursor:pointer;min-height:44px}
  .adm-side{
    position:fixed!important;top:0!important;right:0!important;left:auto!important;bottom:0!important;
    width:min(360px,100vw)!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    z-index:260;background:var(--sb-surface,var(--card));
    transform:translateX(100%)!important;transition:transform .28s ease;
    overflow-y:auto!important;overflow-x:hidden!important;
    flex-direction:column!important;flex-wrap:nowrap!important;display:flex!important;
    border-radius:0!important;border:none!important;border-left:1px solid var(--sb-border,var(--border));
    box-shadow:-20px 0 60px rgba(8,20,46,0.25);
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))!important;
  }
  .adm-side.open{transform:translateX(0)!important}
  .adm-side-backdrop{position:fixed;inset:0;z-index:259;background:rgba(7,20,45,0.45);
    opacity:0;visibility:hidden;pointer-events:none;transition:.25s}
  .adm-side-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
  .adm-nav{flex-shrink:0!important}
  .adm-nav.active{background:var(--sb-surface-soft,rgba(139,92,246,0.14));color:var(--sb-blue,#8B5CF6);font-weight:800}
}
@media(min-width:1024px){.adm-side-backdrop{display:none}}

/* ==========================================================================
   ЕДИНАЯ СИСТЕМА СЛОЁВ (z-index) — вместо случайных чисел.
   10   — sticky topbar / app-mobile-bar
   90   — мобильная sticky-CTA (отключена на Этапе 1)
   97   — back-to-top
   120  — cookie-banner
   150  — burger-меню сайта
   199  — backdrop drawer'ов кабинета
   200  — drawer кабинета / notif-dropdown
   259  — backdrop drawer'а админки
   260  — drawer админки
   300  — modal / toast
   ========================================================================== */

/* «Наверх» — вертикально справа (chat FAB, если появится, встанет над ней
   тем же правилом — сейчас отдельного chat-виджета в проекте нет). */
.back-top{left:auto!important;right:16px!important}

/* Cookie поднимает back-top выше себя, если оба вдруг видны одновременно —
   но t.к. cookie и так прячет back-top (body.cookie-open), этот отступ
   подстраховывает промежуточное состояние анимации. */
body.cookie-open .back-top{bottom:calc(88px + 70px)!important}

/* В кабинете на мобильном cookie-баннер должен быть ВЫШЕ нижней навигации,
   не под ней. */
@media(max-width:767px){
  body.app-page-active .cookie-banner{bottom:calc(64px + env(safe-area-inset-bottom) + 12px)!important}
}

/* Открытый drawer админки — та же логика, что у остальных drawer'ов:
   прячем фоновые FAB, пока он открыт. */
body.admin-drawer-open .back-top,body.admin-drawer-open .mobile-sticky-cta{display:none!important}

/* На desktop (>1100px) cookie стоит справа-снизу, но AI Workflow —
   тёмная панель на всю ширину контейнера — иногда попадает в ту же
   вертикальную зону viewport, а её заголовок расположен у ВЕРХА панели.
   Margin-bottom самой панели её не сдвинет — отодвигаем секцию, идущую
   ПЕРЕД ней (hero), чтобы вся панель AI Workflow целиком начиналась ниже. */
@media(min-width:1101px){
  body.cookie-open .hero{margin-bottom:210px;transition:margin-bottom .3s}
}

/* ===== FOCUS-VISIBLE ГЛОБАЛЬНО ДЛЯ НОВЫХ КОМПОНЕНТОВ ===== */
.ds-scope a:focus-visible,.ds-scope button:focus-visible,.ds-scope input:focus-visible,
.ds-scope select:focus-visible,.ds-scope textarea:focus-visible,.ds-scope [tabindex]:focus-visible{
  outline:2px solid var(--sb-blue);outline-offset:2px;
}

/* ==========================================================================
   ЭТАП 3: КАБИНЕТ — СВЕТЛАЯ ТЕМА (проверка гипотезы)
   Вся разметка кабинета уже построена на CSS-переменных (--card, --border,
   --text, --muted и т.д.), а не на хардкод-цветах. Переопределяем их в
   скоупе body.app-page-active — существующая разметка Обзора и будущих
   разделов должна автоматически перекраситься без переписывания HTML.
   ========================================================================== */
body.app-page-active{
  --bg:var(--sb-bg);
  --bg2:var(--sb-surface);
  --bg3:var(--sb-surface-soft);
  --card:var(--sb-surface);
  --card2:var(--sb-surface-soft);
  --border:var(--sb-border);
  --border2:var(--sb-border);
  --text:var(--sb-text);
  --muted:var(--sb-text-secondary);
  --muted2:var(--sb-text-secondary);
  --shadow-sm:var(--sb-shadow-sm);
  --shadow-md:var(--sb-shadow-md);
  --shadow-lg:var(--sb-shadow-lg);
  --shadow:var(--sb-shadow-lg);
  background:var(--sb-bg);
  color:var(--sb-text);
}
/* Баннер подтверждения email — .wf-demo-banner общий класс для всего сайта,
   поэтому контраст правим только в скоупе кабинета, чтобы не задеть другие
   страницы. Было: светло-жёлтый текст (#fcd34d) — рассчитан на тёмный фон,
   на светлом фоне кабинета читался плохо. */
body.app-page-active .wf-demo-banner{
  background:#FEF6E7;
  border-color:rgba(180,124,10,0.35);
  color:#7A4A05;
}
body.app-page-active .wf-demo-banner b{color:#5C3502}

/* ===== ФУТЕР КАБИНЕТА: компактный вместо публичного ===== */
body.app-page-active footer{display:none}
body.app-page-active .app-footer{
  text-align:center;font-size:12px;color:var(--sb-text-secondary);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--sb-border);
}
body.app-page-active .app-footer a{color:var(--sb-text-secondary);text-decoration:underline;cursor:pointer}
body.app-page-active .app-footer a:hover{color:var(--sb-violet)}
@media(max-width:767px){
  body.app-page-active .app-footer{
    padding:12px 16px calc(64px + env(safe-area-inset-bottom) + 10px);
    font-size:11px;line-height:1.6;
  }
}

/* ===== ПУСТОЕ СОСТОЯНИЕ ГРАФИКА (вместо огромной пустой SVG-области) ===== */
body.app-page-active .ov-empty-chart{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:20px 16px;color:var(--sb-text-secondary);
}
body.app-page-active .ov-empty-chart svg{width:22px;height:22px;color:var(--sb-border);margin-bottom:2px}
body.app-page-active .ov-empty-chart b{font-size:13.5px;color:var(--sb-text);font-weight:700}
body.app-page-active .ov-empty-chart span{font-size:12px}
body.app-page-active .ov-empty-chart .ws-btn-sm{margin-top:6px}

/* ===== СОКРАЩЕНИЕ ОТСТУПОВ КАРТОЧЕК КАБИНЕТА (~25%) =====
   .ws-panel — общий класс для всего сайта, поэтому сокращаем padding
   только в скоупе кабинета, не трогая остальные страницы. */
body.app-page-active .ws-panel{padding:24px}
body.app-page-active .ws-panel-title{margin-bottom:14px}
@media(max-width:767px){body.app-page-active .ws-panel{padding:16px}}

/* ===== COOKIE В КАБИНЕТЕ: часть потока, не floating-оверлей =====
   Элемент физически перенесён в JS в начало #page-app (см. app.js,
   relocateCookieBannerIntoCabinet). Здесь только меняем позиционирование
   с fixed на обычный поток — сама логика показа/скрытия не тронута. */
/* Баннер в кабинете больше НЕ ставится в поток. Раньше здесь стоял
   position:static!important — баннер занимал место над рабочей областью,
   сдвигал шапку и первый экран вниз. Позиционирование задаёт workspace.css:
   фиксировано снизу, чтобы не перекрывать ни меню, ни содержимое. */
body.app-page-active #cookieBanner{
  max-width:none;
  box-shadow:var(--ws-shadow-lg,0 12px 34px rgba(15,23,42,.18));
}
body.app-page-active #cookieBanner.show{transform:none!important}
@media(max-width:767px){
  body.app-page-active #cookieBanner{
    margin:10px 12px!important;
    padding:10px 12px!important;
    font-size:12px!important;
  }
}

/* ===== ФОРМЫ КАБИНЕТА: белый текст на белом фоне =====
   .ws-input/.ws-textarea/.ws-select имеют background:var(--bg2) (уже
   светлый через override выше) и захардкоженный color:#fff отдельно —
   на светлом фоне текст/опции были невидимы. */
body.app-page-active .ws-input,
body.app-page-active .ws-textarea,
body.app-page-active .ws-select{color:var(--sb-text)}
body.app-page-active .ws-input::placeholder,
body.app-page-active .ws-textarea::placeholder{color:var(--sb-text-secondary)}

/* ==========================================================================
   КАРТОЧКА ПРОЕКТА — перестроена под мобильный, без изменений >600px.
   БАЗОВЫЕ правила ниже воспроизводят прежний flex-row вид (desktop/tablet
   не тронуты структурно, только имена классов сменились с инлайн-стилей).
   ========================================================================== */
body.app-page-active .proj-card{display:flex;gap:12px;align-items:center}
body.app-page-active .proj-card-info{flex:1;cursor:pointer;min-width:0}
body.app-page-active .proj-card-name-row{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.app-page-active .proj-card-name{word-break:break-word}
body.app-page-active .proj-card-meta{font-size:12px;color:var(--muted);margin-top:2px}
body.app-page-active .proj-card-actions{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}
body.app-page-active .proj-act-row2{display:flex;gap:6px}
body.app-page-active .proj-act-icons{display:flex;gap:6px}
body.app-page-active .proj-act-select{display:flex;align-items:center}

/* ===== МОБИЛЬНЫЙ ≤600px: полная вертикальная перестройка ===== */
@media(max-width:600px){
  body.app-page-active .proj-card{flex-direction:column;align-items:stretch;gap:10px}
  body.app-page-active .proj-card-name-row{font-size:15px}
  body.app-page-active .proj-card-name{flex:1 1 auto;min-width:150px}
  body.app-page-active .proj-card-meta{white-space:normal;line-height:1.5}
  body.app-page-active .proj-card-actions{flex-direction:column;gap:8px;width:100%}
  body.app-page-active .proj-act-select{width:100%;min-height:44px;justify-content:center}
  body.app-page-active .proj-act-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  body.app-page-active .proj-act-row2 button{min-height:44px}
  body.app-page-active .proj-act-icons{display:flex;gap:8px;width:100%}
  body.app-page-active .proj-icon-btn{flex:0 0 44px;width:44px;height:44px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;padding:0}
}

/* ===== TOAST: белый текст на белом фоне =====
   .toast имел color:#fff (расчитан на тёмный фон) + отдельное правило
   body.light .toast{background:#ffffff} — на светлом фоне кабинета текст
   был невидим, виден был только цветной svg-чек. */
body.app-page-active .toast{color:var(--sb-text)}
body.app-page-active .toast span{color:var(--sb-text)}

/* ===== ПУСТОЕ СОСТОЯНИЕ КАТАЛОГА ИНСТРУМЕНТОВ ===== */
body.app-page-active .ws-empty{display:flex;flex-direction:column;align-items:center}
body.app-page-active .ws-empty-title{font-size:16px;font-weight:800;color:var(--sb-text);margin-top:10px}

/* ===== БОКОВОЕ МЕНЮ КАБИНЕТА: hover на светлой теме =====
   .app-nav:hover в site.css — старое правило тёмной темы (белый фон +
   белый текст), при наведении пункт становился невидимым. Переопределяем
   глобально для всего кабинета через scoped-правило. */
body.app-page-active .app-nav:not(.active):hover{
  background: var(--sb-surface-soft);
  color: var(--sb-text);
}
body.app-page-active .app-nav.active,
body.app-page-active .app-nav.active:hover{
  background: var(--grad2);
  color: #fff;
}
body.app-page-active .app-nav .app-nav-label,
body.app-page-active .app-nav svg,
body.app-page-active .app-nav .ic{
  color: inherit;
}
/* .app-nav — обычный <div> без своего :focus-visible, показывал браузерный
   дефолт (тёмный auto-outline). Добавляем фиолетовый 2px, как требуется. */
body.app-page-active .app-nav:focus-visible{
  outline: 2px solid var(--sb-violet, #8B5CF6) !important;
  outline-offset: 2px;
}

/* ==========================================================================
   ЭТАП: ОБОЛОЧКА КАБИНЕТА — публичный хедер скрыт внутри кабинета
   Публичный <nav> (без класса) содержит мега-меню AI Workflow/Инструменты/
   Vision/PageSpeed/UTM/О компании/Тарифы — не нужен в кабинете, где будет
   собственный app-topbar. Сам хедер физически не трогаем (публичные
   страницы используют тот же файл) — только скрываем через скоуп.
   :not(.ds-bottomnav) — иначе задели бы и нижнюю навигацию кабинета,
   которая тоже <nav>.
   ========================================================================== */
body.app-page-active nav:not(.ds-bottomnav){display:none}

/* ==========================================================================
   APP-TOPBAR — отдельная верхняя панель кабинета (не публичный хедер)
   ========================================================================== */
body.app-page-active .app-topbar{
  display:flex;align-items:center;gap:16px;
  height:64px;padding:0 20px;
  background:var(--sb-surface,#fff);
  border-bottom:1px solid var(--sb-border);
  position:sticky;top:0;z-index:50;
}
body.app-page-active .app-topbar-left{display:flex;align-items:center;gap:14px;flex-shrink:0}
body.app-page-active .app-topbar-left .logo-img{height:28px}
body.app-page-active .app-topbar-projswitch{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:10px;
  background:var(--sb-surface-soft);border:1px solid var(--sb-border);
  color:var(--sb-text);font-size:13px;font-weight:700;cursor:pointer;
  max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.app-page-active .app-topbar-projswitch:hover{border-color:var(--sb-violet)}
body.app-page-active .app-topbar-center{flex:1;display:flex;justify-content:center;min-width:0}
body.app-page-active .app-topbar-search{position:relative;width:100%;max-width:440px;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;background:var(--sb-surface-soft);border:1px solid var(--sb-border)}
body.app-page-active .app-topbar-search svg{color:var(--sb-text-secondary);flex-shrink:0}
body.app-page-active .app-topbar-search input{flex:1;border:none;background:transparent;outline:none;font-size:13px;color:var(--sb-text);min-width:0}
body.app-page-active .app-search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--sb-surface,#fff);border:1px solid var(--sb-border);border-radius:12px;box-shadow:var(--sb-shadow-lg);max-height:320px;overflow-y:auto;z-index:60}
body.app-page-active .app-search-results.open{display:block}
body.app-page-active .app-search-item{padding:10px 14px;font-size:13px;color:var(--sb-text);cursor:pointer;display:flex;align-items:center;gap:8px}
body.app-page-active .app-search-item:hover{background:var(--sb-surface-soft)}
body.app-page-active .app-search-type{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--sb-violet);background:rgba(139,92,246,0.10);padding:2px 6px;border-radius:6px;flex-shrink:0}
body.app-page-active .app-search-empty{padding:16px;text-align:center;font-size:13px;color:var(--sb-text-secondary)}
body.app-page-active .app-topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
body.app-page-active .app-topbar-create-wrap{position:relative}
body.app-page-active .app-topbar-create{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:10px;background:var(--grad2);color:#fff;font-size:13px;font-weight:800;border:none;cursor:pointer;white-space:nowrap}
body.app-page-active .app-create-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:var(--sb-surface,#fff);border:1px solid var(--sb-border);border-radius:12px;box-shadow:var(--sb-shadow-lg);padding:6px;z-index:60}
body.app-page-active .app-create-menu.open{display:block}
body.app-page-active .app-create-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:8px;background:none;border:none;color:var(--sb-text);font-size:13px;text-align:left;cursor:pointer}
body.app-page-active .app-create-menu button:hover{background:var(--sb-surface-soft)}
body.app-page-active .app-topbar-conn{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--sb-surface-soft);border:1px solid var(--sb-border);color:var(--sb-text-secondary);cursor:pointer}
body.app-page-active .app-topbar-conn:hover{border-color:var(--sb-violet);color:var(--sb-violet)}
body.app-page-active .app-topbar-notif-wrap,
body.app-page-active .app-topbar-avatar-wrap{position:relative}
body.app-page-active #appNotifBtn{width:40px;height:40px}
body.app-page-active #appNotifDropdown{position:absolute;top:calc(100% + 8px);right:0;left:auto;display:none}
body.app-page-active #appNotifDropdown.open{display:block}
body.app-page-active .app-topbar-avatar-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%}
body.app-page-active .app-avatar-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:260px;background:var(--sb-surface,#fff);border:1px solid var(--sb-border);border-radius:14px;box-shadow:var(--sb-shadow-lg);overflow:hidden;z-index:60}
body.app-page-active .app-avatar-menu.open{display:block}
/* Легаси-кнопка удалена: такой в разметке нет. */

/* ===== Мобильный topbar кабинета: логотип слева, аватар+колокольчик+burger справа ===== */
@media(max-width:767px){
  body.app-page-active .app-topbar{padding:0 12px;height:56px;gap:8px}
  /* Переключатель проекта на телефоне ОСТАЁТСЯ: без него человек не видит,
     с каким сайтом работает, а все разделы кабинета привязаны к проекту.
     Он сжимается до имени (см. workspace.css), а прячутся только те
     элементы, чьи функции доступны иначе: поиск — иконкой, создание —
     кнопками на экранах, подключения — разделом «Интеграции». */
  body.app-page-active .app-topbar-center,
  body.app-page-active .app-topbar-create-wrap,
  body.app-page-active .app-topbar-conn{display:none}
  body.app-page-active .app-topbar-right{flex-wrap:nowrap;gap:6px}
  body.app-page-active #appNotifBtn,
  body.app-page-active .app-topbar-avatar-btn{
    width:44px;height:44px;min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
/* легаси-кнопка удалена */
  body.app-page-active .app-avatar-menu,
  body.app-page-active #appNotifDropdown{right:-8px;max-width:calc(100vw - 16px)}
}

/* ===== Переключатель проекта — dropdown ===== */
body.app-page-active .app-topbar-left{position:relative}
body.app-page-active .app-proj-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;width:300px;max-width:calc(100vw - 24px);background:var(--sb-surface,#fff);border:1px solid var(--sb-border);border-radius:14px;box-shadow:var(--sb-shadow-lg);overflow:hidden;z-index:60}
body.app-page-active .app-proj-dropdown.open{display:block}
body.app-page-active .app-proj-search{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--sb-border)}
body.app-page-active .app-proj-search svg{color:var(--sb-text-secondary);flex-shrink:0}
body.app-page-active .app-proj-search input{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:var(--sb-text)}
body.app-page-active .app-proj-list{max-height:260px;overflow-y:auto;padding:6px}
body.app-page-active .app-proj-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px;border-radius:8px;cursor:pointer}
body.app-page-active .app-proj-item:hover{background:var(--sb-surface-soft)}
body.app-page-active .app-proj-item.active{background:rgba(139,92,246,0.08)}
body.app-page-active .app-proj-item-main{display:flex;flex-direction:column;gap:2px;min-width:0}
body.app-page-active .app-proj-item-main b{font-size:13px;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.app-page-active .app-proj-item-meta{font-size:11px;color:var(--sb-text-secondary)}
body.app-page-active .app-proj-item svg{color:var(--sb-violet);flex-shrink:0}
body.app-page-active .app-proj-empty{padding:24px 14px;text-align:center;font-size:13px;color:var(--sb-text-secondary)}
body.app-page-active .app-proj-actions{border-top:1px solid var(--sb-border);padding:6px}
body.app-page-active .app-proj-actions button{display:flex;align-items:center;gap:8px;width:100%;padding:10px;border-radius:8px;background:none;border:none;color:var(--sb-text);font-size:13px;text-align:left;cursor:pointer}
body.app-page-active .app-proj-actions button:hover{background:var(--sb-surface-soft)}

/* ===== Drawer «Ещё»: разделитель и «Выйти» отдельно от обычных пунктов ===== */
body.app-page-active .app-nav-sep{height:1px;background:var(--sb-border);margin:14px 0}
body.app-page-active .app-nav-logout{color:#dc2626}
body.app-page-active .app-nav-logout svg{color:#dc2626}
body.app-page-active .app-nav-logout:hover{background:rgba(239,68,68,0.08)}

/* ===== Sidebar collapse до 76px (только desktop ≥1024px) ===== */
@media(min-width:1200px){
  body.app-page-active .app-side-collapse-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:10px;margin-bottom:10px;
    background:var(--sb-surface-soft);border:1px solid var(--sb-border);border-radius:8px;
    color:var(--sb-text-secondary);cursor:pointer;font-size:13px;font-weight:700;
  }
  body.app-page-active .app-side-collapse-btn:hover{color:var(--sb-violet);border-color:var(--sb-violet)}
  body.app-page-active .collapse-ic-out{display:none}
  body.app-page-active .app-side.collapsed{width:76px;padding-left:10px;padding-right:10px}
  body.app-page-active .app-shell.sidebar-collapsed{grid-template-columns:76px 1fr}
  body.app-page-active .app-side.collapsed .app-side-user > div:not(.app-avatar),
  body.app-page-active .app-side.collapsed .app-nav-label,
  body.app-page-active .app-side.collapsed .app-side-collapse-btn span{display:none}
  body.app-page-active .app-side.collapsed .app-side-user{justify-content:center;padding:8px}
  body.app-page-active .app-side.collapsed .app-nav{justify-content:center;padding:12px 8px}
  body.app-page-active .app-side.collapsed .collapse-ic-in{display:none}
  body.app-page-active .app-side.collapsed .collapse-ic-out{display:block}
  body.app-page-active .app-side.collapsed .collapse-btn-label{display:none}
  body.app-page-active .app-side.collapsed ~ .app-shell,
  body.app-page-active .app-side.collapsed{transition:width .2s ease}
}
@media(max-width:1199px){
  body.app-page-active .app-side-collapse-btn{display:none}
}

/* ===== focus-visible для новых кнопок app-topbar ===== */
body.app-page-active #appCreateBtn:focus-visible,
body.app-page-active #appNotifBtn:focus-visible,
body.app-page-active #appAvatarBtn:focus-visible,
body.app-page-active #appProjSwitch:focus-visible,
body.app-page-active #appConnStatus:focus-visible,
body.app-page-active #appSideCollapseBtn:focus-visible,
body.app-page-active #appBackBtn:focus-visible,
body.app-page-active .app-create-menu button:focus-visible,
body.app-page-active .app-avatar-menu a:focus-visible,
body.app-page-active .app-proj-item:focus-visible,
body.app-page-active .conn-card-actions button:focus-visible{
  outline:2px solid var(--sb-violet,#8B5CF6)!important;
  outline-offset:2px;
}

/* ==========================================================================
   АУДИТ HOVER-КОНТРАСТА — системные причины, не отдельные хардкоды
   Найдено автоматическим сканером (реальный Playwright hover + WCAG-контраст
   с учётом alpha-композиции фона). Старые правила из site.css НЕ удалены —
   перекрыты здесь, в design-system.css, который подключается после site.css.
   ========================================================================== */

/* 1. .ws-chip:hover — было color:#fff без смены фона (наследие тёмной темы:
   var(--bg2) раньше был тёмным, теперь светлый — белый текст неразличим).
   .active не трогаем — там уже свой градиент+белый, корректно. */
body.app-page-active .ws-chip:not(.active):hover{
  background: var(--sb-surface-soft, rgba(139,92,246,0.10));
  color: var(--sb-text, #0B1731);
}

/* 2. .tg-star — #F59E0B даёт ~2.2:1 на белом (нужно ≥3:1 для icon-button).
   Тёмный янтарь сохраняет тёплый смысл «избранного», проходит контраст. */
body.app-page-active .tg-star:hover,
body.app-page-active .tg-star.on{
  color: #B45309;
}

/* 3. .cal-slot — #5FE3DC (та же проблема, что чинил в «Позициях» несколько
   раз) на var(--bg2). Тёмная бирюза вместо яркой — и в normal, и в hover.
   На тёмной теме тот же тёмный тон даёт обратную проблему (тёмное на
   тёмном, 2.97:1) — нужен светлый бирюзовый специально для dark. */
body.app-page-active .cal-slot{
  color: #0A8A84;
}
body.app-page-active .cal-slot:hover{
  color: #067A74;
}
html[data-theme="dark"] body.app-page-active .cal-slot{
  color: #2DD4DD;
}
html[data-theme="dark"] body.app-page-active .cal-slot:hover{
  color: #5FE3DC;
}

/* 4. .ana-dim button.active — 20%-альфа фиолетовый + белый текст (то же
   наследие тёмной темы). Приводим к единому паттерну active по всему
   кабинету: сплошной градиент + белый текст, как .ws-chip.active. */
body.app-page-active .ana-dim button.active{
  background: var(--grad2);
  color: #fff;
  border-color: transparent;
}

/* 4b. .ana-period button.active — тот же класс использует и «Аналитика»,
   и «История» (общий CSS-класс). #A78BFA на 15%-альфа composite давал
   2.14:1 в контексте Истории (в Аналитике на другом родительском фоне
   было терпимо — но полагаться на контекст ненадёжно). Тёмный фиолетовый
   даёт запас независимо от фактического фона-предка. */
body.app-page-active .ana-period button.active{
  color: #5B21B6;
}
html[data-theme="dark"] body.app-page-active .ana-period button.active{
  color: #C4B5FD;
}

/* 5. .user-menu-list a:hover — #A78BFA (светлый фиолетовый для тёмного
   фона) поверх 10%-тонированного фона даёт низкий контраст на белом.
   Общий класс с публичным хедером — базу не трогаем, только в кабинете. */
body.app-page-active .user-menu-list a:hover{
  background: var(--sb-surface-soft, rgba(139,92,246,0.10));
  color: var(--sb-violet, #7C3AED);
}
body.app-page-active .user-menu-list a.logout{
  color: #DC2626;
}
body.app-page-active .user-menu-list a.logout:hover{
  background: rgba(239,68,68,0.08);
  color: #B91C1C;
}
html[data-theme="dark"] body.app-page-active .user-menu-list a.logout:hover{
  color: #F87171;
}

/* 6. .notif-head button / .notif-foot a — тот же #A78BFA база, тот же
   корень, что и выше. */
body.app-page-active .notif-head button,
body.app-page-active .notif-foot a{
  color: var(--sb-violet, #7C3AED);
}
body.app-page-active .notif-head button:hover{
  background: var(--sb-surface-soft, rgba(139,92,246,0.10));
  color: var(--sb-violet);
}

/* 7. .ag-stage — цвет приходит через инлайн-стиль из общей карты PSTAGES
   (используется и в уже подтверждённых «Проектах» — саму карту не трогаем,
   чтобы не сдвинуть согласованный внешний вид). Инлайн можно перекрыть
   только через !important — здесь это оправданно, не хардкод одного случая,
   а универсальное затемнение для всех 4 цветов стадий разом. */
body.app-page-active .ag-stage{
  filter: brightness(0.72) saturate(1.15) !important;
}

/* 8. .wf-copy:hover / .ai-btn — низкий контраст на светлом фоне (базовые
   цвета #A78BFA/#8B5CF6 рассчитаны на тёмный фон). */
body.app-page-active .wf-copy:hover{
  background: var(--sb-surface-soft, rgba(139,92,246,0.12));
  border-color: var(--sb-violet, #7C3AED);
  color: var(--sb-text, #0B1731) !important;
}
body.app-page-active .ai-btn{
  color: #6D28D9;
}
body.app-page-active .ai-btn:hover{
  background: rgba(139,92,246,0.22);
  color: #5B21B6;
}

/* ===== .ws-chip — не было tabindex вообще (недоступна с клавиатуры),
   добавлен в app.js массово через regex; здесь — focus-visible ===== */
body.app-page-active .ws-chip:focus-visible{
  outline: 2px solid var(--sb-violet, #8B5CF6) !important;
  outline-offset: 2px;
}

/* ===== Mobile drawer «Ещё» — заголовок, X, переключатель проекта ===== */
body.app-page-active .app-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--sb-border);
}
body.app-page-active .app-drawer-head h3{font-size:17px;font-weight:900;color:var(--sb-text);margin:0}
body.app-page-active .app-drawer-close{
  width:44px;height:44px;min-width:44px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--sb-surface-soft);border:1px solid var(--sb-border);
  color:var(--sb-text-secondary);cursor:pointer;
}
body.app-page-active .app-drawer-close:hover{color:#DC2626;border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.08)}
body.app-page-active .app-drawer-close:focus-visible{outline:2px solid var(--sb-violet,#8B5CF6)!important;outline-offset:2px}
body.app-page-active .app-drawer-projswitch{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 14px;margin-bottom:16px;border-radius:10px;
  background:var(--sb-surface-soft);border:1px solid var(--sb-border);
  color:var(--sb-text);font-size:13px;font-weight:700;cursor:pointer;
}
body.app-page-active .app-drawer-projswitch span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.app-page-active .app-drawer-projswitch:hover{border-color:var(--sb-violet)}
body.app-page-active .app-drawer-projswitch:focus-visible{outline:2px solid var(--sb-violet,#8B5CF6)!important;outline-offset:2px}

/* ===== «Внешний вид» — выбор темы (меню аватара + drawer) ===== */
body.app-page-active .theme-section-label{
  padding:10px 14px 4px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.04em;color:var(--sb-text-secondary);
}
body.app-page-active .theme-opts{
  display:flex;flex-direction:column;gap:2px;padding:2px 8px 8px;
}
body.app-page-active .theme-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:8px;background:none;border:none;
  color:var(--sb-text);font-size:13px;font-weight:600;cursor:pointer;
}
body.app-page-active .theme-opt:hover{background:var(--sb-surface-soft)}
body.app-page-active .theme-opt.active{
  background:rgba(139,92,246,0.12);color:var(--sb-violet);font-weight:800;
}
body.app-page-active .theme-opt:focus-visible{
  outline:2px solid var(--sb-violet,#8B5CF6)!important;outline-offset:-2px;
}

/* ===== «Аналитика» — focus-visible для собственных переключателей ===== */
body.app-page-active .ana-dim button:focus-visible,
body.app-page-active .ana-period button:focus-visible,
body.app-page-active .ana-ctype button:focus-visible,
body.app-page-active .ana-series-chip:focus-visible,
body.app-page-active .gsc-card:focus-visible,
body.app-page-active .wf-copy:focus-visible,
body.app-page-active .ws-btn-sm:focus-visible,
body.app-page-active .ws-btn:focus-visible{
  outline: 2px solid var(--sb-violet,#8B5CF6) !important;
  outline-offset: 2px;
}