/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM 3.0 — KOL Finder
   Cyan/blue glass surfaces + yellow accent for important actions.
   Clean, surgical CSS — does NOT inject pseudo-elements on every
   component. Only modifies backgrounds, borders, and shadows.
   Loaded LAST.
   ═════════════════════════════════════════════════════════════ */

/* ── Tokens per theme ─────────────────────────────────────── */
:root, [data-theme="dark"] {
  /* Cyan/blue glass surfaces */
  --glass-bg:        hsla(210, 40%, 8%, .60);
  --glass-bg-solid:  hsla(210, 40%, 10%, .85);
  --glass-card:      hsla(210, 35%, 14%, .50);
  --glass-card-2:    hsla(210, 38%, 18%, .60);
  --glass-card-hi:   hsla(210, 40%, 22%, .70);
  --glass-surface:   hsla(195, 80%, 60%, .04);

  /* Cyan-tinted borders */
  --glass-border:    hsla(195, 60%, 70%, .12);
  --glass-border-2:  hsla(195, 80%, 70%, .22);

  /* Cyan refraction (light through glass) */
  --glass-cyan:      hsla(195, 100%, 60%, .15);
  --glass-cyan-soft: hsla(195, 80%, 50%, .06);
  --glass-blue:      hsla(220, 90%, 60%, .12);

  /* Yellow accent for primary actions */
  --y-accent:       hsl(43, 100%, 55%);
  --y-accent-soft:  hsla(43, 100%, 55%, .15);
  --y-accent-glow:  hsla(43, 100%, 60%, .35);

  /* Shadows */
  --gs-sm:  0 2px 8px hsla(210, 50%, 4%, .35),
            inset 0 1px 0 hsla(195, 80%, 80%, .06);
  --gs:     0 4px 16px hsla(210, 50%, 4%, .40),
            0 1px 2px hsla(0,0%,0%,.20),
            inset 0 1px 0 hsla(195, 80%, 80%, .08);
  --gs-lg:  0 12px 40px hsla(210, 50%, 4%, .45),
            0 24px 64px hsla(220, 60%, 8%, .35),
            inset 0 1px 0 hsla(195, 80%, 80%, .10);
  --glass-glow-cyan: 0 0 24px hsla(195, 100%, 60%, .15);
  --glass-glow-yellow: 0 0 20px hsla(43, 100%, 60%, .25);
  --glass-inset: inset 0 1px 0 hsla(195, 80%, 80%, .06);

  /* Blurs */
  --bf-sm:  blur(10px) saturate(140%);
  --bf:     blur(18px) saturate(160%);
  --bf-lg:  blur(32px) saturate(180%);

  /* Easing */
  --eg: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="black"] {
  --glass-bg:        hsla(0, 0%, 4%, .65);
  --glass-bg-solid:  hsla(0, 0%, 6%, .88);
  --glass-card:      hsla(195, 30%, 8%, .55);
  --glass-card-2:    hsla(195, 30%, 12%, .65);
  --glass-card-hi:   hsla(195, 30%, 16%, .75);
  --glass-border:    hsla(195, 50%, 70%, .08);
  --glass-border-2:  hsla(195, 70%, 70%, .15);
}

[data-theme="blue"] {
  --glass-bg:        hsla(215, 60%, 9%, .65);
  --glass-bg-solid:  hsla(215, 60%, 12%, .88);
  --glass-card:      hsla(215, 50%, 16%, .55);
  --glass-card-2:    hsla(215, 50%, 22%, .65);
  --glass-card-hi:   hsla(215, 50%, 28%, .72);
  --glass-border:    hsla(195, 100%, 75%, .15);
  --glass-border-2:  hsla(195, 100%, 75%, .25);
  --glass-cyan:      hsla(195, 100%, 65%, .18);
}

[data-theme="golden"] {
  --glass-bg:        hsla(36, 30%, 8%, .65);
  --glass-bg-solid:  hsla(36, 30%, 12%, .88);
  --glass-card:      hsla(36, 25%, 16%, .50);
  --glass-card-2:    hsla(36, 25%, 22%, .60);
  --glass-card-hi:   hsla(36, 25%, 28%, .70);
  --glass-border:    hsla(43, 100%, 75%, .12);
  --glass-border-2:  hsla(43, 100%, 75%, .20);
}

