/* ================================================================
   NOTHING OS OVERRIDE — cabinet.lumentech.tel
   Palette : bg #020504 / #06110f · text #d9fff7 · accent #41f0db
   Version : 1.0
   ================================================================ */

/* ── 0. DESIGN TOKENS ─────────────────────────────────────────── */
#root, :root {
  --n-bg-0      : #020504;
  --n-bg-1      : #06110f;
  --n-bg-2      : #0d1f1b;
  --n-bg-3      : #142621;
  --n-text      : #d9fff7;
  --n-text-dim  : rgba(217,255,247,.45);
  --n-text-mute : rgba(217,255,247,.22);
  --n-accent    : #41f0db;
  --n-accent-bg : rgba(65,240,219,.08);
  --n-accent-bd : rgba(65,240,219,.22);
  --n-accent-hi : rgba(65,240,219,.40);
  --n-grid      : rgba(65,240,219,.05);
  --n-dot-color : rgba(65,240,219,.12);
  --n-warn      : #f0a541;
  --n-err       : #f05441;
  --n-r         : 6px;
  --n-r-sm      : 4px;
  --n-r-lg      : 10px;
  --n-mono      : 'Space Mono','IBM Plex Mono','Courier New',monospace;
  --n-dot-size  : 18px;
  --n-border    : 1px solid var(--n-accent-bd);
  --n-track-h   : 3px;
}

/* ── 1. GLOBAL RESET ──────────────────────────────────────────── */
/* Базовый шрифт — пропорциональный, mono только для UI-хрома (заголовки,
   кнопки, метки, цифры). Иначе текст распирает контейнеры и layout ломается. */
:root {
  --n-sans : 'Space Grotesk','Manrope','Inter',system-ui,sans-serif;
}

#root {
  font-family    : var(--n-sans) !important;
  background     : var(--n-bg-0) !important;
  color          : var(--n-text) !important;
  letter-spacing : 0 !important;
  -webkit-font-smoothing : antialiased !important;
  min-height     : 100dvh !important;
}

#root * {
  box-sizing  : border-box !important;
}

/* Тело текста — пропорциональный шрифт, нормальный регистр */
#root p,
#root span,
#root div,
#root li,
#root a,
#root td {
  font-family : var(--n-sans) !important;
  text-transform : none !important;
  letter-spacing : 0 !important;
}

/* All inherited Tailwind border-radius → flatten */
#root [class*="rounded"] {
  border-radius : var(--n-r) !important;
}
#root [class*="rounded-full"] {
  border-radius : 999px !important;
}
#root [class*="rounded-xl"],
#root [class*="rounded-2xl"],
#root [class*="rounded-3xl"] {
  border-radius : var(--n-r-lg) !important;
}

/* ── 2. DOT-MATRIX BACKGROUND PATTERN ────────────────────────── */
#root body,
#root main,
#root [class*="min-h"],
#root .layout,
#root [class*="layout"] {
  background-color   : var(--n-bg-0) !important;
  background-image   : radial-gradient(circle, var(--n-dot-color) 1px, transparent 1px) !important;
  background-size    : var(--n-dot-size) var(--n-dot-size) !important;
  background-position: 0 0 !important;
}

/* Subtle vertical grid lines on page */
#root main::before,
#root [class*="container"]::before {
  content    : '' !important;
  position   : fixed !important;
  inset      : 0 !important;
  background : repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(var(--n-dot-size) * 4 - 1px),
    var(--n-grid) calc(var(--n-dot-size) * 4)
  ) !important;
  pointer-events : none !important;
  z-index        : 0 !important;
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────── */
#root h1,
#root h2,
#root h3,
#root h4,
#root h5 {
  font-family    : var(--n-mono) !important;
  font-weight    : 700 !important;
  text-transform : uppercase !important;
  letter-spacing : .10em !important;
  color          : var(--n-text) !important;
  line-height    : 1.15 !important;
}

#root h1 { font-size: 1.35rem !important; }
#root h2 { font-size: 1.10rem !important; }
#root h3 { font-size: .90rem !important;  }
#root h4 { font-size: .78rem !important; color: var(--n-text-dim) !important; }

/* Лейблы/метки — оставляем uppercase + mono, но НЕ трогаем text-xs/sm
   (они часто = body text, и uppercase ломает layout) */
#root label,
#root [class*="overline"],
#root th {
  font-family    : var(--n-mono) !important;
  font-size      : .72rem !important;
  letter-spacing : .08em !important;
  text-transform : uppercase !important;
  color          : var(--n-text-dim) !important;
}

#root [class*="text-xs"],
#root [class*="text-sm"] {
  letter-spacing : 0 !important;
  text-transform : none !important;
}

#root [class*="text-3xl"],
#root [class*="text-4xl"],
#root [class*="text-5xl"] {
  font-family    : var(--n-mono) !important;
  font-weight    : 700 !important;
  letter-spacing : 0 !important;
  font-variant-numeric: tabular-nums !important;
}

