/* ============================================================================
   BingX Theme — fintech-grade design foundation (Wave-1, palette v2)
   Single source-of-truth design system. Pure CSS custom-properties + utility
   classes. No JS. Existing pages adopt these tokens in Wave-2.

   Reference: BingX.com — expensive crypto-exchange aesthetic. Sharp 2-4px
   corners, mono numerals, near-black background, accent ELECTRIC BLUE CTA.
   Green/red stay reserved for price signals (--bx-up / --bx-down).
   ============================================================================ */

:root {
  /* BingX brand palette — dark theme (default) */
  --bx-bg:            #0B0D0F;   /* near-black, not pure */
  --bx-bg-elev-1:    #14171A;
  --bx-bg-elev-2:    #1C2024;
  --bx-bg-input:     #1A1D21;
  --bx-border:       #2A2F35;
  --bx-border-strong:#3D434B;

  --bx-text:         #E8EAED;
  --bx-text-muted:   #9AA4B0;
  --bx-text-dim:     #5E6772;

  /* BingX brand — primary CTA = electric blue (matches BingX.com Регистрация btn) */
  --bx-accent:       #1F66FF;   /* signature electric blue */
  --bx-accent-hover: #3D7BFF;
  --bx-accent-soft:  rgba(31, 102, 255, 0.10);
  --bx-accent-text:  #FFFFFF;   /* text-on-blue */

  /* Signals — green/red ONLY for price/trade tickers, NOT for CTA */
  --bx-up:           #00C076;   /* desaturated trading green */
  --bx-down:         #F44A4A;   /* trading red */
  --bx-warn:         #FFB020;
  --bx-info:         #4DA3FF;

  /* Typography */
  --bx-font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --bx-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Spacing — 4px baseline */
  --bx-s-1: 4px;  --bx-s-2: 8px;  --bx-s-3: 12px;  --bx-s-4: 16px;
  --bx-s-5: 24px; --bx-s-6: 32px; --bx-s-7: 48px;  --bx-s-8: 64px;

  /* Radii — sharp fintech */
  --bx-radius-sm: 2px;
  --bx-radius:    4px;
  --bx-radius-lg: 8px;

  /* Elevation — flat-ish, just border + bg shift */
  --bx-shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --bx-shadow:       0 4px 12px rgba(0,0,0,0.5);
  --bx-shadow-lg:    0 16px 48px rgba(0,0,0,0.7);
  --bx-shadow-card:  0 1px 2px rgba(0,0,0,0.35);
  --bx-shadow-popup: 0 8px 24px rgba(0,0,0,0.55);

  /* Semantic text aliases (added 2026-05-23 — paired with light overrides) */
  --bx-text-mute:   #9AA4B0;   /* alias of --bx-text-muted */
  --bx-text-soft:   #5E6772;   /* alias of --bx-text-dim */

  /* Dividers — translucent so they work on any elevation */
  --bx-divider-soft:   rgba(255,255,255,0.06);
  --bx-divider-strong: rgba(255,255,255,0.12);

  /* Semantic state colors + soft tints (used by chips/badges/toasts/alerts) */
  --bx-danger:        #F44A4A;   /* alias of --bx-down */
  --bx-danger-soft:   rgba(244, 74, 74, 0.12);
  --bx-success:       #00C076;   /* alias of --bx-up */
  --bx-success-soft:  rgba(0, 192, 118, 0.12);
  --bx-warning:       #FFB020;   /* alias of --bx-warn */
  --bx-warning-soft:  rgba(255, 176, 32, 0.12);
  --bx-info-soft:     rgba(77, 163, 255, 0.12);

  /* Modal backdrop — uniform tint that adapts per-theme */
  --bx-backdrop:      rgba(0, 0, 0, 0.55);

  /* Layout */
  --bx-sidebar-w:           200px;   /* expanded width (was 240) */
  --bx-sidebar-w-collapsed: 56px;    /* icons-only collapsed width */
  --bx-topbar-h:  56px;
  --bx-content-pad: 24px;
}

/* ----------------------------------------------------------------------------
   Light theme override — every dark token MUST have a light counterpart here,
   otherwise the component bleeds into the white background. Added full token
   coverage 2026-05-23 (foundation pass; HTML/JS files consume these without
   any other change).
   ---------------------------------------------------------------------------- */
:root[data-bx-theme="light"] {
  /* Surfaces */
  --bx-bg:            #FFFFFF;
  --bx-bg-elev-1:     #F7F8FA;
  --bx-bg-elev-2:     #F0F2F5;
  --bx-bg-input:      #FFFFFF;

  /* Borders & dividers — visible on white, translucent so they layer cleanly */
  --bx-border:         #E0E2E6;
  --bx-border-strong:  #C5C9D0;
  --bx-divider-soft:   rgba(0,0,0,0.06);
  --bx-divider-strong: rgba(0,0,0,0.12);

  /* Text — high-contrast charcoal, never pure black */
  --bx-text:        #1A1D21;
  --bx-text-muted:  #5C6470;
  --bx-text-mute:   #5C6470;   /* alias */
  --bx-text-dim:    #8B9099;
  --bx-text-soft:   #8B9099;   /* alias */

  /* Accent — darken hover for adequate contrast on white */
  --bx-accent:      #1F66FF;
  --bx-accent-hover:#1755E0;
  --bx-accent-soft: rgba(54, 113, 235, 0.10);
  --bx-accent-text: #FFFFFF;

  /* Signals — slightly darker than dark-mode siblings (white needs more punch) */
  --bx-up:          #00A05D;
  --bx-down:        #D63A3A;
  --bx-warn:        #C77700;
  --bx-info:        #2D7DD2;

  /* Semantic state aliases + soft tints (used by chips/badges/alerts) */
  --bx-danger:        #D63A3A;
  --bx-danger-soft:   rgba(214, 58, 58, 0.10);
  --bx-success:       #00A05D;
  --bx-success-soft:  rgba(0, 160, 93, 0.10);
  --bx-warning:       #C77700;
  --bx-warning-soft:  rgba(199, 119, 0, 0.12);
  --bx-info-soft:     rgba(45, 125, 210, 0.10);

  /* Shadows — soft, low-opacity black (was tuned for dark theme — invisible on white) */
  --bx-shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --bx-shadow:       0 2px 8px rgba(0,0,0,0.08);
  --bx-shadow-lg:    0 12px 32px rgba(0,0,0,0.12);
  --bx-shadow-card:  0 1px 3px rgba(0,0,0,0.08);
  --bx-shadow-popup: 0 8px 24px rgba(0,0,0,0.12);

  /* Modal backdrop — lighter than dark theme (white pages don't need a heavy curtain) */
  --bx-backdrop:    rgba(0, 0, 0, 0.40);
}

