/**
 * Единый источник семантических цветов и токенов для пользовательской платформы,
 * админки (html[data-app="admin"]) и backtest-visualizer (body[data-style-mode]).
 */

/* ================================================================
   Mobile-friendly базовые гарантии (PDA Platform).
   Применимо ко ВСЕМ страницам: Lounge, Login, Admin, Workbench (через App.css).
   Источник правил: WCAG 2.5.5 (touch target ≥44px), iOS Safari quirks,
   современные best practices (color-mix, clamp, env(safe-area-inset)).
   --------------------------------------------------------------- */

/* 1. touch-action: manipulation — убирает 300ms задержку double-tap-to-zoom.
   Применяем только к интерактивным элементам (на всё подряд = ломает pinch-zoom
   на чартах TradingView). */
button,
a,
[role="button"],
[role="tab"],
[role="menuitem"],
input[type="checkbox"],
input[type="radio"],
.tab,
.chip,
.pda-collapsible-header,
.ctx-menu button,
.ctx-menu a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 2. iOS Safari zoom fix: при focus на input с font-size < 16px iOS делает auto-zoom.
   Принудительно ставим 16px на мобильных. На десктопе остаётся компактный 12-13px. */
@media (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 2b. Lounge mobile drawer/analytics open: lock background scroll (html+body).
   JS syncMobileDrawerBackdrop toggles .has-mobile-drawer + body.style.top for iOS. */
html.has-mobile-drawer,
body.has-mobile-drawer {
  overflow: hidden;
  overscroll-behavior: none;
}
body.has-mobile-drawer {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* Chat scrollport: contain overscroll so rubber-band does not move the page behind. */
.analytics-chat-messages {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 3. Touch targets ≥44×44px (WCAG 2.5.5 AAA). На мобиле увеличиваем минимальный
   размер всех кнопок/чекбоксов/радио. На десктопе остаются компактные размеры. */
@media (max-width: 1024px) and (pointer: coarse) {
  button:not(.pah-btn):not(.pah-signout):not(.btn-toolbar-icon):not(.feed-panel-toggle):not(.analytics-panel-toggle),
  [role="button"],
  a.btn,
  .ctx-menu button,
  .ctx-menu a {
    min-height: 44px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
  /* Расстояние между интерактивными элементами в списках. */
  .ctx-menu button + button,
  .ctx-menu a + a { margin-top: 2px; }
}

/* 4. Safe-area-inset для устройств с notch / dynamic island (iPhone X+).
   Добавляем к ключевым fixed-контейнерам внутренний отступ от вырезов экрана. */
body.platform-app,
body.platform-login,
html[data-app="admin"] body {
  /* env() работает даже там где safe-area = 0 — fallback не нужен. */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.platform-app-header {
  padding-left: max(12px, env(safe-area-inset-left, 0));
  padding-right: max(12px, env(safe-area-inset-right, 0));
  padding-top: env(safe-area-inset-top, 0);
}

/* 5. Fluid typography через clamp() для базовых заголовков (без брейкпоинтов).
   Минимум — мобильный, максимум — десктопный, между ними плавное масштабирование.
   Применяется только внутри `.platform-app` чтобы не задеть admin/workbench. */
body.platform-app h1 { font-size: clamp(18px, 4vw, 26px); }
body.platform-app h2 { font-size: clamp(15px, 3vw, 20px); }
body.platform-app h3 { font-size: clamp(13px, 2.5vw, 16px); }

/* 6. prefers-reduced-motion — для пользователей с настройкой «уменьшить движение».
   Глобально отключаем нелинейные анимации/transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   Admin-dashboard tablet/mobile (docs/Front/03 шаг 29 + Design cycle 8).
   Применяется ко всем страницам admin-dashboard через html[data-app="admin"].
   @768: chrome nav/tabs scroll, tables overflow, modals/drawers clamp,
   hit-areas ≥40px. Таблицы НЕ ломаем через thead/tbody {display:table}
   (это клипало колонки) — скролл на обёртке / самой table как block.
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  html[data-app="admin"] .wrap {
    padding: 12px !important;
    max-width: 100%;
    overflow-x: clip;
  }
  html[data-app="admin"] .admin-site-nav,
  html[data-app="admin"] .dashboard-tabs,
  html[data-app="admin"] .platform-tabbar,
  html[data-app="admin"] .main-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
    max-width: 100%;
    gap: 8px;
  }
  html[data-app="admin"] .admin-site-nav > a,
  html[data-app="admin"] .admin-site-nav > span,
  html[data-app="admin"] .dashboard-tabs > button,
  html[data-app="admin"] .platform-tab-btn,
  html[data-app="admin"] .main-tabs > button {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  /* Design cycle 10: goals/platform secondary chrome (filters, idea tools). */
  html[data-app="admin"] .goals-filter,
  html[data-app="admin"] .ideas-filter,
  html[data-app="admin"] .ticker-filter {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: 100%;
    min-width: 0;
  }
  html[data-app="admin"] .goals-filter select,
  html[data-app="admin"] .ideas-filter select,
  html[data-app="admin"] .ticker-filter select {
    min-width: 0 !important;
    max-width: 100%;
    min-height: 40px;
    box-sizing: border-box;
  }
  html[data-app="admin"] .goal-actions,
  html[data-app="admin"] .modal-actions {
    max-width: 100%;
  }
  html[data-app="admin"] .modal-box {
    min-width: 0 !important;
    width: 100%;
    max-width: min(560px, 100%);
    max-height: min(88dvh, calc(100dvh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  html[data-app="admin"] .admin-site-nav .logout {
    margin-left: 0 !important;
  }
  html[data-app="admin"] h1 { font-size: clamp(15px, 4vw, 20px); }
  html[data-app="admin"] h2 { font-size: clamp(13px, 3vw, 16px); }
  /* Horizontal table scroll without collapsing thead/tbody layout. */
  html[data-app="admin"] table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-collapse: collapse;
  }
  html[data-app="admin"] .ticker-table-wrap,
  html[data-app="admin"] .ticker-list-scroll,
  html[data-app="admin"] .card {
    max-width: 100%;
    min-width: 0;
  }
  html[data-app="admin"] .ticker-table-wrap,
  html[data-app="admin"] .ticker-list-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  html[data-app="admin"] .form-row {
    max-width: 100%;
  }
  html[data-app="admin"] .form-row label {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 140px;
  }
  html[data-app="admin"] .form-row input,
  html[data-app="admin"] .form-row select,
  html[data-app="admin"] .ticker-filter select {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  html[data-app="admin"] .btn,
  html[data-app="admin"] button:not(.pah-btn):not(.pah-signout),
  html[data-app="admin"] .login-card button {
    min-height: 40px;
    box-sizing: border-box;
  }
  /* Modal drawers: stay in viewport, scroll body — real modal backdrop OK. */
  html[data-app="admin"] .modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
  html[data-app="admin"] .modal {
    min-width: 0 !important;
    width: 100%;
    max-width: min(480px, 100%);
    max-height: min(88dvh, calc(100dvh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  html[data-app="admin"] .modal-overlay {
    align-items: center;
  }
}

/* Design cycle 13: admin goals/platform modal clamp @ short-height ≤560. */
@media (max-height: 560px) {
  html[data-app="admin"] .modal-overlay {
    align-items: flex-start !important;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
    box-sizing: border-box;
  }
  html[data-app="admin"] .modal-box,
  html[data-app="admin"] .modal {
    max-height: calc(100dvh - 16px) !important;
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  html[data-app="admin"] .modal-box h3,
  html[data-app="admin"] .modal h3 {
    margin-bottom: 10px;
  }
  html[data-app="admin"] .modal-actions {
    margin-top: 10px;
  }
}

/* Design cycle 9: Archivarius / Admin diagrams overflow @768.
   Mermaid SVG wide graphs stay inside .diagram-box scrollport — no page overflow-x. */
@media (max-width: 1024px) {
  html[data-app="admin"] .diagram-box {
    max-width: 100%;
    max-height: min(70vh, calc(100dvh - var(--platform-header-h, 48px) - 140px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  html[data-app="admin"] .diagram-box .mermaid {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: visible;
  }
  html[data-app="admin"] .diagram-box .mermaid svg {
    max-width: none;
    height: auto;
  }
  html[data-app="admin"] .diagram-tabs,
  html[data-app="admin"] .diagram-edit-bar,
  html[data-app="admin"] .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    gap: 6px;
    scrollbar-width: thin;
  }
  html[data-app="admin"] .diagram-tabs button,
  html[data-app="admin"] .diagram-edit-bar .btn,
  html[data-app="admin"] .nav button {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
    box-sizing: border-box;
  }
  html[data-app="admin"] .diagram-node-popover {
    max-width: min(360px, calc(100vw - 24px));
    max-height: min(50vh, 320px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }
  html[data-app="admin"] .io-textarea,
  html[data-app="admin"] .custom-diagram-wrap {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Design cycle 14: Archivarius diagram-tabs sticky chrome @ short-height. */
@media (max-height: 560px) {
  html[data-app="admin"] .diagram-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg, #1a1a24);
    padding: 6px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  }
  html[data-app="admin"] .diagram-edit-bar {
    position: sticky;
    top: 44px;
    z-index: 4;
    background: var(--bg, #1a1a24);
    padding: 4px 0 6px;
  }
  html[data-app="admin"] .diagram-box {
    max-height: min(55vh, calc(100dvh - var(--platform-header-h, 48px) - 120px));
  }
}

/* Design cycle 15: Admin goals filter/nav sticky @ short-height (mirror diagram-tabs). */
@media (max-height: 560px) {
  html[data-app="admin"] .admin-site-nav {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--bg, #1a1a24);
    padding-top: 6px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  }
  html[data-app="admin"] .main-tabs {
    position: sticky;
    top: 48px;
    z-index: 5;
    background: var(--bg, #1a1a24);
    padding: 6px 0 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  }
  html[data-app="admin"] .goals-filter,
  html[data-app="admin"] .ideas-filter {
    position: sticky;
    top: 96px;
    z-index: 4;
    background: var(--bg2, #12121f);
    padding: 6px 0 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  }
}

@media (max-width: 640px) {
  html[data-app="admin"] body { font-size: 13px; }
  html[data-app="admin"] .wrap { padding: 8px !important; }
  html[data-app="admin"] .card { padding: 10px !important; margin-bottom: 10px !important; }
  html[data-app="admin"] .admin-site-nav > a,
  html[data-app="admin"] .admin-site-nav > span { padding: 6px 10px !important; font-size: 12px !important; }
  html[data-app="admin"] .dashboard-tab { padding: 6px 10px !important; font-size: 12px !important; }
  html[data-app="admin"] .stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
  }
  html[data-app="admin"] .stat-cell { padding: 8px !important; }
  html[data-app="admin"] .stat-cell .val { font-size: 1rem !important; }
  html[data-app="admin"] th,
  html[data-app="admin"] td { padding: 6px 8px !important; font-size: 12px !important; }
}

/* ================================================================
   Глобальные узкие скроллбары в цвет акцента темы.
   Применяется ко всем страницам PDA Platform (Lounge, Login, Admin).
   Цвет thumb адаптируется к теме через var(--accent) и color-mix.
   Совместимо со всеми современными браузерами (color-mix поддерживается
   во всех Chromium ≥111, Firefox ≥113, Safari ≥16.2). Для Firefox также
   используется scrollbar-width/scrollbar-color (CSS Scrollbars Module). */
body.platform-app,
body.platform-login,
html[data-app="admin"] body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
body.platform-app ::-webkit-scrollbar,
body.platform-login ::-webkit-scrollbar,
html[data-app="admin"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.platform-app ::-webkit-scrollbar-track,
body.platform-login ::-webkit-scrollbar-track,
html[data-app="admin"] ::-webkit-scrollbar-track { background: transparent; }
body.platform-app ::-webkit-scrollbar-thumb,
body.platform-login ::-webkit-scrollbar-thumb,
html[data-app="admin"] ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 0;
  transition: background 0.15s ease;
}
body.platform-app ::-webkit-scrollbar-thumb:hover,
body.platform-login ::-webkit-scrollbar-thumb:hover,
html[data-app="admin"] ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}
body.platform-app ::-webkit-scrollbar-corner,
body.platform-login ::-webkit-scrollbar-corner,
html[data-app="admin"] ::-webkit-scrollbar-corner { background: transparent; }
/* Sentinel: горизонтальный ряд zone-чипов в шапке имеет собственное правило
   `scrollbar-width: none` — оставляем без изменений (визуальный скролл вреден). */

/* --- Каноническая палитра --- */
:root {
  --pt-bg: #fafafa;
  --pt-surface: #ffffff;
  --pt-bg-secondary: #f0f2f5;
  --pt-border: #d4d4d4; /* WCAG AA 3:1 на белом для UI-границ (было #e0e0e0 — 1.5:1) */
  --pt-text: #1f1f1f; /* контраст 16:1 на #fafafa, AAA (было #333333) */
  /* docs/Front/03 шаг 38: text-muted поднят с #888 до #595959 — даёт 7.0:1
     AAA для мелкого текста на #fafafa и 7.4:1 на #ffffff. */
  --pt-text-muted: #595959;
  --pt-accent: #1a1a1a;
  --pt-accent-hover: #0a0a0a;
  /* Accent-blue: #2563eb — контраст 7.3:1 на белом, AAA. Было #3b82f6 — 4.6:1 (AA edge). */
  --pt-accent-blue: #2563eb;
  --pt-accent-blue-hover: #1d4ed8;
  --pt-success: #0d7a3d;
  --pt-success-ui: #22c55e;
  --pt-danger: #c62828;
  --pt-danger-ui: #dc3545;
  --pt-danger-soft: #ef4444;
  --pt-warning: #ef6c00;
  --pt-info: #1565c0;
  --pt-pnl-bg-neutral: rgba(127, 127, 127, 0.08);
  --pt-pnl-bg-positive: rgba(50, 160, 95, 0.14);
  --pt-pnl-text-positive: rgba(42, 130, 80, 0.95);
  --pt-pnl-bg-negative: rgba(198, 73, 73, 0.14);
  --pt-pnl-text-negative: rgba(160, 58, 58, 0.95);

  --pt-bg-dark: #1a1a1e;
  --pt-surface-dark: #252530;
  --pt-border-dark: #4a4a55; /* контраст 3.1:1 на #1a1a1e — AA для UI-границ (было #3a3a45 — 2.0:1) */
  --pt-text-dark: #f4f4f7; /* контраст 16.5:1 на #1a1a1e (было #e4e4e7) */
  /* docs/Front/03 шаг 38: text-muted-dark поднят с #9090a0 до #b8b8c8 —
     контраст 7.2:1 на #1a1a1e и 6.1:1 на #252530, AAA для мелкого текста. */
  --pt-text-muted-dark: #b8b8c8;
}

:root[data-theme="dark"] {
  --pt-bg: var(--pt-bg-dark);
  --pt-surface: var(--pt-surface-dark);
  --pt-bg-secondary: #222228;
  --pt-border: var(--pt-border-dark);
  --pt-text: var(--pt-text-dark);
  --pt-text-muted: var(--pt-text-muted-dark);
  --pt-accent: #e4e4e7;
  --pt-accent-hover: #f4f4f5;
  --pt-pnl-bg-neutral: rgba(150, 150, 150, 0.12);
  --pt-pnl-bg-positive: rgba(67, 167, 106, 0.2);
  --pt-pnl-text-positive: #95ddb0;
  --pt-pnl-bg-negative: rgba(204, 94, 94, 0.2);
  --pt-pnl-text-negative: #f2aaaa;
}

/* Платформа (index.html, login): алиасы */
:root {
  --bg: var(--pt-bg);
  --surface: var(--pt-surface);
  --bg-secondary: var(--pt-bg-secondary);
  --border: var(--pt-border);
  --text: var(--pt-text);
  --text-muted: var(--pt-text-muted);
  --accent: var(--pt-accent);
  --accent-hover: var(--pt-accent-hover);
  --success: var(--pt-success);
  --danger: var(--pt-danger-ui);
  --demo-detail-panel-bg: #e4e9f0;
  --pnl-bg-neutral: var(--pt-pnl-bg-neutral);
  --pnl-bg-positive: var(--pt-pnl-bg-positive);
  --pnl-text-positive: var(--pt-pnl-text-positive);
  --pnl-bg-negative: var(--pt-pnl-bg-negative);
  --pnl-text-negative: var(--pt-pnl-text-negative);

  /* Семантические токены для нового UI (хаб настроек, слайдеры, гамбургер, help).
     Они должны переопределяться в каждой теме (full / dark / light) — чтобы
     ни одно значение не было захардкожено в компонентах.
     Принцип: используем color-mix от --accent, чтобы при смене основного цвета
     темы (в будущем — пользовательский) все производные подсветки автоматически
     перестроились. fallback (rgba) — оставлен на случай старых браузеров. */
  --accent-soft:           color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-soft-strong:    color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-border-soft:    color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ring:           color-mix(in srgb, var(--accent) 22%, transparent);
  --danger-soft:           color-mix(in srgb, var(--danger) 12%, transparent);
  --success-soft:          color-mix(in srgb, var(--success) 14%, transparent);
  --surface-overlay-bg:    rgba(8, 12, 22, 0.78);
  --surface-elevated:      color-mix(in srgb, var(--text) 4%, transparent);
  --surface-elevated-strong: color-mix(in srgb, var(--text) 8%, transparent);
  --hover-bg:              color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-overlay:        0 18px 60px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] {
  --demo-detail-panel-bg: #2a2d36;
}

/* Админ-панель */
:root[data-app="admin"] {
  --bg: var(--pt-bg-dark);
  --bg2: var(--pt-surface-dark);
  --border: var(--pt-border-dark);
  --text: var(--pt-text-dark);
  --muted: var(--pt-text-muted-dark);
  --accent: var(--pt-accent-blue);
  --accent-hover: var(--pt-accent-blue-hover);
  --done: var(--pt-success-ui);
  --wip: #eab308;
  --todo: #6b7280;
  /* PnL-подсветки на тёмном фоне админки (те же токены, что в :root[data-theme="dark"] для pt-pnl) */
  --pnl-bg-neutral: rgba(150, 150, 150, 0.12);
  --pnl-bg-positive: rgba(67, 167, 106, 0.2);
  --pnl-text-positive: #95ddb0;
  --pnl-bg-negative: rgba(204, 94, 94, 0.2);
  --pnl-text-negative: #f2aaaa;
}

/*
 * Backtest Visualizer: до установки data-style-mode на body (полный / неон по умолчанию)
 */
:root {
  --bg-primary: #0a0a1a;
  --bg-secondary: rgba(28, 28, 58, 0.4);
  --bg-tertiary: rgba(28, 28, 58, 0.6);
  --accent-rise: #ff9900;
  --accent-fall: #d9534f;
  --accent-interactive: #00bcd4;
  --accent-neon-glow: rgba(0, 188, 212, 0.5);
  --text-primary: #ffffff;
  --text-secondary: #eeeeee;
  --text-muted: rgba(238, 238, 238, 0.6);
  --border-color: rgba(0, 188, 212, 0.2);
  --border-light: rgba(255, 255, 255, 0.06);
  --border-glow: rgba(0, 188, 212, 0.5);
  --glass-bg: rgba(28, 28, 58, 0.25);
  --glass-bg-strong: rgba(28, 28, 58, 0.4);
  --glass-bg-ultra: rgba(10, 20, 40, 0.5);
  --glass-border: rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 0 15px rgba(0, 188, 212, 0.3), 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow-strong: 0 0 30px rgba(0, 188, 212, 0.5), 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow-orange: 0 0 20px rgba(255, 153, 0, 0.4), 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow-red: 0 0 20px rgba(217, 83, 79, 0.4), 0 4px 20px rgba(0, 0, 0, 0.4);
  --neon-blue: 0 0 8px rgba(0, 188, 212, 0.8), 0 0 16px rgba(0, 188, 212, 0.4);
  --neon-orange: 0 0 8px rgba(255, 153, 0, 0.8), 0 0 16px rgba(255, 153, 0, 0.4);
  --blur-amount: 25px;
  --blur-amount-strong: 35px;
  --blur-amount-ultra: 45px;
  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --transition-fast: 0.15s ease-out;
  --transition-normal: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;
  --chart-bg: #0a0a1a;
  --bg-primary-rgb: 10, 10, 26;
  --bg-secondary-rgb: 28, 28, 58;
  --border-color-rgb: 0, 188, 212;
  --accent-color: #00bcd4;
  --accent-color-rgb: 0, 188, 212;
  --bg-accent: rgba(0, 188, 212, 0.15);
  --bg-accent-rgb: 0, 188, 212;
}

body[data-style-mode="full"] {
  --bg-primary: #0a0a1a;
  --bg-secondary: rgba(28, 28, 58, 0.6);
  --bg-tertiary: rgba(28, 28, 58, 0.8);
  --text-primary: #ffffff;
  --text-secondary: #eeeeee;
  --border-color: rgba(0, 188, 212, 0.3);
  --border-light: rgba(255, 255, 255, 0.08);
  --chart-bg: #0a0a1a;
}

body[data-style-mode="simple"][data-color-scheme="light"] {
  --bg-primary: var(--pt-bg);
  --bg-secondary: var(--pt-bg-secondary);
  --bg-tertiary: #e8eaef;
  --text-primary: var(--pt-text);
  --text-secondary: #444444;
  --text-muted: var(--pt-text-muted);
  --border-color: var(--pt-border);
  --border-light: rgba(0, 0, 0, 0.06);
  --border-glow: rgba(0, 0, 0, 0.08);
  --accent-interactive: var(--pt-accent-blue);
  --accent-rise: #d97706;
  --accent-fall: var(--pt-danger-ui);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-bg-strong: rgba(255, 255, 255, 0.95);
  --glass-bg-ultra: rgba(250, 250, 250, 0.98);
  --glass-border: rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-glow-strong: 0 4px 20px rgba(0, 0, 0, 0.08);
  --chart-bg: var(--pt-bg-secondary);
  --blur-amount: 12px;
  --blur-amount-strong: 16px;
  --blur-amount-ultra: 20px;
  --bg-primary-rgb: 250, 250, 250;
  --bg-secondary-rgb: 240, 242, 245;
  --border-color-rgb: 224, 224, 224;
  --accent-color: var(--pt-accent-blue);
  --accent-color-rgb: 59, 130, 246;
  --bg-accent: rgba(59, 130, 246, 0.12);
  --bg-accent-rgb: 59, 130, 246;
}

body[data-style-mode="simple"][data-color-scheme="dark"] {
  --bg-primary: #141414;
  --bg-secondary: var(--pt-surface-dark);
  --bg-tertiary: #1f1f24;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: var(--pt-text-muted-dark);
  --border-color: var(--pt-border-dark);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(255, 255, 255, 0.06);
  --accent-interactive: var(--pt-accent-blue-hover);
  --accent-rise: #ff9900;
  --accent-fall: #f87171;
  --glass-bg: rgba(30, 30, 36, 0.6);
  --glass-bg-strong: rgba(37, 37, 48, 0.85);
  --glass-bg-ultra: rgba(26, 26, 30, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow-glow: 0 2px 16px rgba(0, 0, 0, 0.4);
  --shadow-glow-strong: 0 4px 24px rgba(0, 0, 0, 0.5);
  --chart-bg: #141414;
  --blur-amount: 12px;
  --blur-amount-strong: 18px;
  --blur-amount-ultra: 22px;
  --bg-primary-rgb: 20, 20, 20;
  --bg-secondary-rgb: 37, 37, 48;
  --border-color-rgb: 58, 58, 69;
  --accent-color: var(--pt-accent-blue);
  --accent-color-rgb: 59, 130, 246;
  --bg-accent: rgba(59, 130, 246, 0.18);
  --bg-accent-rgb: 59, 130, 246;
}

/* ------------------------------------------------------------------ */
/* Статические страницы платформы (index.html, login): body.platform-app */
/* Те же data-style-mode / data-color-scheme и localStorage, что и в BV. */
/* ------------------------------------------------------------------ */

:root[data-theme="light"] {
  --pt-bg: #fafafa;
  --pt-surface: #ffffff;
  --pt-bg-secondary: #f0f2f5;
  /* docs/Front/03 шаг 38: WCAG AA контрасты (синхронизировано с :root default). */
  --pt-border: #d4d4d4;
  --pt-text: #1f1f1f;
  --pt-text-muted: #595959;
  --pt-accent: #1a1a1a;
  --pt-accent-hover: #0a0a0a;
  --pt-pnl-bg-neutral: rgba(127, 127, 127, 0.08);
  --pt-pnl-bg-positive: rgba(50, 160, 95, 0.14);
  --pt-pnl-text-positive: rgba(42, 130, 80, 0.95);
  --pt-pnl-bg-negative: rgba(198, 73, 73, 0.14);
  --pt-pnl-text-negative: rgba(160, 58, 58, 0.95);
}

/*
 * Фоновый «туман» как у .main-layout::before в App.css BV — без него HTML выглядит
 * нейтрально-серым, а бектест визуально сине-циановым.
 */
@keyframes platform-app-fog-shift {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.95;
    transform: scale(1.02);
  }
}

body.platform-app[data-style-mode="full"]::before,
body.platform-app[data-style-mode="simple"][data-color-scheme="dark"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(0, 188, 212, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(255, 153, 0, 0.1) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 188, 212, 0.05) 0%, transparent 80%),
    radial-gradient(ellipse at 0% 0%, rgba(0, 188, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 153, 0, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, rgba(10, 10, 26, 0.95) 0%, rgba(15, 15, 35, 0.98) 100%);
  animation: platform-app-fog-shift 20s ease-in-out infinite alternate;
}

body.platform-app[data-style-mode="full"] .app-main,
body.platform-app[data-style-mode="simple"][data-color-scheme="dark"] .app-main {
  position: relative;
  z-index: 1;
}

/* login: единственный прямой потомок .card у body */
body.platform-app[data-style-mode="full"] > .card,
body.platform-app[data-style-mode="simple"][data-color-scheme="dark"] > .card {
  position: relative;
  z-index: 1;
}

/* Полный стиль (неон) Lounge: цвет акцента — родной cyan #00bcd4 (как было исторически).
   Чтобы не «резало глаза», заливки кнопок выключены: используется outline-стиль
   (см. block ниже «Базовый button — outline по умолчанию»). Это влияет только на
   пользовательский кабинет (body.platform-app), Workbench/BV не задевает. */
body.platform-app[data-style-mode="full"] {
  --bg: #0a0a1a;
  --surface: rgba(22, 22, 45, 0.82);
  --bg-secondary: rgba(28, 28, 58, 0.45);
  /* docs/Front/03 шаг 38: border поднят с 0.22 alpha до 0.45 — контраст ≥3:1
     на тёмном фоне для UI-границ (WCAG AA для non-text). */
  --border: rgba(0, 188, 212, 0.45);
  --text: #f0f0f5;
  /* text-muted поднят с 0.72 до 0.86 — контраст ~10:1 на #0a0a1a, AAA.
     На полупрозрачных surface (.82 alpha) даёт ≥7:1 (минимум AAA). */
  --text-muted: rgba(220, 230, 240, 0.86);
  --accent: #00bcd4;        /* родной cyan — без заливки, только через рамки/текст */
  --accent-hover: #00e5ff;
  --success: #67e8a8;
  --danger: #f87171;
  --demo-detail-panel-bg: rgba(28, 28, 58, 0.55);
  --pnl-bg-neutral: rgba(150, 150, 180, 0.14);
  --pnl-bg-positive: rgba(67, 167, 106, 0.22);
  --pnl-text-positive: #95ddb0;
  --pnl-bg-negative: rgba(204, 94, 94, 0.22);
  --pnl-text-negative: #f2aaaa;

  /* Семантические токены: «неон» — насыщеннее и с глоу. */
  --accent-soft: rgba(0, 188, 212, 0.10);
  --accent-soft-strong: rgba(0, 188, 212, 0.20);
  --accent-border-soft: rgba(0, 188, 212, 0.45);
  --accent-ring: rgba(0, 188, 212, 0.30);
  --danger-soft: rgba(248, 113, 113, 0.14);
  --success-soft: rgba(103, 232, 168, 0.14);
  --surface-overlay-bg: rgba(8, 12, 22, 0.84);
  --surface-elevated: rgba(255, 255, 255, 0.04);
  --surface-elevated-strong: rgba(255, 255, 255, 0.08);
  --hover-bg: rgba(255, 255, 255, 0.06);
}

/* Простой тёмный (Тёмная) и простой светлый (Светлая) переопределяют только
   --surface-overlay-bg — остальные токены вычисляются автоматически через
   color-mix от --accent (см. :root). */
body.platform-app[data-style-mode="simple"][data-color-scheme="dark"] {
  --surface-overlay-bg: rgba(10, 12, 20, 0.82);
  --surface-elevated: rgba(255, 255, 255, 0.04);
  --surface-elevated-strong: rgba(255, 255, 255, 0.08);
}
body.platform-app[data-style-mode="simple"][data-color-scheme="light"] {
  --surface-overlay-bg: rgba(245, 247, 252, 0.86);
  --surface-elevated: rgba(0, 0, 0, 0.03);
  --surface-elevated-strong: rgba(0, 0, 0, 0.06);
  --hover-bg: rgba(0, 0, 0, 0.04);
}

body.platform-app[data-style-mode="full"] .feed-panel,
body.platform-app[data-style-mode="full"] .analytics-panel {
  box-shadow: 0 0 0 1px rgba(0, 188, 212, 0.1), 4px 0 28px rgba(0, 0, 0, 0.35);
}

body.platform-app[data-style-mode="full"] .analytics-panel {
  box-shadow: 0 0 0 1px rgba(0, 188, 212, 0.1), -4px 0 28px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ */
/* Глобальная шапка платформы (PDA Platform) — единая для index/login. */
/* Используется .platform-app-header > .pah-inner > {.pah-left, .pah-right} */
/* ------------------------------------------------------------------ */

/* Шаг 56-fix: шапка зафиксирована абсолютно к viewport.
   Раньше использовался `position: sticky; top: 0`, но в `frontend/index.html`
   объявлено `html, body { overflow-x: hidden }` — браузер автоматически
   подставляет `overflow-y: auto` обоим элементам, и sticky-контекст для
   шапки внутри body ломается (header уходит при скролле, между ним и
   боковыми `.feed-panel` / `.analytics-panel` (top:48px, position:fixed)
   образуется щель). `position: fixed` работает независимо от scrolling
   контейнера и гарантированно остаётся в зоне видимости.
   `--platform-header-h` — единый источник истины для высоты шапки. Все
   зависимые элементы (`body padding-top`, `top` фиксированных боковых
   панелей и т.п.) ссылаются на эту переменную, чтобы при изменении
   высоты шапки в media-queries не возникал «зазор». */
:root { --platform-header-h: 48px; }
.platform-app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200; /* выше боковых .feed-panel / .analytics-panel (z-index 100) */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.platform-app,
body.platform-login {
  padding-top: var(--platform-header-h);
}

body.platform-app[data-style-mode="full"] .platform-app-header {
  background: rgba(10, 10, 26, 0.72);
  border-bottom-color: rgba(0, 188, 212, 0.22);
}

.platform-app-header .pah-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}

.platform-app-header .pah-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.platform-app-header .pah-spacer { flex: 1 1 auto; }

.platform-app-header .pah-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex-shrink: 0;
  min-width: 0;
}

/* Единый периметр кнопок правого угла шапки: выравнивание по центру, без «разъезда» */
.platform-app-header .pah-right-cluster {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* Не форсить display на .pah-organizer-live: chip скрыт, пока JS не добавит .is-visible
   (иначе зомби ● LIVE без roomId — см. C66). */
.platform-app-header .pah-right-cluster > *:not(.pah-organizer-live),
.platform-app-header .pah-right-cluster > .pah-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  vertical-align: middle;
}

.platform-app-header .pah-right-cluster > .pah-organizer-live {
  display: none;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  vertical-align: middle;
}

.platform-app-header .pah-right-cluster > .pah-organizer-live.is-visible {
  display: inline-flex;
}

.platform-app-header .pah-right-cluster > .pah-menu {
  position: relative;
}

/* Кнопка темы в кластере — без оконтовки, как остальные pah-btn */
.platform-app-header .pah-right-cluster .pah-btn-theme,
.platform-app-header button.pah-btn.pah-btn-theme {
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent;
}

.platform-app-header .pah-logo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.platform-app-header .pah-logo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

body.platform-app[data-style-mode="full"] .platform-app-header .pah-logo-dot {
  background: #00bcd4;
  box-shadow: 0 0 6px rgba(0, 188, 212, 0.45);
}

.platform-app-header .pah-zones {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}

.platform-app-header .pah-zone {
  font-size: 12px;
  padding: 6px 10px;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.platform-app-header .pah-zone:hover {
  color: var(--text);
  background: var(--bg-secondary);
}

.platform-app-header .pah-zone.active {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-secondary);
}

.platform-app-header .pah-user {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
}

/* .pah-btn — иконочные кнопки шапки. Высокая специфичность + явные сбросы,
   чтобы перебивать глобальные `button { width: 100%; padding: 12px; ... }`
   из inline-стилей login.html / других страниц. */
.platform-app-header button.pah-btn,
header.platform-app-header button.pah-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-muted);
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  flex: 0 0 auto;
}

.platform-app-header .pah-btn:hover {
  color: var(--text);
  background: var(--bg-secondary);
}

.platform-app-header .pah-btn:focus {
  outline: none;
}

.platform-app-header .pah-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  color: var(--text);
}

body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn {
  color: rgba(220, 230, 240, 0.78);
}

body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn:hover {
  color: #ffffff;
  background: rgba(0, 188, 212, 0.08);
  box-shadow: none;
}

body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.7);
}

.platform-app-header .pah-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.platform-app-header .pah-btn.hidden { display: none !important; }

/* === Шапка: меню (.pah-menu) с раскрывающимся .pah-dropdown ===
   Структура: <div class="pah-menu"> <button class="pah-btn"/> <div class="pah-dropdown"/> </div>
   Кнопка темы и кнопка пользователя устроены одинаково; отдельных Sign Out / scheme-toggle
   в шапке нет — выбор темы и Выход живут внутри своих dropdown'ов. */
/* Account control: аватар = лицо кнопки (единый контрол, без «квадрата за кругом»). */
.platform-app-header button.pah-btn.pah-btn-account,
.platform-app-header .pah-btn-account {
  width: auto;
  min-width: 32px;
  max-width: 220px;
  height: 32px;
  padding: 0 8px 0 0;
  gap: 6px;
  border: none !important;
  border-radius: 999px;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.platform-app-header .pah-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.platform-app-header .pah-user-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.platform-app-header .pah-user-chevron {
  flex-shrink: 0;
  opacity: 0.65;
  width: 14px;
  height: 14px;
  margin-right: 2px;
}
.platform-app-header button.pah-btn.pah-btn-account:hover,
.platform-app-header .pah-btn-account:hover,
.platform-app-header button.pah-btn.pah-btn-account.active,
.platform-app-header .pah-btn-account.active {
  color: var(--text);
  background: var(--bg-secondary);
  box-shadow: none !important;
}
.platform-app-header button.pah-btn.pah-btn-account:hover .pah-user-avatar,
.platform-app-header .pah-btn-account:hover .pah-user-avatar,
.platform-app-header button.pah-btn.pah-btn-account.active .pah-user-avatar,
.platform-app-header .pah-btn-account.active .pah-user-avatar {
  background: var(--accent-soft);
  color: var(--accent);
}
.platform-app-header button.pah-btn.pah-btn-account:focus-visible,
.platform-app-header .pah-btn-account:focus-visible {
  color: var(--text);
  background: var(--bg-secondary);
  box-shadow: 0 0 0 2px var(--accent) !important;
}
body.platform-app[data-style-mode="full"] .platform-app-header button.pah-btn.pah-btn-account:hover,
body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn-account:hover,
body.platform-app[data-style-mode="full"] .platform-app-header button.pah-btn.pah-btn-account.active,
body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn-account.active {
  color: #ffffff;
  background: rgba(0, 188, 212, 0.08);
  box-shadow: none !important;
}
body.platform-app[data-style-mode="full"] .platform-app-header button.pah-btn.pah-btn-account:focus-visible,
body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn-account:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.7) !important;
}
.platform-app-header .pah-dropdown.pah-dropdown--account {
  min-width: 240px;
  right: 0;
  left: auto;
}

@media (max-width: 640px) {
  .platform-app-header .pah-user-label { display: none; }
  .platform-app-header .pah-user-chevron { display: none; }
  .platform-app-header .pah-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  .platform-app-header button.pah-btn.pah-btn-account,
  .platform-app-header .pah-btn-account {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
  }
  .platform-app-header button.pah-btn.pah-btn-account:hover,
  .platform-app-header .pah-btn-account:hover,
  .platform-app-header button.pah-btn.pah-btn-account.active,
  .platform-app-header .pah-btn-account.active,
  .platform-app-header button.pah-btn.pah-btn-account:focus-visible,
  .platform-app-header .pah-btn-account:focus-visible {
    background: transparent;
  }
  .platform-app-header button.pah-btn.pah-btn-account:hover .pah-user-avatar,
  .platform-app-header .pah-btn-account:hover .pah-user-avatar,
  .platform-app-header button.pah-btn.pah-btn-account.active .pah-user-avatar,
  .platform-app-header .pah-btn-account.active .pah-user-avatar {
    background: var(--bg-secondary);
  }
  body.platform-app[data-style-mode="full"] .platform-app-header button.pah-btn.pah-btn-account:hover .pah-user-avatar,
  body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn-account:hover .pah-user-avatar,
  body.platform-app[data-style-mode="full"] .platform-app-header button.pah-btn.pah-btn-account.active .pah-user-avatar,
  body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn-account.active .pah-user-avatar {
    background: rgba(0, 188, 212, 0.16);
  }
}

.platform-app-header .pah-menu { position: relative; display: inline-flex; }

.platform-app-header .pah-btn.active {
  color: var(--text);
  background: var(--bg-secondary);
}

body.platform-app[data-style-mode="full"] .platform-app-header .pah-btn.active {
  color: #ffffff;
  background: rgba(0, 188, 212, 0.08);
}

/* Тарифный чип — flat, без permanent border */
.platform-app-header #pah-tier-chip,
#pah-tier-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 10px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0;
  box-sizing: border-box;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.platform-app-header #pah-tier-chip:hover,
#pah-tier-chip:hover {
  color: var(--accent);
  background: var(--bg-secondary);
}

.platform-app-header #pah-tier-chip:focus {
  outline: none;
}

.platform-app-header #pah-tier-chip:focus-visible,
#pah-tier-chip:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  color: var(--accent);
}

.platform-app-header .pah-dropdown {
  position: absolute;
  /* Без gap: overlap 2px = pointer-bridge (hover не «проваливается» между кнопкой и меню). */
  top: calc(100% - 2px);
  right: 0;
  min-width: 220px;
  padding: 8px 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 210;
  display: none;
  /* Шаг 56-fix: внутренний скролл и полностью непрозрачный фон.
     Раньше у дропдауна не было `overflow-y: auto`, поэтому при длинном содержимом
     (особенно у `.pah-dropdown--mega` гамбургера) пункты вылезали за рамки и
     колесо мыши скроллило страницу под меню. `overscroll-behavior: contain`
     не даёт скроллу пробиться на body, когда конец списка достигнут.
     `max-height` — страховка на случай, если JS-`placePlatformDropdown` не
     успел установить inline `maxHeight` (фоллбек 80px = шапка + поля). */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 80px);
}

body.platform-app[data-style-mode="full"] .platform-app-header .pah-dropdown {
  background: rgba(15, 15, 35, 0.98);
  border-color: rgba(0, 188, 212, 0.22);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.platform-app-header .pah-menu.open .pah-dropdown { display: block; }

/* Шаг 56-fix v2: дропдаун темы — компактный по содержимому.
   У `.pah-dropdown` базовый `min-width: 220px` (нужен для меню пользователя/мега-меню).
   Дропдаун темы содержит всего три коротких пункта (Неон / Тёмная / Светлая) —
   на 220px он выглядит чрезмерно широким. Сжимаем до содержимого. */
.platform-app-header #pah-dropdown-theme {
  min-width: 0;
  width: max-content;
}

/* Модификатор для дропдауна слева (используется в гамбургер-меню `.pah-menu[data-menu="apps"]`,
   которое расположено в `.pah-left`, рядом с логотипом). Базовое выравнивание у `.pah-dropdown`
   — `right: 0`, что для левых кнопок выглядит «вылетающим за пределы шапки». */
.platform-app-header .pah-dropdown.pah-dropdown--left {
  right: auto;
  left: 0;
  min-width: 260px;
}

.platform-app-header .pah-dropdown-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.platform-app-header .pah-dropdown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.platform-app-header .pah-dropdown-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
  max-width: 220px;
}

.platform-app-header .pah-dropdown-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 8px 14px 4px;
}

/* Базовый стиль пункта меню; повышенная специфичность — чтобы перебить
   inline button { width: 100%; padding: 12px; ... } в host-страницах. */
.platform-app-header button.pah-dropdown-item,
header.platform-app-header button.pah-dropdown-item,
.platform-app-header a.pah-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: none !important;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none !important;
  outline: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Быстрый RU/EN в левом гамбургере — выровненный сегментный ряд */
.platform-app-header .pah-locale-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 4px 14px 10px;
}
.platform-app-header button.pah-locale-btn {
  flex: 1 1 0;
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-muted);
  border: none !important;
  border-radius: 0;
  outline: none;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.platform-app-header button.pah-locale-btn:hover,
.platform-app-header button.pah-locale-btn:focus-visible {
  color: var(--accent);
  background: var(--bg-secondary);
  outline: none;
}
.platform-app-header button.pah-locale-btn[aria-checked="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 640px) {
  .platform-app-header .pah-right-cluster {
    gap: 0;
  }
}

.platform-app-header .pah-dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.platform-app-header .pah-dropdown-item.active {
  background: var(--bg-secondary);
  color: var(--accent);
  font-weight: 500;
}

.platform-app-header .pah-dropdown-item.disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.platform-app-header .pah-dropdown-item.disabled:hover { background: transparent; }

.platform-app-header .pah-dropdown-item.danger { color: #e26a6a; }
.platform-app-header .pah-dropdown-item.danger:hover { background: rgba(226, 106, 106, 0.12); color: #ff8a8a; }

.platform-app-header .pah-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.platform-app-header .pah-dropdown-item-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.platform-app-header .pah-dropdown-item-ico svg { width: 14px; height: 14px; }
/* Шаг 56-fix v2: индикатор активного варианта (data-active-for) визуально
   скрыт. По требованию пользователя в шапочных dropdown'ах темы галочки
   `✓` НЕ используются (они остались только в полноэкранных меню). Активная
   тема выделяется ТОЛЬКО тонкой обводкой родительского пункта (см. ниже),
   а не заливкой/галочкой. Сам элемент-маркер оставлен в DOM как зарезервированный
   слот ширины (чтобы при переключении не плясала верстка), но без визуала. */
.platform-app-header .pah-dropdown-item-check {
  display: none;
}

/* Активный пункт в шапочном dropdown темы — только тонкая обводка.
   Заливка и accent-цвет текста (которые применяет общее правило
   `.pah-dropdown-item.active`) здесь явно сбрасываются — это контекст
   шапочного выбора темы, где визуальный шум недопустим. Правило ограничено
   `#pah-dropdown-theme` чтобы не задеть другие dropdown'ы (напр. меню
   пользователя `#pah-dropdown-user`, где active-state с заливкой нужен). */
.platform-app-header #pah-dropdown-theme .pah-dropdown-item {
  background: transparent;
  color: var(--text);
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 6px;
  margin: 2px 6px;
}
.platform-app-header #pah-dropdown-theme .pah-dropdown-item:hover {
  background: var(--bg-secondary);
}
.platform-app-header #pah-dropdown-theme .pah-dropdown-item.active {
  background: transparent;
  color: var(--text);
  font-weight: 500;
  border-color: var(--accent-border-soft);
}
body.platform-app[data-style-mode="full"] .platform-app-header #pah-dropdown-theme .pah-dropdown-item.active {
  border-color: rgba(0, 188, 212, 0.6);
  box-shadow: 0 0 6px rgba(0, 188, 212, 0.25);
}