#root p {
  color       : var(--n-text-dim) !important;
  line-height : 1.7 !important;
  font-size   : .82rem !important;
}

#root strong, #root b {
  color       : var(--n-text) !important;
  font-weight : 700 !important;
}

/* ── 4. BACKGROUNDS ───────────────────────────────────────────── */
/* Tailwind bg-* overrides — keep palette, remove foreign colors */
#root [class*="bg-white"],
#root [class*="bg-gray-50"],
#root [class*="bg-gray-100"],
#root [class*="bg-slate-50"],
#root [class*="bg-slate-100"] {
  background-color : var(--n-bg-1) !important;
}

#root [class*="bg-gray-"],
#root [class*="bg-slate-"],
#root [class*="bg-zinc-"],
#root [class*="bg-neutral-"] {
  background-color : var(--n-bg-2) !important;
}

#root [class*="bg-black"] {
  background-color : var(--n-bg-0) !important;
}

/* Surfaces that should feel elevated */
#root [class*="bg-opacity"],
#root [class*="bg-gradient"] {
  background-image : none !important;
}

/* ── 5. CARDS ─────────────────────────────────────────────────── */
/* Не цепляем popover/menu/dropdown — они должны иметь overflow:visible
   и не получать декоративных pseudo-углов. */
#root .card:not([role="menu"]):not([role="listbox"]):not([class*="menu"]):not([class*="popover"]):not([class*="dropdown"]):not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]):not([class*="select-content"]),
#root [class*="card"]:not([role="menu"]):not([class*="menu"]):not([class*="popover"]):not([class*="dropdown"]):not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]),
#root [class*="Card"]:not([class*="menu"]):not([class*="popover"]):not([class*="dropdown"]):not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]),
#root [class*="rounded-"][class*="border"]:not([role="menu"]):not([role="listbox"]):not([class*="menu"]):not([class*="popover"]):not([class*="dropdown"]):not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]):not([data-radix-popper-content-wrapper] *),
#root [class*="rounded-"][class*="shadow"]:not([role="menu"]):not([class*="menu"]):not([class*="popover"]):not([class*="dropdown"]):not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]),
#root [class*="p-4"][class*="rounded"]:not([role="menu"]):not([class*="menu"]):not([class*="popover"]),
#root [class*="p-6"][class*="rounded"]:not([role="menu"]):not([class*="menu"]):not([class*="popover"]),
#root [class*="p-3"][class*="rounded"]:not([role="menu"]):not([class*="menu"]):not([class*="popover"]) {
  background-color : var(--n-bg-1) !important;
  background-image : radial-gradient(circle, var(--n-dot-color) 1px, transparent 1px) !important;
  background-size  : var(--n-dot-size) var(--n-dot-size) !important;
  border           : var(--n-border) !important;
  border-radius    : var(--n-r) !important;
  box-shadow       : none !important;
  position         : relative !important;
  overflow         : hidden !important;
}

/* Accent top-bar on cards */
#root .card::before,
#root [class*="card"]::before {
  content          : '' !important;
  position         : absolute !important;
  top              : 0 !important;
  left             : 0 !important;
  right            : 0 !important;
  height           : 1px !important;
  background       : var(--n-accent) !important;
  opacity          : .5 !important;
}

/* Corner bracket decoration (top-left only) */
#root .card::after,
#root [class*="card"]::after {
  content    : '' !important;
  position   : absolute !important;
  top        : 6px !important;
  right      : 10px !important;
  width      : 6px !important;
  height     : 6px !important;
  border-top : 1px solid var(--n-accent) !important;
  border-right : 1px solid var(--n-accent) !important;
  opacity    : .6 !important;
}

/* Kill all shadows globally */
#root [class*="shadow"] {
  box-shadow : none !important;
  filter     : none !important;
}

/* ── 6. HEADER / NAVBAR ────────────────────────────────────────── */
#root header,
#root nav,
#root [class*="header"],
#root [class*="Header"],
#root [class*="navbar"],
#root [class*="Navbar"],
#root [class*="topbar"] {
  background-color : var(--n-bg-0) !important;
  border-bottom    : 1px solid var(--n-accent-bd) !important;
  box-shadow       : none !important;
  border-radius    : 0 !important;
  letter-spacing   : .08em !important;
}

/* Logo text in header */
#root header [class*="logo"],
#root header [class*="brand"],
#root header span:first-child {
  font-weight    : 700 !important;
  text-transform : uppercase !important;
  color          : var(--n-accent) !important;
  letter-spacing : .18em !important;
}

/* Bottom tab-bar / mobile nav */
#root [class*="tab-bar"],
#root [class*="tabbar"],
#root [class*="bottom-nav"],
#root [class*="BottomNav"],
#root footer nav {
  background-color : var(--n-bg-0) !important;
  border-top       : 1px solid var(--n-accent-bd) !important;
  border-radius    : 0 !important;
  box-shadow       : none !important;
}