/* ----------------------------------------------------------------------------
   Light-theme compound overrides — places where the dark-mode default uses a
   hardcoded rgba()/literal that we cannot fix by token-swapping alone (e.g.
   the modal-overlay rgba(8,10,12,0.85), badge soft-tints with hardcoded color
   channels). These rules ONLY apply when html[data-bx-theme="light"] is set.
   ---------------------------------------------------------------------------- */
:root[data-bx-theme="light"] .bx-modal-overlay { background: var(--bx-backdrop); }

/* Badges — rebind soft backgrounds to the *-soft tokens so they stay visible
   on white. Dark-theme keeps its original hardcoded rgba() (unchanged). */
:root[data-bx-theme="light"] .bx-badge-up    { background: var(--bx-success-soft); }
:root[data-bx-theme="light"] .bx-badge-down  { background: var(--bx-danger-soft);  }
:root[data-bx-theme="light"] .bx-badge-warn  { background: var(--bx-warning-soft); }
:root[data-bx-theme="light"] .bx-badge-info  { background: var(--bx-info-soft);    }

/* Scrollbar — light theme needs a dark thumb (default is dark-on-dark) */
:root[data-bx-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-bx-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-bx-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--bx-divider-strong);
  border-radius: var(--bx-radius);
}
:root[data-bx-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--bx-border-strong);
}

/* Focus-visible — uniform accent ring for keyboard users (both themes). */
:focus-visible {
  outline: 2px solid var(--bx-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   Base reset — scoped to anything inside [data-bx], or whole document if
   <html data-bx-theme="..."> is set. Body-level reset is safe (Wave-2 pages
   will include this CSS top-of-head before legacy CSS).
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--bx-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bx-text);
  background: var(--bx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--bx-accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--bx-accent-hover); }

button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

input, select, textarea { font: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--bx-border);
  margin: var(--bx-s-4) 0;
}

/* ----------------------------------------------------------------------------
   Typography
   ---------------------------------------------------------------------------- */
.bx-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--bx-text); margin: 0 0 var(--bx-s-4); }
.bx-h2 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--bx-text); margin: 0 0 var(--bx-s-3); }
.bx-h3 { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--bx-text); margin: 0 0 var(--bx-s-2); }
.bx-text       { font-size: 14px; color: var(--bx-text); }
.bx-text-muted { font-size: 14px; color: var(--bx-text-muted); }
.bx-text-dim   { font-size: 13px; color: var(--bx-text-dim); }
.bx-mono       { font-family: var(--bx-font-mono); font-feature-settings: 'tnum' 1, 'lnum' 1; letter-spacing: 0; }

.bx-up   { color: var(--bx-up); }
.bx-down { color: var(--bx-down); }
.bx-warn { color: var(--bx-warn); }
.bx-info { color: var(--bx-info); }

/* ----------------------------------------------------------------------------
   Layout shell — fixed sidebar 240px + fixed topbar 56px. Body padding pushes
   page content past the shell. Works without a wrapping container so any
   existing page just needs to add `<!-- bx-shell -->` to opt in.
   ---------------------------------------------------------------------------- */
body:has(.bx-sidebar) {
  padding-left: var(--bx-sidebar-w);
  padding-top: var(--bx-topbar-h);
}

.bx-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--bx-sidebar-w);
  height: 100vh;
  background: var(--bx-bg-elev-1);
  border-right: 1px solid var(--bx-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
  transition: width 180ms ease;
}
.bx-sidebar-nav { flex: 1; overflow-y: auto; padding: var(--bx-s-2) 0; }

/* Collapsed state — only icons visible. Icons grow 1.5x for easier click target. */
body.bx-sidebar-collapsed .bx-sidebar { width: var(--bx-sidebar-w-collapsed); }
body.bx-sidebar-collapsed .bx-sidebar .bx-logo-text,
body.bx-sidebar-collapsed .bx-sidebar .bx-nav-section,
body.bx-sidebar-collapsed .bx-sidebar .bx-nav-item span,
body.bx-sidebar-collapsed .bx-sidebar .bx-user-meta { display: none; }
body.bx-sidebar-collapsed .bx-sidebar .bx-nav-item {
  justify-content: center;
  padding: 12px 0;          /* taller for bigger click area */
}
body.bx-sidebar-collapsed .bx-sidebar .bx-nav-item .bx-ic {
  width: 22px;              /* was 16px (1.4x bigger) */
  height: 22px;
}
body.bx-sidebar-collapsed .bx-sidebar .bx-sidebar-toggle svg { transform: rotate(180deg); }

/* v0.9.36.14 — fix UI artifact на collapsed state:
   1. Smooth padding transition (sidebar width transition'ится — main content
      раньше snap'ился без anim, видимый artifact).
   2. Кнопка-toggle на collapsed теперь меньше + центрирована, без border,
      hover делает её subtly видимой — раньше торчала как «огрызок». */
body.bx-shell-active { transition: padding-left 180ms ease; }
body.bx-sidebar-collapsed .bx-sidebar .bx-sidebar-head {
  justify-content: center;
  padding: var(--bx-s-3) 0;
}
body.bx-sidebar-collapsed .bx-sidebar .bx-sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bx-bg-elev-2);
  border: 1px solid var(--bx-border);
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 41;
  padding: 0;
}
body.bx-sidebar-collapsed .bx-sidebar:hover .bx-sidebar-toggle {
  opacity: 1;
}
body.bx-sidebar-collapsed .bx-sidebar .bx-sidebar-toggle svg {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
}

/* v0.9.36.16 — logo-as-expand-button на collapsed sidebar.
   Юзер пожаловался что после убирания «огрызка» непонятно КАК развернуть.
   На collapsed state hover над BingX-лого переворачивает его на стрелку →
   click разворачивает sidebar (JS hooked на .bx-sidebar-logo). */