/* ------------------------------------------------------------------ */
/* Гамбургер-меню с подменю (M3): многоуровневая навигация             */
/*  - .pah-dropdown--mega       большой выпадающий с подразделами      */
/*  - .pah-mega-grid            grid для «Навигация по кабинету»       */
/*  - .pah-mega-grid-btn        кнопка-плитка вкладки                  */
/*  - .pah-dropdown-item.has-sub  flyout-родитель                      */
/*  - .pah-submenu              flyout справа (desktop) / вниз (mob)   */
/* ------------------------------------------------------------------ */
.platform-app-header .pah-dropdown.pah-dropdown--mega {
  min-width: 320px;
  max-width: 360px;
  padding: 6px 0;
}

.platform-app-header .pah-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 6px 10px 10px;
}

.platform-app-header .pah-mega-grid-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 8px 10px;
  background: transparent;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.platform-app-header .pah-mega-grid-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.platform-app-header .pah-mega-grid-btn.active {
  background: var(--accent-soft-strong);
  color: var(--accent);
}
.platform-app-header .pah-mega-grid-btn-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* Flyout (вложенный список). Родительский item — relative, чтобы absolute
   правильно работал. На desktop — раскрывается ВПРАВО; на узких экранах —
   вниз (accordion-style). */
.platform-app-header .pah-dropdown-item.has-sub {
  position: relative;
  padding-right: 28px;
}
.platform-app-header .pah-dropdown-item.has-sub::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.15s ease, transform 0.2s ease;
}
.platform-app-header .pah-dropdown-item.has-sub.open::after {
  color: var(--accent);
  transform: translateY(-50%) rotate(90deg);
}