#root [class*="tab-bar"] *,
#root [class*="bottom-nav"] * {
  text-transform : uppercase !important;
  letter-spacing : .08em !important;
  font-size      : .6rem !important;
}

/* Active nav item */
#root [class*="active"][class*="nav"],
#root [class*="nav"][aria-current="page"] {
  color : var(--n-accent) !important;
}

/* ── 7. BUTTONS ───────────────────────────────────────────────── */
#root button,
#root [class*="btn"],
#root [class*="button"],
#root [role="button"] {
  font-family    : var(--n-mono) !important;
  font-size      : .72rem !important;
  font-weight    : 700 !important;
  text-transform : uppercase !important;
  letter-spacing : .08em !important;
  border-radius  : var(--n-r) !important;
  cursor         : pointer !important;
  transition     : background-color .12s, border-color .12s, color .12s !important;
  box-shadow     : none !important;
  outline-offset : 2px !important;
  /* чтобы длинный русский текст не вылезал за пределы кнопки */
  max-width      : 100% !important;
  min-width      : 0 !important;
  white-space    : normal !important;
  overflow-wrap  : break-word !important;
  word-break     : keep-all !important;
  line-height    : 1.25 !important;
  text-align     : center !important;
}

/* Маленькие inline-кнопки внутри карточек (типа "связаться") — пусть лучше
   тянутся в высоту, чем обрезают текст */
#root [class*="card"] button,
#root [class*="Card"] button,
#root [class*="card"] [role="button"] {
  flex-shrink : 1 !important;
}

/* В горизонтальных flex-рядах кнопка не должна выдавливать соседей.
   Если контент кнопки длиннее ширины, она занимает свою строку. */
#root .flex > button,
#root [class*="flex"] > button {
  min-width : 0 !important;
}

/* Primary button */
#root button[class*="primary"],
#root [class*="btn-primary"],
#root button[class*="bg-teal"],
#root button[class*="bg-cyan"],
#root button[class*="bg-emerald"],
#root button[class*="bg-green"],
#root [class*="btn"][class*="solid"] {
  background-color : var(--n-accent) !important;
  color            : var(--n-bg-0) !important;
  border           : 1px solid var(--n-accent) !important;
  padding          : .55rem 1.2rem !important;
}

#root button[class*="primary"]:hover,
#root [class*="btn-primary"]:hover,
#root button[class*="bg-teal"]:hover {
  background-color : transparent !important;
  color            : var(--n-accent) !important;
  border-color     : var(--n-accent) !important;
}

/* Secondary / ghost button */
#root button[class*="secondary"],
#root button[class*="outline"],
#root button[class*="ghost"],
#root [class*="btn-secondary"] {
  background-color : transparent !important;
  color            : var(--n-accent) !important;
  border           : 1px solid var(--n-accent-bd) !important;
  padding          : .55rem 1.2rem !important;
}

#root button[class*="secondary"]:hover,
#root button[class*="outline"]:hover {
  border-color     : var(--n-accent) !important;
  background-color : var(--n-accent-bg) !important;
}

/* Destructive / warning */
#root button[class*="danger"],
#root button[class*="destructive"],
#root button[class*="red"] {
  background-color : transparent !important;
  color            : var(--n-err) !important;
  border           : 1px solid rgba(240,84,65,.35) !important;
}

/* Disabled */
#root button:disabled,
#root [class*="btn"]:disabled {
  opacity        : .3 !important;
  pointer-events : none !important;
}

/* Icon buttons */
#root button[class*="icon"],
#root [class*="icon-btn"] {
  padding : .45rem !important;
  width   : 34px !important;
  height  : 34px !important;
}

/* ── 8. INPUTS ────────────────────────────────────────────────── */
#root input,
#root textarea,
#root select {
  font-family      : var(--n-mono) !important;
  font-size        : .8rem !important;
  letter-spacing   : .04em !important;
  background-color : var(--n-bg-0) !important;
  border           : 1px solid var(--n-accent-bd) !important;
  border-radius    : var(--n-r) !important;
  color            : var(--n-text) !important;
  padding          : .55rem .85rem !important;
  box-shadow       : none !important;
  outline          : none !important;
  transition       : border-color .12s !important;
  caret-color      : var(--n-accent) !important;
  -webkit-appearance : none !important;
  appearance         : none !important;
}

#root input:focus,
#root textarea:focus,
#root select:focus {
  border-color     : var(--n-accent) !important;
  background-color : var(--n-accent-bg) !important;
  box-shadow       : none !important;
  outline          : none !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color          : var(--n-text-mute) !important;
  text-transform : uppercase !important;
  letter-spacing : .06em !important;
  font-size      : .68rem !important;
}

/* Select arrow */
#root select {
  background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2341f0db'/%3E%3C/svg%3E") !important;
  background-repeat   : no-repeat !important;
  background-position : right .75rem center !important;
  padding-right       : 2rem !important;
}