body.bx-sidebar-collapsed .bx-sidebar-logo {
  cursor: pointer;
  position: relative;
}
body.bx-sidebar-collapsed .bx-sidebar-logo .bx-logo-mark {
  transition: opacity 180ms ease, transform 200ms ease;
}
body.bx-sidebar-collapsed .bx-sidebar-logo:hover .bx-logo-mark {
  opacity: 0;
  transform: scale(0.6);
}
body.bx-sidebar-collapsed .bx-sidebar-logo::after {
  content: '→';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: 22px;
  font-weight: 700;
  color: var(--bx-accent);
  opacity: 0;
  transition: opacity 180ms ease, transform 200ms ease;
  pointer-events: none;
  line-height: 1;
}
body.bx-sidebar-collapsed .bx-sidebar-logo:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}
body.bx-sidebar-collapsed .bx-sidebar .bx-user-card {
  padding: var(--bx-s-2);
  justify-content: center;
}
body.bx-sidebar-collapsed .bx-sidebar .bx-user-avatar {
  width: 36px;              /* was 32px */
  height: 36px;
}
body.bx-sidebar-collapsed .bx-sidebar .bx-user-avatar svg {
  width: 20px;              /* was 16px */
  height: 20px;
}
body.bx-sidebar-collapsed .bx-sidebar .bx-user-logout { display: none; }
body.bx-sidebar-collapsed .bx-sidebar .bx-logo-mark {
  width: 32px;              /* slightly bigger logo when collapsed */
  height: 32px;
}
body.bx-sidebar-collapsed .bx-topbar { left: var(--bx-sidebar-w-collapsed); }
body.bx-sidebar-collapsed.bx-shell-active { padding-left: var(--bx-sidebar-w-collapsed); }

.bx-topbar {
  position: fixed;
  top: 0;
  left: var(--bx-sidebar-w);
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--bx-s-5);
  padding: 0 var(--bx-s-5);
  height: var(--bx-topbar-h);
  background: var(--bx-bg-elev-1);
  border-bottom: 1px solid var(--bx-border);
  z-index: 50;
  transition: left 180ms ease;
}

.bx-content {
  padding: var(--bx-content-pad);
  min-width: 0;
}

/* Fallback for browsers without :has() — pages can manually add
   `class="bx-shell-active"` to <body> instead. */
body.bx-shell-active {
  padding-left: var(--bx-sidebar-w);
  padding-top: var(--bx-topbar-h);
}

/* When BingX shell is active, suppress legacy page-level identity headers
   so the BingX sidebar logo is the single source of brand. Pages tag their
   internal mini-header with .lf-header / .lf-page-header / .page-brand.
   v0.9.24: also match on <html class="bx-shell-active"> which is set
   synchronously by inject_bingx_shell's head-inject script, BEFORE first
   paint — eliminates the «LEAD FINDER» FOUC on /leads/* etc. The body.*
   variant is kept as backwards-compat for pages where bingx-nav.js adds
   it on DOMContentLoaded. Also added .nav-bar / #__nav (legacy NAV_BAR
   sources) since some pages still ship that markup inline. */
html.bx-shell-active .lf-header,
html.bx-shell-active .lf-page-header,
html.bx-shell-active .page-brand,
html.bx-shell-active .legacy-topbar,
html.bx-shell-active #__nav,
html.bx-shell-active #__spacer,
body.bx-shell-active .lf-header,
body.bx-shell-active .lf-page-header,
body.bx-shell-active .page-brand,
body.bx-shell-active .legacy-topbar,
body.bx-shell-active #__nav,
body.bx-shell-active #__spacer {
  display: none !important;
}

.bx-logo {
  font-family: var(--bx-font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--bx-text);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--bx-s-2);
}

/* Sidebar head — logo+brand on left, collapse toggle on right */
.bx-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bx-topbar-h);
  padding: 0 var(--bx-s-3);
  border-bottom: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-1);
  flex-shrink: 0;
}
.bx-sidebar-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bx-s-2);
  color: var(--bx-text);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.bx-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.bx-logo-text { white-space: nowrap; }

.bx-sidebar-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  background: transparent;
  color: var(--bx-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.bx-sidebar-toggle:hover { color: var(--bx-text); border-color: var(--bx-border-strong); }
.bx-sidebar-toggle svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 180ms ease; }

/* User card pinned to sidebar bottom */
.bx-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--bx-s-2);
  padding: var(--bx-s-2) var(--bx-s-3);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-1);
  flex-shrink: 0;
}
.bx-user-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--bx-s-2);
  padding: 6px var(--bx-s-2);
  border-radius: var(--bx-radius);
  color: var(--bx-text);
  min-width: 0;
  transition: background 150ms ease;
}
.bx-user-card:hover { background: var(--bx-bg-elev-2); }
.bx-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bx-bg-elev-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bx-text-muted);
  flex-shrink: 0;
}
.bx-user-avatar svg { width: 16px; height: 16px; }
.bx-user-meta { min-width: 0; line-height: 1.25; }
.bx-user-email {
  font-size: 12px;
  color: var(--bx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bx-user-id {
  font-size: 10px;
  color: var(--bx-text-dim);
}
.bx-user-logout {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bx-text-dim);
  border-radius: var(--bx-radius);
  flex-shrink: 0;
  transition: all 150ms ease;
}
.bx-user-logout:hover { color: var(--bx-down); background: var(--bx-bg-elev-2); }
.bx-user-logout svg { width: 14px; height: 14px; }

/* Topbar primary horizontal nav (5 main sections — BingX style) */
.bx-topbar-main {
  display: flex;
  align-items: center;
  gap: var(--bx-s-1);
  height: 100%;
}

.bx-topnav {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--bx-s-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--bx-text-muted);
  position: relative;
  transition: color 150ms ease;
}
.bx-topnav:hover { color: var(--bx-text); }
.bx-topnav.active {
  color: var(--bx-text);
}
.bx-topnav.active::after {
  content: "";
  position: absolute;
  left: var(--bx-s-3);
  right: var(--bx-s-3);
  bottom: 0;
  height: 2px;
  background: var(--bx-accent);
  border-radius: 1px;
}