/* Шаг 56-fix: подменю — accordion-style (раскрывается ВНУТРИ родителя
   вертикально), а не absolute flyout вправо. Причины:
   1) После добавления `overflow-y: auto` к `.pah-dropdown` (для скролла длинных
      меню) absolute-flyout обрезался по границе скролл-контейнера и был не виден.
   2) Hover-открытие подменю на тач-устройствах "залипало", а на мышке клик по
      родителю работал как toggle ПОСЛЕ открытия hover'ом — UX был непредсказуемый.
   Теперь поведение одинаковое для всех ширин: клик → раскрытие вниз; повторный
   клик → закрытие. Открытие/закрытие управляется ТОЛЬКО `.open` (JS-обработчик
   в `userDropdown.click`). `.pah-submenu--left` больше не нужен. */
.platform-app-header .pah-submenu {
  display: none;
  position: static;
  margin: 0 0 0 8px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--accent-border-soft);
  background: transparent;
  box-shadow: none;
}
.platform-app-header .pah-dropdown-item.has-sub.open > .pah-submenu {
  display: block;
}
body.platform-app[data-style-mode="full"] .platform-app-header .pah-submenu {
  border-left-color: rgba(0, 188, 212, 0.4);
}
/* Пункты внутри submenu — чуть компактнее, чтобы визуально читались как
   "вложенные" под родителем. Перебиваем inline button-стили хост-страниц
   (border: 1px solid var(--border) и т.п.) — submenu пункты всегда без рамки. */