[data-theme="light"] {
  --glass-bg:        hsla(0, 0%, 100%, .65);
  --glass-bg-solid:  hsla(0, 0%, 100%, .88);
  --glass-card:      hsla(0, 0%, 100%, .55);
  --glass-card-2:    hsla(0, 0%, 100%, .70);
  --glass-card-hi:   hsla(0, 0%, 100%, .80);
  --glass-surface:   hsla(195, 100%, 50%, .03);
  --glass-border:    hsla(210, 30%, 30%, .10);
  --glass-border-2:  hsla(195, 60%, 40%, .20);
  --glass-cyan:      hsla(195, 100%, 50%, .12);
  --glass-blue:      hsla(220, 90%, 50%, .10);
  --gs-sm:  0 2px 8px hsla(210, 30%, 30%, .08),
            inset 0 1px 0 hsla(0, 0%, 100%, .60);
  --gs:     0 4px 16px hsla(210, 30%, 30%, .10),
            inset 0 1px 0 hsla(0, 0%, 100%, .70);
  --gs-lg:  0 12px 40px hsla(210, 30%, 30%, .12),
            inset 0 1px 0 hsla(0, 0%, 100%, .80);
}

/* ══════════════════════════════════════════════════════════
   BODY — SOLID BLACK BACKGROUND
   El fondo del fondo es negro puro. Las superficies glass
   se transparentan SOBRE este negro (el blur solo difumina
   negro, no muestra información de otras pestañas).
   ══════════════════════════════════════════════════════════ */
html, body { height: 100%; overflow: hidden; }
body {
  background: #000 !important;
  background-attachment: fixed !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum';
  letter-spacing: -.011em;
  color: hsl(210, 15%, 92%);
}

[data-theme="black"] body { background: #000 !important; }
[data-theme="blue"] body  { background: hsl(215, 80%, 4%) !important; }
[data-theme="golden"] body { background: hsl(36, 30%, 4%) !important; }
[data-theme="light"] body  { background: hsl(220, 20%, 96%) !important; color: hsl(220, 30%, 12%); }

/* Main content area is also solid black so glass surfaces
   inside it only blur the black background, not other tabs. */
.layout, .main, [id^="tab-"] {
  background: #000 !important;
}
[data-theme="blue"] .layout, [data-theme="blue"] .main, [data-theme="blue"] [id^="tab-"] { background: hsl(215, 80%, 4%) !important; }
[data-theme="golden"] .layout, [data-theme="golden"] .main, [data-theme="golden"] [id^="tab-"] { background: hsl(36, 30%, 4%) !important; }
[data-theme="light"] .layout, [data-theme="light"] .main, [data-theme="light"] [id^="tab-"] { background: hsl(220, 20%, 96%) !important; }

/* Sidebar hidden on tabs that don't use it — must beat
   redesign.css ".sb { display: flex !important }".
   Desktop only: on mobile/tablet (≤1024px) the sidebar is a slide-in drawer
   regardless of the desktop `no-sb` collapse state. Hiding it there made the
   burger ☰ a no-op (only the blurred backdrop showed up — issue from screenshot). */
@media (min-width: 1025px) {
  .layout.no-sb .sb { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   NAV BAR
   ══════════════════════════════════════════════════════════ */
.nav {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--bf-lg) !important;
  backdrop-filter: var(--bf-lg) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 0 hsla(195, 80%, 80%, .04), 0 4px 24px hsla(0,0%,0%,.20) !important;
}

.tab {
  transition: all .25s var(--eg) !important;
  border-radius: 10px !important;
}
.tab:hover { background: var(--glass-card) !important; }
.tab.active, .tab[data-active] {
  background: var(--glass-cyan) !important;
  color: hsl(195, 100%, 75%) !important;
  box-shadow: var(--glass-inset), 0 0 16px hsla(195, 100%, 60%, .15) !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.sb {
  background: var(--glass-bg-solid) !important;
  -webkit-backdrop-filter: var(--bf-lg) !important;
  backdrop-filter: var(--bf-lg) !important;
  border-right: 1px solid var(--glass-border) !important;
}
.sb .sblk { border-bottom: 1px solid var(--glass-border) !important; }

/* ══════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════ */
.sbar {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--bf) !important;
  backdrop-filter: var(--bf) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.sc {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  box-shadow: var(--gs-sm);
  transition: all .25s var(--eg) !important;
}
.sc:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--gs);
}

/* ══════════════════════════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════════════════════════ */
.toolbar {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--bf) !important;
  backdrop-filter: var(--bf) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.swrap {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--glass-inset);
}
.swrap:focus-within {
  border-color: hsla(195, 100%, 60%, .45) !important;
  box-shadow: var(--glass-inset), 0 0 16px hsla(195, 100%, 60%, .12) !important;
}