/* Legacy hero-pipeline (still used on index.html 3-step CTA) */
.bx-topbar-flow {
  display: flex;
  align-items: center;
  gap: var(--bx-s-3);
}

.bx-step {
  font-size: 13px;
  color: var(--bx-text-muted);
  padding: 6px var(--bx-s-3);
  border-radius: var(--bx-radius);
  transition: all 150ms ease;
}
.bx-step:hover { color: var(--bx-text); background: var(--bx-bg-elev-2); }
.bx-step.active { color: var(--bx-accent); background: var(--bx-accent-soft); }
.bx-step-arrow { color: var(--bx-text-dim); display: inline-flex; align-items: center; }

.bx-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--bx-s-3);
}

.bx-account-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bx-s-2);
  padding: 6px var(--bx-s-3);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  font-size: 12px;
  color: var(--bx-text);
  background: var(--bx-bg-elev-2);
  transition: border-color 150ms ease;
}
.bx-account-chip:hover { border-color: var(--bx-border-strong); }

/* ----------------------------------------------------------------------------
   Sidebar nav items
   ---------------------------------------------------------------------------- */
.bx-nav-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bx-text-dim);
  padding: var(--bx-s-4) var(--bx-s-4) var(--bx-s-2);
}

.bx-nav-item {
  display: flex;
  align-items: center;
  gap: var(--bx-s-3);
  padding: var(--bx-s-2) var(--bx-s-4);
  color: var(--bx-text-muted);
  font-size: 14px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: all 150ms ease;
}
.bx-nav-item:hover {
  color: var(--bx-text);
  background: var(--bx-bg-elev-2);
}
.bx-nav-item.active {
  color: var(--bx-accent);
  background: var(--bx-accent-soft);
  border-left-color: var(--bx-accent);
}

/* v0.9.36.2 — unread badge на nav-item (например «Сообщения»).
   Auto-spaces к правому краю; скрыт по дефолту через [hidden]. */
.bx-nav-item {
  position: relative;
}
.bx-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bx-down, #F44A4A);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
  font-family: var(--bx-font-mono, 'JetBrains Mono', monospace);
}
.bx-nav-badge--unread {
  background: var(--bx-down, #F44A4A);
}
/* Скрыт когда у collapsed sidebar нет места — badge всё равно показывает
   присутствие unread'ов через мини-точку (border-style trick). */
body.bx-sidebar-collapsed .bx-sidebar .bx-nav-badge {
  position: absolute;
  top: 8px; right: 8px;
  min-width: 8px; height: 8px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-radius: 50%;
}

/* ----------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------------- */
.bx-card {
  background: var(--bx-bg-elev-1);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  overflow: hidden;
}
.bx-card.elev { box-shadow: var(--bx-shadow); }

.bx-card-header {
  padding: var(--bx-s-4) var(--bx-s-5);
  border-bottom: 1px solid var(--bx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bx-s-3);
}
.bx-card-header .bx-h3 { margin: 0; }

.bx-card-body {
  padding: var(--bx-s-5);
}

.bx-card-footer {
  padding: var(--bx-s-3) var(--bx-s-5);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bx-s-2);
}

/* ----------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------- */
.bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bx-s-2);
  padding: 8px var(--bx-s-4);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  background: var(--bx-bg-elev-2);
  color: var(--bx-text);
  transition: all 150ms ease;
  text-transform: none;
  letter-spacing: 0;
  user-select: none;
}
.bx-btn:hover { border-color: var(--bx-border-strong); background: var(--bx-bg-elev-1); }
.bx-btn:focus-visible { outline: 2px solid var(--bx-accent); outline-offset: 1px; }

.bx-btn-primary {
  background: var(--bx-accent);
  color: var(--bx-accent-text, #FFFFFF);
  border-color: var(--bx-accent);
}
.bx-btn-primary:hover {
  background: var(--bx-accent-hover);
  border-color: var(--bx-accent-hover);
  color: var(--bx-accent-text, #FFFFFF);
}

.bx-btn-ghost {
  background: transparent;
  border-color: var(--bx-border);
  color: var(--bx-text);
}
.bx-btn-ghost:hover { background: var(--bx-bg-elev-2); border-color: var(--bx-border-strong); }

.bx-btn-danger {
  background: var(--bx-down);
  border-color: var(--bx-down);
  color: #FFFFFF;
}
.bx-btn-danger:hover { filter: brightness(0.92); }

.bx-btn-sm { padding: 6px var(--bx-s-3); font-size: 12px; }
.bx-btn-lg { padding: 10px var(--bx-s-5); font-size: 14px; }

/* Sidebar theme toggle — full-width day/night switcher in sidebar bottom */
.bx-sidebar-theme {
  padding: var(--bx-s-2) var(--bx-s-3);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-1);
  flex-shrink: 0;
}
.bx-theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--bx-s-2);
  width: 100%;
  padding: 7px var(--bx-s-2);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  background: var(--bx-bg-elev-2);
  color: var(--bx-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}
.bx-theme-toggle:hover { color: var(--bx-text); border-color: var(--bx-border-strong); }
.bx-theme-toggle .bx-ic { width: 14px; height: 14px; flex-shrink: 0; }

/* Show sun on dark theme (hint: clicking goes to light), moon on light theme */
.bx-theme-icon-light { display: none; }
:root[data-bx-theme="light"] .bx-theme-icon-dark  { display: none; }
:root[data-bx-theme="light"] .bx-theme-icon-light { display: inline; }

body.bx-sidebar-collapsed .bx-sidebar-theme { padding: var(--bx-s-2); }
body.bx-sidebar-collapsed .bx-theme-toggle { justify-content: center; }
body.bx-sidebar-collapsed .bx-theme-toggle .bx-theme-label { display: none; }

/* ----------------------------------------------------------------------------
   Inputs
   ---------------------------------------------------------------------------- */
.bx-input, .bx-select, .bx-textarea {
  display: block;
  width: 100%;
  padding: 8px var(--bx-s-3);
  font-size: 13px;
  color: var(--bx-text);
  background: var(--bx-bg-input);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  transition: border-color 150ms ease;
  outline: none;
}
.bx-input:focus, .bx-select:focus, .bx-textarea:focus {
  border-color: var(--bx-accent);
}
.bx-input::placeholder, .bx-textarea::placeholder { color: var(--bx-text-dim); }
.bx-textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.bx-select { appearance: none; cursor: pointer; padding-right: var(--bx-s-6); }