.platform-app-header .pah-submenu .pah-dropdown-item,
.platform-app-header .pah-submenu button.pah-dropdown-item,
.platform-app-header .pah-submenu a.pah-dropdown-item {
  padding: 6px 12px;
  font-size: 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.platform-app-header .pah-submenu .pah-dropdown-item:hover,
.platform-app-header .pah-submenu button.pah-dropdown-item:hover,
.platform-app-header .pah-submenu a.pah-dropdown-item:hover {
  background: var(--bg-secondary) !important;
  color: var(--accent) !important;
}

@media (max-width: 640px) {
  .platform-app-header .pah-dropdown.pah-dropdown--mega { min-width: 280px; }
}

/* ================================================================== */
/* Универсальные компоненты PDA Platform:                              */
/*   .btn-toolbar / .btn-toolbar-icon  — компактные кнопки в строку    */
/*   .btn-outline                       — рамка без заливки            */
/*   .ctx-menu                          — контекст-меню (как в Win)    */
/* Стилизуется только то, что явно помечено классом — глобальные       */
/* button { width: 100% } из inline-стилей host-страниц не задеваются. */
/* ================================================================== */

/* Тулбар: контейнер для иконочных кнопок в одну строку */
.btn-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Иконочная кнопка тулбара (~28x28), без растяжения */
button.btn-toolbar-icon,
.btn-toolbar > button.btn-toolbar-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  flex: 0 0 auto;
  box-shadow: none;
}