/* ── 9. BADGES ────────────────────────────────────────────────── */
#root [class*="badge"],
#root [class*="Badge"],
#root [class*="chip"],
#root [class*="tag"],
#root [class*="pill"] {
  font-family      : var(--n-mono) !important;
  font-size        : .60rem !important;
  font-weight      : 700 !important;
  text-transform   : uppercase !important;
  letter-spacing   : .12em !important;
  border-radius    : var(--n-r-sm) !important;
  padding          : .15rem .55rem !important;
  background-color : var(--n-accent-bg) !important;
  color            : var(--n-accent) !important;
  border           : 1px solid var(--n-accent-bd) !important;
  box-shadow       : none !important;
  line-height      : 1.6 !important;
}

/* Status variants */
#root [class*="badge"][class*="success"],
#root [class*="badge"][class*="green"] {
  background-color : rgba(65,240,155,.08) !important;
  color            : #41f09b !important;
  border-color     : rgba(65,240,155,.25) !important;
}

#root [class*="badge"][class*="warn"],
#root [class*="badge"][class*="orange"] {
  background-color : rgba(240,165,65,.08) !important;
  color            : var(--n-warn) !important;
  border-color     : rgba(240,165,65,.25) !important;
}

#root [class*="badge"][class*="danger"],
#root [class*="badge"][class*="red"],
#root [class*="badge"][class*="error"] {
  background-color : rgba(240,84,65,.08) !important;
  color            : var(--n-err) !important;
  border-color     : rgba(240,84,65,.25) !important;
}

/* "Базовый Юзер" / subscription tier badge */
#root [class*="plan-badge"],
#root [class*="tier"],
#root [class*="subscription-badge"] {
  font-size  : .58rem !important;
  padding    : .12rem .5rem !important;
  color      : var(--n-accent) !important;
  border     : 1px solid var(--n-accent-bd) !important;
  background : var(--n-accent-bg) !important;
}

/* ── 10. PROGRESS BARS ────────────────────────────────────────── */
#root progress,
#root [class*="progress"],
#root [class*="Progress"],
#root [role="progressbar"] {
  height           : var(--n-track-h) !important;
  background-color : var(--n-bg-3) !important;
  border-radius    : 0 !important;
  border           : none !important;
  overflow         : hidden !important;
  -webkit-appearance : none !important;
  appearance         : none !important;
}

#root progress::-webkit-progress-bar {
  background-color : var(--n-bg-3) !important;
  border-radius    : 0 !important;
}

#root progress::-webkit-progress-value {
  background-color : var(--n-accent) !important;
  border-radius    : 0 !important;
  /* Dot-matrix fill effect */
  background-image : repeating-linear-gradient(
    90deg,
    var(--n-accent) 0px,
    var(--n-accent) 3px,
    transparent 3px,
    transparent 5px
  ) !important;
}

#root progress::-moz-progress-bar {
  background-color : var(--n-accent) !important;
  border-radius    : 0 !important;
  background-image : repeating-linear-gradient(
    90deg,
    var(--n-accent) 0px,
    var(--n-accent) 3px,
    transparent 3px,
    transparent 5px
  ) !important;
}

/* Tailwind-based progress track/fill */
#root [class*="progress"] > [class*="bar"],
#root [class*="progress-bar"],
#root [class*="progressBar"],
#root [class*="progress"] > div {
  background-color : var(--n-accent) !important;
  background-image : repeating-linear-gradient(
    90deg,
    var(--n-accent) 0px,
    var(--n-accent) 3px,
    transparent 3px,
    transparent 5px
  ) !important;
  border-radius    : 0 !important;
  height           : 100% !important;
  transition       : width .3s linear !important;
}

#root [class*="progress"][class*="track"],
#root [class*="progress-track"] {
  background-color : var(--n-bg-3) !important;
  border-radius    : 0 !important;
  height           : var(--n-track-h) !important;
}

/* ── 11. MODAL / DIALOG ───────────────────────────────────────── */
#root dialog,
#root [class*="dialog"],
#root [class*="Dialog"],
#root [class*="modal"],
#root [class*="Modal"],
#root [class*="sheet"],
#root [class*="Sheet"],
#root [class*="drawer"],
#root [class*="Drawer"],
#root [role="dialog"] {
  background-color : var(--n-bg-1) !important;
  background-image : radial-gradient(circle, var(--n-dot-color) 1px, transparent 1px) !important;
  background-size  : var(--n-dot-size) var(--n-dot-size) !important;
  border           : var(--n-border) !important;
  border-radius    : var(--n-r) !important;
  box-shadow       : none !important;
  color            : var(--n-text) !important;
  /* drawer/sheet должны скроллиться когда контент длиннее экрана */
  overflow-y       : auto !important;
  overflow-x       : hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  max-height       : 100dvh !important;
}

/* Не давать card-правилу убивать скролл в drawer/sheet/dialog */
#root [role="dialog"] *,
#root [class*="sheet"] *:not(button):not(input):not(textarea),
#root [class*="Sheet"] *:not(button):not(input):not(textarea),
#root [class*="drawer"] *:not(button):not(input):not(textarea),
#root [class*="Drawer"] *:not(button):not(input):not(textarea) {
  overflow-y : visible !important;
}