.bx-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--bx-border-strong);
  border-radius: var(--bx-radius-sm);
  background: var(--bx-bg-input);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: all 150ms ease;
}
.bx-checkbox:checked {
  background: var(--bx-accent);
  border-color: var(--bx-accent);
}
.bx-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #0B0D0F;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.bx-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-text-muted);
  margin-bottom: var(--bx-s-2);
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   Modals — overlay opacity 0.85 (solid; fixes M.1 «прозрачный popup»)
   ---------------------------------------------------------------------------- */
.bx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 12, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--bx-s-5);
}

.bx-modal {
  background: var(--bx-bg-elev-1);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-lg);
  box-shadow: var(--bx-shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bx-modal-header {
  padding: var(--bx-s-4) var(--bx-s-5);
  border-bottom: 1px solid var(--bx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bx-s-3);
}
.bx-modal-header .bx-h3 { margin: 0; }

.bx-modal-body {
  padding: var(--bx-s-5);
  overflow-y: auto;
  flex: 1;
}

.bx-modal-footer {
  padding: var(--bx-s-3) var(--bx-s-5);
  border-top: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bx-s-2);
}

.bx-modal-close {
  background: transparent;
  border: 0;
  color: var(--bx-text-muted);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bx-radius);
  transition: all 150ms ease;
}
.bx-modal-close:hover { color: var(--bx-text); background: var(--bx-bg-elev-2); }

/* ----------------------------------------------------------------------------
   Tables — borderless rows, mono numerals
   ---------------------------------------------------------------------------- */
.bx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bx-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bx-text-dim);
  padding: var(--bx-s-2) var(--bx-s-3);
  border-bottom: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-2);
}
.bx-table tbody td {
  padding: var(--bx-s-3);
  color: var(--bx-text);
  border-bottom: 1px solid var(--bx-border);
}
.bx-table tbody tr { transition: background 150ms ease; }
.bx-table tbody tr:hover { background: var(--bx-bg-elev-2); }
.bx-table td.num, .bx-table th.num {
  font-family: var(--bx-font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  text-align: right;
}

/* ----------------------------------------------------------------------------
   Badges — sharp 2px radius, uppercase 11px
   ---------------------------------------------------------------------------- */
.bx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  border-radius: var(--bx-radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  color: var(--bx-text-muted);
}
.bx-badge-up    { color: var(--bx-up);   background: rgba(0,255,140,0.06); }
.bx-badge-down  { color: var(--bx-down); background: rgba(255,77,98,0.08); }
.bx-badge-warn  { color: var(--bx-warn); background: rgba(255,176,32,0.08); }
.bx-badge-info  { color: var(--bx-info); background: rgba(77,163,255,0.08); }

/* Workers panel — state-change flash. 600 ms ease-out on the state badge
   whenever GET /api/admin/workers/full reports a different `state` field
   from the previous tick. */
.bx-badge-flash { animation: bx-flash 0.6s ease-out; }
@keyframes bx-flash {
  0%   { box-shadow: 0 0 0 0 rgba(77,163,255,0.55); }
  100% { box-shadow: 0 0 0 8px rgba(77,163,255,0); }
}

/* ----------------------------------------------------------------------------
   Toasts — slide-in from top-right
   ---------------------------------------------------------------------------- */
.bx-toast {
  position: fixed;
  top: calc(var(--bx-topbar-h) + var(--bx-s-3));
  right: var(--bx-s-5);
  min-width: 280px;
  max-width: 420px;
  padding: var(--bx-s-3) var(--bx-s-4);
  background: var(--bx-bg-elev-1);
  border: 1px solid var(--bx-border-strong);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
  color: var(--bx-text);
  font-size: 13px;
  z-index: 2000;
  transform: translateX(0);
  transition: transform 150ms ease, opacity 150ms ease;
}
.bx-toast.hidden { opacity: 0; transform: translateX(20px); pointer-events: none; }
.bx-toast-error   { border-left: 3px solid var(--bx-down); }
.bx-toast-success { border-left: 3px solid var(--bx-up); }
.bx-toast-warn    { border-left: 3px solid var(--bx-warn); }
.bx-toast-info    { border-left: 3px solid var(--bx-info); }

/* ----------------------------------------------------------------------------
   Pipeline — M.2 «3-button rule» glowable steps
   ---------------------------------------------------------------------------- */
.bx-pipeline {
  display: flex;
  align-items: stretch;
  gap: var(--bx-s-3);
  padding: var(--bx-s-4) 0;
}

.bx-pipeline-step {
  flex: 1;
  min-width: 0;
  padding: var(--bx-s-4) var(--bx-s-5);
  background: var(--bx-bg-elev-1);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  display: flex;
  flex-direction: column;
  gap: var(--bx-s-2);
  text-align: left;
  color: var(--bx-text);
  transition: all 150ms ease;
  cursor: pointer;
}
.bx-pipeline-step:hover { border-color: var(--bx-border-strong); }
.bx-pipeline-step .bx-pipeline-num {
  font-family: var(--bx-font-mono);
  font-size: 11px;
  color: var(--bx-text-dim);
  letter-spacing: 0.1em;
}
.bx-pipeline-step .bx-pipeline-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--bx-text);
}
.bx-pipeline-step .bx-pipeline-sub {
  font-size: 12px;
  color: var(--bx-text-muted);
}

.bx-pipeline-step.active {
  border-color: var(--bx-accent);
  background: var(--bx-accent-soft);
}
.bx-pipeline-step.active .bx-pipeline-title { color: var(--bx-accent); }

.bx-pipeline-step.glow {
  border-color: var(--bx-accent);
  box-shadow: 0 0 0 1px var(--bx-accent), 0 0 24px rgba(0,255,140,0.18);
}

/* ----------------------------------------------------------------------------
   Worker status widget — fixed bottom-right (M.3)
   ---------------------------------------------------------------------------- */
.bx-worker-widget {
  position: fixed;
  bottom: var(--bx-s-4);
  right: var(--bx-s-4);
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--bx-bg-elev-1);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-shadow);
  z-index: 100;
  font-size: 12px;
  overflow: hidden;
}