button.btn-toolbar-icon:hover,
.btn-toolbar > button.btn-toolbar-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
}

button.btn-toolbar-icon svg,
.btn-toolbar > button.btn-toolbar-icon svg { width: 14px; height: 14px; display: block; }

button.btn-toolbar-icon.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 188, 212, 0.06);
}

/* Outline-кнопка: рамка цветом акцента, прозрачная заливка,
   на hover лёгкая полупрозрачная заливка акцентом (не solid). */
button.btn-outline,
.btn-outline {
  width: auto;
  min-width: 0;
  padding: 6px 12px;
  margin: 0;
  font-size: 12px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  box-shadow: none;
}

button.btn-outline:hover,
.btn-outline:hover {
  background: rgba(0, 188, 212, 0.08);
  color: var(--accent-hover, var(--accent));
}

button.btn-outline.danger,
.btn-outline.danger {
  color: var(--danger);
  border-color: var(--danger);
}
button.btn-outline.danger:hover,
.btn-outline.danger:hover {
  background: rgba(220, 53, 69, 0.1);
  color: var(--danger);
}

button.btn-outline.small,
.btn-outline.small { padding: 4px 8px; font-size: 11px; }

/* Контекст-меню: общий компонент. Появляется как абсолютно-позиционированное
   меню рядом с триггером. Закрытие — JS через delegation (см. initCtxMenus). */