/* Главный контейнер drawer-а (имеет роль navigation внутри) — скроллится */
#root [role="dialog"] nav,
#root [role="dialog"] [role="navigation"],
#root [role="dialog"] > div,
#root [class*="drawer"] > div,
#root [class*="sheet"] > div {
  overflow-y       : auto !important;
  max-height       : 100dvh !important;
  overscroll-behavior: contain !important;
  /* отступ снизу чтобы последние пункты не уходили под bottom tab-bar */
  padding-bottom   : calc(env(safe-area-inset-bottom, 0px) + 110px) !important;
}

/* ── Mobile burger drawer (cabinet.lumentech.tel) ──────────
   Структура: div.fixed.inset-x-0.bottom-0.z-40.animate-fade-in.lg:hidden style="top:64px"
              ├── div.absolute.inset-0.bg-black/60      (backdrop)
              └── div.mobile-menu-content...overflow-y-auto (scrollable)
   Конфликт: tab-bar тоже z-40 → лежит поверх drawer-а. Поднимаем drawer. */
#root div.fixed.bottom-0[class*="animate-fade-in"][class*="lg:hidden"],
#root div.fixed.inset-x-0.bottom-0[class*="animate-fade-in"] {
  z-index : 60 !important;
}

/* Контент drawer-а скроллится по умолчанию — мы только страхуем */
#root .mobile-menu-content {
  overflow-y       : auto !important;
  overflow-x       : hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Drawer/dialog поднимаем выше tab-bar'а чтобы он перекрывал
   нижнюю навигацию визуально (без :has — не везде поддерживается) */
#root [role="dialog"],
#root [class*="sheet"],
#root [class*="Sheet"],
#root [class*="drawer"],
#root [class*="Drawer"] {
  z-index : 9999 !important;
}

#root [data-radix-portal],
#root [class*="overlay"],
#root [class*="backdrop"] {
  z-index : 9998 !important;
}

/* Нижний tab-bar всегда ниже drawer'а */
#root [class*="tab-bar"],
#root [class*="tabbar"],
#root [class*="bottom-nav"],
#root [class*="BottomNav"] {
  z-index : 40 !important;
}

/* Drawer полная высота вьюпорта */
#root [role="dialog"][data-state="open"],
#root [class*="sheet"][data-state="open"] {
  height       : 100dvh !important;
  max-height   : 100dvh !important;
  inset-block  : 0 !important;
}

/* Dialog backdrop */
#root [class*="overlay"],
#root [class*="backdrop"],
#root [data-state="open"] ~ [class*="overlay"] {
  background-color : rgba(2,5,4,.88) !important;
  backdrop-filter  : none !important;
}

/* Dialog header accent line */
#root [class*="dialog"] [class*="header"],
#root [class*="modal"] [class*="header"],
#root [class*="DialogHeader"],
#root [class*="ModalHeader"] {
  border-bottom : 1px solid var(--n-accent-bd) !important;
  padding-bottom : .75rem !important;
}

/* ── 11b. DROPDOWN / POPOVER / MENU — must NOT inherit card overflow ── */
/* Глобальный fix: любой портал/попап с фиксированным позиционированием
   не режет контент по ГОРИЗОНТАЛИ (чтобы текст пунктов не обрезался ellipsis-ом),
   но скроллится по ВЕРТИКАЛИ если не влезает в окно (актуально для Telegram mini-app). */
body [data-radix-portal],
body [data-radix-popper-content-wrapper],
body [data-radix-popper-content-wrapper] *,
body [class*="Portal"],
body [class*="portal"] [role="menu"],
body [class*="portal"] [role="listbox"] {
  overflow-x    : visible !important;
  max-width     : none !important;
  text-overflow : clip !important;
}

/* Контент попапа: вертикальный скролл при нехватке высоты */
body [data-radix-popper-content-wrapper] > *,
body [role="menu"],
body [role="listbox"],
body [class*="select-content"],
body [class*="MenuContent"],
body [class*="DropdownMenuContent"],
body [class*="PopoverContent"] {
  max-height        : min(70vh, 420px) !important;
  overflow-y        : auto !important;
  overflow-x        : visible !important;
  overscroll-behavior: contain !important;
}

/* Items внутри попапов — никогда не обрезать ellipsis-ом */
body [role="menuitem"],
body [role="option"],
body [data-radix-popper-content-wrapper] li,
body [data-radix-popper-content-wrapper] button,
body [data-radix-popper-content-wrapper] a {
  overflow      : visible !important;
  text-overflow : clip !important;
  white-space   : nowrap !important;
  max-width     : none !important;
}

