/* ============================================================
 * GOLDJAXE AI Ecosystem · UI Kit v3.0
 * Готовый CSS для импорта в любой проект экосистемы.
 *
 * Импорт:
 *   <link rel="stylesheet" href="path/to/eco-components.css">
 *
 * Также требуются:
 *   <link rel="stylesheet" href="path/to/fonts.css"> (Inter + Space Mono)
 *
 * Автор: Claude (CEO утвердил 2026-05-02)
 * ============================================================ */

:root,
[data-theme="dark"] {
  /* === DARK THEME (default) === */
  --bg-primary:    #050505;
  --bg-secondary:  #080808;
  --bg-tertiary:   #111111;
  --bg-quaternary: #1A1A1A;
  --bg-concrete:   #181818;
  --header-bg:     rgba(18, 18, 22, 0.88);

  /* Brand */
  --accent-amber:        #EBC554;
  --accent-amber-light:  #F8F080;
  --accent-amber-dark:   #C9A332;
  --accent-amber-rgb:    235, 197, 84;

  /* Neon (с .com) */
  --neon-purple:       #C44DFF;
  --neon-purple-rgb:   196, 77, 255;
  --neon-steel:        #4573A1;
  --neon-steel-light:  #87B0DC;       /* L4 investor accent · added v4.4.16 (Б3 audit-fix) */
  --neon-steel-rgb:    69, 115, 161;
  --neon-crimson:      #8B0000;
  --neon-crimson-rgb:  139, 0, 0;

  /* Status */
  --accent-green:    #22C55E;
  --accent-error:    #EF4444;
  --accent-cyan:     #00F0FF;

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.85);
  --text-muted:     rgba(255,255,255,0.70);
  --text-faint:     rgba(255,255,255,0.55);
  --text-subtle:    rgba(255,255,255,0.40);
  --text-disabled:  rgba(255,255,255,0.30);

  /* Borders */
  --border-strong:  rgba(255,255,255,0.20);
  --border-default: rgba(255,255,255,0.12);
  --border-faint:   rgba(255,255,255,0.06);

  /* Glow intensity (dark — full strength) */
  --cube-glow-blur:  11px;
  --cube-glow-alpha: 0.35;
  --wordmark-bracket-color: #FFFFFF;  /* [ AI ] на dark — белый */
}

/* === LIGHT THEME (взято с goldjaxe.org live audit 2026-05-02) === */
[data-theme="light"] {
  --bg-primary:    #f5f5f5;   /* холст · slight gray */
  --bg-secondary:  #f0ede8;   /* ⭐ кремово-бежевый warm tint (не Apple-белый) */
  --bg-tertiary:   #ffffff;   /* cards · pure white */
  --bg-quaternary: #ededed;   /* dividers, hover bg */
  --bg-concrete:   #ffffff;   /* triad tile bg */
  /* --header-bg в light НЕ переключаем · header dark immutable в обеих темах
   * (Block B sweep · 2026-05-07 · canonical comment строка 123).
   * Force WHITE text rules 132-148 предполагают dark bg — без этого правила
   * mismatch создаёт white-on-cream invisible на 6 экранах без page-isolated hardcode. */

  /* Brand — те же (работают на обоих фонах) */
  --accent-amber:        #C9A332;  /* slightly darker для контраста на белом */
  --accent-amber-light:  #EBC554;
  --accent-amber-dark:   #7A6614;
  --accent-amber-rgb:    201, 163, 50;

  /* Neon — приглушённее на свете */
  --neon-purple:     #9933E6;
  --neon-purple-rgb: 153, 51, 230;
  --neon-steel:      #2D5380;
  --neon-steel-rgb:  45, 83, 128;
  --neon-crimson:    #8B0000;  /* тот же — отличный контраст на белом */
  --neon-crimson-rgb: 139, 0, 0;

  /* Status — те же */
  --accent-green:    #16A34A;  /* slightly darker green для контраста */
  --accent-error:    #DC2626;
  --accent-cyan:     #0891B2;

  /* Text · #1a1a1a base (anti-eyestrain — не #000) */
  --text-primary:   #1a1a1a;
  --text-secondary: rgba(26,26,26,0.80);
  --text-muted:     rgba(26,26,26,0.65);
  --text-faint:     rgba(26,26,26,0.50);
  --text-subtle:    rgba(26,26,26,0.35);
  --text-disabled:  rgba(26,26,26,0.25);

  /* Borders */
  --border-strong:  rgba(26,26,26,0.20);
  --border-default: rgba(26,26,26,0.12);
  --border-faint:   rgba(26,26,26,0.06);

  /* Glow intensity (light — приглушённее, gold на белом не так светится) */
  --cube-glow-blur:  6px;
  --cube-glow-alpha: 0.25;
  --wordmark-bracket-color: #1a1a1a;  /* [ AI ] на light — почти-чёрный */
}

/* Auto-detect prefers-color-scheme (если нет [data-theme] на html) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}

/* Smooth transition между темами */
html { transition: background-color 250ms ease, color 250ms ease; }
body { background: var(--bg-secondary); color: var(--text-primary); transition: background-color 250ms ease, color 250ms ease; }

/* ============================================================
 * F5 · SCROLL-MARGIN-TOP · v4.58.3 (2026-05-20)
 * Sticky header перекрывал заголовки секций при scroll-to-anchor.
 * Резерв 100px на h1/h2/h3 внутри section элементов — anchor scroll
 * останавливается ниже sticky header, заголовок виден целиком.
 * Применяется ко всем экосистемным лендингам на master CSS.
 * ============================================================ */
section h1, section h2, section h3 { scroll-margin-top: 100px; }

/* ============================================================
 * HEADER IMMUTABILITY · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * .eco-header остаётся dark в обеих темах (правило immutable header).
 * Текст внутри header НЕ должен наследовать light tokens (#1A1A1A на dark = invisible).
 * Эти overrides форсят white/amber для всех текстовых элементов в .eco-header
 * именно в light theme, не трогая dark theme поведение.
 * Затронуто 12 academy экранов с .eco-header (audit findings S-LIGHT-1).
 * ============================================================ */

/* !important нужен — page-isolated `.eco-wordmark .br { color: var(--text-primary) }`
   на каждом экране переопределяет даже более specific selectors через source order. */