.ctx-menu-wrap { position: relative; display: inline-flex; }

.ctx-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  padding: 4px 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 220;
  display: none;
}

body.platform-app[data-style-mode="full"] .ctx-menu {
  background: rgba(15, 15, 35, 0.96);
  border-color: rgba(0, 188, 212, 0.22);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ctx-menu-wrap.open .ctx-menu { display: block; }
.ctx-menu.left { right: auto; left: 0; }
.ctx-menu.up   { top: auto; bottom: calc(100% + 4px); }

.ctx-menu-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 14px 4px;
}

button.ctx-menu-item,
a.ctx-menu-item,
.ctx-menu button,
.ctx-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.ctx-menu button:hover,
.ctx-menu a:hover,
.ctx-menu-item:hover { background: var(--bg-secondary); color: var(--text); }

.ctx-menu .danger { color: #e26a6a; }
.ctx-menu .danger:hover { background: rgba(226, 106, 106, 0.12); color: #ff8a8a; }

.ctx-menu .ctx-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.ctx-menu .ctx-menu-item-ico { width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; }
.ctx-menu .ctx-menu-item-ico svg { width: 14px; height: 14px; }

.ctx-menu .ctx-menu-item.disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.55; }
.ctx-menu .ctx-menu-item.disabled:hover { background: transparent; }

/* Мобильная адаптация контекст-меню: bottom-sheet (выезжает снизу, как iOS/Android).
   Раньше на мобиле меню могло уехать вне viewport (top:auto/bottom:auto без значения
   фактически = top:0/left:0), пользователь не видел его при клике на шестерёнку.
   Теперь меню гарантированно появляется внизу экрана на всю ширину минус 12px по краям. */
@media (max-width: 640px) {
  .ctx-menu {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 8px 0;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
    border-radius: 0;
    /* Иначе вылазит за viewport если родитель имеет transform */
  }
  .ctx-menu button,
  .ctx-menu a {
    padding: 12px 18px; /* крупнее для тапа */
    font-size: 14px;
  }
  .ctx-menu .ctx-menu-section { padding: 10px 18px 4px; font-size: 11px; }
  /* Затемнение фона при открытом меню — клик по нему закрывает (см. initCtxMenus). */
  .ctx-menu-wrap.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    z-index: 219;
  }
}