#root [role="menu"],
#root [role="listbox"],
#root [role="combobox"],
#root [data-radix-popper-content-wrapper],
#root [data-radix-popper-content-wrapper] > *,
#root [class*="dropdown"],
#root [class*="Dropdown"],
#root [class*="popover"],
#root [class*="Popover"],
#root [class*="menu-content"],
#root [class*="MenuContent"],
#root [class*="select-content"],
#root [class*="SelectContent"],
#root [class*="combobox"],
#root [class*="Combobox"],
#root [class*="language"][class*="menu"],
#root [class*="LangSwitcher"] [class*="menu"] {
  overflow          : visible !important;
  background-color  : var(--n-bg-1) !important;
  background-image  : none !important;
  border            : var(--n-border) !important;
  border-radius     : var(--n-r) !important;
  box-shadow        : 0 8px 24px rgba(0,0,0,.55) !important;
  min-width         : max-content !important;
  width             : auto !important;
  max-width         : calc(100vw - 24px) !important;
  white-space       : nowrap !important;
  padding           : .35rem !important;
  z-index           : 9999 !important;
}

/* Kill decorative card pseudo-elements on these surfaces */
#root [role="menu"]::before,
#root [role="menu"]::after,
#root [role="listbox"]::before,
#root [role="listbox"]::after,
#root [data-radix-popper-content-wrapper] *::before,
#root [data-radix-popper-content-wrapper] *::after,
#root [class*="dropdown"]::before,
#root [class*="dropdown"]::after,
#root [class*="popover"]::before,
#root [class*="popover"]::after,
#root [class*="select-content"]::before,
#root [class*="select-content"]::after {
  display : none !important;
  content : none !important;
}

/* Items inside menus / dropdowns */
#root [role="menuitem"],
#root [role="option"],
#root [class*="dropdown"] [class*="item"],
#root [class*="menu"] [role="menuitem"],
#root [class*="select-content"] [role="option"],
#root [class*="LangSwitcher"] li,
#root [class*="LangSwitcher"] button {
  display          : flex !important;
  align-items      : center !important;
  gap              : .65rem !important;
  width            : 100% !important;
  padding          : .55rem .85rem !important;
  font-family      : var(--n-mono) !important;
  font-size        : .78rem !important;
  text-transform   : none !important;
  letter-spacing   : .02em !important;
  color            : var(--n-text) !important;
  background       : transparent !important;
  border           : none !important;
  border-radius    : var(--n-r-sm) !important;
  cursor           : pointer !important;
  white-space      : nowrap !important;
  text-align       : left !important;
}

#root [role="menuitem"]:hover,
#root [role="option"]:hover,
#root [class*="dropdown"] [class*="item"]:hover,
#root [class*="LangSwitcher"] button:hover {
  background-color : var(--n-accent-bg) !important;
  color            : var(--n-accent) !important;
}

#root [role="option"][data-state="checked"],
#root [aria-selected="true"] {
  color : var(--n-accent) !important;
}

/* Language code pill (GB / UA / CN / IR) */
#root [class*="lang-code"],
#root [class*="LangCode"],
#root [class*="locale-code"] {
  font-size      : .60rem !important;
  letter-spacing : .12em !important;
  color          : var(--n-accent) !important;
  min-width      : 1.8rem !important;
}

/* ── 12. DIVIDERS / SEPARATORS ────────────────────────────────── */
#root hr,
#root [class*="divider"],
#root [class*="separator"],
#root [role="separator"] {
  border         : none !important;
  border-top     : 1px solid var(--n-accent-bd) !important;
  background     : none !important;
  margin         : .75rem 0 !important;
}

/* ── 13. LINKS ────────────────────────────────────────────────── */
#root a {
  color           : var(--n-accent) !important;
  text-decoration : none !important;
  transition      : opacity .1s !important;
}

#root a:hover {
  color           : #7ff5e4 !important;
  opacity         : 1 !important;
  text-decoration : underline !important;
}

/* ── 14. ICONS / SVG ──────────────────────────────────────────── */
#root svg {
  color : currentColor !important;
}

#root [class*="icon"] svg,
#root button svg,
#root nav svg {
  stroke-width : 1.5px !important;
}

/* Accent icons */
#root [class*="icon-accent"] svg,
#root [class*="active"] svg {
  color : var(--n-accent) !important;
}

/* ── 15. TABLES ───────────────────────────────────────────────── */
#root table {
  border-collapse : collapse !important;
  width           : 100% !important;
  font-size       : .78rem !important;
}

#root th {
  font-size      : .64rem !important;
  text-transform : uppercase !important;
  letter-spacing : .12em !important;
  color          : var(--n-text-dim) !important;
  border-bottom  : 1px solid var(--n-accent-bd) !important;
  padding        : .6rem .75rem !important;
  font-weight    : 700 !important;
  text-align     : left !important;
}

#root td {
  padding       : .65rem .75rem !important;
  border-bottom : 1px solid rgba(65,240,219,.06) !important;
  color         : var(--n-text) !important;
  font-size     : .78rem !important;
}

#root tr:last-child td { border-bottom : none !important; }

#root tr:hover td {
  background-color : var(--n-accent-bg) !important;
}