/* ══════════════════════════════════════════════════════════
   DTBL (table wrapper) — transparent, parent .main is black
   ══════════════════════════════════════════════════════════ */
.dtbl { background: transparent !important; }

/* ══════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════ */
thead tr {
  background: var(--glass-bg-solid) !important;
}
tbody tr {
  border-bottom: 1px solid var(--glass-border) !important;
  transition: background .15s var(--eg);
}
tbody tr:hover { background: var(--glass-card) !important; }

/* ══════════════════════════════════════════════════════════
   PANEL / DRAWER
   ══════════════════════════════════════════════════════════ */
.panel {
  background: var(--glass-bg-solid) !important;
  -webkit-backdrop-filter: var(--bf-lg) !important;
  backdrop-filter: var(--bf-lg) !important;
  border-left: 1px solid var(--glass-border) !important;
  box-shadow: -8px 0 48px hsla(0,0%,0%,.30) !important;
}
.ptop { border-bottom: 1px solid var(--glass-border) !important; }
.ptabs { border-bottom: 1px solid var(--glass-border) !important; }
.pactions .paBtn {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .2s var(--eg);
}
.pactions .paBtn:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}

/* CRM cards inside panel */
.crm-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--gs-sm);
  transition: all .25s var(--eg);
}
.crm-card:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}

/* ══════════════════════════════════════════════════════════
   ANALYTICS — KPI cards
   ══════════════════════════════════════════════════════════ */
.ana-kpi {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  transition: all .25s var(--eg) !important;
}
.ana-kpi:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
  transform: translateY(-2px);
  box-shadow: var(--gs), var(--glass-glow-cyan);
}
.ana-kpi.glow-accent {
  border-color: hsla(43, 100%, 60%, .25) !important;
  box-shadow: var(--gs), var(--glass-glow-yellow);
}

.ana-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}

/* ══════════════════════════════════════════════════════════
   OUTREACH
   ══════════════════════════════════════════════════════════ */
.outreach-tabs {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.outreach-tab {
  border-radius: 8px !important;
  transition: all .2s var(--eg) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.outreach-tab:hover { background: var(--glass-card-2) !important; }
.outreach-tab.active {
  background: var(--glass-cyan) !important;
  border-color: hsla(195, 100%, 60%, .25) !important;
  color: hsl(195, 100%, 75%) !important;
  box-shadow: 0 0 12px hsla(195, 100%, 60%, .15);
}

.outreach-kpi {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  transition: all .25s var(--eg) !important;
}
.outreach-kpi:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
  transform: translateY(-2px);
  box-shadow: var(--gs), var(--glass-glow-cyan);
}

.outreach-compose {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}

.outreach-ch-metric-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  transition: all .25s var(--eg) !important;
}
.outreach-ch-metric-card:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--gs);
}

.outreach-conv-tab {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .2s var(--eg);
}
.outreach-conv-tab.active {
  background: var(--y-accent-soft) !important;
  border-color: hsla(43, 100%, 60%, .35) !important;
  color: var(--y-accent) !important;
  box-shadow: 0 0 12px hsla(43, 100%, 60%, .12);
}

.outreach-channel-btn {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  transition: all .25s var(--eg) !important;
}
.outreach-channel-btn:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}
.outreach-channel-btn.active {
  background: var(--y-accent-soft) !important;
  border-color: hsla(43, 100%, 60%, .35) !important;
  box-shadow: 0 0 16px hsla(43, 100%, 60%, .15);
}

/* ══════════════════════════════════════════════════════════
   KANBAN — Pipeline cards
   ══════════════════════════════════════════════════════════ */
.psh {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px 12px 0 0 !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.pcard {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  transition: all .2s var(--eg) !important;
}
.pcard:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--gs);
}