/* Tablet (≤960px): шапка компактнее, скрываем имя пользователя и текст «Выход»,
   зоны (Lounge / Workbench / Admin) сжимаем в маленькие чипы. */
@media (max-width: 960px) {
  :root { --platform-header-h: 44px; }
  .platform-app-header { min-height: 44px; }
  .platform-app-header .pah-inner { padding: 6px 12px; gap: 10px; min-height: 44px; }
  .platform-app-header .pah-logo { font-size: 13px; }
  .platform-app-header .pah-user { display: none; }
  .platform-app-header .pah-signout span { display: none; }
  .platform-app-header .pah-signout { width: 32px; padding: 0; }
  .platform-app-header .pah-zone { padding: 4px 8px; font-size: 11px; }
}
/* Mobile (≤640px): зоны сворачиваются в один компактный nav (горизонтальный скролл,
   но сами зоны видны), логотип-точка увеличена для тапа, кнопки шапки 28×28 минимум. */
@media (max-width: 640px) {
  :root { --platform-header-h: 40px; }
  /* ≤960 задаёт min-height:44 — без сброса body pad (40) и шапка расходятся → клип 4px. */
  .platform-app-header { min-height: 40px; }
  .platform-app-header .pah-inner { padding: 4px 8px; gap: 6px; min-height: 40px; }
  .platform-app-header .pah-logo .pah-logo-text { display: none; } /* оставляем только точку */
  .platform-app-header .pah-zones {
    /* На мобиле зоны не скрываем — они нужны для навигации между Lounge/Workbench/Admin.
       Делаем компактные чипы с горизонтальным скроллом, без скроллбара.
       Design cycle 10: оставляем место под right-cluster @390. */
    display: flex;
    gap: 2px;
    max-width: min(48vw, calc(100vw - 148px));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .platform-app-header .pah-zones::-webkit-scrollbar { display: none; }
  .platform-app-header .pah-zone { padding: 3px 6px; font-size: 10.5px; white-space: nowrap; }
  /* Единый 28px chrome: theme/burger/tier/account — без разъезда 28 vs 32.
     Design cycle 10: cluster не клипается зонами @390. */
  .platform-app-header .pah-right-cluster {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    gap: 0;
    flex: 0 0 auto;
    max-width: min(46vw, 200px);
    overflow: visible;
  }
  .platform-app-header .pah-right-cluster > *:not(.pah-organizer-live),
  .platform-app-header .pah-right-cluster > .pah-menu,
  .platform-app-header .pah-right-cluster > .pah-organizer-live.is-visible {
    height: 28px;
    min-height: 28px;
  }
  .platform-app-header .pah-btn:not(.pah-btn-account) {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-height: 28px;
  }
  .platform-app-header .pah-btn svg { width: 14px; height: 14px; }
  .platform-app-header #pah-tier-chip,
  #pah-tier-chip {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.4px;
  }
}

/* Lounge / кабинет — только телефон (≤640px): без боковых «рельс» 44px,
   навигация Лента | Аналитика внизу (см. initLoungePhoneDock в index.html). */