/* ── 16. TOGGLES / CHECKBOXES / RADIOS ───────────────────────── */
#root input[type="checkbox"],
#root input[type="radio"] {
  accent-color  : var(--n-accent) !important;
  cursor        : pointer !important;
  border-radius : 0 !important;
  width         : 15px !important;
  height        : 15px !important;
}

/* ── Switch / toggle ────────────────────────────────────────
   Две архитектуры в этом приложении:
   1) Radix Switch (shadcn): button[role="switch"] = САМ ТРЕК,
      span внутри = thumb (bg-white, transform встроен через data-[state]).
   2) Custom Toggle: button[role="switch"] > div(трек) > div/span(thumb). */

/* === ВАРИАНТ 1: Radix Switch === */
/* TRACK = сам button[role="switch"]. Размеры заданы Tailwind'ом (h-6 w-11),
   border-2 border-transparent оставляем как есть (это распорка для focus-ring).
   Форма: скруглённый прямоугольник (НЕ pill), чтобы соответствовать Nothing-стилю. */
#root button[role="switch"] {
  background-image : none !important;
  background-color : var(--n-bg-3) !important;
  border-color     : var(--n-accent-bd) !important;
  border-radius    : 6px !important;
  box-shadow       : none !important;
  padding          : 0 !important;
  min-height       : auto !important;
  cursor           : pointer !important;
}
#root button[role="switch"]::before,
#root button[role="switch"]::after {
  display : none !important;
  content : none !important;
}
#root button[role="switch"][data-state="checked"],
#root button[role="switch"][aria-checked="true"] {
  background-color : var(--n-accent) !important;
  border-color     : var(--n-accent) !important;
}

/* THUMB = span внутри button[role="switch"]. Заливка accent в OFF, тёмный в ON.
   Квадрат со слегка скруглёнными углами (Nothing-стиль). */
#root button[role="switch"] > span {
  background-color : var(--n-accent) !important;
  background-image : none !important;
  border           : none !important;
  border-radius    : 3px !important;
  box-shadow       : 0 1px 2px rgba(0,0,0,.5) !important;
}
#root button[role="switch"][data-state="checked"] > span,
#root button[role="switch"][aria-checked="true"] > span {
  background-color : var(--n-bg-0) !important;
}

/* === ВАРИАНТ 2: Custom Toggle (button > div > div/span) === */
/* TRACK — внутренний div (h-8 w-14 или h-6 w-11) */
#root button[role="switch"] > div[class*="rounded-full"] {
  background-color : var(--n-bg-3) !important;
  background-image : none !important;
  border           : 1px solid var(--n-accent-bd) !important;
  border-radius    : 6px !important;
  box-shadow       : none !important;
}
#root button[role="switch"][aria-checked="true"] > div[class*="rounded-full"],
#root button[role="switch"][data-state="checked"] > div[class*="rounded-full"] {
  background-color : var(--n-accent) !important;
  border-color     : var(--n-accent) !important;
}

/* THUMB — вложенный span/div размером h-4/5/6 внутри трека */
#root button[role="switch"] > div > span,
#root button[role="switch"] > div > div,
#root button[role="switch"] [class*="bg-white"] {
  background-color : var(--n-accent) !important;
  background-image : none !important;
  border           : none !important;
  border-radius    : 3px !important;
  box-shadow       : 0 1px 2px rgba(0,0,0,.5) !important;
}
#root button[role="switch"][aria-checked="true"] > div > span,
#root button[role="switch"][aria-checked="true"] > div > div,
#root button[role="switch"][data-state="checked"] > div > span,
#root button[role="switch"][data-state="checked"] > div > div {
  background-color : var(--n-bg-0) !important;
}

/* Убиваем pseudo-элементы карточки если они всё-таки проскочили */
#root button[role="switch"] *::before,
#root button[role="switch"] *::after {
  display : none !important;
  content : none !important;
}

/* ── 17. SCROLLBARS ───────────────────────────────────────────── */
#root ::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
#root ::-webkit-scrollbar-track  { background: var(--n-bg-0) !important; }
#root ::-webkit-scrollbar-thumb  {
  background    : var(--n-accent-bd) !important;
  border-radius : 0 !important;
}
#root ::-webkit-scrollbar-thumb:hover { background: var(--n-accent) !important; }
#root * { scrollbar-width: thin !important; scrollbar-color: var(--n-accent-bd) var(--n-bg-0) !important; }

/* ── 18. TOASTS / ALERTS / NOTIFICATIONS ─────────────────────── */
#root [class*="toast"],
#root [class*="Toast"],
#root [class*="alert"],
#root [class*="Alert"],
#root [class*="notification"],
#root [class*="snackbar"],
#root [role="alert"] {
  background-color : var(--n-bg-2) !important;
  border           : var(--n-border) !important;
  border-radius    : var(--n-r) !important;
  box-shadow       : none !important;
  font-size        : .72rem !important;
  text-transform   : uppercase !important;
  letter-spacing   : .06em !important;
  color            : var(--n-text) !important;
}