.bx-worker-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bx-s-2) var(--bx-s-3);
  background: var(--bx-bg-elev-2);
  border-bottom: 1px solid var(--bx-border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bx-text-muted);
}
.bx-worker-widget-collapse {
  background: transparent;
  border: 0;
  color: var(--bx-text-muted);
  width: 20px; height: 20px;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
}
.bx-worker-widget-collapse:hover { color: var(--bx-text); }

.bx-worker-widget-body {
  padding: var(--bx-s-2) var(--bx-s-3);
  max-height: 240px;
  overflow-y: auto;
}
.bx-worker-widget.collapsed .bx-worker-widget-body { display: none; }

.bx-worker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
}
.bx-worker-row + .bx-worker-row { border-top: 1px solid var(--bx-border); }
/* v0.9.30: humanized rows — main column with two-line name + sub. */
.bx-worker-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bx-worker-row-name { color: var(--bx-text); font-weight: 600; font-size: 12px; line-height: 1.3; }
.bx-worker-row-sub  { color: var(--bx-text-dim); font-size: 10px; line-height: 1.35; margin-top: 2px;
                      overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
                      -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Legacy classes kept for any other widget that still uses them. */
.bx-worker-row .bx-worker-name { color: var(--bx-text-muted); }
.bx-worker-row .bx-worker-state { color: var(--bx-text); }
.bx-worker-row.up    .bx-worker-state { color: var(--bx-up); }
.bx-worker-row.down  .bx-worker-state { color: var(--bx-down); }
.bx-worker-row.warn  .bx-worker-state { color: var(--bx-warn); }

/* ----------------------------------------------------------------------------
   BD attention feed (Track 5, 2026-05-22) — replaces WORKERS for bd/senior_bd.
   Reuses .bx-worker-widget shell (#bx-attention). Each section = a card with
   amber/red left border depending on tier. Idle (count=0) is dim, no emphasis.
   ---------------------------------------------------------------------------- */
.bx-attn-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bx-bg-elev-2);
  border: 1px solid var(--bx-border);
  border-left: 3px solid var(--bx-border);
  border-radius: 4px;
  opacity: 0.88;
  transition: opacity 120ms ease, background 120ms ease;
}
.bx-attn-card:hover { opacity: 1; background: var(--bx-bg-elev-3, var(--bx-bg-elev-2)); }
.bx-attn-card:last-child { margin-bottom: 0; }
.bx-attn-card.bx-attn-idle  { opacity: 0.85; }
.bx-attn-card.bx-attn-amber { border-left-color: var(--bx-warn, #E5A23B); opacity: 0.92; }
.bx-attn-card.bx-attn-red   { border-left-color: var(--bx-down, #F44A4A); opacity: 1; }
.bx-attn-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.bx-attn-card-title { font-weight: 600; font-size: 12px; color: var(--bx-text); }
.bx-attn-card-count {
  font-family: var(--bx-font-mono); font-size: 12px;
  color: var(--bx-text-muted); min-width: 18px; text-align: right;
}
.bx-attn-amber .bx-attn-card-count { color: var(--bx-warn, #E5A23B); }
.bx-attn-red   .bx-attn-card-count { color: var(--bx-down, #F44A4A); }
.bx-attn-card-sub {
  margin-top: 2px; font-size: 10px; color: var(--bx-text-dim);
  line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bx-attn-empty {
  padding: 16px 10px; text-align: center;
  color: var(--bx-text-muted); font-size: 12px; opacity: 0.85;
}

/* ----------------------------------------------------------------------------
   Logs table (M.3) — color-coded left border per severity
   ---------------------------------------------------------------------------- */
.bx-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bx-font-mono);
  font-size: 12px;
}
.bx-logs-table thead th {
  text-align: left;
  padding: var(--bx-s-2) var(--bx-s-3);
  border-bottom: 1px solid var(--bx-border);
  background: var(--bx-bg-elev-2);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--bx-text-dim);
}
.bx-log-row td {
  padding: var(--bx-s-2) var(--bx-s-3);
  border-bottom: 1px solid var(--bx-border);
  color: var(--bx-text);
  vertical-align: top;
}
.bx-log-row.severity-info  td:first-child { border-left: 3px solid var(--bx-info); }
.bx-log-row.severity-warn  td:first-child { border-left: 3px solid var(--bx-warn); }
.bx-log-row.severity-error td:first-child { border-left: 3px solid var(--bx-down); }

/* ----------------------------------------------------------------------------
   Icons — uniform 16px stroke; pages may override with --bx-ic-size
   ---------------------------------------------------------------------------- */
.bx-ic {
  display: inline-block;
  width: var(--bx-ic-size, 16px);
  height: var(--bx-ic-size, 16px);
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}
.bx-ic-lg { --bx-ic-size: 20px; }
.bx-ic-sm { --bx-ic-size: 14px; }

/* ----------------------------------------------------------------------------
   Misc helpers
   ---------------------------------------------------------------------------- */
.bx-row { display: flex; align-items: center; gap: var(--bx-s-3); }
.bx-col { display: flex; flex-direction: column; gap: var(--bx-s-3); }
.bx-grow { flex: 1; min-width: 0; }
.bx-spacer { flex: 1; }
.bx-divider { height: 1px; background: var(--bx-border); margin: var(--bx-s-3) 0; }

[hidden] { display: none !important; }

/* ----------------------------------------------------------------------------
   B1 — Global search bar (topbar)
   Input lives inside .bx-topbar-right; dropdown is absolutely positioned
   below the wrapper. Intentionally subtle — matches topbar background.
   ---------------------------------------------------------------------------- */
.bx-search-wrap { position: relative; }

.bx-search {
  width: 280px;
  height: 28px;
  padding: 0 var(--bx-s-3);
  font-family: var(--bx-font-mono);
  font-size: 12px;
  color: var(--bx-text);
  background: var(--bx-bg-elev-2);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.bx-search::placeholder { color: var(--bx-text-dim); }
.bx-search:hover { border-color: var(--bx-border-strong); }
.bx-search:focus {
  border-color: var(--bx-accent);
  box-shadow: 0 0 0 2px var(--bx-accent-soft);
}

.bx-search-results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--bx-bg-elev-2);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 9000;
  padding: 4px;
}

.bx-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bx-s-2);
  height: 40px;
  padding: 0 var(--bx-s-3);
  border-radius: var(--bx-radius-sm);
  color: var(--bx-text);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
.bx-search-row:hover { background: var(--bx-accent-soft); color: var(--bx-text); }
.bx-search-row-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bx-search-row-name { font-weight: 600; }
.bx-search-row-uname { color: var(--bx-text-muted); font-size: 12px; }
.bx-search-row-ch { color: var(--bx-text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.bx-search-row-score {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--bx-text-muted);
  padding: 2px 6px;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius-sm);
}
.bx-search-empty {
  padding: 12px var(--bx-s-3);
  color: var(--bx-text-dim);
  font-size: 12px;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   v0.9.29 — Notifications bell-icon (topbar)
   Bell button next to global search; badge shows unseen count; dropdown lists
   latest 10 task notifications. Clicking the bell auto-marks unseen as seen.
   ---------------------------------------------------------------------------- */
.bx-bell-wrap { position: relative; }

.bx-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  color: var(--bx-text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.bx-bell-btn:hover {
  color: var(--bx-text);
  border-color: var(--bx-border-strong);
  background: var(--bx-bg-elev-2);
}
.bx-bell-btn .bx-ic { width: 14px; height: 14px; }

.bx-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  background: var(--bx-danger, #F44A4A);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  border: 1.5px solid var(--bx-bg-elev-1);
  pointer-events: none;
}

.bx-bell-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 340px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bx-bg-elev-2);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 9000;
}
.bx-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bx-s-2) var(--bx-s-3);
  border-bottom: 1px solid var(--bx-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bx-text-muted);
}
.bx-bell-all {
  color: var(--bx-accent);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.bx-bell-all:hover { text-decoration: underline; }

.bx-bell-body { padding: 4px; }

.bx-bell-empty {
  padding: 14px var(--bx-s-3);
  color: var(--bx-text-dim);
  font-size: 12px;
  text-align: center;
}

.bx-bell-row {
  display: block;
  padding: 8px var(--bx-s-3);
  border-radius: var(--bx-radius-sm);
  color: var(--bx-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease;
  flex: 1; min-width: 0;
}
.bx-bell-row:hover { background: var(--bx-accent-soft); }
/* v0.9.32: each notification row wraps the <a> and an × dismiss button. */
.bx-bell-row-wrap { display: flex; align-items: stretch; gap: 0; }
.bx-bell-row-wrap + .bx-bell-row-wrap { border-top: 1px solid var(--bx-border); }
.bx-bell-row-wrap.bx-bell-row-unseen { background: rgba(31, 102, 255, 0.06); }
.bx-bell-row-dismiss {
  flex-shrink: 0;
  width: 28px; align-self: center;
  background: transparent; border: 0; color: var(--bx-text-dim);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
  opacity: 0; transition: opacity 120ms ease, color 120ms ease;
}
.bx-bell-row-wrap:hover .bx-bell-row-dismiss { opacity: 1; }
.bx-bell-row-dismiss:hover { color: var(--bx-down, #F44A4A); }
.bx-bell-clear {
  background: transparent; border: 0; color: var(--bx-text-dim);
  cursor: pointer; padding: 2px 4px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 120ms ease;
}
.bx-bell-clear:hover { color: var(--bx-text); }
.bx-bell-clear[data-armed="1"] { color: var(--bx-down, #F44A4A); }

/* C4 (v0.9.35.37): mark-all-read link — text only, opacity≥0.85. */
.bx-bell-mark-all {
  color: var(--bx-text-dim, rgba(232,234,237,0.65));
  text-decoration: none;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.85;
  transition: color 120ms ease, opacity 120ms ease;
}
.bx-bell-mark-all:hover { color: var(--bx-text); opacity: 1; }

.bx-bell-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bx-text-muted);
}
.bx-bell-kind { font-weight: 700; }
.bx-bell-ago { margin-left: auto; font-family: var(--bx-font-mono); color: var(--bx-text-dim); }
.bx-bell-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bx-accent);
}
.bx-bell-title {
  font-size: 12px;
  line-height: 1.35;
  color: var(--bx-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   v0.9.36.1 — Bot-icon (workers health) — topbar popup, replaces
   the bottom-right .bx-worker-widget for admin/super_admin.
   Structure mirrors .bx-bell-* (button + indicator + dropdown).
   ---------------------------------------------------------------------------- */
.bx-bot-wrap { position: relative; }

.bx-bot-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  color: var(--bx-text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  opacity: 0.85;
}
.bx-bot-btn:hover {
  color: var(--bx-text);
  border-color: var(--bx-border-strong);
  background: var(--bx-bg-elev-2);
  opacity: 1;
}
.bx-bot-btn .bx-ic { width: 14px; height: 14px; }

/* Indicator dot — 8px circle, anchored top-right on the bot icon.
   Tier classes: --ok / --warn / --critical / --unknown.
   ok       → green slow pulse  (subtle "all good" glow)
   warn     → yellow steady     (stale/stopped workers present)
   critical → red fast pulse    (at least one error worker)
   unknown  → grey, no anim     (API down / payload.ok=false) */
.bx-bot-dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--bx-bg-elev-1);
  pointer-events: none;
  background: var(--bx-text-dim);
}
.bx-bot-dot--ok {
  background: var(--bx-up, #2BBA7B);
  box-shadow: 0 0 0 0 rgba(43, 186, 123, 0.55);
  animation: bx-bot-pulse-ok 2.4s ease-out infinite;
}
.bx-bot-dot--warn {
  background: var(--bx-warn, #FFB450);
}
.bx-bot-dot--critical {
  background: var(--bx-down, #F44A4A);
  box-shadow: 0 0 0 0 rgba(244, 74, 74, 0.6);
  animation: bx-bot-pulse-critical 1.0s ease-out infinite;
}
.bx-bot-dot--unknown {
  background: var(--bx-text-dim, rgba(232,234,237,0.45));
}

@keyframes bx-bot-pulse-ok {
  0%   { box-shadow: 0 0 0 0   rgba(43, 186, 123, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(43, 186, 123, 0); }
  100% { box-shadow: 0 0 0 0   rgba(43, 186, 123, 0); }
}
@keyframes bx-bot-pulse-critical {
  0%   { box-shadow: 0 0 0 0   rgba(244, 74, 74, 0.65); }
  60%  { box-shadow: 0 0 0 6px rgba(244, 74, 74, 0); }
  100% { box-shadow: 0 0 0 0   rgba(244, 74, 74, 0); }
}

/* Not-OK count badge — shown only for warn/critical tier. Sits opposite the
   dot (bottom-left) so a single button can carry both signals at once. */
.bx-bot-badge {
  position: absolute;
  bottom: -4px; left: -4px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  background: var(--bx-warn, #FFB450);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  border: 1.5px solid var(--bx-bg-elev-1);
  pointer-events: none;
}
/* When dot is critical, tint the badge red too so colours stay coherent. */
.bx-bot-wrap:has(.bx-bot-dot--critical) .bx-bot-badge {
  background: var(--bx-down, #F44A4A);
  color: #fff;
}

/* Dropdown — anchored under the bot button, mirrors .bx-bell-dropdown.
   Mobile: capped at 92vw so it never overflows on narrow screens. */
.bx-bot-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  max-width: 92vw;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bx-bg-elev-2);
  border: 1px solid var(--bx-border);
  border-radius: var(--bx-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 9000;
}
.bx-bot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bx-s-2) var(--bx-s-3);
  border-bottom: 1px solid var(--bx-border);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bx-text-muted);
}
.bx-bot-body { padding: 4px var(--bx-s-3); }

/* Row inside popup — same visual rhythm as the old .bx-worker-row. */
.bx-bot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  font-size: 11px;
}
.bx-bot-row + .bx-bot-row { border-top: 1px solid var(--bx-border); }
.bx-bot-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bx-bot-row-name {
  color: var(--bx-text); font-weight: 600; font-size: 12px; line-height: 1.3;
}
.bx-bot-row-sub {
  color: var(--bx-text-dim); font-size: 10px; line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* v0.9.36.17 — Active works section в bot-popup. Заголовки секций
   («Воркеры» / «Активные работы») разделяют сонтент. */
.bx-bot-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bx-text-muted);
  padding: 8px 0 4px;
  font-weight: 600;
}
.bx-bot-section-title--mt {
  margin-top: 8px;
  border-top: 1px solid var(--bx-border);
}
.bx-bot-row--work .bx-bot-row-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.bx-bot-progress {
  height: 4px;
  background: var(--bx-bg-input);
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}
.bx-bot-progress-fill {
  height: 100%;
  background: var(--bx-accent);
  transition: width 200ms ease;
}

/* v0.9.36.18 — cancel-button на hover в active-works row. Невидимая до hover,
   при наведении на row показывается X справа. Replaces state-badge spot
   when shown so layout не дёргается. */
.bx-bot-cancel {
  background: transparent;
  border: 1px solid var(--bx-border);
  color: var(--bx-text-muted);
  width: 22px; height: 22px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
  flex: 0 0 auto;
}
.bx-bot-row--work:hover .bx-bot-cancel {
  opacity: 1;
  pointer-events: auto;
}
.bx-bot-cancel:hover {
  color: var(--bx-down, #F44A4A);
  border-color: var(--bx-down, #F44A4A);
}
.bx-bot-cancel:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Errored row — tinted background hint */
.bx-bot-row--err .bx-bot-row-name {
  color: var(--bx-down, #F44A4A);
}
.bx-bot-row--err .bx-bot-cancel {
  /* Errored — always-visible cancel, не только on hover */
  opacity: 0.7;
  pointer-events: auto;
  border-color: rgba(244, 74, 74, 0.35);
}

/* ============================================================================
   v0.9.36.8 — Mobile responsive (canonical breakpoints for bx-shell)
   Покрывает ВСЕ страницы использующие <!-- bx-shell --> placeholder.
   Раньше bingx-theme.css не имел ни одного @media — sidebar 200px
   фиксированный, на phone занимает весь экран. На /outreach, /crm,
   /chats, /blacklist, /hub была полная поломка mobile (per UI audit).
   ============================================================================ */

/* Tablet portrait + smaller — auto-collapse sidebar (icons only) */
@media (max-width: 900px) {
  body.bx-shell-active {
    padding-left: var(--bx-sidebar-w-collapsed);
  }
  body.bx-shell-active .bx-sidebar {
    width: var(--bx-sidebar-w-collapsed);
  }
  body.bx-shell-active .bx-sidebar .bx-nav-item span,
  body.bx-shell-active .bx-sidebar .bx-nav-section {
    display: none;
  }
  body.bx-shell-active .bx-topbar {
    left: var(--bx-sidebar-w-collapsed);
  }
  .bx-content {
    padding: var(--bx-s-3);
  }
}

/* Phone — sidebar polностью уходит из layout flow, открывается оверлеем */
@media (max-width: 600px) {
  body.bx-shell-active {
    padding-left: 0;
  }
  body.bx-shell-active .bx-sidebar {
    transform: translateX(calc(-1 * var(--bx-sidebar-w-collapsed)));
    transition: transform 200ms ease;
  }
  body.bx-shell-active.bx-sidebar-mobile-open .bx-sidebar {
    transform: translateX(0);
    width: var(--bx-sidebar-w);
    z-index: 2010;
    box-shadow: var(--bx-shadow);
  }
  body.bx-shell-active.bx-sidebar-mobile-open .bx-sidebar .bx-nav-item span,
  body.bx-shell-active.bx-sidebar-mobile-open .bx-sidebar .bx-nav-section {
    display: block;
  }
  body.bx-shell-active .bx-topbar {
    left: 0;
  }

  /* Tables — convert long-form to vertical stacks on phone */
  .bx-table thead { display: none; }
  .bx-table tr {
    display: block;
    border-bottom: 1px solid var(--bx-border);
    padding: var(--bx-s-2) 0;
  }
  .bx-table td {
    display: block;
    border: none;
    padding: 2px 0;
    font-size: 12px;
  }
  .bx-table td::before {
    content: attr(data-label) ":";
    display: inline-block;
    min-width: 80px;
    color: var(--bx-text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: var(--bx-s-2);
  }

  /* Modals — full-width / full-height on phone */
  .bx-modal-card, .lf-modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
    padding: var(--bx-s-3);
  }
}

/* Cap font-zoom on iOS landscape rotation */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}