/* ══════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════ */
.mo {
  background: hsla(0, 0%, 0%, .55) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
.mo-box,
#settingsModal > div {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 16px !important;
  box-shadow: var(--gs-lg) !important;
  -webkit-backdrop-filter: var(--bf-lg) !important;
  backdrop-filter: var(--bf-lg) !important;
}

.settings-section { border-bottom-color: var(--glass-border) !important; }
.settings-input {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  transition: all .2s var(--eg);
}
.settings-input:focus {
  border-color: hsla(195, 100%, 60%, .45) !important;
  box-shadow: 0 0 12px hsla(195, 100%, 60%, .12) !important;
}
.sett-tabs { border-bottom: 1px solid var(--glass-border) !important; }

/* ══════════════════════════════════════════════════════════
   ANALYZER
   ══════════════════════════════════════════════════════════ */
.az-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.az-metric {
  background: var(--glass-card-2) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--glass-inset);
}
.az-plat-btn {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .2s var(--eg);
}
.az-plat-btn:hover, .az-plat-btn.active {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}

/* ══════════════════════════════════════════════════════════
   IG BOT (also used by X/Telegram)
   ══════════════════════════════════════════════════════════ */
.igbot-header {
  background: linear-gradient(135deg, hsla(195, 80%, 30%, .35), hsla(220, 80%, 35%, .30)) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: var(--bf);
  backdrop-filter: var(--bf);
  box-shadow: var(--gs);
}
.igbot-kpi {
  background: var(--glass-card-2) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--glass-inset);
}
.igbot-nav-btn {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .2s var(--eg);
}
.igbot-nav-btn:hover, .igbot-nav-btn.active {
  background: var(--glass-cyan) !important;
  border-color: hsla(195, 100%, 60%, .30) !important;
  color: hsl(195, 100%, 75%) !important;
}
.igbot-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.ig-toast {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 12px !important;
  box-shadow: var(--gs) !important;
  -webkit-backdrop-filter: var(--bf);
  backdrop-filter: var(--bf);
}
.ig-modal-backdrop {
  background: hsla(0, 0%, 0%, .55) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
.ig-modal-box {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 16px !important;
  box-shadow: var(--gs-lg) !important;
  -webkit-backdrop-filter: var(--bf-lg) !important;
  backdrop-filter: var(--bf-lg) !important;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — yellow primary, glass secondary
   ══════════════════════════════════════════════════════════ */
.btn-ghost, .btn-subtle {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .2s var(--eg);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.btn-ghost:hover, .btn-subtle:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}

.btn-primary {
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, hsl(43, 100%, 55%), hsl(38, 100%, 50%)) !important;
  color: hsl(220, 30%, 10%) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px hsla(43, 100%, 50%, .35),
              inset 0 1px 0 hsla(0,0%,100%,.20) !important;
  transition: all .2s var(--eg);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px hsla(43, 100%, 50%, .45),
              inset 0 1px 0 hsla(0,0%,100%,.25) !important;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════
   FILTER CHIPS
   ══════════════════════════════════════════════════════════ */
.fchip {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  transition: all .2s var(--eg);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.fchip:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}
.fchip.on {
  background: var(--y-accent-soft) !important;
  border-color: hsla(43, 100%, 55%, .35) !important;
  box-shadow: 0 0 12px hsla(43, 100%, 60%, .15);
}

/* ══════════════════════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════════════════════ */
.cfgi, .nin, .api-in, .kwi,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
select, textarea {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .25s var(--eg) !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.cfgi:focus, .nin:focus, .api-in:focus, .kwi:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color: hsla(195, 100%, 60%, .45) !important;
  box-shadow: 0 0 0 3px hsla(195, 100%, 60%, .12),
              0 0 16px hsla(195, 100%, 60%, .12) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   DROPDOWNS
   ══════════════════════════════════════════════════════════ */
.dmenu, .theme-menu {
  background: var(--glass-bg-solid) !important;
  -webkit-backdrop-filter: var(--bf-lg) !important;
  backdrop-filter: var(--bf-lg) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 12px !important;
  box-shadow: var(--gs-lg) !important;
}
.dopt:hover, .theme-opt:hover { background: var(--glass-card) !important; }

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════ */
.empty-icon {
  background: var(--glass-card) !important;
  border: 1px dashed var(--glass-border-2) !important;
}

/* ══════════════════════════════════════════════════════════
   LOGBAR
   ══════════════════════════════════════════════════════════ */
.logbar {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
  border-top: 1px solid var(--glass-border);
}
.db-badge {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
}

/* ══════════════════════════════════════════════════════════
   REDESIGN CARDS (used in some screens)
   ══════════════════════════════════════════════════════════ */
.r-card, .r-section, .r-stat, .r-action, .r-sim-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}
.r-action:hover, .r-sim-card:hover {
  background: var(--glass-card-2) !important;
  border-color: var(--glass-border-2) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLLBARS
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--glass-border-2);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: hsla(195, 100%, 70%, .30); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: hsla(210, 30%, 30%, .15); }

/* ══════════════════════════════════════════════════════════
   FOCUS / SELECTION
   ══════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid hsla(195, 100%, 60%, .45) !important;
  outline-offset: 2px;
}
::selection { background: hsla(195, 100%, 60%, .25); color: inherit; }

/* ══════════════════════════════════════════════════════════
   CHAT / DM UI
   ══════════════════════════════════════════════════════════ */
.xdm-layout {
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--glass-card) !important;
  -webkit-backdrop-filter: var(--bf);
  backdrop-filter: var(--bf);
}
.xdm-sidebar {
  background: var(--glass-bg-solid) !important;
  -webkit-backdrop-filter: var(--bf);
  backdrop-filter: var(--bf);
  border-right: 1px solid var(--glass-border) !important;
}
.xdm-sidebar-header { border-bottom: 1px solid var(--glass-border) !important; }
.xdm-contact:hover { background: var(--glass-card) !important; }
.xdm-contact.active {
  background: var(--glass-cyan) !important;
  border-color: hsla(195, 100%, 60%, .30) !important;
}
.xdm-search-input {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
}