#root [class*="toast"][class*="success"],
#root [class*="alert"][class*="success"] {
  border-left : 2px solid #41f09b !important;
}

#root [class*="toast"][class*="error"],
#root [class*="toast"][class*="danger"],
#root [class*="alert"][class*="error"] {
  border-left : 2px solid var(--n-err) !important;
}

#root [class*="toast"][class*="warn"],
#root [class*="alert"][class*="warn"] {
  border-left : 2px solid var(--n-warn) !important;
}

/* ── 19. SKELETON LOADERS ─────────────────────────────────────── */
#root [class*="skeleton"],
#root [class*="Skeleton"],
#root [class*="shimmer"],
#root [class*="placeholder"] {
  background        : var(--n-bg-3) !important;
  background-image  : none !important;
  animation         : n-pulse 1.6s ease-in-out infinite !important;
  border-radius     : var(--n-r) !important;
}

@keyframes n-pulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .9; }
}

/* ── 20. STAT / METRIC NUMBERS ────────────────────────────────── */
#root [class*="stat"],
#root [class*="metric"],
#root [class*="count"],
#root [class*="amount"] {
  font-family       : var(--n-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing    : .04em !important;
  color             : var(--n-text) !important;
}

/* Large numeric values — accent color */
#root [class*="text-3xl"][class*="font-bold"],
#root [class*="text-4xl"],
#root [class*="stat"] [class*="value"] {
  color : var(--n-accent) !important;
}

/* ── 21. DEVICE CONNECTION / STATUS DOTS ─────────────────────── */
#root [class*="status-dot"],
#root [class*="dot"][class*="online"],
#root [class*="indicator"] {
  border-radius    : 0 !important;
  width            : 6px !important;
  height           : 6px !important;
  background-color : var(--n-accent) !important;
  box-shadow       : none !important;
  animation        : n-blink 2s step-end infinite !important;
}

@keyframes n-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .2; }
}

/* ── 22. NOTHING-SPECIFIC MICRO-DETAILS ──────────────────────── */

/* Cursor — стандартный pointer для всего кликабельного */
#root button,
#root a,
#root select,
#root [role="button"],
#root [role="menuitem"],
#root [role="option"],
#root input[type="checkbox"],
#root input[type="radio"],
#root [class*="cursor-pointer"] {
  cursor : pointer !important;
}

/* Карточки/строки при hover — подсветка ярче, не темнее.
   ИСКЛЮЧАЕМ свитчи и их потомков, чтобы не убивать их собственные fill'ы. */
#root [class*="card"]:not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]):hover,
#root [class*="Card"]:not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]):hover,
#root [class*="rounded-"][class*="border"]:not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]):hover,
#root [class*="rounded-"][class*="p-"]:not([role="switch"]):not([role="switch"] *):not([role="dialog"]):not([class*="sheet"]):not([class*="drawer"]):not([class*="Sheet"]):not([class*="Drawer"]):hover {
  border-color : var(--n-accent-hi) !important;
  background-color : var(--n-bg-2) !important;
}

/* Свой hover для свитча — только подсветка рамки, фон/thumb не трогаем */
#root button[role="switch"]:hover {
  border-color : var(--n-accent) !important;
}
#root button[role="switch"]:hover > span,
#root button[role="switch"]:hover > div > span,
#root button[role="switch"]:hover > div > div {
  filter : brightness(1.15) !important;
}
#root button[role="switch"][data-state="checked"]:hover,
#root button[role="switch"][aria-checked="true"]:hover {
  background-color : var(--n-accent) !important;
  filter : brightness(1.08) !important;
}

#root [class*="card"]:hover *,
#root [class*="Card"]:hover * {
  opacity : 1 !important;
}

/* Принудительно: никаких opacity-затемнений на hover */
#root *:hover {
  filter : none !important;
}
#root :where(a, button, [role="button"], [class*="link"]):hover * {
  opacity : 1 !important;
}

/* Selection color */
#root ::selection {
  background-color : rgba(65,240,219,.25) !important;
  color            : var(--n-text) !important;
}

/* Focus visible */
#root :focus-visible {
  outline        : 1px solid var(--n-accent) !important;
  outline-offset : 2px !important;
  box-shadow     : none !important;
}

/* Kill all blur / backdrop filters */
#root [class*="blur"],
#root [class*="backdrop"] {
  backdrop-filter : none !important;
  filter          : none !important;
}

/* Kill all glow animations */
#root [class*="glow"],
#root [class*="shimmer"],
#root [class*="pulse-glow"] {
  animation  : none !important;
  box-shadow : none !important;
  filter     : none !important;
}

/* Transition: keep it sharp */
#root * {
  transition-timing-function : steps(4) !important;
  transition-duration        : .08s !important;
}

/* Except for deliberate slow ones */
#root [class*="animate"],
#root [class*="transition-all"] {
  transition-duration : .15s !important;
  transition-timing-function : linear !important;
}