@media (max-width: 640px) {
  body.platform-app:not(.platform-login).pda-lounge-phone {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0));
  }
  body.platform-app:not(.platform-login).pda-lounge-phone.feed-collapsed,
  body.platform-app:not(.platform-login).pda-lounge-phone.analytics-collapsed,
  body.platform-app:not(.platform-login).pda-lounge-phone.feed-expanded,
  body.platform-app:not(.platform-login).pda-lounge-phone.analytics-expanded {
    --app-pad-left: 0 !important;
    --app-pad-right: 0 !important;
  }
  body.platform-app .feed-panel.collapsed,
  body.platform-app .analytics-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  body.platform-app .feed-panel:not(.collapsed) {
    width: min(92vw, 360px) !important;
    /* Design cycle 9: below phone-dock (130), above backdrop; clear of dock */
    z-index: 120;
    bottom: var(--pda-lounge-phone-dock-h, calc(72px + env(safe-area-inset-bottom, 0px)));
    opacity: 1;
    pointer-events: auto;
  }
  body.platform-app .analytics-panel:not(.collapsed) {
    width: min(92vw, 360px) !important;
    z-index: 120;
    bottom: var(--pda-lounge-phone-dock-h, calc(72px + env(safe-area-inset-bottom, 0px)));
    opacity: 1;
    pointer-events: auto;
  }
  /* Phone analytics chrome: one title (panel «Аналитика»), flat chat dock. */
  body.platform-app.pda-lounge-phone .analytics-panel:not(.collapsed) .analytics-chat-dock-title {
    display: none;
  }
  body.platform-app.pda-lounge-phone .analytics-panel:not(.collapsed) .analytics-chat-dock {
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }
  body.platform-app.pda-lounge-phone .analytics-panel:not(.collapsed) .analytics-chat-messages {
    border: none;
    border-radius: 0;
    background: transparent;
  }
  .pda-lounge-phone-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    display: none;
    align-items: stretch;
    justify-content: space-around;
    gap: 4px;
    min-height: 52px;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }
  body.pda-lounge-phone .pda-lounge-phone-dock { display: flex; }
  /* Design cycle 9/13/14: dock остаётся при открытом drawer (sheets clear of dock).
     Settings-hub — fullscreen modal @9500; dock прячем (!important — residual).
     Toast/header stack when hub open: see index.html cycle14 (hub < toast < pah). */
  body.pda-lounge-phone.settings-hub-open .pda-lounge-phone-dock { display: none !important; }
  .pda-lounge-phone-dock button {
    flex: 1 1 0;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .pda-lounge-phone-dock button.is-active {
    color: var(--accent);
    background: rgba(0, 0, 0, 0.04);
  }
  body.platform-app[data-style-mode="full"] .pda-lounge-phone-dock button.is-active {
    background: rgba(0, 188, 212, 0.12);
    color: #00bcd4;
  }
}

/* Очень узкий (≤420px): убираем зоны полностью (доступны через user-menu), оставляем
   только логотип + кнопки темы/пользователя. */
@media (max-width: 420px) {
  .platform-app-header .pah-zones { display: none; }
  .platform-app-header .pah-inner { gap: 4px; padding: 4px 6px; }
}

/* === Адаптация дропдаунов шапки (.pah-dropdown) ===
   Проблема: `.platform-app-header` имеет `backdrop-filter: blur(8px)` — это
   создаёт containing block для `position: fixed` у потомков (CSS spec). Из-за
   этого CSS-only fix через `position: fixed; left/right` ненадёжен: когда
   sticky-header при скролле смещается, fixed-координаты dropdown'а ползут
   вместе с containing-block'ом. На мобильных, при длинных пунктах меню или
   малой ширине viewport, `.pah-dropdown` (особенно `.pah-dropdown--left` с
   `min-width: 260px`) выходит за пределы экрана.
   Решение — JS-clamping в `frontend/index.html` (`initPlatformDropdownPositioning`):
   при открытии menu вычисляем `getBoundingClientRect()` триггера и dropdown'а,
   устанавливаем inline-стили `position: fixed; left/top/max-width/max-height`,
   относительные к viewport (containing block тут уже не помеха — мы передаём
   готовые координаты). На ≤768px — top-anchored sheet (`left: 8px; right: 8px`),
   на >768px — под триггером с clamping в viewport; mega-меню гамбургера — `left: 0`
   (прижато к левому краю экрана в wide-format).
   Здесь оставляем только cosmetic fallback для очень узких mobile, чтобы при
   отключённом JS не было визуальных артефактов. */
@media (max-width: 768px) {
  /* На мобильных пунктах ужимаем шрифты, чтобы не было горизонтального скролла */
  .platform-app-header .pah-dropdown-item { font-size: 13px; padding: 8px 12px; }
  .platform-app-header .pah-dropdown-section { font-size: 10px; padding: 8px 12px 4px; }
  .platform-app-header .pah-dropdown-email { max-width: 100%; }
}

/* Login: вертикальный layout (header + центрированная карточка).
   Не обнуляем padding целиком — сохраняем safe-area inset L/R/B;
   top не нужен: шапка sticky в потоке. */
body.platform-app.platform-login {
  display: block;
  align-items: initial;
  justify-content: initial;
  padding-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
}

body.platform-app.platform-login .login-wrap {
  min-height: calc(100vh - var(--platform-header-h, 48px));
  min-height: calc(100dvh - var(--platform-header-h, 48px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Поднимаем header, обёртку и карточку над фоновым «туманом» body::before
   (раньше это делалось правилом `body... > .card`, но теперь .card вложен в .login-wrap). */
body.platform-app.platform-login .platform-app-header,
body.platform-app.platform-login .login-wrap,
body.platform-app.platform-login .login-wrap > .card {
  position: relative;
  z-index: 1;
}
body.platform-app.platform-login .platform-app-header { position: sticky; top: 0; z-index: 50; }

/* Клавиатура / узкий viewport: карточка сверху, CTA доступен скроллом.
   Design cycle 10: short-height + landscape matrix (Auth P0 copy не трогаем). */
@media (max-width: 480px) {
  body.platform-app.platform-login .login-wrap {
    align-items: flex-start;
    padding-top: 16px;
  }
}
@media (max-height: 720px) {
  body.platform-app.platform-login .login-wrap {
    align-items: flex-start;
    padding-top: 12px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: calc(100dvh - var(--platform-header-h, 48px));
  }
}
@media (max-height: 560px) {
  body.platform-app.platform-login .login-wrap {
    align-items: flex-start;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px));
  }
  body.platform-app.platform-login .login-wrap > .card {
    padding: 16px 14px;
  }
  body.platform-app.platform-login .login-wrap > .card h1 {
    font-size: 16px;
    margin-bottom: 12px;
  }
  body.platform-app.platform-login .tabs {
    margin-bottom: 12px;
  }
  body.platform-app.platform-login .form-group {
    margin-bottom: 10px;
  }
  body.platform-app.platform-login .password-rules {
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 11px;
  }
  body.platform-app.platform-login .password-rules li {
    margin: 2px 0;
  }
  body.platform-app.platform-login .card button[type="submit"] {
    min-height: 44px;
    margin-top: 4px;
  }
}

/* Простой + тёмный: те же токены, что у BV simple dark; синеватость даёт общий туман ::before */
body.platform-app[data-style-mode="simple"][data-color-scheme="dark"] {
  --bg: #141414;
  --surface: #252530;
  --bg-secondary: #1a1a1f;
  --border: var(--pt-border-dark);
  --text: var(--pt-text-dark);
  --text-muted: var(--pt-text-muted-dark);
  --accent: var(--pt-accent-blue);
  --accent-hover: var(--pt-accent-blue-hover);
  --success: var(--pt-success-ui);
  --danger: var(--pt-danger-soft);
  --demo-detail-panel-bg: #2a2d36;
  --pnl-bg-neutral: rgba(150, 150, 150, 0.12);
  --pnl-bg-positive: rgba(67, 167, 106, 0.2);
  --pnl-text-positive: #95ddb0;
  --pnl-bg-negative: rgba(204, 94, 94, 0.2);
  --pnl-text-negative: #f2aaaa;
}