/* ══════════════════════════════════════════════════════════
   IMPORT/INSIGHTS
   ══════════════════════════════════════════════════════════ */
.imp-drop, .imp-preview,
.insight-card, .ins-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--gs-sm);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}

/* ══════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════ */
.kf-toast, .x-toast {
  background: var(--glass-bg-solid) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 12px !important;
  box-shadow: var(--gs) !important;
  -webkit-backdrop-filter: var(--bf);
  backdrop-filter: var(--bf);
}

/* ══════════════════════════════════════════════════════════
   STATUS INDICATOR / TOKEN BAR
   ══════════════════════════════════════════════════════════ */
.status-ind, .tokbar {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR CONFIG / API BOX
   ══════════════════════════════════════════════════════════ */
.scfg, .api-box {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--glass-inset);
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}

/* ══════════════════════════════════════════════════════════
   OUTREACH SIGNATURE / TEMPLATE CARDS
   ══════════════════════════════════════════════════════════ */
.outreach-signature-editor, .outreach-tmpl-card {
  background: var(--glass-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: var(--bf-sm);
  backdrop-filter: var(--bf-sm);
}

/* ══════════════════════════════════════════════════════════
   FONT COHERENCE
   ══════════════════════════════════════════════════════════ */
.nav, .tabs, .tab, .brand, .bname,
.sbar, .sc, .sv, .sl,
.toolbar, .btn, .btn-ghost, .btn-subtle, .btn-primary,
.fchip,
.outreach-tab, .outreach-kpi-v, .outreach-kpi-l,
.outreach-compose-title, .outreach-ch-metric-name,
.ana-kpi-v, .ana-kpi-l, .ana-card-title,
.az-card-title, .az-metric-v, .az-metric-l,
.igbot-header, .igbot-kpi,
.pnm, .ptab, .psectit,
.settings-title, .settings-label,
.crm-card-title, .crm-card-header,
.empty-t, .empty-s,
.r-greeting, .r-section-title, .r-action-title,
.r-sim-name, .r-kol-name {
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
}

.tc, .tok-lbl, .tv, .tch,
.r-stat-lbl, .r-stat-sub,
.r-kol-meta, .r-sim-meta, .r-sim-score,
.r-kw-sec-title,
.kwsc, .kwsg,
.db-badge,
code, pre, .code,
[data-stat], .save-status {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace !important;
}