[data-theme="light"] .eco-header .eco-wordmark .br { color: #FFFFFF !important; }
[data-theme="light"] .eco-header .eco-subline { color: rgba(255,255,255,0.85) !important; }
[data-theme="light"] .eco-header .eco-nav-link { color: rgba(255,255,255,0.65) !important; }
[data-theme="light"] .eco-header .eco-nav-link:hover,
[data-theme="light"] .eco-header .eco-nav-active { color: #EBC554 !important; }
[data-theme="light"] .eco-header .eco-nav-link .ext { color: rgba(255,255,255,0.40) !important; }
[data-theme="light"] .eco-header .eco-search { color: rgba(255,255,255,0.65) !important; border-color: rgba(255,255,255,0.20) !important; }
[data-theme="light"] .eco-header .eco-search .key { border-color: rgba(255,255,255,0.30) !important; color: rgba(255,255,255,0.85) !important; }
[data-theme="light"] .eco-header .eco-lang-btn { color: #FFFFFF !important; }
/* Header immutable dark в обеих темах — текст active lang pill всегда pure dark
   (#080808) для WCAG AA на amber #EBC554. Прецедент 2026-05-09: var(--bg-secondary)
   в light = cream #f0ede8 → cream-on-gold ≈ 3.7:1 fail AA. */
[data-theme="light"] .eco-header .eco-lang-btn-active { color: #080808 !important; background: #EBC554 !important; }
[data-theme="light"] .eco-header .eco-theme-btn { color: #FFFFFF !important; border-color: rgba(255,255,255,0.20) !important; }
[data-theme="light"] .eco-header .eco-profile-btn { border-color: rgba(255,255,255,0.20) !important; color: #EBC554 !important; }
[data-theme="light"] .eco-header .text-white { color: #FFFFFF !important; }
[data-theme="light"] .eco-header .eco-status-chip { color: #22C55E !important; border-color: rgba(34,197,94,0.40) !important; background: rgba(34,197,94,0.10) !important; }
[data-theme="light"] .eco-header .eco-status-chip::before { background: #22C55E !important; box-shadow: 0 0 8px #22C55E !important; }
[data-theme="light"] .eco-header .investor-chip { color: var(--neon-steel) !important; border-color: rgba(69,115,161,0.40) !important; background: rgba(69,115,161,0.10) !important; }
[data-theme="light"] .eco-header a[href*="landing"] { color: rgba(255,255,255,0.65) !important; }
[data-theme="light"] .eco-header a[href*="landing"]:hover { color: #EBC554 !important; }

/* ============================================================
 * PULT HEADER · LIGHT THEME · v4.63.6 (Plan «Созвездие» Этап 7 hotfix)
 * Header пульта (Карта · Хроника · Пульс · План) — `--header-bg`
 * immutable dark в обеих темах (как .eco-header). Inactive nav-табы
 * и правые мета-надписи наследуют `--text-secondary` который в light
 * = dark → invisible dark-on-dark. Force white-on-dark в light theme.
 *
 * Затронуто: 4 страницы пульта (blueprint/live/, blueprint/live-board/,
 * blueprint/pulse/, blueprint/plan/). Префиксы локальных CSS — разные
 * (.bp-* / .lb-* / .pl-* / .pn-*), фиксим в master без правок страниц.
 *
 * Прецедент 2026-05-21 (CEO визуальная приёмка Plan «Созвездие»):
 * «Карта/Хроника/Пульс/Список/Bands/Roadmap» исчезли в light · v4.63.5.
 * ============================================================ */

/* Глобальный nav пульта · inactive (Карта / Хроника / Пульс / План)
 * v4.84.1 (Этап 2c · 24.05): добавлен .pt-nav a — Двойник теперь sync с другими 3 пультами
 * в светлой теме (раньше inactive nav в Двойнике был невидим = dark text on dark header). */
[data-theme="light"] .bp-view-link,
[data-theme="light"] .pt-nav a,
[data-theme="light"] .lb-nav a,
[data-theme="light"] .pl-nav a,
[data-theme="light"] .pn-nav a {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Глобальный nav пульта · hover */
[data-theme="light"] .bp-view-link:hover,
[data-theme="light"] .pt-nav a:hover,
[data-theme="light"] .lb-nav a:hover,
[data-theme="light"] .pl-nav a:hover,
[data-theme="light"] .pn-nav a:hover {
  color: #EBC554 !important;
}

/* Глобальный nav пульта · active (force amber-light для контраста на dark header) */
[data-theme="light"] .bp-view-link.is-active,
[data-theme="light"] .pt-nav a.is-active,
[data-theme="light"] .lb-nav a.is-active,
[data-theme="light"] .pl-nav a.is-active,
[data-theme="light"] .pn-nav a.is-active {
  color: #EBC554 !important;
  background: rgba(235, 197, 84, 0.10) !important;
}

/* v4.84.1 (Этап 2c · 24.05): мёртвые правила .pn-mode-toggle button удалены —
 * после Захода 3 Этапа 2 (v4.84.0) mode-toggle переехал в отдельную row под header
 * с классами .pn-modes + .pn-mode-btn (canonical sync с twin .pt-modes / .pt-mode-btn pattern).
 * Selector .pn-mode-toggle button больше не существует в HTML. */

/* Правые мета-надписи шапки («обновлено 10 ч назад» · «демо-режим» · top-note Двойника)
 * v4.84.1 (Этап 2c · 24.05): добавлен .pt-top-note — Двойник теперь sync с другими 3 пультами. */
[data-theme="light"] .pt-top-note,
[data-theme="light"] .lb-top-note,
[data-theme="light"] .pl-top-note,
[data-theme="light"] .pn-top-note {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Brand wordmark (strong) — амбер на dark header в обеих темах
 * v4.84.2 (Этап 2c · 24.05): sync 4 пультов в светлой теме (раньше только .pt-brand имел inline override) */
[data-theme="light"] .pt-brand strong,
[data-theme="light"] .lb-brand strong,
[data-theme="light"] .pl-brand strong,
[data-theme="light"] .pn-brand strong {
  color: #EBC554 !important;
}

/* Brand subline (span) — муведенный белый видимый на dark header в light theme
 * v4.84.2 (Этап 2c · 24.05): sync 4 пультов · раньше .lb/.pl/.pn subline был невидим (dark text on dark header) */
[data-theme="light"] .pt-brand span,
[data-theme="light"] .lb-brand span,
[data-theme="light"] .pl-brand span,
[data-theme="light"] .pn-brand span {
  color: rgba(255, 255, 255, 0.56) !important;
}

/* Theme button (sun/moon SVG) — рамка/цвет visible на dark header
 * v4.84.2 (Этап 2c · 24.05): sync 4 пультов */
[data-theme="light"] .pt-theme,
[data-theme="light"] .lb-theme,
[data-theme="light"] .pl-theme,
[data-theme="light"] .pn-theme {
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
[data-theme="light"] .pt-theme:hover,
[data-theme="light"] .lb-theme:hover,
[data-theme="light"] .pl-theme:hover,
[data-theme="light"] .pn-theme:hover {
  color: #EBC554 !important;
  border-color: #EBC554 !important;
}

/* Lang switcher — рамка + неактивные кнопки RU/EN видимы на dark header
 * v4.84.2 (Этап 2c · 24.05): sync 4 пультов · раньше inactive lang btn был dark text */
[data-theme="light"] .pt-lang-switcher,
[data-theme="light"] .lb-lang-switcher,
[data-theme="light"] .pl-lang-switcher,
[data-theme="light"] .pn-lang-switcher {
  border-color: rgba(255, 255, 255, 0.22) !important;
}
[data-theme="light"] .pt-lang-btn:not(.ai-lang-btn-active),
[data-theme="light"] .lb-lang-btn:not(.ai-lang-btn-active),
[data-theme="light"] .pl-lang-btn:not(.ai-lang-btn-active),
[data-theme="light"] .pn-lang-btn:not(.ai-lang-btn-active) {
  color: rgba(255, 255, 255, 0.82) !important;
}
[data-theme="light"] .pt-lang-btn:not(.ai-lang-btn-active):hover,
[data-theme="light"] .lb-lang-btn:not(.ai-lang-btn-active):hover,
[data-theme="light"] .pl-lang-btn:not(.ai-lang-btn-active):hover,
[data-theme="light"] .pn-lang-btn:not(.ai-lang-btn-active):hover {
  color: #EBC554 !important;
}

/* ============================================================
 * AUTH CARDS IMMUTABILITY · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * .auth-card имеет dark gradient hardcoded в master (line 1348) — premium brand emotion.
 * В light theme текст внутри auth-card должен оставаться белым (как dark).
 * Затронуто: login.html, auth-magic-link.html (academy/auth/), reset-password etc.
 * ============================================================ */

/* AUTH CARD · FULL LIGHT в light theme (CEO 2026-05-07: hybrid dark на cream не подошёл, делаем full light). */
[data-theme="light"] .auth-card {
  background: linear-gradient(180deg, rgba(235,197,84,0.06) 0%, var(--bg-tertiary, #FFFFFF) 100%) !important;
  box-shadow: 0 0 60px rgba(235,197,84,0.18) !important;
}
[data-theme="light"] .auth-card h1,
[data-theme="light"] .auth-card .eco-h1-page,
[data-theme="light"] .auth-card .auth-success-h1 { color: var(--text-primary) !important; }
[data-theme="light"] .auth-card p,
[data-theme="light"] .auth-card .eco-body-sm,
[data-theme="light"] .auth-card .auth-success-sub { color: var(--text-muted) !important; }
[data-theme="light"] .auth-card .auth-context { color: var(--text-muted) !important; }
[data-theme="light"] .auth-card .auth-context strong { color: var(--accent-amber-dark) !important; }
[data-theme="light"] .auth-card .auth-context-sep { color: var(--border-default) !important; }
[data-theme="light"] .auth-card .auth-label { color: var(--accent-amber-dark) !important; }
[data-theme="light"] .auth-card .auth-input {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
  caret-color: var(--text-primary) !important;
}
[data-theme="light"] .auth-card .auth-input::placeholder { color: var(--text-faint) !important; }
[data-theme="light"] .auth-card .auth-input:focus,
[data-theme="light"] .auth-card .auth-input:focus-visible { border-color: var(--accent-amber-dark) !important; }
[data-theme="light"] .auth-card .btn-auth-gold { color: var(--accent-amber-dark) !important; border-color: var(--accent-amber-dark) !important; box-shadow: 0 0 28px rgba(122,102,20,0.18) !important; }
[data-theme="light"] .auth-card .btn-auth-gold:hover { background: var(--accent-amber-dark) !important; color: #FFFFFF !important; box-shadow: 0 0 40px rgba(122,102,20,0.40) !important; }
[data-theme="light"] .auth-footer-info { color: rgba(26,26,26,0.55); }   /* footer ВНЕ карточки на cream body */
[data-theme="light"] .auth-footer-info a { color: var(--accent-amber-dark); }
[data-theme="light"] .auth-footer-info strong { color: var(--accent-amber-dark); }

/* ============================================================
 * DASHBOARD V4 CARDS · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * .dashboard-hero-action / .dashboard-hero-stat / .course-card / .continue-card / .stat-card / .tier-card
 * — все hardcoded dark background в master. В light переключаем на white card.
 * Затронуто: dashboard.html, billing.html (tier-card / stat-card).
 * ============================================================ */

[data-theme="light"] html { background: var(--bg-secondary) !important; }

[data-theme="light"] .dashboard-hero-action,
[data-theme="light"] .dashboard-hero-stat,
[data-theme="light"] .course-card,
[data-theme="light"] .continue-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .tier-card {
  background: var(--bg-tertiary, #FFFFFF) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .dashboard-hero-action,
[data-theme="light"] .continue-card,
[data-theme="light"] .tier-card {
  background: linear-gradient(135deg, rgba(235,197,84,0.06) 0%, var(--bg-tertiary, #FFFFFF) 60%) !important;
}
[data-theme="light"] .dashboard-hero-stat,
[data-theme="light"] .stat-card {
  border-color: var(--border-default) !important;
}
[data-theme="light"] .dashboard-hero-stat-val,
[data-theme="light"] .stat-num {
  color: var(--accent-amber-dark) !important;     /* deep bronze для контраста на white */
}
[data-theme="light"] .dashboard-hero-stat-cap,
[data-theme="light"] .stat-cap {
  color: var(--accent-amber-dark) !important;
}
[data-theme="light"] .dashboard-hero-title,
[data-theme="light"] .continue-card h2 {
  color: var(--text-primary) !important;
}
[data-theme="light"] .dashboard-hero-progress-bar,
[data-theme="light"] .progress-bar {
  background: var(--border-faint) !important;
}
[data-theme="light"] .course-card-locked::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 100%) !important;
}

/* ============================================================
 * TIMELINE ROWS · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * Master rule (line 1106) форсит white background + heavy border на .eco-timeline-row.
 * Внутри .profile-acc-body это создаёт «решётку» (CEO 2026-05-07 «не очень красиво»).
 * Override: внутри profile-acc и других accordion containers — прозрачный background +
 * лёгкий border-bottom для divider-only эффекта.
 * ============================================================ */

[data-theme="light"] .profile-acc .eco-timeline-row,
[data-theme="light"] .profile-acc-body .eco-timeline-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(26,26,26,0.06) !important;
}
[data-theme="light"] .profile-acc .eco-timeline-row:last-child {
  border-bottom: none !important;
}
[data-theme="light"] .profile-acc-body .eco-timeline-when {
  color: var(--accent-amber-dark) !important;     /* deep bronze для контраста на cream */
}

/* ============================================================
 * CERTIFICATE STAGE · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * Cert paper — immutable dark gradient (premium PDF look · золотой стандарт v4.4.2).
 * Stage вокруг + toolbar — переключаются на light для consistency с экосистемой.
 * ============================================================ */

[data-theme="light"] .cert-stage {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(235,197,84,0.10) 0%, var(--bg-secondary) 70%) !important;
}

/* Cert-paper LIGHT в light theme — настоящая бумага, gold детали (cube, cert-name foil, corners, border) остаются.
   CEO REV 2026-05-06: paper в light theme — белая бумага с gold-foil тиснением, как реальный сертификат. */
[data-theme="light"] .cert-paper {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFAF7 50%, #FFFFFF 100%) !important;
  box-shadow: 0 24px 60px rgba(26,26,26,0.10), 0 8px 24px rgba(26,26,26,0.06), 0 0 60px rgba(235,197,84,0.12) !important;
}
/* Cert-paper content DARK на light paper · gold детали (cert-name, corners, divider) остаются brand-gold. */
[data-theme="light"] .cert-paper .cert-course { color: #0A0A0A !important; text-shadow: none !important; }
[data-theme="light"] .cert-paper .cert-course-sub { color: rgba(10,10,10,0.65) !important; }
[data-theme="light"] .cert-paper .cert-issued,
[data-theme="light"] .cert-paper .cert-stat-label,
[data-theme="light"] .cert-paper .cert-cap,
[data-theme="light"] .cert-paper .cert-cap-sub,
[data-theme="light"] .cert-paper .bottom-cap { color: rgba(10,10,10,0.55) !important; }
[data-theme="light"] .cert-paper .bottom-val,
[data-theme="light"] .cert-paper .cert-stat-value { color: #0A0A0A !important; }
[data-theme="light"] .cert-paper .cert-divider { background: rgba(10,10,10,0.10) !important; }
[data-theme="light"] .cert-paper .cert-inner-border { border-color: rgba(235,197,84,0.40) !important; }
[data-theme="light"] .cert-toolbar {
  background: rgba(245, 245, 245, 0.95) !important;
  border-bottom: 1px solid var(--border-faint) !important;
}
[data-theme="light"] .cert-toolbar a,
[data-theme="light"] .cert-toolbar div,
[data-theme="light"] .cert-toolbar button:not(.toolbar-btn-primary) {
  color: var(--text-primary) !important;
}
[data-theme="light"] .cert-toolbar .toolbar-btn {
  border-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .cert-toolbar .toolbar-btn:hover {
  border-color: var(--accent-amber-dark) !important;
  color: var(--accent-amber-dark) !important;
}
[data-theme="light"] .cert-toolbar .toolbar-btn-primary {
  border-color: var(--accent-amber-dark) !important;
  color: var(--accent-amber-dark) !important;
}
[data-theme="light"] .cert-toolbar .toolbar-btn-primary:hover {
  background: var(--accent-amber-dark) !important;
  color: #FFFFFF !important;
}

/* ============================================================
 * BODY MIN-HEIGHT · LIGHT THEME (v4.4.17 audit-fix)
 * Browser показывает html background ниже body когда контент короче viewport.
 * Force body min-height + html always inherits cream в light.
 * ============================================================ */

[data-theme="light"] body {
  min-height: 100vh !important;
  background-color: var(--bg-secondary, #f0ede8) !important;
}

/* ============================================================
 * FOOTER · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * Stripe-style dark footer (#0E0D0B) на light page = premium contrast.
 * Текст в footer immutable white (как footer dark в обеих темах).
 * Memory: feedback_light_theme_v2.md «Stripe-pattern dark footer».
 * Затронуто: courses.html (catalog), landing.html — единственные с footer в академии.
 * ============================================================ */

[data-theme="light"] .eco-footer {
  background: #0E0D0B !important;
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .eco-footer * {
  color: rgba(255,255,255,0.65);
}
[data-theme="light"] .eco-footer .eco-wordmark .gold,
[data-theme="light"] .eco-footer .gold { color: #EBC554 !important; }
[data-theme="light"] .eco-footer .eco-wordmark .br,
[data-theme="light"] .eco-footer-wordmark .br { color: #FFFFFF !important; }
[data-theme="light"] .eco-footer .eco-footer-mini { color: rgba(255,255,255,0.40) !important; }
[data-theme="light"] .eco-footer a:hover { color: #EBC554 !important; }
[data-theme="light"] .eco-footer .triad-tile {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="light"] .eco-footer .triad-tile:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(235,197,84,0.30) !important;
}
[data-theme="light"] .eco-footer .triad-caption { color: rgba(255,255,255,0.55) !important; }
[data-theme="light"] .eco-footer .triad-wordmark .br { color: #FFFFFF !important; }
[data-theme="light"] .eco-footer .border-t { border-color: rgba(255,255,255,0.08) !important; }

/* ============================================================
 * PAGE-LOCAL LIGHT THEME FALLBACKS · v4.11.1 audit fix 2026-05-09
 * HIGH findings: hardcoded dark backgrounds на page-local классах ломают light theme.
 * Quiz options, investor-portal heading, auth-magic-link, lesson-completed cross-link, billing FREE.
 * ============================================================ */

/* Quiz options (lesson-quiz.html · academy) */
[data-theme="light"] .option { background: #FFFFFF; border-color: rgba(26,26,26,0.18); }
[data-theme="light"] .option-text { color: var(--text-primary); }
[data-theme="light"] .option::before { color: var(--accent-amber-dark, #7A6614); opacity: 0.85; }
[data-theme="light"] .question-card { background: #FFFFFF; border-color: rgba(26,26,26,0.18); }

/* Investor-portal heading (investor-portal · .ai) */
[data-theme="light"] .investor-portal-h1,
[data-theme="light"] .investor-h1 { color: var(--accent-amber-dark, #7A6614) !important; }

/* auth-magic-link email display (academy/auth/auth-magic-link.html) */
[data-theme="light"] .auth-context strong { color: var(--accent-amber-dark, #7A6614) !important; }
[data-theme="light"] .email-display-row .change-link { color: rgba(26,26,26,0.50) !important; }

/* Lesson-completed cross-product link (academy/lesson-completed.html) */
[data-theme="light"] .auth-cross-link p { color: var(--text-primary); }

/* Billing tier-card FREE label контраст (academy/billing.html) */
[data-theme="light"] .billing-current-card .price-block-free { color: var(--text-primary); }

/* ============================================================
 * BTN HOVER · LIGHT THEME · v4.4.17 (Призма 2 audit-fix)
 * .btn-ai-success / .btn-ai-vip / .btn-ai-investor hover в page-CSS использует
 * `color: var(--bg-secondary)` который в light = cream → текст сливается с brand bg.
 * Override: solid brand bg + WHITE inverse text (как у .btn-ai-primary master rule).
 * Также idle states: brand-colored text + проявленный border (page CSS форс не работает).
 * ============================================================ */

[data-theme="light"] .btn-ai-success { color: var(--accent-green, #16A34A) !important; border-color: rgba(22,163,74,0.50) !important; }
[data-theme="light"] .btn-ai-success:hover { background: var(--accent-green, #16A34A) !important; color: #FFFFFF !important; border-color: var(--accent-green, #16A34A) !important; }

[data-theme="light"] .btn-ai-vip { color: var(--neon-purple, #9933E6) !important; border-color: rgba(153,51,230,0.50) !important; }
[data-theme="light"] .btn-ai-vip:hover { background: var(--neon-purple, #9933E6) !important; color: #FFFFFF !important; border-color: var(--neon-purple, #9933E6) !important; }

[data-theme="light"] .btn-ai-investor { color: var(--neon-steel, #2D5380) !important; border-color: rgba(45,83,128,0.50) !important; }
[data-theme="light"] .btn-ai-investor:hover { background: var(--neon-steel, #2D5380) !important; color: #FFFFFF !important; border-color: var(--neon-steel, #2D5380) !important; }

[data-theme="light"] .btn-action:hover { background: var(--accent-amber-dark, #7A6614) !important; color: #FFFFFF !important; }

/* ============================================================
 * TAILWIND/HARDCODED COLOR OVERRIDES для LIGHT THEME
 * Все наши mock'и используют Tailwind classes (text-white, bg-bg-*)
 * и inline hex colors — здесь принудительно переопределяем для light.
 * ============================================================ */

[data-theme="light"] body { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }

/* Bg overrides */
[data-theme="light"] .bg-bg { background-color: var(--bg-secondary) !important; }
[data-theme="light"] .bg-bg-secondary { background-color: var(--bg-tertiary) !important; }
[data-theme="light"] .bg-bg-tertiary { background-color: var(--bg-quaternary) !important; }
[data-theme="light"] .bg-bg-concrete { background-color: var(--bg-concrete) !important; }
[data-theme="light"] .bg-\[\#080808\] { background-color: var(--bg-secondary) !important; }
[data-theme="light"] .bg-\[\#050505\] { background-color: var(--bg-primary) !important; }
[data-theme="light"] .bg-\[\#181818\] { background-color: var(--bg-concrete) !important; }
[data-theme="light"] .bg-\[\#1A1A1A\] { background-color: var(--bg-quaternary) !important; }
[data-theme="light"] .bg-\[\#111\] { background-color: var(--bg-tertiary) !important; }
[data-theme="light"] .bg-\[\#0a0a0a\] { background-color: var(--bg-primary) !important; }

/* Text color overrides */
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-\[\#FFFFFF\] { color: var(--text-primary) !important; }
[data-theme="light"] .text-\[\#E5E5E5\] { color: var(--text-secondary) !important; }
[data-theme="light"] .text-\[\#A3A3A3\] { color: var(--text-muted) !important; }
[data-theme="light"] .text-\[\#737373\] { color: var(--text-faint) !important; }
[data-theme="light"] .text-\[\#525252\] { color: var(--text-subtle) !important; }
[data-theme="light"] .text-\[\#1A1A1A\] { color: var(--text-disabled) !important; }

/* Amber оставляем — он одинаковый цвет в обоих theme (через --accent-amber) */
[data-theme="light"] .text-amber { color: var(--accent-amber) !important; }
[data-theme="light"] .bg-amber { background-color: var(--accent-amber) !important; }
[data-theme="light"] .border-amber { border-color: var(--accent-amber) !important; }

/* Border overrides */
[data-theme="light"] .border-\[\#1A1A1A\] { border-color: var(--border-faint) !important; }
[data-theme="light"] .border-\[\#525252\] { border-color: var(--border-default) !important; }
[data-theme="light"] .border-\[\#737373\] { border-color: var(--border-default) !important; }
[data-theme="light"] .border-bg-tertiary { border-color: var(--border-faint) !important; }

/* Inline rgba overrides — для opacity-based whites */
[data-theme="light"] [style*="color:rgba(255,255,255,0.85)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.85)"] { color: var(--text-secondary) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,0.7)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.65)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.65)"] { color: var(--text-muted) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,0.55)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.55)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.5)"] { color: var(--text-faint) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.4)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.35)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.35)"] { color: var(--text-subtle) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,0.3)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.3)"] { color: var(--text-disabled) !important; }

/* Дополнительные opacity-варианты для slogans (45/25/22/20) — невидимы на cream */
[data-theme="light"] [style*="color:rgba(255,255,255,0.45)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.45)"] { color: var(--text-muted) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,0.25)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.25)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.22)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.22)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.20)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.20)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.2)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.2)"] { color: var(--text-faint) !important; }
[data-theme="light"] [style*="color:rgba(255,255,255,0.10)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.10)"],
[data-theme="light"] [style*="color:rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="color: rgba(255,255,255,0.1)"] { color: var(--text-subtle) !important; }

/* Triad current-stripe (top amber line in middle tile) — на light уменьшаем opacity */
[data-theme="light"] .current-stripe { background: linear-gradient(90deg, transparent 0%, var(--accent-amber) 30%, var(--accent-amber) 70%, transparent 100%) !important; box-shadow: 0 0 6px rgba(201,163,50,0.5) !important; }

/* Footer mono-caption-org / mono-caption-link — captions goldjaxe.com/.ai/.org */
[data-theme="light"] .mono-caption-org { color: var(--text-faint) !important; }
[data-theme="light"] .mono-caption-link { color: var(--accent-amber) !important; }
[data-theme="light"] .mono-caption-link:hover { color: var(--accent-amber-light) !important; }

/* GOLD[JAXE] block in light — ИСПРАВЛЕНИЕ inline стилей `.text-amber` и `.text-white` внутри */
[data-theme="light"] .gold-wordmark-f .text-amber,
[data-theme="light"] .gold-wordmark .text-amber { color: var(--accent-amber) !important; }
[data-theme="light"] .gold-wordmark-f .text-white,
[data-theme="light"] .gold-wordmark .text-white { color: var(--text-primary) !important; }

/* Footer text-[#A3A3A3] / text-[14px] и т.д. в triad-desc на light */
[data-theme="light"] .triad-desc { color: var(--text-muted) !important; }

/* mono-caption-link уже выше */

/* Footer .ai bottom strip · копирайт + privacy/terms/cookies + ИП row */
[data-theme="light"] footer .font-mono { color: inherit; }
[data-theme="light"] footer a.font-mono.uppercase[href*="privacy"],
[data-theme="light"] footer a.font-mono.uppercase[href*="oferta"],
[data-theme="light"] footer a.font-mono.uppercase[href*="cookies"] { color: var(--text-faint) !important; }
[data-theme="light"] footer a.font-mono.uppercase:hover { color: var(--accent-amber) !important; }

/* Безопасная подушка — любой font-mono uppercase в footer на light */
[data-theme="light"] footer .font-mono.uppercase { color: var(--text-faint); }

/* Inline white background */
[data-theme="light"] [style*="background:#080808"],
[data-theme="light"] [style*="background: #080808"],
[data-theme="light"] [style*="background-color:#080808"] { background-color: var(--bg-secondary) !important; }
[data-theme="light"] [style*="background:#181818"],
[data-theme="light"] [style*="background: #181818"] { background-color: var(--bg-concrete) !important; }

/* Headings forced color */
[data-theme="light"] .h1-org, [data-theme="light"] .h2-org { color: var(--text-primary) !important; }

/* Input/code on light theme */
[data-theme="light"] .code-input { color: var(--accent-amber); border-color: var(--border-default); background: var(--bg-tertiary); }
[data-theme="light"] .code-input::placeholder { color: var(--text-faint); }

/* Buttons на light — inverted hover */
[data-theme="light"] .btn-ai { border-color: var(--border-default); color: var(--text-primary); }
[data-theme="light"] .btn-ai:hover { border-color: var(--accent-amber); color: var(--accent-amber); background: rgba(201,163,50,0.08); }
[data-theme="light"] .btn-ai-primary { border-color: var(--accent-amber); color: var(--accent-amber); background: transparent; }
[data-theme="light"] .btn-ai-primary:hover { background: var(--accent-amber); color: var(--bg-tertiary); }

/* Tier buttons на light */
[data-theme="light"] .tier-btn { border-color: var(--border-default); }
[data-theme="light"] .tier-title { color: var(--text-primary); }
[data-theme="light"] .tier-sub { color: var(--text-muted); }

/* Service card на light */
[data-theme="light"] .service-card { background: var(--bg-tertiary); border-color: var(--border-default); }
[data-theme="light"] .service-card h3 { color: var(--text-primary); }
[data-theme="light"] .card-body-text { color: var(--text-muted); }

/* Triad tile на light */
[data-theme="light"] .triad-tile { background: var(--bg-tertiary); border-color: var(--border-default); }
[data-theme="light"] .triad-caption { color: var(--text-muted); }
[data-theme="light"] .triad-wordmark { color: var(--text-primary); }
[data-theme="light"] .triad-wordmark .br { color: var(--text-faint); }
[data-theme="light"] .triad-desc { color: var(--text-muted); }
[data-theme="light"] .triad-current { background: linear-gradient(180deg, rgba(201,163,50,0.06) 0%, rgba(255,255,255,0) 100%) !important; }

/* Chip на light */
[data-theme="light"] .chip { border-color: var(--border-default); color: var(--text-muted); }

/* Mono caption colors */
[data-theme="light"] .mono-cap-xs, [data-theme="light"] .mono-cap-sm, [data-theme="light"] .mono-cap { color: var(--text-muted); }

/* Footer eco-footer */
[data-theme="light"] .eco-footer { background: var(--bg-tertiary); border-color: var(--border-faint); }
[data-theme="light"] .eco-footer-wordmark .br { color: var(--text-faint); }
[data-theme="light"] .eco-triad-link { color: var(--text-muted); }
[data-theme="light"] .eco-social { border-color: var(--border-default); color: var(--text-muted); }

/* Search box */
[data-theme="light"] .eco-search { border-color: var(--border-default); }
[data-theme="light"] .eco-search .key { color: var(--text-faint); }

/* === LIGHT THEME · LANG/THEME КНОПКИ
 * Block B Q3 (CEO 2026-05-07 · unification dark immutable header):
 * Все headers (.eco-header / .ai-header) теперь dark в обеих темах →
 * lang/theme buttons inside header используют default dark-theme colors (white text).
 * Header-specific override `.eco-header .eco-lang-btn` уже существует в master строки 140-142
 * для гарантии WHITE на dark header.
 *
 * Form-context (settings page) использует form-isolated `.eco-theme-pill` (НЕ .eco-lang-btn) —
 * см. feedback_admin_sidebar_canonical.md разделение «.eco-theme-btn header» vs «.eco-theme-pill form».
 * Page-context `.eco-lang-switcher` в settings (data-page-lang) уже имеет свой styling через
 * page-isolated блок в settings.html.
 *
 * Старый блок `[data-theme="light"] .ai-lang-btn { color: text-primary }` etc. удалён —
 * был tailored под cream header (.ai-header light glass v2) который теперь dark immutable. */
[data-theme="light"] .eco-profile-btn {
  color: var(--accent-amber) !important;
  border-color: rgba(26,26,26,0.30) !important;
  background: rgba(255,255,255,0.5) !important;
}
[data-theme="light"] .eco-status-chip { background: rgba(34,197,94,0.10); }

/* === LIGHT THEME · FOOTER .ai (hero-v4) FIX · все hardcoded white цвета === */
/* Триадный блок · сильнее !important перебивают local <style> в hero-v4 */
[data-theme="light"] .triad-tile { background: var(--bg-tertiary) !important; }
[data-theme="light"] .triad-caption { color: var(--text-muted) !important; }
[data-theme="light"] .triad-wordmark { color: var(--text-primary) !important; }
[data-theme="light"] .triad-wordmark .br { color: var(--text-faint) !important; }
[data-theme="light"] .triad-desc { color: var(--text-muted) !important; }
[data-theme="light"] .triad-explore { color: rgba(201,163,50,0.85) !important; }
[data-theme="light"] .triad-current { background: linear-gradient(180deg, rgba(201,163,50,0.10) 0%, rgba(255,255,255,0) 100%) !important; }

/* GOLD[JAXE] big footer block в hero-v4 (.gold-wordmark-f / .cube-glow-f) */
[data-theme="light"] .gold-wordmark, [data-theme="light"] .gold-wordmark-f {
  color: var(--text-primary) !important;
  text-shadow: 0 0 12px rgba(201,163,50,0.20), 0 0 24px rgba(201,163,50,0.10) !important;
}
[data-theme="light"] .gold-wordmark .text-amber,
[data-theme="light"] .gold-wordmark-f .text-amber,
[data-theme="light"] .gold-wordmark-f .gold-color { color: var(--accent-amber) !important; }
[data-theme="light"] .gold-wordmark .text-white,
[data-theme="light"] .gold-wordmark-f .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .gold-wordmark .br, [data-theme="light"] .gold-wordmark-f .br { color: var(--text-faint) !important; }
[data-theme="light"] .cube-glow, [data-theme="light"] .cube-glow-f {
  filter: drop-shadow(0 0 8px rgba(201,163,50,0.30)) drop-shadow(0 0 16px rgba(201,163,50,0.12)) !important;
}

/* Slogans · в hero-v4 hardcoded rgba(255,255,255,0.45/0.25/0.20) — невидимы на cream */
[data-theme="light"] .slogan-1, [data-theme="light"] .slogan { color: var(--text-muted) !important; }
[data-theme="light"] .slogan-2 { color: var(--text-faint) !important; }
[data-theme="light"] .cursor-blink::after { color: var(--accent-amber) !important; }

/* Social icons (footer) — hardcoded white/12 border, white/55 color */
[data-theme="light"] .social-icon { border-color: var(--border-default) !important; color: var(--text-muted) !important; }
[data-theme="light"] .social-icon:hover { border-color: var(--accent-amber) !important; color: var(--accent-amber) !important; }

/* Bottom strip (copyright + legal links + ИП) · перебиваем inline rgba */
[data-theme="light"] footer .border-t,
[data-theme="light"] .eco-footer .border-t { border-color: var(--border-faint) !important; }

/* Mono caption (wordmark slogans · grid bg legal text) — usually inline rgba */
[data-theme="light"] .font-mono { color: inherit; }

/* Force any remaining transparent-white footer divider */
[data-theme="light"] footer { background: var(--bg-secondary) !important; }
[data-theme="light"] footer .bg-bg { background: var(--bg-secondary) !important; }
[data-theme="light"] footer .bg-bg-secondary { background: var(--bg-tertiary) !important; }

/* Code input (hero) — bg slight для visibility */
[data-theme="light"] .code-input { background: var(--bg-tertiary) !important; }
[data-theme="light"] .code-input:focus { box-shadow: 0 0 0 1px var(--accent-amber) !important; }

/* H1 gradient text — на light gradient gold→darker amber отлично работает  */
[data-theme="light"] .h1-org { text-shadow: none !important; }

/* Tier-buttons на light */
[data-theme="light"] .tier-btn { background: var(--bg-tertiary) !important; }
[data-theme="light"] .tier-btn-primary { background: linear-gradient(180deg, rgba(201,163,50,0.12) 0%, rgba(201,163,50,0.04) 100%) !important; }
[data-theme="light"] .tier-btn-primary:hover { background: var(--accent-amber) !important; }
[data-theme="light"] .tier-btn-primary:hover .tier-title,
[data-theme="light"] .tier-btn-primary:hover .tier-sub { color: #FFFFFF !important; }
[data-theme="light"] .tier-btn-primary:hover .tier-bracket { color: #FFFFFF !important; }
[data-theme="light"] .tier-bracket { color: var(--accent-amber) !important; }
[data-theme="light"] .tier-btn-primary .tier-title { color: var(--accent-amber) !important; }

/* Service card · принудительно перебиваем local hero-v4 style */
[data-theme="light"] .service-card { background: var(--bg-tertiary) !important; border-color: var(--border-default) !important; }
[data-theme="light"] .service-card h3 { color: var(--text-primary) !important; }
[data-theme="light"] .card-body-text { color: var(--text-muted) !important; }

/* ============================================================
 * 🔒 MARKETING HEADER · namespace .ai-* (goldjaxe.ai) · canonical v4 (2026-05-04)
 * Применяется на: ai/landing, ai/checkout, ai/enterprise-form, linkstack
 * (renamed from .org-* → .ai-* в Phase 3 namespace refactor 2026-05-04)
 * 🔒 Унифицирован с .eco-* / .vis-* / .vault-* до canonical 77/44/17.5/14 JBM Bold
 *    в Contradiction Audit fix 2026-05-04 (был legacy 2-tier 62/41/16/12).
 * ============================================================ */

.ai-header {
  height: 77px;
  background: rgba(18,18,22,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-faint);
}
.ai-logo { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 100%; text-decoration: none; flex-shrink: 0; }
.ai-cube, .ai-cube-h { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(235,197,84,0.35)); transition: filter 350ms ease; }
.ai-logo:hover .ai-cube, .ai-logo:hover .ai-cube-h { filter: drop-shadow(0 0 18px rgba(235,197,84,0.55)) drop-shadow(0 0 32px rgba(235,197,84,0.18)); }
.ai-wordmark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 17.5px; letter-spacing: 0.07em; line-height: 1; }
.ai-wordmark .gold { color: var(--accent-amber); }
.ai-wordmark .br { color: var(--text-primary); }
.ai-subline { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--text-secondary); margin-top: 5px; line-height: 1; text-transform: uppercase; }

.ai-nav { display: flex; align-items: center; height: 100%; }
.ai-nav-link {
  font-family: 'Space Mono', monospace; font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase;
  padding: 0 14px; height: 100%; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  text-decoration: none; position: relative;
  transition: color 250ms ease;
}
.ai-nav-link::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 1px; background: var(--accent-amber);
  box-shadow: 0 0 6px var(--accent-amber), 0 0 12px rgba(235,197,84,0.55);
  transform: scaleX(0); transform-origin: center;
  transition: transform 280ms ease;
}
.ai-nav-link:hover { color: var(--accent-amber); }
.ai-nav-link:hover::after { transform: scaleX(1); }
.ai-nav-active { color: var(--accent-amber); }
.ai-nav-active::after { transform: scaleX(1); }
.ai-nav-link .ext { color: var(--text-subtle); font-size: 11px; }

.ai-status-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  height: 36px; padding: 0 12px;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--accent-green);
  border: 1px solid rgba(34,197,94,0.3); margin-right: 12px;
}
.ai-status-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 7px var(--accent-green);
}
/* ai-lang-switcher · v4.1 unification: h32→36, btn 38×30→44×34 / 11.5→12.5px (touch-friendly, sync с landing.html) */
.ai-lang-switcher { display: flex; height: 36px; border: 1px solid var(--border-default); }
.ai-lang-btn {
  width: 44px; height: 34px;
  font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: 0.10em;
  background: transparent; color: var(--text-primary);
  border: none; cursor: pointer; transition: all 200ms ease;
}
.ai-lang-btn-active { background: var(--accent-amber); color: var(--bg-secondary); }
.ai-lang-btn:not(.ai-lang-btn-active):hover { color: var(--accent-amber); background: rgba(235,197,84,0.05); }
.ai-theme-btn {
  width: 34px; height: 32px;
  border: 1px solid var(--border-default); margin-left: 8px;
  color: var(--text-primary); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms ease;
}
.ai-theme-btn:hover { color: var(--accent-amber); border-color: rgba(235,197,84,0.4); }

/* ============================================================
 * 🔒 HEADER CANONICAL v3.2 (FIXED 2026-05-03 by CEO)
 * ════════════════════════════════════════════════════════════
 * ОДИН header на ВСЕХ 36 экранах прототипа. Никаких 2-tier
 * (marketing-62 vs product-72) — единая спецификация.
 *
 * Размеры (НЕ МЕНЯТЬ без явного запроса CEO):
 *   • height       77px
 *   • cube         44×44
 *   • wordmark     17.5px Space Mono Bold · 0.07em
 *                  (Space Mono — латиница только; для cyrillic
 *                  слова в wordmark не используются)
 *   • subline      14px JetBrains Mono Bold · 0.14em · alpha 0.85
 *                  (JetBrains Mono — единый шрифт subline+caption,
 *                  имеет полный Cyrillic. Space Mono НЕ ИСПОЛЬЗУЕМ
 *                  для subline — у него нет cyrillic glyphs!)
 *   • cube glow    drop-shadow 0 0 11px amber/0.35
 *   • nav-link     padding 0 14px (не 18!) · white-space: nowrap
 *                  (русский «ВСЕ ПРОТОКОЛЫ» переносится без nowrap)
 *   • status-chip  white-space: nowrap (иначе «L0 · ACTIVE» в 2 строки)
 *   • search       white-space: nowrap
 *
 * Footer logo (нижняя часть) = header (44 / 17.5 / 11 glow).
 * Footer caption (под логотипом) = header subline (JetBrains Mono Bold 14px).
 *
 * Если CEO просит изменить — менять ЗДЕСЬ + batch sed по всем
 * inline overrides на 36+ экранах. Не оставлять расхождений.
 * Memory: feedback_header_canonical_v3.md
 * ============================================================ */

.eco-header {
  height: 77px;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-faint);
}
.eco-logo { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 100%; text-decoration: none; flex-shrink: 0; }
.eco-cube { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 var(--cube-glow-blur) rgba(var(--accent-amber-rgb), var(--cube-glow-alpha))); transition: filter 350ms ease; }
.eco-logo:hover .eco-cube { filter: drop-shadow(0 0 calc(var(--cube-glow-blur) + 7px) rgba(var(--accent-amber-rgb), calc(var(--cube-glow-alpha) + 0.20))) drop-shadow(0 0 32px rgba(var(--accent-amber-rgb), 0.18)); }
.eco-wordmark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 17.5px; letter-spacing: 0.07em; line-height: 1; }
.eco-wordmark .gold { color: var(--accent-amber); }
.eco-wordmark .br { color: var(--wordmark-bracket-color); }
/* Subline canonical v3 — JetBrains Mono Bold (полный Cyrillic + technical look) */
.eco-subline { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--text-secondary); margin-top: 5px; line-height: 1; text-transform: uppercase; }

/* ============================================================
 * 🔒 SECONDARY CAPTIONS — иерархия md/sm/xs (FIXED 2026-05-03)
 * ════════════════════════════════════════════════════════════
 * Все captions внутри страницы (section labels, stat caps,
 * step labels, card captions) — JetBrains Mono Bold для
 * единства с header subline. Полный Cyrillic, technical look.
 *
 *   .eco-cap-md  · 14px ls 0.14em — главные section labels
 *                  («▸ ЧТО ПРОИСХОДИТ ДАЛЬШЕ», «▸ ВОПРОСЫ?»)
 *                  совпадает с landing footer caption и header subline
 *   .eco-cap-sm  · 12px ls 0.10em — sub-section labels, step labels
 *   .eco-cap-xs  · 11px ls 0.14em — мелкие лейблы / chip-стиль
 *
 * Заменяет устаревшие .mono-cap-xs/.mono-cap-sm (Space Mono,
 * cyrillic ломался). Применяется на ВСЕХ 29 экранах.
 *
 * ❌ Запрещены inline `style="font-size:..."` overrides на
 * eco-cap-* — они ломают canonical. Если нужен другой размер —
 * использовать другой класс из иерархии.
 * ============================================================ */
/* CAPTIONS · v4.1 железобетонизация (CEO 2026-05-04 +1px на каждом уровне)
 * было v4.0: cap-md 14 / cap-sm 12 / cap-xs 11 — CEO жаловался на «бардак мелкого»
 * стало v4.1: cap-md 14 (keep) / cap-sm 13 / cap-xs 12 — anti-мельчёное minimum 12px */
.eco-cap-md { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; }
.eco-cap-sm { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.10em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; }
.eco-cap-xs { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; }

/* ============================================================
 * 🔒 BODY TEXT — иерархия lg/md/sm (FIXED 2026-05-03)
 * ════════════════════════════════════════════════════════════
 * Inter — основной шрифт для параграфов, описаний, body-text.
 * Полный Cyrillic, читабельный на всех размерах ≥13.
 *
 *   .eco-body-lg  · 17px Inter 400 · line-height 1.6 — hero-paragraphs, intro
 *   .eco-body-md  · 15px Inter 400 · line-height 1.6 — main paragraphs, card body
 *   .eco-body-sm  · 14px Inter 400 · line-height 1.5 — secondary descriptions
 *
 * ❌ Запрещены `text-[10px]/[11px]/[12px]` Tailwind utilities
 * на body-text — они слишком мелкие. Минимум для body = 14px.
 * Для меньших размеров — eco-cap-* (caption, не body).
 * ============================================================ */
.eco-body-lg { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; }
.eco-body-md { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.6; }
.eco-body-sm { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; }

.eco-nav { display: flex; align-items: center; height: 100%; }
.eco-nav-link {
  font-family: 'Space Mono', monospace; font-weight: 400; font-size: 12.5px;
  letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase;
  padding: 0 14px; height: 100%;
  white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
  text-decoration: none; position: relative;
  transition: color 250ms ease;
}
.eco-nav-link::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 0;
  height: 1px; background: var(--accent-amber);
  box-shadow: 0 0 6px var(--accent-amber), 0 0 12px rgba(235,197,84,0.55);
  transform: scaleX(0); transform-origin: center;
  transition: transform 280ms ease;
}
.eco-nav-link:hover { color: var(--accent-amber); }
.eco-nav-link:hover::after { transform: scaleX(1); }
.eco-nav-active { color: var(--accent-amber); }
.eco-nav-active::after { transform: scaleX(1); }
.eco-nav-link .ext { color: var(--text-subtle); font-size: 11px; }

.eco-status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--accent-green);
  border: 1px solid rgba(34,197,94,0.3);
  white-space: nowrap;
}
.eco-status-chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 7px var(--accent-green);
}
.eco-search {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border-default);
  font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: 0.10em;
  white-space: nowrap;
}
.eco-search .key { color: var(--text-faint); }
.eco-search .label { color: var(--accent-amber); letter-spacing: 0.14em; }
.eco-profile-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-amber);
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 14px;
  transition: all 200ms ease; cursor: pointer;
}
.eco-profile-btn:hover { border-color: var(--accent-amber); box-shadow: 0 0 8px rgba(235,197,84,0.3); }

/* ECO RU/EN switcher + theme-toggle — canonical единый ниже (line ~1095).
 * Сжатый дубль (height 30/btn 32×28/theme 30×30) удалён 2026-05-04 железобетонизация v4.
 * Канонический размер: switcher 32 / lang-btn 38×30 / theme-btn 34×32. */

/* ============================================================
 * PRODUCT FOOTER (compact)
 * ============================================================ */

/* Footer canonical — uniform sizing с header (44px cube · 17.5px wordmark · per UI Kit v4).
 * Применяется на всех product экранах (academy/syndicate/gate). Landing использует full-feature footer (см. блок TILE TRIAD выше + landing.html canonical reference). */
.eco-footer {
  border-top: 1px solid var(--border-faint);
  padding: 24px 0 20px; margin-top: 40px;
  background: var(--bg-secondary);
}
/* Footer logo · re-use header sizing per canonical v4 (uniform header+footer 44/17.5). */
.eco-footer-cube { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(235,197,84,0.35)); }
.eco-footer-wordmark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 17.5px; letter-spacing: 0.07em; line-height: 1; }
.eco-footer-wordmark .gold { color: var(--accent-amber); }
.eco-footer-wordmark .br { color: var(--text-faint); }
/* Footer subline tagline — canonical для "INTELLIGENCE · AUTONOMY · PROTOCOL" type captions */
.eco-footer-tagline { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--text-secondary); text-transform: uppercase; line-height: 1; margin-top: 5px; }
.eco-triad-inline { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.eco-triad-link {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 13px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); text-decoration: none;
  transition: color 250ms ease;
}
.eco-triad-link:hover { color: var(--accent-amber); }
.eco-triad-current { color: var(--accent-amber); cursor: default; }
.eco-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--border-default);
  color: var(--text-faint);
  transition: all 200ms ease;
}
.eco-social:hover { border-color: var(--accent-amber); color: var(--accent-amber); box-shadow: 0 0 8px rgba(235,197,84,0.3); }

/* ============================================================
 * TILE TRIAD (Marketing footer 3 плитки) · namespace .triad-*
 * Trinity neon: gold / purple / blue (steel) / org (crimson)
 * ============================================================ */

.triad-tile {
  position: relative; display: block; padding: 16px 24px;
  background: var(--bg-concrete); text-decoration: none;
  transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, border-color 0.3s ease;
  border: 1px solid transparent;
  --tile-r: 235; --tile-g: 197; --tile-b: 84;
}
[data-theme="light"] .triad-tile { border-color: var(--border-faint); }
/* Hover canonical Variant A (CEO 2026-05-03) — симметричный glow со всех сторон */
.triad-tile:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-3px);
  box-shadow:
    0 0 24px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.50),
    0 0 48px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.25),
    inset 0 0 24px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.08);
}
.triad-tile:hover .triad-wordmark {
  text-shadow: 0 0 12px rgba(var(--tile-r), var(--tile-g), var(--tile-b), 0.4);
}
.triad-caption { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 13px; letter-spacing: 0.12em; color: var(--text-primary); margin-bottom: 10px; line-height: 1; }
.triad-wordmark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--text-primary); margin-bottom: 12px; line-height: 1; }
.triad-wordmark .br { color: var(--text-faint); }
.triad-desc { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-bottom: 0; }
.triad-current {
  background: linear-gradient(180deg, rgba(235,197,84,0.06) 0%, rgba(8,8,8,0) 100%) !important;
}
.triad-current::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-amber) 20%, var(--accent-amber) 80%, transparent 100%);
  box-shadow: 0 0 12px rgba(235,197,84,0.7), 0 0 24px rgba(235,197,84,0.30);
}
.triad-current-dot {
  position: absolute; top: 14px; right: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 8px var(--accent-amber), 0 0 16px rgba(235,197,84,0.5);
  animation: triad-pulse 2s ease-in-out infinite;
}
@keyframes triad-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

/* Trinity neon variants — все 3 имеют CSS variables (no separate hover override) */
.tile-purple { --tile-r: 196; --tile-g: 77;  --tile-b: 255; }
.tile-gold   { --tile-r: 235; --tile-g: 197; --tile-b: 84;  }
.tile-org    { --tile-r: 139; --tile-g: 0;   --tile-b: 0;   }

/* ════════════════════════════════════════════════════════════════
   🔒 NAMESPACE .vis-* · GOLDJAXE.COM · VISION (luxury · purple accent)
   ════════════════════════════════════════════════════════════════
   Для будущих лендингов goldjaxe.com (Vision · Personal brand · Music · Investments).
   Accent: purple #C44DFF (= existing .tile-purple). Header/CTA/cards purple-led.
   Mirror structure of .ai-* (canonical .ai-header / .ai-wordmark / etc), но с purple accent.
   ════════════════════════════════════════════════════════════════ */

.vis-header { height: 77px; background: rgba(18,18,22,0.88); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(196,77,255,0.10); }
.vis-logo { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 100%; text-decoration: none; }
.vis-cube-h { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(196,77,255,0.45)); transition: filter 350ms ease; }
.vis-logo:hover .vis-cube-h { filter: drop-shadow(0 0 18px rgba(196,77,255,0.65)) drop-shadow(0 0 32px rgba(196,77,255,0.20)); }
.vis-wordmark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 17.5px; letter-spacing: 0.07em; line-height: 1; }
.vis-wordmark .accent { color: #C44DFF; } /* "GOLDJAXE" purple */
.vis-wordmark .br { color: var(--text-primary); } /* "[ VISION ]" white */
.vis-subline { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--text-secondary); margin-top: 5px; line-height: 1; text-transform: uppercase; }

.vis-nav { display: flex; align-items: center; height: 100%; }
.vis-nav-link { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 12.5px; white-space: nowrap; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; padding: 0 14px; height: 100%; display: flex; align-items: center; gap: 5px; text-decoration: none; position: relative; transition: color 250ms ease; }
.vis-nav-link::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: #C44DFF; box-shadow: 0 0 6px #C44DFF; transform: scaleX(0); transition: transform 280ms ease; }
.vis-nav-link:hover { color: #C44DFF; } .vis-nav-link:hover::after { transform: scaleX(1); }
.vis-nav-active { color: #C44DFF; }
.vis-nav-active::after { transform: scaleX(1); }
.vis-nav-link .ext { color: var(--text-subtle); font-size: 11px; }

/* Vision CTA · purple primary */
.btn-vision { padding: 13px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #C44DFF; color: #C44DFF; background: rgba(196,77,255,0.06); text-decoration: none; transition: all 200ms ease; box-shadow: 0 0 22px rgba(196,77,255,0.20); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-vision:hover { background: #C44DFF; color: #FFFFFF; box-shadow: 0 0 36px rgba(196,77,255,0.45); }

/* Vision hero h1 · darker premium feel */
.vis-h1-luxury { font-family: 'Inter', sans-serif; font-weight: 800; line-height: 1.1; letter-spacing: -0.005em; text-transform: uppercase; font-size: clamp(38px, 5.2vw, 56px); color: var(--text-primary); text-shadow: 0 0 24px rgba(196,77,255,0.25); }

/* Vision card · purple accents */
.vis-card-luxury { border: 1px solid rgba(196,77,255,0.30); padding: 28px; background: linear-gradient(180deg, rgba(196,77,255,0.04) 0%, var(--bg-primary) 60%); transition: all 300ms ease; }
.vis-card-luxury:hover { border-color: #C44DFF; box-shadow: 0 0 36px rgba(196,77,255,0.20); transform: translateY(-3px); }

/* === END · NAMESPACE .vis-* === */

/* ════════════════════════════════════════════════════════════════
   🔒 NAMESPACE .vault-* · GOLDJAXE.ORG · VAULT (enterprise · crimson accent)
   ════════════════════════════════════════════════════════════════
   Для будущих лендингов goldjaxe.org (Vault · B2B · Cybersec · DC · Compliance).
   Accent: crimson #8B0000 (= existing .tile-org). Header/CTA/tables corporate-led.
   Mirror structure of .ai-* (canonical .ai-header / etc), но с crimson accent.
   ════════════════════════════════════════════════════════════════ */

.vault-header { height: 77px; background: rgba(18,18,22,0.88); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(139,0,0,0.15); }
.vault-logo { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 100%; text-decoration: none; }
.vault-cube-h { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(139,0,0,0.55)); transition: filter 350ms ease; }
.vault-logo:hover .vault-cube-h { filter: drop-shadow(0 0 18px rgba(139,0,0,0.75)) drop-shadow(0 0 32px rgba(139,0,0,0.25)); }
.vault-wordmark { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 17.5px; letter-spacing: 0.07em; line-height: 1; }
.vault-wordmark .accent { color: #8B0000; } /* "GOLDJAXE" crimson */
.vault-wordmark .br { color: var(--text-primary); } /* "[ VAULT ]" white */
.vault-subline { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--text-secondary); margin-top: 5px; line-height: 1; text-transform: uppercase; }

.vault-nav { display: flex; align-items: center; height: 100%; }
.vault-nav-link { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 12.5px; white-space: nowrap; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; padding: 0 14px; height: 100%; display: flex; align-items: center; gap: 5px; text-decoration: none; position: relative; transition: color 250ms ease; }
.vault-nav-link::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: #8B0000; box-shadow: 0 0 6px #8B0000; transform: scaleX(0); transition: transform 280ms ease; }
.vault-nav-link:hover { color: #8B0000; } .vault-nav-link:hover::after { transform: scaleX(1); }
.vault-nav-active { color: #8B0000; }
.vault-nav-active::after { transform: scaleX(1); }
.vault-nav-link .ext { color: var(--text-subtle); font-size: 11px; }

/* Vault CTA · crimson primary (enterprise) */
.btn-vault { padding: 13px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #8B0000; color: #C44545; background: rgba(139,0,0,0.06); text-decoration: none; transition: all 200ms ease; box-shadow: 0 0 22px rgba(139,0,0,0.20); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-vault:hover { background: #8B0000; color: #FFFFFF; box-shadow: 0 0 36px rgba(139,0,0,0.50); }

/* Vault corporate h1 */
.vault-h1-corporate { font-family: 'Inter', sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -0.005em; text-transform: uppercase; font-size: clamp(36px, 5vw, 52px); color: var(--text-primary); }

/* Vault pricing comparison table */
.vault-pricing-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-faint); }
/* vault-pricing-table th · v4.1 11→12px (table TH — non-chip) */
.vault-pricing-table th { padding: 14px 18px; text-align: left; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; border-bottom: 1px solid var(--border-default); background: rgba(139,0,0,0.03); }
.vault-pricing-table td { padding: 14px 18px; font-family: 'Inter', sans-serif; font-size: 14px; border-bottom: 1px solid var(--border-faint); color: var(--text-primary); }
.vault-pricing-table tr.is-highlighted td { background: rgba(139,0,0,0.05); border-color: rgba(139,0,0,0.25); }

/* Vault compliance badge row */
.vault-compliance-row { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border: 1px solid var(--border-faint); background: var(--bg-primary); }
/* vault-compliance-badge · v4.1 10→11px (chip-class minimum 11) */
.vault-compliance-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; color: #8B0000; border: 1px solid rgba(139,0,0,0.40); background: rgba(139,0,0,0.05); text-transform: uppercase; }

/* === END · NAMESPACE .vault-* === */

/* ============================================================
 * SERVICE CARD (AI-Panel протоколы · pricing tiers)
 * ============================================================ */

.service-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-concrete);
  padding: 28px;
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
  cursor: pointer; text-decoration: none;
  --card-r: 235; --card-g: 197; --card-b: 84;
}
.service-card:hover {
  transform: translate(-3px, -3px);
  border-color: rgba(var(--card-r), var(--card-g), var(--card-b), 0.5);
  box-shadow:
    8px 8px 0px rgba(var(--card-r), var(--card-g), var(--card-b), 0.40),
    0 0 30px rgba(var(--card-r), var(--card-g), var(--card-b), 0.50),
    0 0 60px rgba(var(--card-r), var(--card-g), var(--card-b), 0.25),
    inset 0 0 30px rgba(var(--card-r), var(--card-g), var(--card-b), 0.10);
}
.service-card:hover h3 { text-shadow: 0 0 10px rgba(var(--card-r), var(--card-g), var(--card-b), 0.35); }
.card-gold   { --card-r: 235; --card-g: 197; --card-b: 84;  }
.card-purple { --card-r: 196; --card-g: 77;  --card-b: 255; }
.card-blue   { --card-r: 69;  --card-g: 115; --card-b: 161; }

/* ============================================================
 * BUTTONS · square brackets style
 * ============================================================ */

.btn-ai {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 24px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid #525252; background: transparent; color: var(--text-primary);
  border-radius: 0; cursor: pointer; transition: all 200ms ease;
  text-decoration: none;
}
.btn-ai:hover { border-color: var(--accent-amber); color: var(--accent-amber); background: rgba(235,197,84,0.04); }
.btn-ai-primary { border-color: var(--accent-amber); color: var(--accent-amber); }
.btn-ai-primary:hover { background: var(--accent-amber); color: var(--bg-secondary); }

/* === BTN GROUP · canonical (v4.4.12 · золотой стандарт симметрии · CEO 2026-05-06) ===
   Кнопки в группе всегда равной ширины через flex:1. Применяется к парам/тройкам кнопок
   внутри cards / form-actions / dialog-actions / accordion-actions.
   2 кнопки → 50/50, 3 → 33/33/33.
   Closed precedent 71 (часть про кнопки). См. UI Kit раздел 32. */
.btn-group { display: flex; gap: 8px; }
.btn-group > .btn-ai,
.btn-group > .btn-action,
.btn-group > .btn-auth { flex: 1; }

/* === ECO TIMELINE · canonical (v4.4.12 · золотой стандарт симметрии · CEO 2026-05-06) ===
   Timeline-строки (активность профиля, история транзакций, лента уведомлений) —
   2-колоночная сетка: «когда» (фикс. 200px = под cap accordion) / «событие» (1fr).
   Иконка inline в начале текста как типографический маркер, не отдельной колонкой —
   текст события строго выровнен по x-координате с meta заголовка блока.
   Closed precedent 73. См. UI Kit раздел 33. */
.eco-timeline-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 13px; line-height: 1.5;
  color: var(--text-primary);
}
.eco-timeline-row:first-child { padding-top: 0; }
.eco-timeline-row:last-child { border-bottom: none; padding-bottom: 0; }
.eco-timeline-when {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px;
  letter-spacing: 0.10em; color: var(--accent-amber); text-transform: uppercase;
  line-height: 1.5;
}
.eco-timeline-text { color: var(--text-primary); }
.eco-timeline-text .icon {
  display: inline-block; width: 18px; text-align: center; margin-right: 8px;
  color: var(--accent-amber);
}

/* TIER BUTTONS (крупные, 96px min-height — для hero pricing) */
.tier-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 22px; min-height: 96px;
  border: 1px solid #525252; background: transparent;
  text-decoration: none; transition: all 220ms ease;
  cursor: pointer; position: relative; overflow: hidden;
}
.tier-btn:hover { border-color: var(--accent-amber); background: rgba(235,197,84,0.04); transform: translateY(-1px); }
.tier-btn-primary { border-color: var(--accent-amber); background: linear-gradient(180deg, rgba(235,197,84,0.08) 0%, rgba(235,197,84,0.02) 100%); }
.tier-btn-primary:hover { background: var(--accent-amber); }
.tier-btn-primary:hover .tier-title, .tier-btn-primary:hover .tier-sub { color: var(--bg-secondary) !important; }
.tier-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); line-height: 1.15; transition: color 220ms ease; }
.tier-btn-primary .tier-title { color: var(--accent-amber); }
.tier-sub { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.55); transition: color 220ms ease; }
.tier-btn-primary .tier-sub { color: rgba(235,197,84,0.75); }
.tier-bracket { color: var(--accent-amber); transition: color 220ms ease; }
.tier-btn-primary:hover .tier-bracket { color: var(--bg-secondary); }

/* ============================================================
 * CHIPS
 * ============================================================ */

.chip {
  display: inline-block; padding: 3px 9px;
  border: 1px solid rgba(163,163,163,0.3);
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.chip-amber { border-color: rgba(235,197,84,0.5); color: var(--accent-amber); }
.chip-amber-solid { border: 2px solid var(--accent-amber); color: var(--accent-amber); background: rgba(235,197,84,0.15); font-weight: 700; }
.chip-green { border-color: rgba(34,197,94,0.5); color: var(--accent-green); }
.chip-red { border-color: rgba(239,68,68,0.4); color: var(--accent-error); }

/* ============================================================
 * HEADINGS · Inter
 * ============================================================ */

.h1-org {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(38px, 5.2vw, 56px);
  letter-spacing: 0.02em; line-height: 1.1; text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 0 24px rgba(255,255,255,0.15);
}
/* h2-org · v4.1 fix: было clamp(22-38) — расхождение с landing (clamp 28-42). Sync с реальным эталоном. */
.h2-org {
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: -0.005em; line-height: 1.1; text-transform: uppercase;
}

/* ============================================================
 * MONO CAPTIONS · scale
 * ============================================================ */

/* .mono-cap-xs/sm/.mono-cap удалены 2026-05-04 железобетонизация v4 — deprecated с 2026-05-02.
 * Используй canonical .eco-cap-xs (11px) / .eco-cap-sm (12px) / .eco-cap-md (14px) — все JBM Bold (Cyrillic-safe). */

/* ============================================================
 * UTILITIES
 * ============================================================ */

.tnum { font-feature-settings: 'tnum'; }

@keyframes blink { 50% { opacity: 0; } }
.cursor-blink::after { content: '|'; color: var(--accent-amber); margin-left: 2px; animation: blink 1s steps(2) infinite; }

/* ============================================================
 * UNIFIED MARKETING FOOTER · полная триада + GOLD[JAXE] big block + 5 social 50×50
 * Используется на: hero-v4, dashboard, lesson-viewer, syndicate
 * (Cross-product унификация — пользователь не замечает разницы footer'а)
 * ============================================================ */

/* .gold-wordmark (clamp 28-37) удалён 2026-05-04 железобетонизация v4 — orphan, не использовался production.
 * Footer wordmark canonical = .eco-wordmark (uniform header+footer 17.5px per UI Kit v4 spec). */

/* Master cube footer · layered glow */
.cube-glow {
  filter: drop-shadow(0 0 16px rgba(var(--accent-amber-rgb), 0.45)) drop-shadow(0 0 32px rgba(var(--accent-amber-rgb), 0.18));
  transition: filter 350ms ease;
}
a:hover > .cube-glow, .cube-glow:hover {
  filter: drop-shadow(0 0 22px rgba(var(--accent-amber-rgb), 0.65)) drop-shadow(0 0 44px rgba(var(--accent-amber-rgb), 0.25)) drop-shadow(0 0 64px rgba(0,240,255,0.12));
}

/* Mono captions (для footer triad) */
/* mono-caption-* · v4.1 11→12px (footer triad captions — non-chip) */
.mono-caption-org {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--text-subtle);
  text-transform: uppercase;
}
.mono-caption-link {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-amber);
  transition: color 200ms ease;
}
.mono-caption-link:hover { color: var(--accent-amber-light); }

/* Triad column wordmark (Inter 800 22px) */
.triad-col-wordmark {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.triad-col-wordmark .br { color: var(--accent-amber); }

/* Current location stripe (gold gradient at top of current tile) */
.current-stripe {
  position: absolute; top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-amber) 30%, var(--accent-amber) 70%, transparent 100%);
  box-shadow: 0 0 6px rgba(var(--accent-amber-rgb), 0.4);
}

/* Social icons (footer) · 50×50 как на .org */
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  transition: all 200ms ease;
}
.social-icon:hover {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  box-shadow: 0 0 10px rgba(var(--accent-amber-rgb), 0.35);
}

.grid-bg {
  background-image:
    linear-gradient(to right, rgba(235, 197, 84, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(235, 197, 84, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.glow-radial { background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(235,197,84,0.08) 0%, rgba(8,8,8,0) 70%); }

/* ===========================================================================
   Light theme overrides for local <style> classes used in ecosystem-prototype
   Audit AUDIT-2026-05-02.md — закрывает 90% light-theme issues одним фиксом
   =========================================================================== */

/* Brand wordmark brackets · после Block B sweep header dark immutable в обеих темах
 * (CEO 2026-05-07 Q3 = Variant B унификация) — bracket text WHITE через master rules выше.
 * Этот блок обнулён · оставлен как маркер для backwards compat (если кто-то использует
 * .ai-wordmark вне header — оно унаследует default dark-theme white). */

/* Form inputs/textareas — критично для checkout, login, settings, new-topic, USDT-wizard */
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .reply-textarea,
[data-theme="light"] input.form-input,
[data-theme="light"] textarea.form-textarea,
[data-theme="light"] select.form-input {
  background: var(--bg-tertiary, #ffffff) !important;
  color: var(--text-primary, #1a1a1a) !important;
  border-color: var(--border-default, rgba(26,26,26,0.18)) !important;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder,
[data-theme="light"] .reply-textarea::placeholder {
  color: var(--text-faint, rgba(26,26,26,0.45)) !important;
}

/* Cards/tiles/rows — должны иметь cream-аналог тёмного фона */
[data-theme="light"] .stat-card,
[data-theme="light"] .kpi-tile,
[data-theme="light"] .price-card,
[data-theme="light"] .alert-card,
[data-theme="light"] .login-card,
[data-theme="light"] .continue-card,
[data-theme="light"] .course-card,
[data-theme="light"] .doc-card,
[data-theme="light"] .cap-row,
[data-theme="light"] .activity-row,
[data-theme="light"] .eco-timeline-row,
[data-theme="light"] .cat-card,
[data-theme="light"] .topic-row,
[data-theme="light"] .tx-row,
[data-theme="light"] .feature-pill,
[data-theme="light"] .terminal,
[data-theme="light"] .terminal-bio,
[data-theme="light"] .link-btn,
[data-theme="light"] .svc-card,
[data-theme="light"] .resource-row,
[data-theme="light"] .quiz-option {
  background: var(--bg-tertiary, #ffffff) !important;
  border-color: var(--border-default, rgba(26,26,26,0.18)) !important;
}

/* Headlines/numbers/labels с захардкоженным белым → text-primary в light */
[data-theme="light"] .price-amount,
[data-theme="light"] .price-title,
[data-theme="light"] .h1-dash,
[data-theme="light"] .h1-login,
[data-theme="light"] .h1-syn,
[data-theme="light"] .h1-admin,
[data-theme="light"] .h1-inv,
[data-theme="light"] .h1-checkout,
[data-theme="light"] .h2-org,
[data-theme="light"] .question-text,
[data-theme="light"] .cert-course,
[data-theme="light"] .svc-modal-meta-value,
[data-theme="light"] .svc-modal-title,
[data-theme="light"] .screen-name,
[data-theme="light"] .info-val,
[data-theme="light"] .topic-title,
[data-theme="light"] .cat-title,
[data-theme="light"] .lesson-title,
[data-theme="light"] .reply-author,
[data-theme="light"] .activity-text,
[data-theme="light"] .stat-num,
[data-theme="light"] .kpi-num {
  color: var(--text-primary, #1a1a1a) !important;
}

/* KPI/stat numbers — оставляем amber-акцентные (хорошо читаются в обоих режимах) */
[data-theme="light"] .stat-num.amber,
[data-theme="light"] .kpi-num.amber,
[data-theme="light"] .price-amount.amber {
  color: var(--accent-amber, #C9A332) !important;
}

/* DEPRECATED v4.4.17 (Призма 2): light footer переехал на Stripe-pattern dark #0E0D0B
   (memory feedback_light_theme_v2.md). Старое правило white footer удалено.
   .footer-tile (отдельный класс на других страницах) оставляем cream если используется. */
[data-theme="light"] .footer-tile {
  background: var(--bg-tertiary, #ffffff) !important;
  border-top-color: var(--border-default, rgba(26,26,26,0.12)) !important;
  color: var(--text-primary, #1a1a1a) !important;
}

/* Modal overlays — оставляем тёмными (overlay backdrop читается в любом режиме) */
/* svc-modal содержимое уже работает корректно */

/* Avatar tier-badges — gradient остаётся, белая буква-инициал контрастна на тёмных gradients */
/* Не требует override */

/* ===========================================================================
   Page H1 — canonical headline для всех product-страниц (Academy, Syndicate, GATE)
   Спец. для hero на ai/landing — отдельный класс h1-org (не трогать)
   Размер уменьшен на ~21% от старых вариантов для компактности
   Утверждено CEO 2026-05-02 после прокликивания прототипа.
   =========================================================================== */
/* eco-h1-page · v4.1 +2px (28-38 вместо 26-36) — CEO жаловался на мельчёное на product pages */
.eco-h1-page {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}

/* eco-h1-page-tight · v4.1 +2px (24-32 вместо 22-30) */
.eco-h1-page-tight {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Sub-caption под h1 — mono mini-cap (унифицирован с // SECTION captions) */
.eco-h1-sub {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-top: 8px;
}
[data-theme="light"] .eco-h1-sub {
  color: rgba(26,26,26,0.65);
}

/* Light theme: gold/amber inherits via gradient where used in spans inside headlines.
   Для ясности — обеспечиваем тёмный текст на cream фоне */
[data-theme="light"] .eco-h1-page,
[data-theme="light"] .eco-h1-page-tight {
  color: var(--text-primary, #1a1a1a) !important;
}

/* ===========================================================================
   GATE Admin · disabled sidebar links (href="#" placeholders для production-only feat)
   Применяется к Prodamus, Courses, Certificates, Webhooks, Audit Log в admin sidebar.
   В прототипе у этих 5 пунктов нет реального экрана — пометка «soon» сигнализирует Артёму.
   =========================================================================== */
.admin-sidebar .nav-link[href="#"] {
  opacity: 0.40;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.admin-sidebar .nav-link[href="#"]::after {
  content: " · soon";
  font-family: 'Space Mono', monospace;
  /* v4.1 9→11px (закрытое исключение: было 9px, ниже минимума 11) */
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-subtle, rgba(255,255,255,0.40));
  text-transform: uppercase;
  margin-left: 6px;
}
[data-theme="light"] .admin-sidebar .nav-link[href="#"]::after {
  color: var(--text-subtle, rgba(26,26,26,0.40));
}

/* ============================================================
 * CANONICAL COMPONENTS v2 — Эталон: academy/courses.html
 * CEO утвердил 2026-05-02 после серии итераций.
 *
 * Покрывает: header (cube+wordmark+sub+nav+lang+theme),
 *            cards (.course-card-big + variants),
 *            thumb (height 112 · icon 80px · tier gradients),
 *            locked pattern (chip top-left · tier-color content · NO opacity),
 *            footer (compact triad + logo+copyright bottom),
 *            light theme overrides (cream cards · pastel thumbs).
 *
 * Drop-in: импортировать eco-components.css + использовать классы.
 * ============================================================ */

/* HEADER canonical · см. блок 🔒 HEADER CANONICAL v3.2 (line 455+).
 * Deprecated namespace .eco-*-c удалён 2026-05-04 железобетонизация v4 (никем не использовался). */

/* ---- LANG switcher + THEME toggle (compact 32px height) ---- */
/* lang+theme switcher · v4.1 unification (sync с landing.html .ai-* sizes — touch-friendly)
 * было: lang h32 / btn 38×30 11.5px / theme 34×32
 * стало: lang h36 / btn 44×34 12.5px / theme 38×36 — соответствие .ai-lang-switcher  */
.eco-lang-switcher { display: flex; height: 36px; border: 1px solid rgba(255,255,255,0.12); }
.eco-lang-btn { width: 44px; height: 34px; font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: 0.10em; background: transparent; color: #FFFFFF; border: none; cursor: pointer; transition: all 200ms ease; }
.eco-lang-btn-active { background: #EBC554; color: #080808; }
.eco-lang-btn:not(.eco-lang-btn-active):hover { color: #EBC554; background: rgba(235,197,84,0.05); }
.eco-theme-btn { width: 38px; height: 36px; border: 1px solid rgba(255,255,255,0.12); margin-left: 9px; color: #FFFFFF; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 200ms ease; }
.eco-theme-btn:hover { color: #EBC554; border-color: rgba(235,197,84,0.40); }

/* ---- COURSE CARD canonical (24/14/112/80) ---- */
.course-card-big { border: 1px solid #1A1A1A; padding: 24px; background: #050505; transition: all 250ms ease; cursor: pointer; position: relative; display: flex; flex-direction: column; height: 100%; gap: 14px; }
.course-card-big:hover { border-color: #EBC554; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(235,197,84,0.15); }
.course-card-flagman { border-color: #EBC554; box-shadow: 0 0 40px rgba(235,197,84,0.10); background: linear-gradient(180deg, rgba(235,197,84,0.04) 0%, #050505 50%); }
.course-card-vip { border-color: rgba(139,0,0,0.50); background: linear-gradient(180deg, rgba(139,0,0,0.04) 0%, #050505 50%); }
.course-card-vip:hover { border-color: #C44DFF; box-shadow: 0 0 40px rgba(196,77,255,0.20); }
.course-card-purchased { border-color: #22C55E; }

/* Thumb canonical (height 112 · icon 80) */
.course-thumb { position: relative; width: 100%; height: 112px; background: linear-gradient(135deg, #1A1A1A, #050505); display: flex; align-items: center; justify-content: center; font-size: 80px; line-height: 1; margin-bottom: 0; border: 1px solid #1A1A1A; overflow: hidden; }
.course-thumb-l0 { background: linear-gradient(135deg, rgba(235,197,84,0.10), #050505); }
.course-thumb-l1 { background: linear-gradient(135deg, rgba(34,197,94,0.10), #050505); }
.course-thumb-l2 { background: linear-gradient(135deg, rgba(196,77,255,0.10), #050505); }
.course-thumb-l3 { background: linear-gradient(135deg, rgba(139,0,0,0.10), #050505); }
.course-thumb-l4 { background: linear-gradient(135deg, rgba(69,115,161,0.10), #050505); }

/* Locked pattern · canonical (НЕ через opacity — utomляет глаз)
 * Use: <article class="course-card-big course-card-locked" data-tier="L1"> */
.course-card-locked .course-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.30) 100%); z-index: 1; transition: opacity 250ms ease; pointer-events: none; }
.course-card-locked .course-thumb::before {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: rgba(8,8,8,0.92);
  border: 1px solid var(--lock-color, rgba(235,197,84,0.55));
  /* course-card-locked chip · v4.1 10.5→11px (chip-class minimum 11) */
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
  color: var(--lock-color, #EBC554);
  text-transform: uppercase; z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.50);
  transition: all 250ms ease;
}
/* RU дефолт + EN override через [data-lang="en"] (v4.4.15 audit-fix Б1 · ONLY/INVITE/TEAM → ТОЛЬКО L1/ПО ПРИГЛАШЕНИЮ/КОМАНДА) */
.course-card-locked[data-tier="L1"] .course-thumb::before { content: '🔒 ТОЛЬКО L1'; --lock-color: #22C55E; }
.course-card-locked[data-tier="L2"] .course-thumb::before { content: '🔒 ТОЛЬКО L2'; --lock-color: #C44DFF; }
.course-card-locked[data-tier="L3"] .course-thumb::before { content: '🔒 ТОЛЬКО L3'; --lock-color: #8B0000; }
.course-card-locked[data-tier="L4"] .course-thumb::before { content: '🔒 L4 ПО ПРИГЛАШЕНИЮ'; --lock-color: #4573A1; }
.course-card-locked[data-tier="L5"] .course-thumb::before { content: '🔒 L5 КОМАНДА'; --lock-color: #EF4444; }
[data-lang="en"] .course-card-locked[data-tier="L1"] .course-thumb::before { content: '🔒 L1 ONLY'; }
[data-lang="en"] .course-card-locked[data-tier="L2"] .course-thumb::before { content: '🔒 L2 ONLY'; }
[data-lang="en"] .course-card-locked[data-tier="L3"] .course-thumb::before { content: '🔒 L3 ONLY'; }
[data-lang="en"] .course-card-locked[data-tier="L4"] .course-thumb::before { content: '🔒 L4 INVITE'; }
[data-lang="en"] .course-card-locked[data-tier="L5"] .course-thumb::before { content: '🔒 L5 TEAM'; }
.course-card-locked:hover .course-thumb::after { opacity: 0.45; }
.course-card-locked:hover .course-thumb::before { background: var(--lock-color); color: #080808; box-shadow: 0 4px 18px var(--lock-color); }

/* Tier-badge + status-pill (font 11px после +5%) */
/* tier-badge · v4.1 keep 11px (chip-class allowed 11px) */
.tier-badge { display: inline-flex; align-items: center; padding: 4px 10px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.tier-l0 { border: 1px solid rgba(255,255,255,0.30); color: rgba(255,255,255,0.85); }
.tier-l1 { border: 1px solid rgba(34,197,94,0.50); color: #22C55E; background: rgba(34,197,94,0.05); }
.tier-l2 { border: 1px solid rgba(196,77,255,0.50); color: #C44DFF; background: rgba(196,77,255,0.05); }
.tier-l3 { border: 1px solid rgba(139,0,0,0.70); color: #8B0000; background: rgba(139,0,0,0.05); }
.tier-l4 { border: 1px solid rgba(69,115,161,0.50); color: #4573A1; background: rgba(69,115,161,0.05); }

/* status-pill · v4.1 keep 11px (chip-class allowed 11px) */
.status-pill { display: inline-flex; align-items: center; padding: 3px 8px; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.status-purchased { border: 1px solid rgba(34,197,94,0.50); color: #22C55E; background: rgba(34,197,94,0.05); }
.status-locked { border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.5); }
.status-progress { border: 1px solid rgba(235,197,84,0.50); color: #EBC554; background: rgba(235,197,84,0.05); }
.status-available { border: 1px solid rgba(255,255,255,0.30); color: rgba(255,255,255,0.85); }

/* Progress bar */
.progress-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #C9A332, #EBC554); }

/* Price block */
.price-block { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 25px; letter-spacing: -0.01em; color: #EBC554; line-height: 1; }
.price-block-free { color: #22C55E; }
.price-block-vip { color: #C44DFF; }
.price-rub { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.10em; color: rgba(255,255,255,0.5); margin-top: 4px; }

/* Filter pills */
.filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.75); font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; transition: all 200ms ease; background: transparent; }
.filter-pill:hover { border-color: #EBC554; color: #EBC554; }
.filter-pill.active { background: #EBC554; color: #080808; border-color: #EBC554; }
/* filter-count · v4.1 10→11px (counter chip) */
.filter-count { padding: 1px 6px; font-size: 11px; background: rgba(0,0,0,0.20); }
.filter-pill.active .filter-count { background: rgba(8,8,8,0.20); color: #080808; }

/* COMPACT TRIAD FOOTER — canonical (см. блок TILE TRIAD выше, line 644+).
 * Дубль удалён 2026-05-04 железобетонизация v4 (hardcoded values теряли light theme support).
 * Сохраняются только .eco-footer + .triad-grid (для compact product footer layout). */
.triad-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
@media (max-width: 768px) { .triad-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   🔒 AUTH SCREENS · canonical v3.4 (FIXED 2026-05-03)
   ════════════════════════════════════════════════════════════════
   ДВА СТАНДАРТА АВТОРИЗАЦИИ ДЛЯ ВСЕЙ ЭКОСИСТЕМЫ GOLDJAXE:
   • .auth-card-gold — passwordless / magic link / regular tier
     Применяется: academy/login.html · syndicate auth · любой regular login
   • .auth-card-red + .auth-trust-row — admin / L5 only / password+2FA
     Применяется: gate-admin/login.html · любой root/ops login
   ОБЯЗАТЕЛЬНО на странице:
   - Header canonical 77px (eco-header) + RU/EN + theme + back-link
   - body БЕЗ display:flex (нормальный flow), card centered через max-width + margin auto
   - Card ДОЛЖНА fits в 1440×900 viewport без vertical scroll
   ════════════════════════════════════════════════════════════════ */
.auth-stage { position: relative; padding: 60px 20px; min-height: calc(100vh - 77px); }
.auth-stage-grid-gold { background-image: linear-gradient(to right, rgba(235,197,84,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(235,197,84,0.04) 1px, transparent 1px); background-size: 64px 64px; }
.auth-stage-grid-red  { background-image: linear-gradient(to right, rgba(239,68,68,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(239,68,68,0.05) 1px, transparent 1px); background-size: 32px 32px; }
.auth-stage-glow-gold { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(235,197,84,0.06) 0%, rgba(8,8,8,0) 70%); }
.auth-stage-glow-red  { background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(239,68,68,0.05) 0%, rgba(8,8,8,0) 70%); }

.auth-card { max-width: 460px; margin: 0 auto; padding: 40px 36px; background: linear-gradient(180deg, var(--auth-bg, rgba(235,197,84,0.04)) 0%, rgba(8,8,8,1) 100%); border: 2px solid var(--auth-border, #EBC554); box-shadow: 0 0 60px var(--auth-glow, rgba(235,197,84,0.10)); position: relative; }
.auth-card-gold { --auth-bg: rgba(235,197,84,0.04); --auth-border: #EBC554; --auth-glow: rgba(235,197,84,0.10); }
.auth-card-red  { --auth-bg: rgba(239,68,68,0.04);  --auth-border: #EF4444; --auth-glow: rgba(239,68,68,0.10); }

/* auth-input · canonical focus v3.7 (white rgba(255,255,255,0.55) для gold theme, red для red theme) */
.auth-input { width: 100%; padding: 16px 18px; background: #050505; border: 1px solid #525252; color: #FFFFFF; caret-color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 16px; outline: none; box-shadow: none; transition: border-color 250ms ease, caret-color 250ms ease; }
.auth-input::placeholder { color: rgba(255,255,255,0.3); }
.auth-input:focus, .auth-input:focus-visible { outline: none; box-shadow: none; }
.auth-card-gold .auth-input:focus, .auth-card-gold .auth-input:focus-visible { border-color: rgba(255,255,255,0.55); caret-color: rgba(255,255,255,0.85); }
.auth-card-red  .auth-input:focus, .auth-card-red  .auth-input:focus-visible { border-color: #EF4444; caret-color: #EF4444; }

/* ============================================
   🔒 INPUT FOCUS · canonical v3.7 (FINAL · CEO утвердил 2026-05-03)
   ============================================
   Все text/email/password/textarea/select inputs во всём прототипе используют
   ОДИН pattern :focus state — белый rgba(255,255,255,0.55) (как цвет h1
   «МАШИНА ВАШЕГО» = var(--text-primary), но с opacity 55% для мягкости).

   Why: gold-перегруженные экраны (landing, checkout) не могут использовать
   gold focus border — это шум на шуме. Тестировали 6 не-жёлтых tones (snow /
   steel / cyan / purple / whisper / green) — CEO 2026-05-03 после визуального
   теста выбрал WHITE 55% как наиболее tonal к h1 hero и не отвлекающий от
   основной gold-палитры. Семантика:
     gold   = brand action (CTA, accent)
     white  = focus / neutral input state
     green  = success (.is-success)
     amber  = pending (.is-pending)
     red    = error / admin L5 access (auth-card-red)
     steel  = info badges (status .is-info, не focus)

   Анти-паттерны (запрещено):
     ❌ box-shadow: 0 0 0 1px gold — двойная коробка
     ❌ outline: 3px gold — браузерный default
     ❌ border-color: #EBC554 на focus в gold-themed экранах
     ❌ halo/glow на focus (для primary inputs не нужно — это не CTA)
     ❌ pure #FFFFFF (100%) — слишком ярко на чёрном (читается как ALERT)

   Применяется ко всем известным input-классам:
     .form-input, .form-select, .form-textarea, .code-input,
     .auth-input (через .auth-card-gold), .reply-textarea,
     .syn-search:focus-within
*/
.eco-input,
input[type="text"].eco-input,
input[type="email"].eco-input,
input[type="password"].eco-input,
input[type="search"].eco-input,
textarea.eco-input,
select.eco-input {
  background: transparent;
  border: 1px solid #525252;
  color: #FFFFFF;
  caret-color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  box-shadow: none;
  transition: border-color 250ms ease, caret-color 250ms ease;
  width: 100%;
}
.eco-input:focus,
.eco-input:focus-visible {
  border-color: rgba(255,255,255,0.55);
  caret-color: rgba(255,255,255,0.85);
  outline: none;
  box-shadow: none;
}
.eco-input::placeholder { color: rgba(255,255,255,0.30); }

/* Modifier: gold-text variant (для code-input на landing) */
.eco-input.is-code {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.15em;
  color: #EBC554;
  caret-color: #EBC554;
}
.eco-input.is-code:focus,
.eco-input.is-code:focus-visible {
  border-color: rgba(255,255,255,0.55);
  caret-color: rgba(255,255,255,0.85);
}

/* Search-wrap variant (icon + input в едином border-box) */
.eco-search-wrap { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid #525252; background: rgba(5,5,5,0.7); transition: border-color 250ms ease; }
.eco-search-wrap:focus-within { border-color: rgba(255,255,255,0.55); }
.eco-search-wrap input { flex: 1; background: transparent; border: 0; color: #FFFFFF; caret-color: #FFFFFF; outline: none; box-shadow: none; }

/* auth-label · v4.1 11→12px (form labels minimum 12) */
.auth-label { display: block; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.auth-card-gold .auth-label { color: #EBC554; }
.auth-card-red  .auth-label { color: #EF4444; }

.btn-auth { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 24px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; cursor: pointer; transition: all 200ms ease; text-decoration: none; }
.btn-auth-gold { border-color: #EBC554; color: #EBC554; background: transparent; box-shadow: 0 0 28px rgba(235,197,84,0.18); }
.btn-auth-gold:hover { background: #EBC554; color: #080808; box-shadow: 0 0 40px rgba(235,197,84,0.40); }
.btn-auth-red  { border-color: #EF4444; color: #EF4444; background: transparent; box-shadow: 0 0 28px rgba(239,68,68,0.18); }
.btn-auth-red:hover  { background: #EF4444; color: #FFFFFF; box-shadow: 0 0 40px rgba(239,68,68,0.40); }

.auth-trust-row { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.08); background: #050505; flex-wrap: wrap; margin-bottom: 24px; }
/* auth-trust-item · v4.1 10→11px (chip-class — minimum 11) */
.auth-trust-item { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap; }
.auth-trust-ok   { color: #22C55E; }
.auth-trust-warn { color: #EBC554; }
.auth-trust-fail { color: #EF4444; }

.auth-context { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255,255,255,0.55); padding-top: 18px; margin-top: 24px; border-top: 1px solid #1A1A1A; }
.auth-context strong { color: #EBC554; font-weight: 700; }
.auth-context-sep { color: rgba(255,255,255,0.20); }

.auth-footer-info { text-align: center; margin-top: 20px; font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.5; }
.auth-footer-info a { color: #EBC554; text-decoration: none; }
.auth-footer-info a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   🔒 SINGLE-CARD SCREENS · canonical v3.5 (FIXED 2026-05-03)
   ════════════════════════════════════════════════════════════════
   Расширение Auth pattern. ВСЕГО 4 нормативных variant для всей экосистемы:
   • Variant A · .auth-card-gold      → login passwordless (academy, syndicate)
   • Variant C · .auth-card-red       → login admin (gate-admin)
   • Variant D · .auth-card-confirm   → confirmation после auth (magic-link sent, password reset, email verify, 2FA prompt)
   • Variant E · .auth-card-status    → status / outcome (success / pending / redirect / thank-you)
   ОБЩИЕ ПРАВИЛА:
   - body normal flow (без display:flex), card centered через max-width + margin auto
   - 2 размера card: default 460px (login) · wide 760px (status с info-grid / steps)
   - Theme через CSS variables (--auth-status-color)
   - Header canonical 77px ОПЦИОНАЛЬНО для D/E (recommended но не обязательно для full-screen UX)
   ════════════════════════════════════════════════════════════════ */

/* Wide card для Variant E status pages (info-grid + steps требуют больше ширины) */
.auth-card-wide { max-width: 760px; padding: 48px 56px; margin: 0 auto; background: var(--auth-bg, transparent); border: 0; box-shadow: none; position: relative; text-align: center; }

/* Status icon ring (Variant D + E · большая иконка наверху card) */
.auth-icon-ring { width: 120px; height: 120px; border: 2px solid var(--auth-icon-color, #EBC554); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; box-shadow: 0 0 40px var(--auth-icon-glow, rgba(235,197,84,0.40)), inset 0 0 30px var(--auth-icon-glow-inner, rgba(235,197,84,0.15)); }
.auth-icon-ring.is-pulse { animation: auth-icon-pulse 2s ease-in-out infinite; }
@keyframes auth-icon-pulse {
  0%,100% { box-shadow: 0 0 40px var(--auth-icon-glow, rgba(235,197,84,0.40)), inset 0 0 30px var(--auth-icon-glow-inner, rgba(235,197,84,0.15)); }
  50%     { box-shadow: 0 0 60px var(--auth-icon-glow, rgba(235,197,84,0.60)), inset 0 0 30px var(--auth-icon-glow-inner, rgba(235,197,84,0.20)); }
}
.auth-icon-ring-success { --auth-icon-color: #22C55E; --auth-icon-glow: rgba(34,197,94,0.40); --auth-icon-glow-inner: rgba(34,197,94,0.15); }
.auth-icon-ring-pending { --auth-icon-color: #EBC554; --auth-icon-glow: rgba(235,197,84,0.40); --auth-icon-glow-inner: rgba(235,197,84,0.15); }
.auth-icon-ring-error   { --auth-icon-color: #EF4444; --auth-icon-glow: rgba(239,68,68,0.40);  --auth-icon-glow-inner: rgba(239,68,68,0.15); }
.auth-icon-ring-info    { --auth-icon-color: #4573A1; --auth-icon-glow: rgba(69,115,161,0.40); --auth-icon-glow-inner: rgba(69,115,161,0.15); }
.auth-icon-glyph { font-size: 60px; line-height: 1; color: var(--auth-icon-color, #EBC554); }

/* Sub-paragraph под H1 (для D / E) */
.auth-sub { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.75); margin-top: 14px; margin-bottom: 28px; max-width: 580px; margin-left: auto; margin-right: auto; }
.auth-sub strong { color: #EBC554; font-weight: 700; }

/* Email display block (Variant D · highlighted email после magic-link sent) */
.auth-email-display { font-family: 'Space Mono', monospace; font-size: 14px; color: #EBC554; letter-spacing: 0.05em; padding: 12px 18px; border: 1px solid rgba(235,197,84,0.30); background: rgba(235,197,84,0.04); margin: 14px auto 24px; word-break: break-all; max-width: 460px; }

/* Countdown timer (Variant D · «ССЫЛКА АКТИВНА: 14:59») */
.auth-countdown { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.10em; color: rgba(255,255,255,0.7); margin-bottom: 24px; text-transform: uppercase; }
.auth-countdown strong { color: #EBC554; }

/* Terminal log block (D / E · 2-4 lines tech status) */
.auth-terminal { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.10em; color: rgba(255,255,255,0.5); text-align: left; line-height: 1.8; padding: 14px 18px; border: 1px solid rgba(255,255,255,0.08); background: #050505; margin: 18px auto 24px; max-width: 460px; text-transform: uppercase; }
.auth-terminal-ok      { color: #22C55E; }
.auth-terminal-pending { color: #EBC554; }
.auth-terminal-warn    { color: #EBC554; }
.auth-terminal-fail    { color: #EF4444; }
.auth-terminal-cursor::after { content: '▊'; color: #EBC554; margin-left: 2px; animation: auth-blink 1s steps(2) infinite; }
@keyframes auth-blink { 50% { opacity: 0; } }

/* Info grid (Variant E success · 2-3 transaction-info cards) */
.auth-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 28px auto; max-width: 760px; }
.auth-info-card { border: 1px solid #1A1A1A; background: #050505; padding: 18px 20px; text-align: left; }
.auth-info-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; white-space: nowrap; color: #EBC554; text-transform: uppercase; margin-bottom: 6px; }
.auth-info-val { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: #FFFFFF; }
.auth-info-val.is-mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; }

/* Steps list (Variant E thank-you · numbered ol с amber numbers) */
.auth-steps-list { list-style: none; padding: 0; margin: 0; text-align: left; }
.auth-steps-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.auth-step-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.14em; color: #EBC554; min-width: 28px; padding-top: 1px; }

/* Steps grid (Variant E success · 3-column horizontal steps) */
.auth-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; text-align: left; margin: 28px auto; max-width: 760px; }
.auth-steps-grid-item { /* container per step */ }
.auth-step-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.10em; color: #EBC554; text-transform: uppercase; margin-bottom: 6px; }
.auth-step-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: #FFFFFF; margin-bottom: 4px; }
.auth-step-desc { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.6); }

/* Help-card (D · небольшой info-block с link) */
.auth-help-card { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.6); padding: 12px 18px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); max-width: 460px; margin: 0 auto 18px; text-align: left; }
.auth-help-card a { color: #EBC554; text-decoration: underline; }

/* Progress bar (Variant E pending · slide animation) */
.auth-progress { width: 100%; max-width: 460px; height: 2px; background: rgba(255,255,255,0.08); margin: 0 auto 24px; overflow: hidden; }
.auth-progress-fill { height: 100%; background: linear-gradient(90deg, transparent, #EBC554 50%, transparent); animation: auth-progress-slide 1.6s ease-in-out infinite; }
@keyframes auth-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Action rows (D / E · кнопки внизу card) */
.auth-actions-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.auth-actions-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 24px 0; }

/* Support links footer (E · enterprise-thanks / checkout-success) */
.auth-support-row { padding-top: 24px; margin-top: 28px; border-top: 1px solid #1A1A1A; }
.auth-support-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: rgba(255,255,255,0.50); text-transform: uppercase; margin-bottom: 10px; }
.auth-support-links { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,0.60); }
.auth-support-links a { color: #EBC554; text-decoration: none; }
.auth-support-links a:hover { color: #F8F080; }
.auth-support-sep { color: rgba(255,255,255,0.20); }

/* ════════════════════════════════════════════════════════════════
   🔒 STATUS DASHBOARD · canonical v3.6 (FIXED 2026-05-03 · CEO утвердил)
   ════════════════════════════════════════════════════════════════
   ФИНАЛЬНАЯ КОНЦЕПЦИЯ status-screens (info-rich):
   • Variant V1 · COMPACT FOLD-FIRST → simple confirmations (auth-magic-link, checkout-redirect)
     uses: .auth-card-wide centered + .auth-icon-ring 88×88 + .auth-info-grid + .auth-actions-row
   • Variant V3 · DASHBOARD-STYLE  → info-rich success/status (checkout-success, enterprise-thanks)
     uses: .auth-success-bar (compact horizontal) + .auth-kpi-row (4 tiles) + .auth-timeline-h (3-step с arrows)
   ════════════════════════════════════════════════════════════════
   ЦВЕТОВАЯ СЕМАНТИКА (зафиксирована):
   • Status outcome (icon ring + caption + bar border): green #22C55E (success) / amber #EBC554 (pending) / red #EF4444 (error) / steel #4573A1 (info)
   • Brand primary CTA: ВСЕГДА gold #EBC554 (.btn-action) — driver к действию, НЕ status color
   • Secondary CTA: neutral outline → hover gold (.btn-outline)
   • Pending-action sub-state в KPI tiles (типа "MAGIC LINK SENT"): amber #EBC554 (your-move-needed)
   ════════════════════════════════════════════════════════════════
   FONTS canonical (UI Kit v3.3 compliant):
   • Captions: JBM Bold 12px (eco-cap-sm) или 11px (eco-cap-xs minimum)
   • Body text: 14px minimum (eco-body-sm)
   • Buttons: 14px (.btn-action / .btn-outline)
   • H1: clamp(26-36) main / clamp(22-28) compact в success-bar
   ════════════════════════════════════════════════════════════════ */

/* === Variant V3 · DASHBOARD-STYLE pattern === */

/* Success-bar — compact horizontal: icon + h1 + sub + actions ALL in 1 row */
.auth-success-bar { display: flex; align-items: center; gap: 20px; padding: 20px 26px; border: 1px solid var(--auth-status-color, #22C55E); background: linear-gradient(90deg, var(--auth-status-bg, rgba(34,197,94,0.06)), rgba(8,8,8,1)); box-shadow: 0 0 32px var(--auth-status-glow, rgba(34,197,94,0.12)); margin-bottom: 24px; }
.auth-success-bar.is-success { --auth-status-color: #22C55E; --auth-status-bg: rgba(34,197,94,0.06); --auth-status-glow: rgba(34,197,94,0.12); }
.auth-success-bar.is-pending { --auth-status-color: #EBC554; --auth-status-bg: rgba(235,197,84,0.06); --auth-status-glow: rgba(235,197,84,0.12); }
.auth-success-bar.is-error   { --auth-status-color: #EF4444; --auth-status-bg: rgba(239,68,68,0.06);  --auth-status-glow: rgba(239,68,68,0.12); }
.auth-success-bar.is-info    { --auth-status-color: #4573A1; --auth-status-bg: rgba(69,115,161,0.06); --auth-status-glow: rgba(69,115,161,0.12); }

.auth-success-icon { width: 68px; height: 68px; border: 2px solid var(--auth-status-color, #22C55E); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 24px var(--auth-status-glow, rgba(34,197,94,0.40)), inset 0 0 16px var(--auth-status-glow, rgba(34,197,94,0.15)); }
.auth-success-icon-glyph { font-size: 34px; color: var(--auth-status-color, #22C55E); line-height: 1; }

.auth-success-content { flex: 1; min-width: 0; }
.auth-success-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: var(--auth-status-color, #22C55E); text-transform: uppercase; margin-bottom: 6px; }
.auth-success-h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.005em; text-transform: uppercase; margin: 0 0 6px; }
.auth-success-sub { font-size: 14px; color: rgba(255,255,255,0.70); line-height: 1.5; }
.auth-success-sub strong { color: #EBC554; }
.auth-success-cta { display: flex; gap: 10px; flex-shrink: 0; }

/* KPI row — 4 tiles после success-bar (architectural, как dashboard) */
.auth-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
@media (max-width: 1024px) { .auth-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.auth-kpi-tile { border: 1px solid #1A1A1A; padding: 18px 20px; background: #050505; transition: border-color 200ms ease; }
.auth-kpi-tile:hover { border-color: rgba(235,197,84,0.40); }
.auth-kpi-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: #EBC554; text-transform: uppercase; margin-bottom: 8px; white-space: nowrap; }
.auth-kpi-val { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 20px; color: #FFFFFF; line-height: 1; }
.auth-kpi-val.is-mono { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.05em; }
.auth-kpi-val.is-amber  { color: #EBC554; }
.auth-kpi-val.is-success { color: #22C55E; }
.auth-kpi-val.is-pending { color: #EBC554; }
/* auth-kpi-sub · v4.1 11→12px (KPI sub label — non-chip) */
.auth-kpi-sub { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.10em; color: rgba(255,255,255,0.50); margin-top: 6px; text-transform: uppercase; }

/* Horizontal timeline — 3-step с arrow separators */
.auth-timeline-h { display: flex; align-items: stretch; gap: 0; border: 1px solid #1A1A1A; padding: 0; background: #050505; }
@media (max-width: 1024px) { .auth-timeline-h { flex-direction: column; } }
.auth-timeline-h-step { flex: 1; padding: 20px 22px; position: relative; }
.auth-timeline-h-step:not(:last-child) { border-right: 1px solid #1A1A1A; }
.auth-timeline-h-step::after { content: '›'; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #EBC554; background: #050505; padding: 0 2px; z-index: 1; }
.auth-timeline-h-step:last-child::after { display: none; }
@media (max-width: 1024px) {
  .auth-timeline-h-step:not(:last-child) { border-right: none; border-bottom: 1px solid #1A1A1A; }
  .auth-timeline-h-step::after { display: none; }
}
.auth-timeline-h-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: #EBC554; margin-bottom: 8px; }
.auth-timeline-h-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: #FFFFFF; margin-bottom: 4px; }
.auth-timeline-h-desc { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.60); }

/* Container для V3 dashboard layout (max-width 1100px вместо 760px wide для card) */
.auth-dashboard-container { max-width: 1100px; margin: 0 auto; padding: 32px 24px 24px; position: relative; }

/* Modifier для экранов с sidebar (academy/billing, gate-admin/*) — full-width main-zone, no central column */
.auth-dashboard-container.is-with-sidebar { max-width: none; margin: 0; padding: 24px 28px 24px; }

/* === V4 · DASHBOARD HERO-ACTION pattern (FIXED 2026-05-04 · CEO утвердил)
   ============================================================
   Для активных user-facing dashboards где continue-action — primary CTA,
   а не «success». Используется на academy/dashboard.html (5 logical zones
   натянуть на V3 невозможно: greeting + continue-card + 4 stats + courses + activity).

   Структура:
   .dashboard-hero-row    → grid 1.4fr 1fr (continue-card hero | 4 stats grid 2x2)
   .dashboard-hero-action → большая card с amber-glow, CTA-driven (как existing .continue-card но canonical)
   .dashboard-hero-stats  → 4 mini-tiles в 2x2 grid (как auth-kpi-tile но компактнее)
   ============================================================ */
.dashboard-hero-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 24px; }
@media (max-width: 1024px) { .dashboard-hero-row { grid-template-columns: 1fr; } }

.dashboard-hero-action { position: relative; padding: 28px 30px; border: 2px solid #EBC554; background: linear-gradient(135deg, rgba(235,197,84,0.08) 0%, #050505 60%); overflow: hidden; box-shadow: 0 0 24px rgba(235,197,84,0.05); }
.dashboard-hero-action::after { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(235,197,84,0.06) 0%, transparent 70%); pointer-events: none; }
.dashboard-hero-action > * { position: relative; z-index: 1; }
/* dashboard-hero-cap · v4.1 11→12px (hero caption — non-chip) */
.dashboard-hero-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: #EBC554; text-transform: uppercase; margin-bottom: 8px; }
.dashboard-hero-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.005em; text-transform: uppercase; margin: 0 0 6px; }
.dashboard-hero-sub { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.70); margin-bottom: 18px; }
.dashboard-hero-progress { margin: 14px 0 18px; }
/* dashboard-hero-progress-meta · v4.1 11→12px (meta label — non-chip) */
.dashboard-hero-progress-meta { display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.10em; margin-bottom: 6px; text-transform: uppercase; }
.dashboard-hero-progress-meta .pct { color: #EBC554; }
.dashboard-hero-progress-meta .lbl { color: rgba(255,255,255,0.55); }
.dashboard-hero-progress-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.dashboard-hero-progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #C9A332, #EBC554, #F8F080); box-shadow: 0 0 10px rgba(235,197,84,0.5); }

.dashboard-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.dashboard-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dashboard-hero-stat { padding: 14px 16px; border: 1px solid #1A1A1A; background: #050505; transition: border-color 200ms ease; }
.dashboard-hero-stat:hover { border-color: rgba(235,197,84,0.35); }
/* dashboard-hero-stat-cap · v4.1 10→11px (chip-class minimum 11) */
.dashboard-hero-stat-cap { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,0.50); text-transform: uppercase; margin-bottom: 5px; white-space: nowrap; }
.dashboard-hero-stat-val { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 24px; line-height: 1; color: #EBC554; font-feature-settings: 'tnum'; }
.dashboard-hero-stat-val.is-success { color: #22C55E; }
.dashboard-hero-stat-val.is-white { color: #FFFFFF; }
/* dashboard-hero-stat-sub · v4.1 10→11px (chip-class minimum 11) */
.dashboard-hero-stat-sub { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.10em; color: rgba(255,255,255,0.50); margin-top: 4px; text-transform: uppercase; }

/* === Brand action button (canonical primary CTA — gold, NOT status color) === */
.btn-action { padding: 13px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #EBC554; color: #EBC554; background: rgba(235,197,84,0.06); text-decoration: none; transition: all 200ms ease; box-shadow: 0 0 22px rgba(235,197,84,0.20); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-action:hover { background: #EBC554; color: #080808; box-shadow: 0 0 36px rgba(235,197,84,0.45); }

/* Outline button (secondary CTA — neutral, hover gold) */
.btn-outline { padding: 13px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #525252; color: rgba(255,255,255,0.85); background: transparent; text-decoration: none; transition: all 200ms ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-outline:hover { border-color: #EBC554; color: #EBC554; }

/* === V1 · COMPACT FOLD-FIRST overrides (для simple confirmations) === */
/* Использует existing .auth-card-wide (max-width 760), но с smaller icon-ring 88 */
.auth-icon-ring.is-compact { width: 88px; height: 88px; margin-bottom: 18px; }
.auth-icon-ring.is-compact .auth-icon-glyph { font-size: 46px; }

/* Compact 3-step inline timeline (для V1 — alternative к steps-grid) */
.auth-timeline-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 20px; border: 1px solid #1A1A1A; background: #050505; }
@media (max-width: 768px) { .auth-timeline-compact { grid-template-columns: 1fr; } }
.auth-timeline-compact-step { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.auth-timeline-compact-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: #EBC554; flex-shrink: 0; padding-top: 2px; min-width: 26px; }
.auth-timeline-compact-text { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.75); }
.auth-timeline-compact-text strong { color: #FFFFFF; font-weight: 700; }

/* ---- LIGHT THEME overrides for canonical components ---- */
[data-theme="light"] .course-card-big { background: var(--bg-tertiary, #ffffff) !important; border-color: var(--border-default, rgba(26,26,26,0.12)) !important; }
[data-theme="light"] .course-card-big:hover { box-shadow: 0 8px 24px rgba(201,163,50,0.20) !important; }
[data-theme="light"] .course-card-flagman { background: linear-gradient(180deg, rgba(235,197,84,0.10) 0%, #ffffff 60%) !important; border-color: var(--accent-amber, #C9A332) !important; box-shadow: 0 0 32px rgba(201,163,50,0.15) !important; }
[data-theme="light"] .course-card-vip { background: linear-gradient(180deg, rgba(139,0,0,0.06) 0%, #ffffff 60%) !important; }
[data-theme="light"] .course-card-purchased { border-color: #16A34A !important; }
[data-theme="light"] .course-thumb { background: linear-gradient(135deg, #f5f5f5, #ffffff) !important; border-color: var(--border-default, rgba(26,26,26,0.10)) !important; }
[data-theme="light"] .course-thumb-l0 { background: linear-gradient(135deg, rgba(235,197,84,0.18), #ffffff) !important; }
[data-theme="light"] .course-thumb-l1 { background: linear-gradient(135deg, rgba(34,197,94,0.16), #ffffff) !important; }
[data-theme="light"] .course-thumb-l2 { background: linear-gradient(135deg, rgba(196,77,255,0.16), #ffffff) !important; }
[data-theme="light"] .course-thumb-l3 { background: linear-gradient(135deg, rgba(139,0,0,0.14), #ffffff) !important; }
[data-theme="light"] .course-thumb-l4 { background: linear-gradient(135deg, rgba(69,115,161,0.16), #ffffff) !important; }
[data-theme="light"] .course-card-locked .course-thumb::after { background: linear-gradient(135deg, rgba(245,245,245,0.78) 0%, rgba(245,245,245,0.50) 100%) !important; }
[data-theme="light"] .course-card-locked .course-thumb::before { background: rgba(255,255,255,0.95) !important; color: var(--lock-color, #C9A332) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important; }
/* Hover: solid lock-color fill + WHITE inverse text + glow shadow (v4.4.17 fix-3 · CEO 2026-05-06) */
[data-theme="light"] .course-card-locked:hover .course-thumb::before { background: var(--lock-color, #C9A332) !important; color: #FFFFFF !important; box-shadow: 0 4px 18px var(--lock-color, #C9A332) !important; }
[data-theme="light"] .progress-bar { background: rgba(26,26,26,0.08) !important; }
[data-theme="light"] .filter-pill:not(.active) { border-color: var(--border-strong, rgba(26,26,26,0.20)) !important; color: var(--text-muted, rgba(26,26,26,0.65)) !important; }
[data-theme="light"] .filter-count { background: rgba(26,26,26,0.06) !important; color: var(--text-muted, rgba(26,26,26,0.65)) !important; }
[data-theme="light"] .status-locked { color: rgba(26,26,26,0.50) !important; border-color: rgba(26,26,26,0.20) !important; }
[data-theme="light"] .price-rub { color: rgba(26,26,26,0.55) !important; }
/* DEPRECATED v4.4.17 (Призма 2): light footer overrides переехали в FOOTER · LIGHT THEME блок (line ~297).
   Memory feedback_light_theme_v2.md: «Stripe-pattern dark footer #0E0D0B» — premium contrast.
   Старые правила (white footer) переопределены явным dark в новом блоке выше по каскаду.
   Оставляем здесь только legacy support для не-eco-footer элементов где нет dark override. */
[data-theme="light"] .triad-caption { color: rgba(26,26,26,0.55) !important; }
[data-theme="light"] .triad-explore { color: rgba(201,163,50,0.75) !important; }
/* DEPRECATED Block B Q3 unification (2026-05-07):
 * Эти правила были tailored под cream-context light theme header (`.eco-header light`).
 * После CEO Q3 = Variant B unification — все headers dark immutable в обеих темах.
 * Generic `[data-theme="light"] .eco-lang-btn:not(.eco-lang-btn-active) { color: dark }`
 * перебивал header-specific WHITE override (master строка 143-144) и делал inactive
 * lang button dark-text-on-dark-header = invisible.
 *
 * Удалено 3 правила:
 *   [data-theme="light"] .eco-lang-switcher { border-color: dark !important }
 *   [data-theme="light"] .eco-lang-btn:not(.eco-lang-btn-active) { color: dark !important }
 *   [data-theme="light"] .eco-theme-btn { color: dark !important; border: dark !important }
 *
 * Header-specific rules (строки 143-144) теперь выигрывают cascade и обеспечивают WHITE text
 * на inactive lang/theme buttons внутри dark header. */

/* ============================================
   LIGHT THEME · canonical v2 (premium · senior 2026-05-03)
   ============================================
   CEO утвердил 2026-05-03. Перенесено из landing.html inline-блока (sub-agent senior 15+).
   Принципы:
     - Off-white #FAFAF7 (warm bone) вместо pure white — теплее cream #f0ede8
     - Type contrast #0A0A0A (deep) + weight up
     - #7A6614 deep bronze для CTAs (не #C9A332, не #EBC554) — premium read
     - Layered surfaces: body FAFAF7 + cards #FFFFFF + multi-layer shadows
     - Stripe-pattern dark footer #0E0D0B (warm charcoal, не pure black)
     - Borders >> backgrounds для разделения
     - Critical fix: .price-list li был white-on-white (теперь rgba(10,10,10,0.82))
   Specificity strategy:
     - html[data-theme="light"] для body/footer (перебивает master cream override)
     - [data-theme="light"] для остального (естественный override через ordering)
   ============================================ */

/* light v2: layered surface system — body cream→canvas, cards pure-white, sections subtle gradient */
/* light v2: body имеет class .bg-bg — поднимаем специфичность чтобы перебить master CSS overrides на bg-bg */
html[data-theme="light"] body.bg-bg { background: #FAFAF7 !important; background-color: #FAFAF7 !important; }
html[data-theme="light"] body { background-color: #FAFAF7 !important; }
/* light v2: Premium ambient — page wrapper micro-gradient (cream→cooler) для depth */
[data-theme="light"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(201,163,50,0.08) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(26,26,26,0.04) 0%, rgba(255,255,255,0) 70%);
}

/* HEADER · Block B sweep (CEO 2026-05-07 Q3 = Variant B unification)
 * .ai-header теперь dark immutable в обеих темах — идентично .eco-header.
 * Удалён light glass v2 override (был bg rgba(255,255,255,0.78) + dark text) —
 * причина: low contrast nav на cream («справа в хедере значки сливаются»).
 * Default dark rule .ai-header { background: rgba(18,18,22,0.88) } строка 644 работает в обеих темах.
 * Default text colors `.ai-wordmark/.ai-subline/.ai-nav-link` тоже dark-theme defaults → WHITE на dark = читается. */

/* light v2: HERO h1 — gradient gold→darker уходил в muted на белом. Теперь deep amber→bronze для weight. */
[data-theme="light"] .h1-org { color: #0A0A0A !important; text-shadow: none; font-weight: 800; letter-spacing: 0.015em; }
[data-theme="light"] .h1-org .bg-gradient-to-b {
  background-image: linear-gradient(180deg, #C9A332 0%, #7A6614 50%, #6B5510 100%) !important;
}
/* light v2: hero sub paragraph — был var(--text-secondary) rgba(26,26,26,0.80) — strong enough, но weight up */
[data-theme="light"] section.relative > .relative > div p[style*="color:var(--text-secondary)"],
[data-theme="light"] section.relative > .relative > div p[style*="color: var(--text-secondary)"] {
  color: rgba(10,10,10,0.78) !important;
}
/* light v2: cursor blink был #EBC554 inline в .cursor-blink::after — на светлом теряется */
[data-theme="light"] .cursor-blink::after { color: #7A6614 !important; }

/* light v2: GRID pattern был gold/0.04 → почти не виден. Tonal bronze 0.05 + larger contrast */
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(to right, rgba(26,26,26,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,26,26,0.05) 1px, transparent 1px) !important;
  background-size: 64px 64px;
  opacity: 0.6;
}
/* light v2: glow-radial нужно полностью переосмыслить — был тёмный gradient gold-on-black */
[data-theme="light"] .glow-radial {
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(201,163,50,0.10) 0%, rgba(255,255,255,0) 70%) !important;
}

/* light v2: caption row "B2B/B2C/OPERATORS" — был text-amber #EBC554 на cream, делаем deep bronze + chip-style usability */
[data-theme="light"] section.relative .eco-cap-sm.text-amber { color: #7A6614 !important; }
[data-theme="light"] section.relative .eco-cap-sm.text-amber .w-1\.5.h-1\.5 { background: #7A6614 !important; }

/* light v2: CODE INPUT — gold text на белом было ок, но обновляем для focus depth */
[data-theme="light"] .code-input {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  caret-color: #7A6614 !important;
  border: 1px solid rgba(26,26,26,0.18) !important;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), inset 0 1px 0 rgba(26,26,26,0.02);
  font-weight: 600;
}
[data-theme="light"] .code-input::placeholder { color: rgba(10,10,10,0.30) !important; }
[data-theme="light"] .code-input:focus, [data-theme="light"] .code-input:focus-visible {
  border-color: #7A6614 !important;
  box-shadow: 0 0 0 3px rgba(201,163,50,0.18), 0 1px 2px rgba(26,26,26,0.04) !important;
  caret-color: #7A6614 !important;
}

/* light v2: code label "▸ КОД ДОСТУПА" был text-amber на cream — strong bronze */
[data-theme="light"] .eco-cap-xs.text-amber[data-i18n="hero.code_label"] { color: #7A6614 !important; }

/* light v2: VERIFY button (btn-org-primary) — на light master уже задаёт border+color #C9A332. Усиливаем weight + shadow */
[data-theme="light"] .btn-ai-primary {
  border: 1.5px solid #7A6614 !important;
  color: #7A6614 !important;
  background: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04);
}
[data-theme="light"] .btn-ai-primary:hover {
  background: #7A6614 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(122,102,20,0.30), 0 2px 4px rgba(26,26,26,0.08);
}

/* light v2: TIER buttons — pure white surface + shadow depth (вместо cream-on-cream) */
[data-theme="light"] .tier-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(26,26,26,0.10) !important;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 1px 3px rgba(26,26,26,0.06);
  transition: all 220ms ease;
}
[data-theme="light"] .tier-btn:hover {
  border-color: #7A6614 !important;
  background: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(122,102,20,0.18), 0 2px 6px rgba(26,26,26,0.08);
}
[data-theme="light"] .tier-btn-primary {
  border: 1.5px solid #7A6614 !important;
  background: linear-gradient(180deg, #FFFAEC 0%, #FFFFFF 100%) !important;
  box-shadow: 0 4px 16px rgba(201,163,50,0.18), 0 1px 3px rgba(26,26,26,0.06);
}
[data-theme="light"] .tier-btn-primary:hover {
  background: linear-gradient(180deg, #7A6614 0%, #6B5510 100%) !important;
  box-shadow: 0 8px 24px rgba(122,102,20,0.40), 0 2px 6px rgba(26,26,26,0.10);
  transform: translateY(-2px);
}
[data-theme="light"] .tier-title { color: #0A0A0A !important; font-weight: 700; }
[data-theme="light"] .tier-btn-primary .tier-title { color: #7A6614 !important; }
[data-theme="light"] .tier-btn-primary:hover .tier-title { color: #FFFFFF !important; }
[data-theme="light"] .tier-sub { color: rgba(10,10,10,0.55) !important; font-weight: 500; }
[data-theme="light"] .tier-btn-primary .tier-sub { color: rgba(122,102,20,0.85) !important; }
[data-theme="light"] .tier-btn-primary:hover .tier-sub { color: rgba(255,255,255,0.85) !important; }

/* light v2: stats row — separators #525252 на cream невидимы, amber stats на cream нужны bronze */
[data-theme="light"] .relative .eco-cap-sm.text-\[\#A3A3A3\] { color: rgba(10,10,10,0.65) !important; font-weight: 500; }
[data-theme="light"] .relative .text-amber.tnum { color: #7A6614 !important; font-weight: 700; }
[data-theme="light"] .relative .text-amber:not(.tnum) { color: #7A6614 !important; }
[data-theme="light"] .text-\[\#525252\] { color: rgba(10,10,10,0.20) !important; }

/* light v2: AI_СЕРВИСЫ section title + cards */
[data-theme="light"] #ai-panel { border-top: 1px solid rgba(26,26,26,0.08) !important; }
[data-theme="light"] #ai-panel .text-\[\#A3A3A3\] { color: rgba(10,10,10,0.68) !important; }
[data-theme="light"] .service-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(26,26,26,0.08) !important;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 1px 3px rgba(26,26,26,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
[data-theme="light"] .service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(122,102,20,0.35) !important;
  box-shadow: 0 12px 28px rgba(26,26,26,0.10), 0 4px 8px rgba(26,26,26,0.06), 0 0 0 1px rgba(122,102,20,0.10);
}
[data-theme="light"] .service-card h3 { color: #0A0A0A !important; }
[data-theme="light"] .service-card .text-amber { color: #7A6614 !important; }
[data-theme="light"] .service-hook {
  color: rgba(10,10,10,0.60) !important;
  border-bottom-color: rgba(26,26,26,0.06) !important;
}
[data-theme="light"] .card-body-text { color: rgba(10,10,10,0.65) !important; }
[data-theme="light"] .service-card .border-t { border-color: rgba(26,26,26,0.06) !important; }
[data-theme="light"] .service-status { color: #16A34A !important; }
[data-theme="light"] .service-status::before { background: #16A34A; box-shadow: 0 0 6px rgba(22,163,74,0.6); }

/* light v2: chip on light — readable */
[data-theme="light"] .chip { border-color: rgba(26,26,26,0.18) !important; color: rgba(10,10,10,0.70) !important; background: rgba(26,26,26,0.02); font-weight: 500; }
[data-theme="light"] .chip-amber { border-color: rgba(122,102,20,0.45) !important; color: #7A6614 !important; background: rgba(201,163,50,0.06); }

/* light v2: bottom CTA secondary text */
[data-theme="light"] #ai-panel .border-t { border-color: rgba(26,26,26,0.08) !important; }

/* light v2: ACADEMY section — был dark gradient bg, теперь light tonal */
[data-theme="light"] #academy {
  background: linear-gradient(180deg, #F5F2EC 0%, #FAFAF7 50%, #F5F2EC 100%) !important;
  border-top: 1px solid rgba(26,26,26,0.08) !important;
}
[data-theme="light"] #academy h2 { color: #0A0A0A !important; }
[data-theme="light"] #academy .text-\[\#A3A3A3\] { color: rgba(10,10,10,0.65) !important; }

/* light v2: PRICE CARDS — БЫЛО критично сломано. price-list li был rgba(255,255,255,0.85) (БЕЛЫЙ ТЕКСТ НА БЕЛОМ!). */
[data-theme="light"] .price-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(26,26,26,0.10) !important;
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 4px 12px rgba(26,26,26,0.04);
}
[data-theme="light"] .price-card:hover {
  border-color: #7A6614 !important;
  box-shadow: 0 12px 32px rgba(122,102,20,0.15), 0 4px 8px rgba(26,26,26,0.06);
  transform: translateY(-3px);
}
[data-theme="light"] .price-card-flagman {
  border: 2px solid #7A6614 !important;
  background: linear-gradient(180deg, #FFFAEC 0%, #FFFFFF 60%) !important;
  box-shadow: 0 8px 32px rgba(122,102,20,0.20), 0 2px 6px rgba(26,26,26,0.06) !important;
}
[data-theme="light"] .price-card-flagman:hover {
  box-shadow: 0 16px 40px rgba(122,102,20,0.30), 0 4px 8px rgba(26,26,26,0.08) !important;
}
[data-theme="light"] .price-card-vip {
  border: 2px solid #6B0000 !important;
  background: linear-gradient(180deg, #FAF0F2 0%, #FFFFFF 60%) !important;
  box-shadow: 0 8px 24px rgba(107,0,0,0.10), 0 2px 6px rgba(26,26,26,0.06) !important;
}
[data-theme="light"] .price-card-vip:hover {
  border-color: #7C2D9C !important;
  box-shadow: 0 12px 32px rgba(124,45,156,0.20), 0 4px 8px rgba(26,26,26,0.06) !important;
}
[data-theme="light"] .price-tier-tag { color: #7A6614 !important; }
[data-theme="light"] .price-vip-tag { color: #7C2D9C !important; }
[data-theme="light"] .price-title { color: #0A0A0A !important; }
[data-theme="light"] .price-subtitle { color: rgba(10,10,10,0.55) !important; }
[data-theme="light"] .price-amount { color: #0A0A0A !important; }
[data-theme="light"] .price-amount-rub { color: rgba(10,10,10,0.50) !important; }
/* light v2: CRITICAL FIX — price-list li был rgba(255,255,255,0.85) → белый текст на белой карточке = невидимо */
[data-theme="light"] .price-list li { color: rgba(10,10,10,0.82) !important; font-weight: 400; }
[data-theme="light"] .price-list li::before { color: #7A6614 !important; }
[data-theme="light"] .price-list li strong { color: #0A0A0A !important; font-weight: 700; }
[data-theme="light"] .price-list li strong[style*="#EBC554"] { color: #7A6614 !important; }
[data-theme="light"] .price-list li strong[style*="#C44DFF"] { color: #7C2D9C !important; }
[data-theme="light"] .price-list li.text-amber { color: #7A6614 !important; }
/* light v2: badges */
[data-theme="light"] .flagman-badge { background: #7A6614 !important; color: #FFFFFF !important; box-shadow: 0 2px 6px rgba(122,102,20,0.30); }
[data-theme="light"] .vip-badge { background: #6B0000 !important; color: #FFFFFF !important; box-shadow: 0 2px 6px rgba(107,0,0,0.30); }
/* light v2: L2 buy button (.btn-ai with inline gold bg) */
[data-theme="light"] .price-card-flagman a.btn-ai { background: #7A6614 !important; color: #FFFFFF !important; border-color: #7A6614 !important; }
[data-theme="light"] .price-card-flagman a.btn-ai:hover { background: #6B5510 !important; border-color: #6B5510 !important; box-shadow: 0 4px 12px rgba(107,85,16,0.40); }
[data-theme="light"] .price-card-vip a.btn-ai { border-color: #7C2D9C !important; color: #7C2D9C !important; background: #FFFFFF !important; }
[data-theme="light"] .price-card-vip a.btn-ai:hover { background: #7C2D9C !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(124,45,156,0.30); }

/* light v2: FOOTER — Stripe pattern: dark-tinted footer "black box bottom" для grounding + contrast.
 * Использую глубокий слегка тёплый charcoal вместо pure black (для брендового тепла).
 * footer имеет class .bg-bg — поднимаем специфичность чтобы перебить master CSS .bg-bg override */
html[data-theme="light"] footer.bg-bg,
html[data-theme="light"] footer { background: #0E0D0B !important; background-color: #0E0D0B !important; border-top: 1px solid rgba(26,26,26,0.08) !important; }
html[data-theme="light"] footer .border-b { border-color: rgba(255,255,255,0.06) !important; }
html[data-theme="light"] footer .border-t { border-color: rgba(255,255,255,0.06) !important; }

/* light v2: Triad tiles in dark footer */
[data-theme="light"] .triad-tile {
  background: #181614 !important;
  border-color: transparent !important;
  transition: all 350ms ease;
}
[data-theme="light"] .triad-tile:hover { background: rgba(255,255,255,0.04) !important; }
[data-theme="light"] .triad-current { background: linear-gradient(180deg, rgba(235,197,84,0.10) 0%, rgba(24,22,20,1) 100%) !important; }
[data-theme="light"] .triad-caption { color: rgba(255,255,255,0.55) !important; }
[data-theme="light"] .triad-wordmark { color: #FFFFFF !important; }
[data-theme="light"] .triad-wordmark .br { color: rgba(255,255,255,0.35) !important; }
[data-theme="light"] .triad-desc { color: rgba(255,255,255,0.62) !important; }

/* light v2: Footer GOLDJAXE block — на dark footer оригинальные colors работают */
[data-theme="light"] .gold-wordmark-f { color: #FFFFFF !important; text-shadow: 0 0 14px rgba(235,197,84,0.30) !important; }
[data-theme="light"] .gold-wordmark-f .gold { color: #EBC554 !important; }
[data-theme="light"] .gold-wordmark-f .br { color: #FFFFFF !important; }
[data-theme="light"] .cube-glow-f { filter: drop-shadow(0 0 11px rgba(235,197,84,0.35)) !important; }

/* light v2: Footer subline INTELLIGENCE·AUTONOMY·PROTOCOL — БЫЛ невидимый, теперь light text on dark footer */
[data-theme="light"] footer .uppercase[style*="JetBrains Mono"],
[data-theme="light"] footer div[style*="JetBrains Mono"][style*="0.85"] { color: rgba(255,255,255,0.85) !important; }

/* light v2: Social icons in dark footer — back to light/white treatment */
[data-theme="light"] footer .social-icon { border-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.70) !important; background: transparent !important; }
[data-theme="light"] footer .social-icon:hover { border-color: #EBC554 !important; color: #EBC554 !important; box-shadow: 0 0 12px rgba(235,197,84,0.35) !important; }

/* light v2: Bottom strip (copyright / legal links / ИП) on dark footer */
[data-theme="light"] footer .font-mono.uppercase { color: rgba(255,255,255,0.40) !important; }
[data-theme="light"] footer a.font-mono.uppercase:hover { color: #EBC554 !important; }
[data-theme="light"] footer .text-\[\#525252\] { color: rgba(255,255,255,0.20) !important; }

/* light v2: Service modal — поскольку body на light, модалка должна быть light-grounded */
[data-theme="light"] .svc-modal-overlay { background: rgba(26,26,26,0.55) !important; backdrop-filter: blur(10px); }
[data-theme="light"] .svc-modal {
  background: #FFFFFF !important;
  border: 1px solid rgba(26,26,26,0.10) !important;
  box-shadow: 0 24px 80px rgba(26,26,26,0.20), 0 8px 24px rgba(26,26,26,0.10), 0 0 0 1px rgba(122,102,20,0.10) !important;
}
[data-theme="light"] .svc-modal-close { border-color: rgba(26,26,26,0.15) !important; color: rgba(10,10,10,0.70) !important; }
[data-theme="light"] .svc-modal-close:hover { border-color: #7A6614 !important; color: #7A6614 !important; }
[data-theme="light"] .svc-modal-cap { color: #7A6614 !important; }
[data-theme="light"] .svc-modal-title { color: #0A0A0A !important; }
[data-theme="light"] .svc-modal-subtitle { color: rgba(10,10,10,0.55) !important; }
[data-theme="light"] .svc-modal-hook { color: rgba(10,10,10,0.85) !important; background: rgba(201,163,50,0.06) !important; border-left-color: #7A6614 !important; }
[data-theme="light"] .svc-modal-section-title { color: #7A6614 !important; border-top-color: rgba(26,26,26,0.08) !important; }
[data-theme="light"] .svc-modal-text { color: rgba(10,10,10,0.78) !important; }
[data-theme="light"] .svc-modal-bullets li { color: rgba(10,10,10,0.78) !important; }
[data-theme="light"] .svc-modal-bullets li::before { color: #7A6614 !important; }
[data-theme="light"] .svc-modal-grid { background: #FAFAF7 !important; border-color: rgba(26,26,26,0.08) !important; }
[data-theme="light"] .svc-modal-meta-label { color: #7A6614 !important; }
[data-theme="light"] .svc-modal-meta-value { color: #0A0A0A !important; }
[data-theme="light"] .svc-modal-cta-row { border-top-color: rgba(26,26,26,0.08) !important; }

/* ============================================
   light v2 EXTENSION (2026-05-03 · QA distribution sub-agent finding):
   Class-level white-rgba colors из ~25 экранов, которые НЕ перебиваются inline-style
   matchers выше. Pragmatic блок — не trogая 25 HTML-файлов точечно.
   Источник bug: legacy pre-canonical-v2 inline `color: rgba(255,255,255,X)` в class definitions.
   ============================================ */

/* Secondary text → deep neutral 0.78 */
[data-theme="light"] .hero-sub,
[data-theme="light"] .pcta-sub,
[data-theme="light"] .section-desc,
[data-theme="light"] .h1-sub,
[data-theme="light"] .stat-sub,
[data-theme="light"] .stat-cap,
[data-theme="light"] .stat-label,
[data-theme="light"] .toolbar-btn,
[data-theme="light"] .tx-row-header,
[data-theme="light"] .row-meta,
[data-theme="light"] .field-label,
[data-theme="light"] .breadcrumb,
[data-theme="light"] .breadcrumb a,
[data-theme="light"] .nav-section,
[data-theme="light"] .side-link,
[data-theme="light"] .legal-footer { color: rgba(10,10,10,0.78) !important; }

/* Muted text → 0.55 */
[data-theme="light"] .filter-pill:not(.active),
[data-theme="light"] .syn-search-cmd,
[data-theme="light"] .step-dot,
[data-theme="light"] .top-op-rank,
[data-theme="light"] .post-time,
[data-theme="light"] .row-time,
[data-theme="light"] .tx-meta,
[data-theme="light"] .meta-line,
[data-theme="light"] .reaction-btn { color: rgba(10,10,10,0.55) !important; border-color: rgba(10,10,10,0.20) !important; }

/* Faint text → 0.45 */
[data-theme="light"] .trend-flat,
[data-theme="light"] .stat-cell-label,
[data-theme="light"] .section-cap-link { color: rgba(10,10,10,0.45) !important; }

/* Status pills с tier L0 / locked / expired — light variants */
[data-theme="light"] .tier-l0,
[data-theme="light"] .tier-pill-l0,
[data-theme="light"] .status-locked,
[data-theme="light"] .status-expired,
[data-theme="light"] .status-refunded,
[data-theme="light"] .status-available { color: rgba(10,10,10,0.65) !important; border-color: rgba(10,10,10,0.20) !important; background: rgba(10,10,10,0.04) !important; }

/* === END · LIGHT THEME canonical v2 === */


/* ════════════════════════════════════════════════════════════════
   🆕 V4.2.0 · 2026-05-04 · LIGHT THEME для V3 dashboard pattern
   ════════════════════════════════════════════════════════════════
   Закрыт пробел: hardcoded #FFFFFF / #050505 / #1A1A1A / rgba(255,255,255,*)
   и `rgba(8,8,8,1)` в gradient-end в:
     · .auth-stage-grid-gold / .auth-stage-glow-gold (фон секции)
     · .auth-success-bar (gradient + texts)
     · .auth-kpi-tile (border + bg + value text)
     · .auth-timeline-h (border + bg + step arrows + texts)
     · .auth-support-row / -cap / -links / -sep
   На светлой теме раньше получалось «белое на белом» + «чёрные плашки на bone».
   Палитра light: #FAFAF7 surface · #0A0A0A type · #7A6614 deep bronze (CTAs).
   ════════════════════════════════════════════════════════════════ */

/* Stage backgrounds · видимый grid + glow на off-white */
[data-theme="light"] .auth-stage-grid-gold {
  background-image:
    linear-gradient(to right, rgba(122,102,20,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,102,20,0.06) 1px, transparent 1px) !important;
}
[data-theme="light"] .auth-stage-glow-gold {
  background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(235,197,84,0.10) 0%, rgba(255,255,255,0) 70%) !important;
}

/* Success bar · заменить gradient end rgba(8,8,8,1) → bg-secondary, поднять status-bg до 0.10 */
[data-theme="light"] .auth-success-bar { background: linear-gradient(90deg, var(--auth-status-bg, rgba(34,197,94,0.10)), var(--bg-secondary)) !important; }
[data-theme="light"] .auth-success-bar.is-success { --auth-status-bg: rgba(34,197,94,0.10); --auth-status-glow: rgba(34,197,94,0.16); }
[data-theme="light"] .auth-success-bar.is-pending { --auth-status-bg: rgba(235,197,84,0.12); --auth-status-glow: rgba(235,197,84,0.18); }
[data-theme="light"] .auth-success-bar.is-error   { --auth-status-bg: rgba(239,68,68,0.10); --auth-status-glow: rgba(239,68,68,0.16); }
[data-theme="light"] .auth-success-bar.is-info    { --auth-status-bg: rgba(69,115,161,0.10); --auth-status-glow: rgba(69,115,161,0.16); }
[data-theme="light"] .auth-success-sub { color: rgba(10,10,10,0.65) !important; }
[data-theme="light"] .auth-success-sub strong { color: #7A6614 !important; }

/* KPI tiles · bone surface + neutral border + dark type */
[data-theme="light"] .auth-kpi-tile {
  border-color: rgba(26,26,26,0.12) !important;
  background: var(--bg-primary) !important;
}
[data-theme="light"] .auth-kpi-tile:hover { border-color: rgba(122,102,20,0.50) !important; }
[data-theme="light"] .auth-kpi-cap { color: #7A6614 !important; }
[data-theme="light"] .auth-kpi-val { color: #0A0A0A !important; }
[data-theme="light"] .auth-kpi-val.is-amber,
[data-theme="light"] .auth-kpi-val.is-pending { color: #7A6614 !important; }
[data-theme="light"] .auth-kpi-sub { color: rgba(10,10,10,0.55) !important; }

/* Timeline · same surface ladder + bronze accents */
[data-theme="light"] .auth-timeline-h {
  border-color: rgba(26,26,26,0.12) !important;
  background: var(--bg-primary) !important;
}
[data-theme="light"] .auth-timeline-h-step:not(:last-child) { border-right-color: rgba(26,26,26,0.12) !important; }
[data-theme="light"] .auth-timeline-h-step::after {
  background: var(--bg-primary) !important;
  color: #7A6614 !important;
}
[data-theme="light"] .auth-timeline-h-num { color: #7A6614 !important; }
[data-theme="light"] .auth-timeline-h-title { color: #0A0A0A !important; }
[data-theme="light"] .auth-timeline-h-desc { color: rgba(10,10,10,0.65) !important; }

/* Support row · bottom block */
[data-theme="light"] .auth-support-row { border-top-color: rgba(26,26,26,0.12) !important; }
[data-theme="light"] .auth-support-cap { color: rgba(10,10,10,0.55) !important; }
[data-theme="light"] .auth-support-links { color: rgba(10,10,10,0.65) !important; }
[data-theme="light"] .auth-support-links a { color: #7A6614 !important; }
[data-theme="light"] .auth-support-links a:hover { color: #C9A332 !important; }
[data-theme="light"] .auth-support-sep { color: rgba(10,10,10,0.25) !important; }

/* Buttons на success-экранах · light · убираем «белое на белом» (.btn-outline) и low-contrast (.btn-action) */
[data-theme="light"] .btn-action {
  color: #7A6614 !important;
  border-color: #7A6614 !important;
  background: rgba(122,102,20,0.06) !important;
  box-shadow: 0 0 22px rgba(122,102,20,0.16) !important;
}
[data-theme="light"] .btn-action:hover {
  background: #7A6614 !important;
  color: #FAFAF7 !important;
  box-shadow: 0 0 36px rgba(122,102,20,0.40) !important;
}
[data-theme="light"] .btn-outline {
  color: rgba(10,10,10,0.85) !important;
  border-color: rgba(26,26,26,0.40) !important;
}
[data-theme="light"] .btn-outline:hover {
  border-color: #7A6614 !important;
  color: #7A6614 !important;
}

/* === END · V4.2.0 LIGHT THEME V3 dashboard + buttons === */


/* ════════════════════════════════════════════════════════════════
   🆕 V4.2.1 · 2026-05-04 · FORM SYSTEM · canonical
   ════════════════════════════════════════════════════════════════
   Канонизация .form-group / .form-label / .form-input / .form-help /
   .form-error / .form-success + состояния (is-invalid / is-valid /
   :disabled / .is-loading). Раньше дублировались локально в new-topic,
   usdt-pending, settings, checkout — теперь единый source of truth.

   Pair JS: ui-kit/form-validator.js (auto-attach по data-validate).

   Состояния поля:
     · empty       — placeholder visible, neutral border
     · :focus      — white border canonical v3.7
     · filled      — neutral border, value visible
     · is-invalid  — red border + .form-error message
     · is-valid    — green border + ✓ check mark
     · :disabled   — opacity 0.55, no events
     · .is-loading — neutral border + spinner ::after right
   ════════════════════════════════════════════════════════════════ */

/* Wrapper */
.form-group { display: block; margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 768px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
}
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.form-actions.is-end { justify-content: flex-end; }

/* Label · 12px JBM Bold uppercase amber */
.form-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-amber, #EBC554);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-label.is-required::after { content: ' *'; color: #EF4444; font-weight: 700; }
.form-label-sub {
  display: inline-block;
  margin-left: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* Input · base */
.form-input {
  width: 100%;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid #525252;
  caret-color: var(--text-primary);
  transition: border-color 200ms ease, background 200ms ease;
  appearance: none;
  border-radius: 0;
}
.form-input::placeholder { color: var(--text-faint); }

/* Focus · canonical white v3.7 (closed precedent #7) */
.form-input:focus {
  border-color: rgba(255,255,255,0.55);
  caret-color: rgba(255,255,255,0.85);
  outline: none;
  box-shadow: none;
}

/* Disabled */
.form-input:disabled,
.form-input[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Validation states · is-invalid (red) / is-valid (green) · независимо от focus */
.form-input.is-invalid {
  border-color: #EF4444;
  background: rgba(239,68,68,0.05);
}
.form-input.is-invalid:focus {
  border-color: #EF4444;
  caret-color: #EF4444;
}
.form-input.is-valid {
  border-color: #22C55E;
  background: rgba(34,197,94,0.04);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2.5'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px;
}
.form-input.is-valid:focus { border-color: #22C55E; }

/* Loading state · spinner справа */
.form-input.is-loading {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBC554' stroke-width='2'><circle cx='12' cy='12' r='9' stroke-dasharray='42 42' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.9s' repeatCount='indefinite'/></circle></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px;
}

/* Textarea (variant of input) */
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid #525252;
  caret-color: var(--text-primary);
  transition: border-color 200ms ease;
  appearance: none;
  border-radius: 0;
  resize: vertical;
  min-height: 88px;
}
.form-textarea::placeholder { color: var(--text-faint); }
.form-textarea:focus {
  border-color: rgba(255,255,255,0.55);
  caret-color: rgba(255,255,255,0.85);
  outline: none;
  box-shadow: none;
}
.form-textarea.is-invalid { border-color: #EF4444; background: rgba(239,68,68,0.05); }
.form-textarea.is-valid { border-color: #22C55E; background: rgba(34,197,94,0.04); }

/* Help · подсказка под полем (нейтральная) */
.form-help {
  display: block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Error · красная плашка с иконкой */
.form-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #EF4444;
  background: rgba(239,68,68,0.10);
  border-left: 2px solid #EF4444;
}
.form-error.is-visible { display: flex; }
.form-error::before {
  content: '⚠';
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Success · зелёное короткое подтверждение под полем (опционально) */
.form-success {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #22C55E;
  background: rgba(34,197,94,0.08);
  border-left: 2px solid #22C55E;
}
.form-success.is-visible { display: flex; }
.form-success::before {
  content: '✓';
  flex-shrink: 0;
  font-weight: 700;
}

/* Light overrides для нового form блока */
[data-theme="light"] .form-label { color: #7A6614 !important; }
[data-theme="light"] .form-label.is-required::after { color: #B91C1C !important; }
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea {
  background: var(--bg-primary, #FAFAF7) !important;
  color: #0A0A0A !important;
  border-color: rgba(26,26,26,0.20) !important;
  caret-color: #0A0A0A !important;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
  color: rgba(10,10,10,0.40) !important;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus {
  border-color: rgba(10,10,10,0.55) !important;
  caret-color: rgba(10,10,10,0.85) !important;
}
[data-theme="light"] .form-input.is-invalid,
[data-theme="light"] .form-textarea.is-invalid {
  border-color: #B91C1C !important;
  background: rgba(185,28,28,0.05) !important;
}
[data-theme="light"] .form-input.is-valid,
[data-theme="light"] .form-textarea.is-valid {
  border-color: #15803D !important;
  background: rgba(21,128,61,0.04) !important;
}
[data-theme="light"] .form-help { color: rgba(10,10,10,0.65) !important; }
[data-theme="light"] .form-error {
  color: #B91C1C !important;
  background: rgba(185,28,28,0.08) !important;
  border-left-color: #B91C1C !important;
}
[data-theme="light"] .form-success {
  color: #15803D !important;
  background: rgba(21,128,61,0.08) !important;
  border-left-color: #15803D !important;
}

/* === END · V4.2.1 FORM SYSTEM === */


/* ════════════════════════════════════════════════════════════════
   🆕 V4.2.8 · 2026-05-04 · MODAL SYSTEM · canonical (1-в-1 .auth-success-bar)
   ════════════════════════════════════════════════════════════════
   v4.2.8 · починка typography 1-в-1 в эталон V3 success-bar (CEO «не идеал»
   из v4.2.7 — .modal-cap/-h1/-body использовали V1-pattern .eco-cap-sm/
   .eco-h1-page-tight вместо canonical .auth-success-cap/-h1/-sub).
   Caption: JBM Bold 12 uppercase ls 0.14em · color = var(--auth-status-color)
   H1: Inter 800 clamp(22-28) uppercase ls -0.005em
   Body: Inter 14 · lh 1.5 · rgba(255,255,255,0.70) · LEFT-aligned · strong amber
   Variant indicator через CSS variables --auth-status-color/-bg/-glow.
   Card extension эталона: 2px coloured border + glow (для контраста на
   затемнённом backdrop диалога — bar canonical имеет 1px, диалог требует 2px).

   Markup (canonical):
     <dialog class="modal-card is-confirm" id="my-modal">
       <button class="modal-close" data-modal-close aria-label="Закрыть">×</button>
       <div class="modal-cap">▸ ПОДТВЕРЖДЕНИЕ</div>
       <h2 class="modal-h1">Удалить курс «Reels Stack»?</h2>
       <div class="modal-body">…</div>
       <div class="modal-actions is-end">
         <button class="btn-outline" data-modal-close>[ ОТМЕНИТЬ ]</button>
         <button class="btn-action is-danger" data-modal-confirm>[ УДАЛИТЬ КУРС ]</button>
       </div>
     </dialog>

   Размеры (class на dialog):
     · default — 620px (F-canonical · premium spacious)
     · .is-lg — 760px (long content / wide forms)

   Кнопки внутри (F-canonical):
     · min-width 220px · padding-x 32 · gap 16 → симметричная пара одной ширины

   Body выравнивание:
     · default — center (для коротких 1-2 sentence)
     · .is-form — тоже center (унификация v4.2.8 CEO 2026-05-05)
     · ТОЛЬКО элементы <form> (label/input) остаются left для читаемости

   Кнопки в .is-form — flex:1 + gap 14 (match form-row · симметрия с полями)

   Виды (через CSS variables · canonical pattern из .auth-success-bar):
     · .is-confirm / .is-error — red (#EF4444)
     · .is-success — green (#22C55E)
     · .is-info — steel (#4573A1)
     · .is-form — нейтральный (без accent · brand amber для caption)
   ════════════════════════════════════════════════════════════════ */

/* Card · canonical .auth-card-wide-style · centered + 2px accent border + glow
   v4.2.8 · F-canonical: default 620 (premium spacious) + body center +
   btn min-width 220 + padding-x 32 + gap 16. CEO «очень хорошо получилось». */
dialog.modal-card,
.modal-card {
  position: relative;
  width: calc(100% - 48px);
  max-width: 620px;
  padding: 40px 40px;
  background: linear-gradient(180deg, var(--auth-bg, transparent) 0%, var(--bg-primary, #050505) 100%);
  border: 2px solid var(--auth-border, var(--border-default));
  box-shadow: 0 0 60px var(--auth-glow, rgba(0,0,0,0.40)), 0 24px 60px rgba(0,0,0,0.50);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
  margin: auto;
  max-height: none;
  overflow: visible;
  text-align: center; /* cap + h1 + body все центрируются (F-canonical) */
}
dialog.modal-card.is-lg,
.modal-card.is-lg { max-width: 760px; padding: 48px 56px; }
@media (max-width: 640px) {
  .modal-card,
  dialog.modal-card { padding: 32px 24px; }
  .modal-card.is-lg,
  dialog.modal-card.is-lg { padding: 36px 28px; }
}
dialog.modal-card[open] { display: block; }
dialog.modal-card:not([open]) { display: none; }

/* Variants · CSS variables как в .auth-card (border 2px + bg gradient + glow) */
.modal-card.is-success {
  --auth-bg: rgba(34,197,94,0.04);
  --auth-border: #22C55E;
  --auth-glow: rgba(34,197,94,0.10);
}
.modal-card.is-confirm,
.modal-card.is-error {
  --auth-bg: rgba(239,68,68,0.04);
  --auth-border: #EF4444;
  --auth-glow: rgba(239,68,68,0.10);
}
.modal-card.is-info {
  --auth-bg: rgba(69,115,161,0.04);
  --auth-border: #4573A1;
  --auth-glow: rgba(69,115,161,0.10);
}
/* .is-form (нейтральный · amber как .auth-card-gold)
   v4.2.8 · CEO 2026-05-05: cap/h1/body в форме тоже center (унификация).
   Только элементы <form> остаются left (поля + лейблы для читаемости).
   Кнопки flex:1 + gap 14 → match ширине полей form-row 263px (симметрия). */
.modal-card.is-form {
  --auth-bg: rgba(235,197,84,0.04);
  --auth-border: #EBC554;
  --auth-glow: rgba(235,197,84,0.10);
}
.modal-card.is-form form { text-align: left; }
.modal-card.is-form .modal-actions { gap: 14px; }
.modal-card.is-form .modal-actions .btn-action,
.modal-card.is-form .modal-actions .btn-outline {
  flex: 1;
  min-width: 0;
}

/* Backdrop */
.modal-card::backdrop {
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Caption · CANONICAL .auth-success-cap (JBM Bold 12 uppercase ls 0.14em · color = variant) */
.modal-cap {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--auth-border, var(--accent-amber, #EBC554));
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* H1 · CANONICAL .auth-success-h1 (Inter 800 clamp(22-28) uppercase ls -0.005em) */
.modal-h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 6px;
}

/* Body · CANONICAL .auth-success-sub (Inter 14/1.5 · 0.70 white) · CENTER (F-canonical) · strong amber */
.modal-body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.70);
  margin: 0 0 28px;
  /* text-align наследуется от .modal-card center (F-canonical · body для коротких 1-2 строк) */
}
.modal-body p { margin: 0 0 10px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body strong { color: var(--accent-amber, #EBC554); font-weight: 700; }

/* Actions row · canonical center всегда (включая .is-form) · v4.2.8 gap 12→16 */
.modal-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.modal-actions.is-end { justify-content: center; } /* в модалах center всегда — для всех variants включая .is-form (CEO 2026-05-05) */

/* Buttons · F-canonical (v4.2.8) · одинаковая ширина min-w 220 + extra padding 32
   = премиум-простор + симметрия пары. CEO утвердил 2026-05-05. */
.modal-card .modal-actions .btn-action,
.modal-card .modal-actions .btn-outline {
  min-width: 220px;
  padding-left: 32px;
  padding-right: 32px;
  justify-content: center;
  text-align: center;
}

/* Close X · canonical стиль (32×32 · neutral) */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 180ms ease, border-color 180ms ease;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
}
.modal-close:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
}
.modal-close:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,0.55);
  color: var(--text-primary);
}

/* Danger button · FILLED · canonical extension (как .btn-ai-success/.btn-ai-vip — red filled) */
.btn-action.is-danger {
  background: #EF4444;
  border: 1px solid #EF4444;
  color: var(--bg-secondary, #080808);
  box-shadow: 0 0 22px rgba(239,68,68,0.30);
}
.btn-action.is-danger:hover {
  background: #DC2626;
  border-color: #DC2626;
  color: var(--bg-secondary, #080808);
  box-shadow: 0 0 36px rgba(239,68,68,0.50);
}
.btn-action.is-danger:focus-visible {
  outline: 2px solid rgba(239,68,68,0.60);
  outline-offset: 2px;
}

/* Animations */
@keyframes goldjaxe-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes goldjaxe-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-card[open] { animation: goldjaxe-modal-in 220ms ease-out; }
.modal-card[open]::backdrop { animation: goldjaxe-backdrop-in 200ms ease-out; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal-card[open],
  .modal-card[open]::backdrop { animation: none !important; }
}

/* Light theme · canonical bone surface · 2px accent border deep tones */
[data-theme="light"] dialog.modal-card,
[data-theme="light"] .modal-card {
  background: linear-gradient(180deg, var(--auth-bg, transparent) 0%, var(--bg-primary, #FAFAF7) 100%) !important;
  border-color: var(--auth-border, rgba(26,26,26,0.20)) !important;
  color: #0A0A0A !important;
  box-shadow: 0 0 60px var(--auth-glow, rgba(0,0,0,0.10)), 0 24px 60px rgba(0,0,0,0.14) !important;
}
[data-theme="light"] .modal-card::backdrop {
  background: rgba(0,0,0,0.45);
}
[data-theme="light"] .modal-card.is-success { --auth-bg: rgba(21,128,61,0.06); --auth-border: #15803D; --auth-glow: rgba(21,128,61,0.14); }
[data-theme="light"] .modal-card.is-confirm,
[data-theme="light"] .modal-card.is-error   { --auth-bg: rgba(185,28,28,0.06); --auth-border: #B91C1C; --auth-glow: rgba(185,28,28,0.14); }
[data-theme="light"] .modal-card.is-info    { --auth-bg: rgba(44,82,130,0.06); --auth-border: #2C5282; --auth-glow: rgba(44,82,130,0.14); }
[data-theme="light"] .modal-card.is-form    { --auth-bg: rgba(122,102,20,0.06); --auth-border: #7A6614; --auth-glow: rgba(122,102,20,0.14); }
[data-theme="light"] .modal-h1 { color: #0A0A0A !important; }
[data-theme="light"] .modal-body { color: rgba(10,10,10,0.78) !important; }
[data-theme="light"] .modal-body strong { color: #7A6614 !important; }
[data-theme="light"] .modal-cap { color: var(--auth-border, #7A6614) !important; }
[data-theme="light"] .modal-close { color: rgba(10,10,10,0.55) !important; }
[data-theme="light"] .modal-close:hover {
  color: #0A0A0A !important;
  border-color: rgba(26,26,26,0.20) !important;
}
[data-theme="light"] .btn-action.is-danger {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FAFAF7 !important;
  box-shadow: 0 0 22px rgba(185,28,28,0.25) !important;
}
[data-theme="light"] .btn-action.is-danger:hover {
  background: #991B1B !important;
  border-color: #991B1B !important;
  color: #FAFAF7 !important;
}

/* === END · V4.2.2 MODAL SYSTEM (redesign v4 · по эталону .auth-card-wide) === */


/* ════════════════════════════════════════════════════════════════
   🆕 V4.2.3 · 2026-05-04 · TOAST SYSTEM · canonical
   ════════════════════════════════════════════════════════════════
   Лёгкие уведомления-плашки в углу. Очередь max 3 одновременно (старые
   вытесняются). Auto-dismiss per type (success 4s · info 5s · warning 6s ·
   error не закрывается). Hover паузит таймер. Action button опциональна.

   JS API: ui-kit/toast.js
     · GoldjaxeToast.show({ type, title, message, duration, action })
     · GoldjaxeToast.success(msg, opts?) / .error / .warning / .info
     · GoldjaxeToast.close(id)

   Markup структуры (рендерится из JS):
     <div class="toast-container">
       <div class="toast is-success">
         <span class="toast-icon">✓</span>
         <div class="toast-content">
           <div class="toast-title">…</div>
           <div class="toast-msg">…</div>
         </div>
         <button class="toast-action">[ DO ]</button>
         <button class="toast-close">×</button>
       </div>
     </div>
   ════════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  top: 96px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 70;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 48px);
}
@media (max-width: 640px) {
  .toast-container { left: 16px; right: 16px; top: 84px; max-width: none; width: auto; }
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
  animation: goldjaxe-toast-in 220ms ease-out;
  max-height: 200px;
  overflow: hidden;
}
.toast.is-leaving { animation: goldjaxe-toast-out 200ms ease-in forwards; }

/* Variants · left border + icon color */
.toast.is-success { border-left-color: #22C55E; }
.toast.is-error   { border-left-color: #EF4444; }
.toast.is-warning { border-left-color: #EBC554; }
.toast.is-info    { border-left-color: #4573A1; }

.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  margin-top: 1px;
}
.toast.is-success .toast-icon { color: #22C55E; }
.toast.is-error   .toast-icon { color: #EF4444; }
.toast.is-warning .toast-icon { color: #EBC554; }
.toast.is-info    .toast-icon { color: #4573A1; }

.toast-content {
  flex: 1;
  min-width: 0;
}
.toast-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.toast-msg {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
.toast-msg strong { color: var(--text-primary); font-weight: 700; }

.toast-action {
  flex-shrink: 0;
  align-self: center;
  margin-left: 4px;
  min-width: 110px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.toast-action:hover { border-color: var(--accent-amber); color: var(--accent-amber); }

.toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  align-self: flex-start;
  margin-left: 2px;
  margin-top: -2px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast-close:hover { color: var(--text-primary); }
.toast-close:focus-visible {
  outline: 1px solid rgba(255,255,255,0.55);
  outline-offset: 2px;
}

@keyframes goldjaxe-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes goldjaxe-toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 200px;
    margin-bottom: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  to {
    opacity: 0;
    transform: translateX(20px);
    max-height: 0;
    margin-bottom: -10px; /* compensate for gap on leaving */
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none !important; }
  .toast.is-leaving { animation: none !important; opacity: 0; }
}

/* Light theme overrides */
[data-theme="light"] .toast {
  background: #FAFAF7 !important;
  border-color: rgba(26,26,26,0.16) !important;
  color: #0A0A0A !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10) !important;
}
[data-theme="light"] .toast.is-success { border-left-color: #15803D !important; }
[data-theme="light"] .toast.is-error   { border-left-color: #B91C1C !important; }
[data-theme="light"] .toast.is-warning { border-left-color: #7A6614 !important; }
[data-theme="light"] .toast.is-info    { border-left-color: #2C5282 !important; }
[data-theme="light"] .toast.is-success .toast-icon { color: #15803D !important; }
[data-theme="light"] .toast.is-error   .toast-icon { color: #B91C1C !important; }
[data-theme="light"] .toast.is-warning .toast-icon { color: #7A6614 !important; }
[data-theme="light"] .toast.is-info    .toast-icon { color: #2C5282 !important; }
[data-theme="light"] .toast-title { color: #0A0A0A !important; }
[data-theme="light"] .toast-msg { color: rgba(10,10,10,0.65) !important; }
[data-theme="light"] .toast-msg strong { color: #0A0A0A !important; }
[data-theme="light"] .toast-action {
  border-color: rgba(26,26,26,0.20) !important;
  color: #0A0A0A !important;
}
[data-theme="light"] .toast-action:hover {
  border-color: #7A6614 !important;
  color: #7A6614 !important;
}
[data-theme="light"] .toast-close { color: rgba(10,10,10,0.55) !important; }
[data-theme="light"] .toast-close:hover { color: #0A0A0A !important; }

/* === END · V4.2.3 TOAST SYSTEM === */


/* ════════════════════════════════════════════════════════════════
   🆕 V4.2.4 · 2026-05-04 · ATOMIC ELEMENTS · checkbox/radio/toggle/avatar/tooltip
   ════════════════════════════════════════════════════════════════
   Базовые элементы которых не хватало в master CSS. Единый визуальный
   язык: amber (#EBC554) для checked-states, neutral border для unchecked.

   Markup примеры:
     <label class="form-check">
       <input type="checkbox" class="form-check-input" />
       <span class="form-check-mark"></span>
       <span class="form-check-text">Согласен с условиями</span>
     </label>

     <label class="form-radio">
       <input type="radio" name="tier" class="form-check-input" />
       <span class="form-radio-mark"></span>
       <span class="form-check-text">L2 · AI-Architect</span>
     </label>

     <label class="form-toggle">
       <input type="checkbox" class="form-toggle-input" />
       <span class="form-toggle-slider"></span>
       <span class="form-check-text">Email-уведомления</span>
     </label>

     <div class="avatar avatar-md">С</div>
     <img class="avatar avatar-lg" src="..." alt="..." />
     <div class="avatar avatar-md is-online" style="--av-color: #C44DFF;">К</div>

     <button class="has-tooltip" data-tooltip="Подсказка" data-tooltip-pos="top">?</button>
   ════════════════════════════════════════════════════════════════ */

/* ─── CHECKBOX ─── */
.form-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  user-select: none;
}
.form-check-input,
.form-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-check-mark,
.form-radio-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #525252;
  background: transparent;
  position: relative;
  transition: border-color 180ms ease, background 180ms ease;
  margin-top: 2px;
}
.form-check-mark { /* square */ }
.form-radio-mark { border-radius: 50%; }

.form-check-input:focus-visible + .form-check-mark,
.form-check-input:focus-visible + .form-radio-mark {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.30);
}
.form-check:hover .form-check-mark,
.form-check:hover .form-radio-mark { border-color: rgba(235,197,84,0.50); }

.form-check-input:checked + .form-check-mark {
  border-color: var(--accent-amber, #EBC554);
  background: var(--accent-amber, #EBC554);
}
.form-check-input:checked + .form-check-mark::after {
  content: '';
  position: absolute;
  top: 2px; left: 6px;
  width: 6px; height: 11px;
  border: solid var(--bg-secondary, #080808);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-check-input:checked + .form-radio-mark {
  border-color: var(--accent-amber, #EBC554);
}
.form-check-input:checked + .form-radio-mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent-amber, #EBC554);
}

.form-check-input:disabled + .form-check-mark,
.form-check-input:disabled + .form-radio-mark {
  opacity: 0.40;
  cursor: not-allowed;
}
.form-check-input:disabled ~ .form-check-text { opacity: 0.55; cursor: not-allowed; }

.form-check-text { flex: 1; }
.form-check-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
/* Сумма / цена внутри small — амбер выделение */
.form-check-text small b,
.form-check-text small strong {
  color: var(--accent-amber, #EBC554);
  font-weight: 700;
}
/* Светлая тема — deep bronze */
[data-theme="light"] .form-check-text small b,
[data-theme="light"] .form-check-text small strong {
  color: #7A6614 !important;
}

/* ─── RADIO ─── (использует form-check + form-radio-mark) */
.form-radio { /* alias для clarity */
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  user-select: none;
}

/* ─── TOGGLE / SWITCH ─── */
.form-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  user-select: none;
}
.form-toggle-slider {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  background: rgba(255,255,255,0.10);
  border: 1px solid #525252;
  transition: background 200ms ease, border-color 200ms ease;
  border-radius: 999px;
}
.form-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--text-primary);
  transition: transform 200ms ease, background 200ms ease;
  border-radius: 50%;
}
.form-toggle:hover .form-toggle-slider { border-color: rgba(235,197,84,0.50); }

.form-toggle-input:checked + .form-toggle-slider {
  background: var(--accent-amber, #EBC554);
  border-color: var(--accent-amber, #EBC554);
}
.form-toggle-input:checked + .form-toggle-slider::after {
  transform: translateX(18px);
  background: var(--bg-secondary, #080808);
}
.form-toggle-input:focus-visible + .form-toggle-slider {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.30);
}
.form-toggle-input:disabled + .form-toggle-slider { opacity: 0.40; cursor: not-allowed; }

/* ─── AVATAR ─── */
.avatar {
  --av-color: #EBC554;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--av-color);
  color: var(--av-color);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
img.avatar { object-fit: cover; }
.avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 80px; height: 80px; font-size: 24px; }

/* Online dot (опционально) */
.avatar.is-online::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 30%; height: 30%;
  background: #22C55E;
  border: 2px solid var(--bg-secondary, #080808);
  border-radius: 50%;
  z-index: 1;
}
.avatar.is-square { border-radius: 0; }

/* Avatar group · stacked overlap */
.avatar-group {
  display: inline-flex;
  flex-direction: row;
  isolation: isolate;
}
.avatar-group > .avatar {
  margin-left: -8px;
  z-index: 1;
  outline: 2px solid var(--bg-secondary, #080808);
}
.avatar-group > .avatar:first-child { margin-left: 0; }
.avatar-group.is-tight > .avatar { margin-left: -12px; }

/* ─── TOOLTIP ─── (pure CSS на :hover/:focus-visible через data-attr) */
.has-tooltip {
  position: relative;
}
.has-tooltip[data-tooltip]::before,
.has-tooltip[data-tooltip]::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 80;
}
.has-tooltip[data-tooltip]::before {
  content: attr(data-tooltip);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: #181818;
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  white-space: nowrap;
  max-width: 280px;
  line-height: 1.3;
}
.has-tooltip[data-tooltip]::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #181818;
  border: 1px solid var(--border-default);
  transform: rotate(45deg);
}

/* Position: top (default) */
.has-tooltip[data-tooltip]::before,
.has-tooltip[data-tooltip-pos="top"][data-tooltip]::before {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 4px);
}
.has-tooltip[data-tooltip]::after,
.has-tooltip[data-tooltip-pos="top"][data-tooltip]::after {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px) rotate(45deg);
  border-top: none;
  border-left: none;
}
/* Bottom */
.has-tooltip[data-tooltip-pos="bottom"][data-tooltip]::before {
  top: calc(100% + 10px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -4px);
}
.has-tooltip[data-tooltip-pos="bottom"][data-tooltip]::after {
  top: calc(100% + 6px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -4px) rotate(45deg);
  border-top: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
  border-bottom: none;
  border-right: none;
}
/* Right */
.has-tooltip[data-tooltip-pos="right"][data-tooltip]::before {
  left: calc(100% + 10px);
  bottom: auto;
  top: 50%;
  transform: translate(-4px, -50%);
}
.has-tooltip[data-tooltip-pos="right"][data-tooltip]::after {
  left: calc(100% + 6px);
  bottom: auto;
  top: 50%;
  transform: translate(-4px, -50%) rotate(45deg);
  border-top: none;
  border-right: none;
  border-bottom: 1px solid var(--border-default);
  border-left: 1px solid var(--border-default);
}
/* Left */
.has-tooltip[data-tooltip-pos="left"][data-tooltip]::before {
  right: calc(100% + 10px);
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translate(4px, -50%);
}
.has-tooltip[data-tooltip-pos="left"][data-tooltip]::after {
  right: calc(100% + 6px);
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translate(4px, -50%) rotate(45deg);
  border-top: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  border-bottom: none;
  border-left: none;
}

/* Show on hover/focus · с delay 300ms (показ) и 0 (скрытие) */
.has-tooltip[data-tooltip]:hover::before,
.has-tooltip[data-tooltip]:hover::after,
.has-tooltip[data-tooltip]:focus-visible::before,
.has-tooltip[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) /* реset для top default */;
  transition-delay: 300ms;
}
/* Per-position transform после показа */
.has-tooltip[data-tooltip-pos="top"][data-tooltip]:hover::before,
.has-tooltip[data-tooltip-pos="top"][data-tooltip]:focus-visible::before { transform: translate(-50%, 0); }
.has-tooltip[data-tooltip-pos="top"][data-tooltip]:hover::after,
.has-tooltip[data-tooltip-pos="top"][data-tooltip]:focus-visible::after { transform: translate(-50%, 0) rotate(45deg); }
.has-tooltip[data-tooltip-pos="bottom"][data-tooltip]:hover::before,
.has-tooltip[data-tooltip-pos="bottom"][data-tooltip]:focus-visible::before { transform: translate(-50%, 0); }
.has-tooltip[data-tooltip-pos="bottom"][data-tooltip]:hover::after,
.has-tooltip[data-tooltip-pos="bottom"][data-tooltip]:focus-visible::after { transform: translate(-50%, 0) rotate(45deg); }
.has-tooltip[data-tooltip-pos="right"][data-tooltip]:hover::before,
.has-tooltip[data-tooltip-pos="right"][data-tooltip]:focus-visible::before { transform: translate(0, -50%); }
.has-tooltip[data-tooltip-pos="right"][data-tooltip]:hover::after,
.has-tooltip[data-tooltip-pos="right"][data-tooltip]:focus-visible::after { transform: translate(0, -50%) rotate(45deg); }
.has-tooltip[data-tooltip-pos="left"][data-tooltip]:hover::before,
.has-tooltip[data-tooltip-pos="left"][data-tooltip]:focus-visible::before { transform: translate(0, -50%); }
.has-tooltip[data-tooltip-pos="left"][data-tooltip]:hover::after,
.has-tooltip[data-tooltip-pos="left"][data-tooltip]:focus-visible::after { transform: translate(0, -50%) rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .has-tooltip[data-tooltip]::before,
  .has-tooltip[data-tooltip]::after { transition: opacity 0ms !important; transition-delay: 0ms !important; }
}

/* Light overrides для всех atomic элементов */
[data-theme="light"] .form-check-mark,
[data-theme="light"] .form-radio-mark {
  border-color: rgba(26,26,26,0.30) !important;
  background: var(--bg-primary, #FAFAF7) !important;
}
[data-theme="light"] .form-check:hover .form-check-mark,
[data-theme="light"] .form-check:hover .form-radio-mark,
[data-theme="light"] .form-toggle:hover .form-toggle-slider { border-color: rgba(122,102,20,0.50) !important; }
[data-theme="light"] .form-check-input:checked + .form-check-mark {
  border-color: #7A6614 !important;
  background: #7A6614 !important;
}
[data-theme="light"] .form-check-input:checked + .form-check-mark::after { border-color: #FAFAF7 !important; }
[data-theme="light"] .form-check-input:checked + .form-radio-mark { border-color: #7A6614 !important; }
[data-theme="light"] .form-check-input:checked + .form-radio-mark::after { background: #7A6614 !important; }
[data-theme="light"] .form-toggle-slider {
  background: rgba(26,26,26,0.10) !important;
  border-color: rgba(26,26,26,0.30) !important;
}
[data-theme="light"] .form-toggle-slider::after { background: #0A0A0A !important; }
[data-theme="light"] .form-toggle-input:checked + .form-toggle-slider {
  background: #7A6614 !important;
  border-color: #7A6614 !important;
}
[data-theme="light"] .form-toggle-input:checked + .form-toggle-slider::after { background: #FAFAF7 !important; }
[data-theme="light"] .avatar { background: rgba(26,26,26,0.05) !important; }
[data-theme="light"] .avatar-group > .avatar { outline-color: var(--bg-secondary, #FAFAF7) !important; }
[data-theme="light"] .avatar.is-online::after { border-color: var(--bg-secondary, #FAFAF7) !important; }
[data-theme="light"] .has-tooltip[data-tooltip]::before {
  background: #FAFAF7 !important;
  border-color: rgba(26,26,26,0.16) !important;
  color: #0A0A0A !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
[data-theme="light"] .has-tooltip[data-tooltip]::after {
  background: #FAFAF7 !important;
  border-color: rgba(26,26,26,0.16) !important;
}

/* === END · V4.2.4 ATOMIC ELEMENTS === */


/* ════════════════════════════════════════════════════════════════
   🔒 V4 ADDITIONS · canonical 2026-05-04 (CEO утвердил design-system железобетонизация)
   ════════════════════════════════════════════════════════════════
   Patterns которые ранее жили локально на 8-16 экранах. Канонизированы
   для устранения local drift. Используется через class names ниже —
   не дублируй их локально, импорт из master.

   Добавлено:
   • .breadcrumb / .breadcrumb-sep — для admin/academy навигационных хлебных крошек
   • .role-badge / .role-root / .role-ops — admin sidebar role indicator
   • .tier-pill / .tier-pill-l0/-l1/-l2/-l3/-l4 — tier indicators (продукт пирамида)
   • .btn-ai-success (green CTA · L0 Free) / .btn-ai-vip (purple CTA · L3 VIP)
   • .tabs / .tab / .tab-action — секционная навигация в product pages
   • .auth-dashboard-container.is-with-sidebar — admin/billing sidebar layout (см. note)
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb · admin/academy навигационные хлебные крошки */
/* breadcrumb · v4.1 11→12px (nav element — non-chip) */
.breadcrumb { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 200ms ease; }
.breadcrumb a:hover { color: var(--accent-amber); }
.breadcrumb b, .breadcrumb strong { color: var(--text-primary); font-weight: 700; }
.breadcrumb-current { color: var(--accent-amber); }
.breadcrumb-sep { color: var(--text-faint); margin: 0 2px; }

/* Role badge · admin sidebar (L5 root/ops/audit indicators) */
/* role-badge · v4.1 10→11px (chip-class minimum 11) */
.role-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.role-badge.role-root { color: var(--accent-amber); border-color: rgba(235,197,84,0.40); background: rgba(235,197,84,0.05); }
.role-badge.role-ops { color: #22C55E; border-color: rgba(34,197,94,0.40); background: rgba(34,197,94,0.05); }
.role-badge.role-audit { color: #4573A1; border-color: rgba(69,115,161,0.40); background: rgba(69,115,161,0.05); }

/* Tier pill · tier indicators (academy onboarding, courses, profile, syndicate) */
/* tier-pill · v4.1 keep 11px (chip-class allowed 11px) */
.tier-pill { display: inline-flex; align-items: center; padding: 3px 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.tier-pill-l0 { border-color: rgba(255,255,255,0.30); color: var(--text-primary); }
.tier-pill-l1 { border-color: rgba(34,197,94,0.50); color: #22C55E; background: rgba(34,197,94,0.05); }
.tier-pill-l2 { border-color: rgba(196,77,255,0.50); color: #C44DFF; background: rgba(196,77,255,0.05); }
.tier-pill-l3 { border-color: rgba(139,0,0,0.70); color: #8B0000; background: rgba(139,0,0,0.05); }
.tier-pill-l4 { border-color: rgba(69,115,161,0.50); color: #4573A1; background: rgba(69,115,161,0.05); }

/* Brand action variants (canonical .btn-action — gold) + tier variants */
.btn-ai-success { padding: 13px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #22C55E; color: #22C55E; background: rgba(34,197,94,0.05); text-decoration: none; transition: all 200ms ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-ai-success:hover { background: #22C55E; color: var(--bg-secondary); box-shadow: 0 0 28px rgba(34,197,94,0.40); }
.btn-ai-vip { padding: 13px 22px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid #C44DFF; color: #C44DFF; background: rgba(196,77,255,0.05); text-decoration: none; transition: all 200ms ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.btn-ai-vip:hover { background: #C44DFF; color: #FFFFFF; box-shadow: 0 0 28px rgba(196,77,255,0.40); }

/* Tabs · секционная навигация (academy/profile, gate-admin/dashboard, syndicate) */
.tabs { display: flex; align-items: center; padding: 0 20px; height: 44px; border-bottom: 1px solid var(--border-faint); gap: 0; }
/* tab · v4.1 11→12px (tabs — non-chip, always visible nav element) */
.tab { padding: 0 16px; height: 44px; display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; transition: all 200ms ease; background: transparent; }
.tab:hover { color: var(--accent-amber); }
.tab.active { color: var(--accent-amber); border-bottom-color: var(--accent-amber); }
/* tab .cnt · v4.1 10→11px (counter chip allowed 11px) */
.tab .cnt { padding: 1px 6px; font-size: 11px; background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.tab.active .cnt { background: rgba(235,197,84,0.15); color: var(--accent-amber); }
.tab .cnt.is-red { background: rgba(239,68,68,0.15); color: #EF4444; }
/* tab-action · v4.1 10→11px (button — non-chip allowed but min 11) */
.tab-action { margin-left: auto; padding: 5px 12px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 0.10em; border: 1px solid var(--border-default); color: var(--text-secondary); cursor: pointer; text-transform: uppercase; background: transparent; }
.tab-action:hover { border-color: var(--accent-amber); color: var(--accent-amber); }
.tab-action.is-primary { border-color: var(--accent-amber); color: var(--accent-amber); }
.tab-action.is-primary:hover { background: var(--accent-amber); color: var(--bg-secondary); }

/* === END · V4 ADDITIONS === */


/*
  ================================================================
  V4.3.1 FAVICON SYSTEM (canonical · 7 directions · CEO REV 2026-05-01)

  Один master cube + 7 CSS-фильтров на 7 сабдоменов холдинга.
  Master glyph не меняется — узнаваемость бренда сохраняется.
  Цветовая температура (через filter) даёт мгновенную ассоциацию
  с какого сайта пользователь — даже на 16×16 favicon в табе.

  3 направления:
   - GOLD     · luxury / personal brand → .com
   - SILVER   · vault / enterprise      → .org
   - CYAN     · innovations / AI        → .ai
  4 secondary привязаны к одному из 3 направлений:
   - .academy   → GOLD family (warm gold, academic)
   - .syndicate → GOLD family (deep gold + green undertone)
   - .gate      → SILVER family (dark iron grey, internal)
   - .link      → CYAN family (light cyan, social entry)

  Где использовать:
   - В DOM (в HTML на странице) для интерактивных элементов / preview
   - В production browser tab — пре-рендерить master cube с тем же фильтром
     через Chrome headless screenshot → PNG-файлы favicon-{slug}-{size}.png
     (browser применяет filter только к DOM-img, к <link rel=icon> нет)

  Подробности: brand-system-v1/favicons/README.md + ui-kit-v4.2.md раздел 24
  ================================================================
*/

/* GOLD direction (.com luxury) — light gold tint with purple undertone */
.fav-com {
  filter:
    hue-rotate(-6deg)
    saturate(0.95)
    brightness(1.08)
    drop-shadow(0 0 24px rgba(248,240,128,0.45));
}

/* SILVER/PLATINUM direction (.org enterprise vault) — desaturate to platinum */
.fav-org {
  filter:
    saturate(0.05)
    brightness(1.30)
    contrast(1.10)
    drop-shadow(0 0 24px rgba(220,224,230,0.45));
}

/* NEON CYAN direction (.ai innovations) — hue-rotate to cyan + double-glow */
.fav-ai {
  filter:
    hue-rotate(155deg)
    saturate(1.25)
    brightness(1.05)
    drop-shadow(0 0 26px rgba(0,240,255,0.55))
    drop-shadow(0 0 52px rgba(0,240,255,0.20));
}

/* SECONDARY · academy → GOLD family (warm gold, academic) */
.fav-academy {
  filter:
    hue-rotate(-3deg)
    saturate(0.9)
    brightness(0.95)
    drop-shadow(0 0 18px rgba(235,197,84,0.32));
}

/* SECONDARY · syndicate → GOLD family (deep gold + green undertone, closed) */
.fav-syndicate {
  filter:
    hue-rotate(15deg)
    saturate(0.85)
    brightness(0.85)
    contrast(1.1)
    drop-shadow(0 0 18px rgba(34,197,94,0.20));
}

/* SECONDARY · gate → SILVER family (dark iron grey, internal admin) */
.fav-gate {
  filter:
    saturate(0.15)
    brightness(0.75)
    contrast(1.05)
    drop-shadow(0 0 14px rgba(176,181,188,0.30));
}

/* SECONDARY · link → CYAN family (light cyan, social entry / linkstack) */
.fav-link {
  filter:
    hue-rotate(120deg)
    saturate(0.85)
    brightness(1.10)
    drop-shadow(0 0 20px rgba(0,240,255,0.30));
}

/* SECONDARY · blog → GREEN terminal (#22C55E, goldjaxe.ai/blog — машинное отделение, live-канал) */
.fav-blog {
  filter:
    hue-rotate(95deg)
    saturate(0.9)
    brightness(0.92)
    drop-shadow(0 0 18px rgba(34,197,94,0.35));
}

/* === END · V4.3.1 FAVICON SYSTEM === */


/* ============================================================
   v4.4.8 · ACADEMY ADMIN SIDEBAR + FORM THEME PILL
   ============================================================
   Canonical для admin-страниц академии (управление аккаунтом).

   Применяется к:
     OK academy/settings.html  (настройки аккаунта)
     OK academy/billing.html   (платежи и история)

   НЕ применяется к (у них свой sidebar по своему назначению):
     NO academy/dashboard.html      — учебный экран
     NO academy/lesson-viewer.html  — просмотр урока
     NO academy/profile.html        — accordion (без sidebar)
     NO gate-admin/*                — admin OPS Deck (V6 другой паттерн)

   Утверждено CEO 2026-05-05 (День 15 retry · Path A Этап 3).
   Источник эталона: ecosystem-prototype/academy/_preview-interface-v448.html
   ============================================================ */

/* SIDEBAR · admin layout (240px sticky aside + main content) */
.eco-sidebar-group {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 0 12px 8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 6px;
  margin-top: 24px;
}
.eco-sidebar-group:first-child { margin-top: 0; }

.eco-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 150ms ease;
}
.eco-sidebar-link svg {
  width: 16px;
  height: 16px;
  opacity: 0.55;
  flex-shrink: 0;
  stroke-width: 1.75;
}
.eco-sidebar-link:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}
.eco-sidebar-link:hover svg { opacity: 0.85; }
.eco-sidebar-link.is-active,
.eco-sidebar-link.active {
  color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.10);
  font-weight: 600;
}
.eco-sidebar-link.is-active svg,
.eco-sidebar-link.active svg {
  opacity: 1;
  color: var(--accent-amber);
}

/* FORM THEME PILL · 88×36 (matches .eco-lang-switcher)
   ВНИМАНИЕ: только для форм/настроек на center page.
   В хедере остаётся .eco-theme-btn (одна кнопка) — НЕ ПУТАТЬ.
   Эта pill ставится в полях типа «Тема» в секции Интерфейс. */
.eco-theme-pill {
  display: inline-flex;
  height: 36px;
  border: 1px solid var(--border-default);
}
.eco-theme-pill button {
  width: 42px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.eco-theme-pill button.is-active,
.eco-theme-pill button.active {
  background: var(--accent-amber);
  color: var(--bg-secondary);
}
.eco-theme-pill button:not(.is-active):not(.active):hover {
  color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.05);
}
.eco-theme-pill svg { width: 15px; height: 15px; }

/* Light theme overrides */
[data-theme="light"] .eco-sidebar-link:hover {
  background: rgba(0,0,0,0.04);
}

/* === END · V4.4.8 ACADEMY ADMIN SIDEBAR + FORM THEME PILL === */

/* ============================================================================
   === V4.68.0 PASPART · canonical drill-down panel · pt-pp-* namespace ===
   ============================================================================
   Унифицированный паттерн `detail-panel-extended` для всех видов пульта холдинга.
   Применённые случаи: Карта (canonical) · Plan v4.66.7 (через pn-detail-* alias) ·
   Пульс v4.67.0 · Хроника v4.67.1.

   Источник: extract из blueprint/live/index.html paspart canonical (Карта эталон).
   После v4.68.0 — единый source of truth для всех paspart экосистемы.
   Локальные дубликаты pt-pp-* в pulse/live-board/live удалены — теперь они
   наследуют tokens из master CSS.

   HTML-структура paspart (8 секций · применять одинаково везде):

   <aside class="...-detail">
     <div class="pt-pp-head">
       <div class="pt-pp-eyebrow">
         <span class="pt-pp-eyebrow-tag">EYEBROW · X/N</span>
         <button class="pt-pp-eyebrow-close">×</button>
       </div>
       <div class="pt-pp-nav">← X из N →</div>          // prev/next (опц.)
       <div class="pt-pp-title">Title</div>
       <div class="pt-pp-tags">
         <span class="pt-pp-chip"><span class="pt-pp-chip-dot"></span>TYPE</span>
         <span class="pt-pp-chip is-active|is-risk|is-planned|is-pre|is-stale">STATUS</span>
       </div>
     </div>
     <div class="pt-pp-section">
       <div class="pt-pp-sec-title">Label<span class="pt-pp-sec-count">N</span></div>
       <div class="pt-pp-text">...</div>                  // или text.is-quote
       <div class="pt-pp-kv">...</div>                    // KV-pairs
       <div class="pt-pp-list">
         <a class="pt-pp-item">item</a>
       </div>
     </div>
     <div class="pt-pp-section">
       <div class="pt-pp-crosslinks">
         <a class="pt-pp-xlink">
           <span class="pt-pp-xlink-icon">SVG</span>
           <span>Label</span>
         </a>
       </div>
     </div>
   </aside>
   ============================================================================ */

.pt-pp-head {
  position: sticky; top: 0; z-index: 3;
  padding: 16px 18px 14px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-faint);
}
.pt-pp-eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 9px;
}
.pt-pp-eyebrow-tag {
  /* v4.90.0 Cinematic Scale: 9 → --pult-label-fs 11px */
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: var(--pult-label-fs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-amber);
  border: 1px solid rgba(var(--accent-amber-rgb), 0.45);
  background: rgba(var(--accent-amber-rgb), 0.10);
  padding: 4px 9px;
}
.pt-pp-eyebrow-close {
  margin-left: auto;
  background: transparent; border: 1px solid var(--border-default);
  color: var(--text-muted); font-size: 14px; cursor: pointer;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  transition: color 160ms ease, border-color 160ms ease;
}
.pt-pp-eyebrow-close:hover { color: var(--accent-amber); border-color: var(--accent-amber); }

.pt-pp-nav {
  /* v4.90.0 Cinematic Scale: 10 → --pult-meta-fs 12.5px */
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: var(--pult-meta-fs);
  letter-spacing: 0.05em; color: var(--text-faint);
}
.pt-pp-nav-btn {
  width: 26px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  cursor: pointer; font-size: 13px;
  text-decoration: none;
  transition: all 140ms ease;
}
.pt-pp-nav-btn:hover:not(.is-disabled) { color: var(--accent-amber); border-color: var(--accent-amber); }
.pt-pp-nav-btn.is-disabled { opacity: 0.3; cursor: not-allowed; }
.pt-pp-nav-counter { color: var(--text-muted); }

.pt-pp-title {
  /* v4.90.0 Cinematic Scale: 19 → --pult-headline-fs 22px (premium WOW) */
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: var(--pult-headline-fs);
  line-height: var(--pult-headline-lh);
  color: var(--text-primary);
  margin-bottom: 11px;
  word-break: break-word;
}

.pt-pp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pt-pp-chip {
  /* v4.90.0 Cinematic Scale: 9 → --pult-label-fs 11px */
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: var(--pult-label-fs);
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.pt-pp-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pt-pp-chip.is-active  { color: var(--accent-green, #22c55e); border-color: rgba(34,197,94,0.40); background: rgba(34,197,94,0.08); }
.pt-pp-chip.is-risk    { color: var(--accent-error, #e25555); border-color: rgba(239,68,68,0.42); background: rgba(239,68,68,0.09); }
.pt-pp-chip.is-planned { color: var(--text-faint); }
.pt-pp-chip.is-pre     { color: var(--accent-amber); border-color: rgba(var(--accent-amber-rgb), 0.40); background: rgba(var(--accent-amber-rgb), 0.08); }
.pt-pp-chip.is-stale   { color: var(--accent-error, #e25555); border-color: rgba(239,68,68,0.40); background: rgba(239,68,68,0.08); }

/* ── И12 · кликабельные чипы паспорта · список одноклассников (v4.89.0 · 2026-05-27) ──
 * CEO mandate 27.05: чипы (слой / тип / статус) кликабельные → раскрывают
 * список других узлов того же слоя/типа/статуса под чипами. Клик на узел = переход.
 * Вариант B (CEO выбрал) — не ломает контекст графа, добавляет «список одноклассников»
 * как новый информационный слой паспорта. Backwards-compatible: чипы без .is-clickable
 * остаются статичными (как было до v4.89.0).
 */
.pt-pp-chip.is-clickable {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.pt-pp-chip.is-clickable:hover {
  border-color: rgba(var(--accent-amber-rgb), 0.50);
  background: rgba(var(--accent-amber-rgb), 0.06);
  color: var(--accent-amber);
}
.pt-pp-chip.is-clickable.is-expanded {
  border-color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.14);
  color: var(--accent-amber);
}
/* status chips (is-active/is-risk/is-pre/is-stale) preserve свой semantic цвет при expanded —
 * меняем только border на solid (visual cue что развёрнут), background не трогаем. */
.pt-pp-chip.is-clickable.is-expanded.is-active { border-color: var(--accent-green, #22c55e); background: rgba(34,197,94,0.18); }
.pt-pp-chip.is-clickable.is-expanded.is-risk   { border-color: var(--accent-error, #e25555); background: rgba(239,68,68,0.18); }
.pt-pp-chip.is-clickable.is-expanded.is-pre    { border-color: var(--accent-amber); background: rgba(var(--accent-amber-rgb), 0.18); }
.pt-pp-chip.is-clickable.is-expanded.is-planned { border-color: var(--text-muted); background: rgba(255,255,255,0.06); color: var(--text-muted); }

.pt-pp-chip-peers {
  flex-basis: 100%;  /* full-width row через flex-wrap родителя pt-pp-tags */
  margin-top: 9px;
  padding: 11px 13px 9px;
  background: var(--bg-primary);
  border: 1px solid var(--border-faint);
  max-height: 240px;
  overflow-y: auto;
}
.pt-pp-chip-peers::-webkit-scrollbar { width: 8px; }
.pt-pp-chip-peers::-webkit-scrollbar-thumb { background: var(--border-default); }
.pt-pp-chip-peers-head {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 9.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-faint);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.pt-pp-chip-peers-head-name { color: var(--accent-amber); font-weight: 700; }
.pt-pp-chip-peers-head-count { color: var(--text-secondary); font-weight: 400; }
.pt-pp-chip-peer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  font-size: 12px; line-height: 1.4;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 160ms ease;
  user-select: none;
}
.pt-pp-chip-peer-row:hover {
  color: var(--accent-amber);
}
.pt-pp-chip-peer-row + .pt-pp-chip-peer-row {
  border-top: 1px solid var(--border-faint);
}
.pt-pp-chip-peer-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
}
.pt-pp-chip-peer-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-pp-chip-peer-empty {
  font-style: italic;
  color: var(--text-faint);
  font-size: 11px;
  padding: 4px 0;
}

.pt-pp-section {
  /* v4.90.0 Cinematic Scale: generous breathing space 15→18 / 18→20 */
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-faint);
}
.pt-pp-section:last-child { border-bottom: none; }
.pt-pp-sec-title {
  /* v4.90.0 Cinematic Scale: 10 → --pult-meta-fs 12.5px */
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: var(--pult-meta-fs);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--accent-amber);
  margin-bottom: 13px;
  display: flex; align-items: center; gap: 8px;
}
.pt-pp-sec-title .pt-pp-sec-count {
  /* v4.90.0 Cinematic Scale: 9 → 10.5 */
  font-size: var(--pult-tiny-fs); color: var(--text-faint);
  letter-spacing: 0.06em;
}

.pt-pp-text {
  /* v4.90.0 Cinematic Scale: 13 → --pult-body-fs 14.5px */
  font-size: var(--pult-body-fs);
  line-height: var(--pult-body-lh);
  color: var(--text-secondary);
}
.pt-pp-text.is-quote {
  padding-left: 11px;
  border-left: 2px solid rgba(var(--accent-amber-rgb), 0.40);
  color: var(--text-muted);
}

/* essence summary + responsibility (Карта-specific, в paspart узлов архитектуры) */
.pt-pp-essence-summary {
  /* v4.90.0 Cinematic Scale: 13 → --pult-body-fs 14.5px */
  font-size: var(--pult-body-fs);
  line-height: var(--pult-body-lh);
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.pt-pp-essence-resp {
  /* v4.90.0 Cinematic Scale: 12 → --pult-body-sub-fs 13.5px */
  font-size: var(--pult-body-sub-fs);
  line-height: var(--pult-body-lh);
  color: var(--text-muted);
  padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-amber-rgb), 0.40);
}
.pt-pp-essence-resp b {
  /* v4.90.0 Cinematic Scale: 9 → --pult-label-fs 11px */
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: var(--pult-label-fs);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-faint);
  display: block; margin-bottom: 4px;
}

/* repo link (Карта · И8 GOL-88) */
.pt-pp-repo {
  /* v4.90.0 Cinematic Scale: 11.5 → --pult-meta-fs 12.5px */
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--pult-meta-fs); line-height: 1.5;
  color: var(--accent-amber);
  text-decoration: none;
  word-break: break-all;
}
a.pt-pp-repo:hover { text-decoration: underline; }
.pt-pp-repo.is-none {
  color: var(--text-faint);
  font-size: var(--pult-meta-fs);
  word-break: normal;
}

/* drill-down accordion (Карта · И9b/И11) */
.pt-pp-drill-toggle {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 0; margin: 0;
  background: none; border: none; cursor: pointer; text-align: left;
}
.pt-pp-drill-caret {
  font-size: 10px; color: var(--text-secondary);
  transition: transform 0.18s ease;
}
.pt-pp-drill.is-open .pt-pp-drill-caret { transform: rotate(90deg); }
.pt-pp-drill-body { display: none; margin-top: 11px; }
.pt-pp-drill.is-open .pt-pp-drill-body { display: block; }
.pt-pp-drill-summary {
  /* v4.90.0 Cinematic Scale: 9.5 → --pult-label-fs 11px */
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--pult-label-fs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 11px;
}
.pt-pp-host {
  padding: 10px 0; border-bottom: 1px solid var(--border-faint);
}
.pt-pp-host:last-of-type { border-bottom: none; padding-bottom: 0; }
.pt-pp-host-name {
  /* v4.90.0 Cinematic Scale: 12.5 → --pult-card-sub-title-fs 15px (sub-card heading) */
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: var(--pult-card-sub-title-fs); color: var(--text-primary);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pt-pp-host-role {
  /* v4.90.0 Cinematic Scale: 8 → --pult-label-fs 11px (floor) */
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: var(--pult-label-fs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}
.pt-pp-host-spec {
  /* v4.90.0 Cinematic Scale: 10.5 → --pult-meta-fs 12.5px */
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--pult-meta-fs); line-height: 1.5; color: var(--text-secondary);
  margin-top: 4px;
}
.pt-pp-host-note {
  /* v4.90.0 Cinematic Scale: 11 → --pult-body-sub-fs 13.5px */
  font-size: var(--pult-body-sub-fs); line-height: 1.5; color: var(--text-muted);
  margin-top: 3px;
}
.pt-pp-drill-net {
  /* v4.90.0 Cinematic Scale: 11 → --pult-body-sub-fs 13.5px */
  font-size: var(--pult-body-sub-fs); line-height: var(--pult-body-lh); color: var(--text-muted);
  margin-top: 12px; padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-amber-rgb), 0.40);
}
.pt-pp-drill-net b {
  /* v4.90.0 Cinematic Scale: 9 → --pult-label-fs 11px */
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: var(--pult-label-fs); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-faint); display: block; margin-bottom: 4px;
}
.pt-pp-drill-foot {
  /* v4.90.0 Cinematic Scale: 10.5 → --pult-meta-fs 12.5px */
  font-size: var(--pult-meta-fs); line-height: 1.5; color: var(--text-faint);
  margin-top: 11px;
}

/* KV-pairs (Реквизиты / Деплой / Связано / Движение) */
.pt-pp-kv {
  /* v4.90.0 Cinematic Scale: generous breathing 6→8px vertical */
  display: grid; grid-template-columns: 110px 1fr;
  gap: 3px 12px; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-faint);
}
.pt-pp-kv:last-of-type { border-bottom: none; padding-bottom: 0; }
.pt-pp-kv-k {
  /* v4.90.0 Cinematic Scale: 9 → --pult-label-fs 11px (floor) */
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: var(--pult-label-fs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}
.pt-pp-kv-v {
  /* v4.90.0 Cinematic Scale: 12 → --pult-body-sub-fs 13.5px */
  font-size: var(--pult-body-sub-fs); color: var(--text-secondary); word-break: break-word;
  line-height: 1.5;
}

/* list items (инициативы / задачи / коммиты) */
.pt-pp-list { display: grid; gap: 6px; }
.pt-pp-item {
  /* v4.90.0 Cinematic Scale: 12 → --pult-body-sub-fs 13.5px + generous padding */
  display: block;
  padding: 10px 13px;
  background: var(--bg-primary);
  border: 1px solid var(--border-faint);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--pult-body-sub-fs); line-height: 1.45;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
a.pt-pp-item:hover {
  border-color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.06);
  transform: translateY(-1px);
}
.pt-pp-item-title { color: var(--text-primary); word-break: break-word; }
.pt-pp-item-meta {
  /* v4.90.0 Cinematic Scale: 9.5 → --pult-label-fs 11px */
  /* v4.90.1 fix: word-break:break-all разрывал slug «channel-vision-job-exchange» в середине слова.
     overflow-wrap:anywhere breaks ТОЛЬКО когда overflow неизбежен, на word boundaries сначала. */
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: var(--pult-label-fs);
  color: var(--text-faint); letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  word-break: normal;
}
.pt-pp-item-sha {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  color: var(--accent-amber);
}

/* Cross-link footer (4 SVG icons → План/Карта/Хроника/Пульс/Wiki/Git) */
.pt-pp-crosslinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.pt-pp-xlink {
  /* v4.90.0 Cinematic Scale: 8.5 → 10.5px + generous padding 9→11 */
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 5px;
  background: var(--bg-primary);
  border: 1px solid var(--border-faint);
  color: var(--text-secondary);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: var(--pult-tiny-fs);
  letter-spacing: 0.05em; text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}
.pt-pp-xlink-icon { width: 18px; height: 18px; flex-shrink: 0; }
.pt-pp-xlink-icon svg { display: block; width: 100%; height: 100%; }
.pt-pp-xlink:hover {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.08);
  transform: translateY(-1px);
}
.pt-pp-xlink.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* === END · V4.68.0 PASPART CANONICAL · pt-pp-* namespace === */