:root{
  --ux-bg:#000;
  --ux-panel:#000;
  --ux-panel-2:rgba(255,255,255,.03);
  --ux-border:rgba(255,255,255,.07);
  --ux-border-2:rgba(255,255,255,.12);
  --ux-text:#f5f5f5;
  --ux-text-2:#b7b7b7;
  --ux-text-3:#818181;
  --ux-white:#ffffff;
  /* Accent — used sparingly on active states only */
  --ux-purple:#966fd6;
  --ux-purple-soft:rgba(150,111,214,.08);
  --ux-purple-border:rgba(150,111,214,.16);
}
html,body,.app,.main,.content,.page,.sidebar,.topbar,.sidebar-header,.sidebar-footer{background:var(--ux-bg)!important;color:var(--ux-text)!important}
body{background:#000!important}
body::before,.sidebar::before,.stat-card::before,.card::before,.audit-panel::before,.hero-panel::before,.quick-link-card::before,.leads-toolbar::before,.lead-row::before,.auth-container::before,.btn::before,.btn::after{display:none!important;content:none!important}
*{box-shadow:none!important}
body{font-family:Inter,system-ui,sans-serif;letter-spacing:0}
h1,h2,h3,h4,h5,h6,.page-title,.hero-heading,.card-title,.admin-user-title,.analytics-title-lg{font-family:Inter,system-ui,sans-serif!important;letter-spacing:-.03em!important;font-weight:600!important}
.main{margin-left:232px!important;width:calc(100% - 232px)!important}
.sidebar{width:232px!important;border-right:1px solid var(--ux-border)!important;background:#000!important}
.topbar{padding:18px 24px!important;border-bottom:1px solid var(--ux-border)!important;background:#000!important;backdrop-filter:none!important;position:sticky;top:0}
.sidebar-header{padding:18px 14px 14px!important;border-bottom:1px solid var(--ux-border)!important;gap:14px!important}
.sidebar-brand{padding:2px 6px 4px!important;gap:10px!important;align-items:center!important}
.sidebar-logo{width:18px;height:18px;display:grid;place-items:center}
.sidebar-logo img{width:18px;height:18px}
.brand-lockup{display:grid!important;gap:2px}
.brand-wordmark-text{font-size:14px!important;letter-spacing:.18em!important;font-weight:700!important;color:#f4f4f4!important}
.sidebar-tagline{font-size:9px!important;color:var(--ux-text-3)!important;letter-spacing:.14em!important;text-transform:uppercase}
.profile-trigger{min-height:56px!important;padding:10px 12px!important;border-radius:16px!important;background:#000!important;border:1px solid var(--ux-border)!important}
.profile-trigger:hover{background:#000!important;border-color:rgba(255,255,255,.12)!important;transform:none!important}
.profile-avatar{width:34px!important;height:34px!important;border-radius:10px!important;font-size:11px!important;letter-spacing:.06em!important;font-weight:700!important;flex:0 0 34px!important;background:#111!important;color:rgba(255,255,255,.7)!important;border:1px solid rgba(255,255,255,.1)!important}
.profile-meta{display:grid!important;gap:2px}
.profile-name{font-size:12px!important;color:#fff!important}
.profile-email{font-size:11px!important;color:var(--ux-text-3)!important}
.profile-panel{padding:10px!important;border-radius:16px!important;background:#000!important;border:1px solid var(--ux-border)!important}
.profile-row{padding:10px 2px!important;border-top:1px solid rgba(255,255,255,.05)!important}
.profile-row span,.profile-row strong,.profile-row .user-plan{font-size:11px!important}
.sidebar-nav{padding:12px 10px 16px!important}
.nav-section{margin-bottom:14px!important}
.nav-label{padding:0 8px!important;margin-bottom:8px!important;color:var(--ux-text-3)!important;font-size:10px!important}
.nav-item{min-height:40px!important;padding:9px 10px!important;border-radius:14px!important;border:1px solid transparent!important;background:transparent!important;color:var(--ux-text-2)!important;gap:10px!important;transition:border-color .2s ease, background .2s ease, color .2s ease!important}
.nav-item:hover{background:transparent!important;border-color:rgba(255,255,255,.06)!important;color:#fff!important}
.nav-item.active{background:transparent!important;border-color:rgba(255,255,255,.1)!important;color:#fff!important}
.nav-icon{width:16px!important;height:16px!important;stroke-width:1.8!important;flex:0 0 16px!important;transition:transform .25s ease, opacity .2s ease!important;opacity:.9}
.nav-item:hover .nav-icon,.nav-item.active .nav-icon{transform:translateY(-1px);opacity:1}
.nav-item[data-anim="bars"] .nav-icon{animation:uxPulseBars 7s ease-in-out infinite}
.nav-item[data-anim="leads"] .nav-icon{animation:uxPulseLeads 8s ease-in-out infinite}
.nav-item[data-anim="audit"] .nav-icon{animation:uxPulseAudit 8.5s ease-in-out infinite}
.nav-item[data-anim="settings"] .nav-icon{animation:uxPulseCog 9s ease-in-out infinite}
@keyframes uxPulseBars{0%,100%{transform:none}50%{transform:translateY(-1px) scale(1.03)}}
@keyframes uxPulseLeads{0%,100%{transform:none}40%{transform:translateX(1px)}60%{transform:translateX(-1px)}}
@keyframes uxPulseAudit{0%,100%{transform:none}50%{transform:scale(1.04)}}
@keyframes uxPulseCog{0%,100%{transform:none}50%{transform:rotate(8deg)}}

.topbar-content{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:16px!important;align-items:center!important}
.topbar-left{min-width:0;display:flex;align-items:center;gap:10px!important}
.topbar-actions{display:flex!important;align-items:center!important;gap:10px!important;justify-content:flex-end!important}
.page-title{font-size:24px!important;line-height:1!important;margin:0!important}
.page-subtitle,.dashboard-intro-copy,.tiny-copy,.settings-note,.outreach-sub,.auth-helper,.auth-subtitle{color:var(--ux-text-3)!important;line-height:1.5!important}
.content{padding:24px!important;max-width:none!important}
.page{display:none}
.page.active{display:block}
.dashboard-intro,.hero-panel,.card,.stat-card,.settings-card,.audit-panel,.outreach-panel,.minimal-table,.history-item,.support-message,.support-bot-panel,.leads-toolbar,.lead-row,.admin-user-meta-card,.admin-users-card,.analytics-main-card,.analytics-side-card,.composer-history-card,.outreach-dialog{background:#000!important;border:1px solid var(--ux-border)!important;border-radius:18px!important;box-shadow:none!important}
/* Stat cards */
.stat-card,.clean-admin-stat{background:#000!important;position:relative}
/* Table wrappers */
.table-wrapper{overflow:auto!important;border-radius:16px!important;border:1px solid var(--ux-border)!important;background:#000!important}
tbody tr:hover{background:rgba(255,255,255,.03)!important}
/* Inputs */
.form-input,.filter-select,textarea{background:#000!important;border:1px solid var(--ux-border)!important;color:#fff!important;border-radius:12px!important;padding:11px 12px!important;min-height:40px!important}
.form-input:focus,.filter-select:focus,textarea:focus{border-color:rgba(255,255,255,.18)!important;outline:none!important}
.dashboard-intro,.hero-panel,.card,.stat-card,.settings-card,.audit-panel,.leads-toolbar{padding:18px!important}
#composerPage.active .composer-shell{padding:18px!important;background:#000!important;border:1px solid var(--ux-border)!important;border-radius:18px!important;box-shadow:none!important}
.dashboard-intro{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:12px!important;margin-bottom:16px!important}
.dashboard-intro .dashboard-intro-copy{max-width:56ch!important}
.stats-grid,.clean-summary-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.stat-card,.clean-admin-stat{min-height:116px!important;justify-content:space-between!important}
.hero-stat-number,.analytics-big-number{font-size:40px!important;line-height:1!important;letter-spacing:-.05em!important;color:#fff!important}
.card-header,.audit-header,.admin-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding-bottom:0!important;margin-bottom:14px!important;border-bottom:none!important}
.card-title{font-size:16px!important;line-height:1.2!important;margin:0!important}
.btn{height:38px!important;min-height:38px!important;padding:0 14px!important;border-radius:12px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.01em!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;transition:background .2s ease,border-color .2s ease,color .2s ease!important}
.btn-sm{height:34px!important;min-height:34px!important;padding:0 12px!important}
.btn-primary{background:#fff!important;color:#000!important;border:1px solid rgba(255,255,255,.9)!important}
.btn-primary:hover{background:#f1f1f1!important}
.btn-secondary,.admin-tab,.page-pill{background:#000!important;color:#fff!important;border:1px solid var(--ux-border)!important}
.btn-secondary:hover,.admin-tab:hover,.page-pill:hover{background:rgba(255,255,255,.03)!important;border-color:var(--ux-border-2)!important}
.admin-tab.active{background:#fff!important;color:#000!important;border-color:#fff!important}
.inline-actions,.outreach-actions,.table-actions,.admin-user-actions,.bot-actions,.composer-actions,.pagination-actions,.lead-actions,.filters-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;align-items:center!important}
.inline-actions .btn,.outreach-actions .btn,.table-actions .btn,.lead-actions .btn,.admin-tabbar .btn{min-width:118px!important;justify-content:center!important}
.filters{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;align-items:end!important}
.form-group{display:grid!important;gap:8px!important;margin:0!important}
.form-label,.label{font-size:11px!important;letter-spacing:.08em!important;color:var(--ux-text-3)!important;text-transform:uppercase!important;font-weight:600!important;margin:0!important}

.settings-grid,.admin-layout-grid,.outreach-grid,.admin-overview-grid,.admin-user-meta-grid{display:grid!important;gap:14px!important}
#composerPage.active .composer-shell{display:grid!important;gap:14px!important}
.settings-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,.78fr)!important;align-items:start!important}
#dashboardPage .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#leadsPage .settings-grid{grid-template-columns:minmax(0,1.4fr) minmax(300px,.82fr)!important}
#adminPage .settings-grid{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)!important}
.admin-topbar{margin-bottom:16px!important}
.admin-tabbar{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.table-wrapper{overflow:auto!important;border-radius:16px!important;border:1px solid var(--ux-border)!important;background:#000!important}
table{width:100%!important;border-collapse:collapse!important}
th,td{padding:14px 16px!important;text-align:left!important;vertical-align:middle!important}
thead th{font-size:11px!important;color:var(--ux-text-3)!important;text-transform:uppercase!important;letter-spacing:.08em!important;border-bottom:1px solid var(--ux-border)!important;white-space:nowrap!important}
tbody td{font-size:13px!important;color:#f0f0f0!important;border-bottom:1px solid rgba(255,255,255,.04)!important}
tbody tr:hover{background:rgba(255,255,255,.015)!important}
.clean-users-table .user-name{font-size:14px!important;font-weight:600!important;line-height:1.3!important}
.clean-users-table .user-email,.clean-users-table .tiny-copy{font-size:12px!important;color:var(--ux-text-2)!important}
.clean-users-table .plan-badge,.admin-user-plan,.status-chip,.user-plan{height:28px!important;min-height:28px!important;padding:0 10px!important;border-radius:999px!important;background:#000!important;border:1px solid var(--ux-border)!important;color:#fff!important;font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.leads-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:end!important}
.lead-row{display:grid!important;grid-template-columns:1.35fr .9fr .9fr .8fr auto!important;gap:12px!important;align-items:center!important;padding:14px 16px!important;border-radius:16px!important}
.lead-row > *{min-width:0}
.lead-row .lead-name,.lead-row strong{font-size:14px!important;line-height:1.3!important}
.lead-row .tiny-copy,.lead-row small{font-size:12px!important;color:var(--ux-text-3)!important}
.pagination{padding-top:12px!important}
.page-pill{min-width:38px!important;height:38px!important;border-radius:12px!important}
.history-list{gap:10px!important;max-height:none!important;overflow:visible!important}
.history-item{padding:12px 14px!important}
.history-item strong{font-size:12px!important;margin-bottom:2px!important}
.history-item p,.history-item span{font-size:12px!important;color:var(--ux-text-2)!important;line-height:1.5!important;margin:0!important}
#settingsPage{display:block!important}
#settingsPage .settings-card{max-width:920px!important;margin:0 auto!important}
.bot-chip{background:#000!important;border:1px solid var(--ux-border)!important;border-radius:999px!important;padding:0 10px!important;height:28px!important;color:#fff!important;font-size:11px!important}
.support-bot-toggle{width:40px!important;height:40px!important;border-radius:14px!important;background:#fff!important;color:#000!important;border:1px solid rgba(255,255,255,.85)!important}
.auth-page{background:#000!important}
.auth-container{background:#000!important;border:1px solid var(--ux-border)!important;border-radius:18px!important;backdrop-filter:none!important}
.auth-heading{font-size:34px!important;line-height:1.02!important}
.google-divider{font-size:10px!important;color:var(--ux-text-3)!important}
@media (max-width: 1240px){
  .stats-grid,.clean-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dashboardPage .settings-grid,#leadsPage .settings-grid,#adminPage .settings-grid,.settings-grid,.composer-shell,.outreach-grid,.admin-layout-grid{grid-template-columns:1fr!important}
  .lead-row{grid-template-columns:repeat(2,minmax(0,1fr)) auto!important}
  .lead-actions{grid-column:1/-1!important;justify-content:flex-start!important}
}
@media (max-width: 980px){
  .main{margin-left:0!important;width:100%!important}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:translateX(0)}
  .topbar-content{grid-template-columns:1fr!important}
  .topbar-actions{justify-content:flex-start!important}
  .content{padding:18px!important}
}
@media (max-width: 720px){
  .sidebar{width:100%!important}
  .dashboard-intro,.leads-toolbar{grid-template-columns:1fr!important}
  .stats-grid,.clean-summary-grid,.filters,.admin-user-meta-grid{grid-template-columns:1fr!important}
  .lead-row{grid-template-columns:1fr!important}
  th,td{padding:12px 14px!important}
  .inline-actions .btn,.outreach-actions .btn,.table-actions .btn,.lead-actions .btn,.admin-tabbar .btn{min-width:0!important;flex:1 1 calc(50% - 8px)!important}
}

/* ============================================================
   MOBILE DASHBOARD OVERRIDES — Mobile-first improvements
   ============================================================ */

/* Improved tap targets on mobile */
@media (max-width: 980px) {
  .nav-item { min-height: 44px; }
  .btn { min-height: 44px; }
  .form-input, .filter-select { min-height: 48px; }

  /* Menu toggle — use existing .menu-toggle from dashboard JS */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,10,10,.9);
    color: #f3f4f6;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Topbar: stack title + toggle */
  .topbar-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Reduce content padding on tablet */
  .content { padding: 18px 16px 32px !important; }

  /* Sidebar overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    z-index: 99;
  }
  .sidebar-backdrop.active { display: block; }
}

/* Small phone improvements */
@media (max-width: 480px) {
  /* Stack auth cards fully */
  .lixa-auth-card {
    padding: 24px 18px 20px !important;
    border-radius: 16px !important;
  }
  .auth-container {
    padding: 24px 18px 20px !important;
    border-radius: 16px !important;
  }

  /* Lead table: single column stacked cards */
  .lead-table-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
  }
  .lead-table-head { display: none !important; }
  .lead-table-cell::before {
    display: block !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .13em !important;
    color: rgba(255,255,255,.35) !important;
    margin-bottom: 3px !important;
  }
  .lead-table-row .lead-table-cell:nth-child(2)::before { content: 'Website'; }
  .lead-table-row .lead-table-cell:nth-child(3)::before { content: 'Contact'; }
  .lead-table-row .lead-table-cell:nth-child(4)::before { content: 'Score'; }
  .lead-table-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 4px !important;
  }

  /* Filters: single col on small phones */
  .filters, #leadsPage .filters {
    grid-template-columns: 1fr !important;
  }

  /* Stats: 1 col on tiny */
  .stats-grid, .mini-stats, .admin-overview-grid {
    grid-template-columns: 1fr !important;
  }

  /* Topbar title sizing */
  .page-title { font-size: 18px !important; }

  /* Content padding */
  .content { padding: 14px 12px 28px !important; }
  .topbar { padding: 12px 14px !important; }

  /* Support bot: full width at bottom */
  .support-bot {
    right: 10px !important;
    bottom: 10px !important;
  }
  .support-bot-panel {
    width: calc(100vw - 20px) !important;
  }

  /* Dashboard hero panel */
  .hero-panel { padding: 18px 16px !important; }
  .hero-heading { font-size: 24px !important; }
  .hero-copy { font-size: 13px !important; }

  /* Audit stats: 2 col on phones */
  .audit-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Pagination: wrap nicely */
  .pagination {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .pagination-controls { flex-wrap: wrap !important; }
}

/* Table horizontal scroll wrapper improvements */
.table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
table { min-width: 640px; }

/* Back to Home link — shown on auth pages */
#authHomeLink {
  display: inline-flex;
  position: fixed;
  top: 14px;
  left: 14px;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.42);
  background: rgba(8,8,8,.88);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 8px 12px;
  z-index: 9999;
  transition: color .18s, background .18s;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#authHomeLink:hover { color: rgba(255,255,255,.8); background: rgba(12,12,12,.96); }
#authHomeLink svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }

/* Hide auth home link when dashboard app is visible */
body.app-ready #authHomeLink { display: none !important; }

/* ================================================================
   LEADS OVERVIEW CHART — fix stretched / distorted layout
   ================================================================ */
#leadsQualityChart{overflow:hidden!important;max-height:300px!important;min-height:180px!important}
#leadsQualityChart svg,#qualityChartSvg{width:100%!important;height:auto!important;max-height:280px!important;display:block!important}
.chart-card-svg{width:100%;height:auto;max-height:280px;display:block}
.analytics-chart-wrap{position:relative;width:100%;overflow:hidden}
.analytics-chart-wrap svg{width:100%;height:auto;display:block}

/* ================================================================
   PURPLE ACCENTS — subtle, matching the hero code card on the site
   ================================================================ */
/* Active nav icon — just white, no colour */
.nav-item.active .nav-icon{opacity:1}
/* Stat card number */
.hero-stat-number,.analytics-big-number,.stat-value{color:#fff!important}
/* Primary button focus — neutral */
.btn-primary:focus{outline:none!important}
/* Badge variant — neutral */
.badge-purple,.tag-purple{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.7)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:999px!important;padding:2px 8px!important;font-size:10px!important;font-weight:600!important;letter-spacing:.07em!important}
/* Card titles */
.card-title,.settings-card .card-title{color:#fff!important;font-weight:600!important}
.tiny-copy,.settings-note,.outreach-sub{color:rgba(255,255,255,.38)!important}
.stat-label,.stat-card .tiny-copy,.clean-admin-stat .tiny-copy{color:rgba(255,255,255,.4)!important;font-size:11px!important;letter-spacing:.06em!important}
/* History items — no coloured border */
.history-item{border-left:2px solid transparent!important}

/* ================================================================
   PROFILE AVATAR — clean neutral, no colour
   ================================================================ */
body .profile-avatar,
.profile-trigger .profile-avatar,
.profile-panel .profile-avatar,
#profileAvatar{
  background:#000!important;
  color:#d0d0d0!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:12px!important;
}
.fake-user-avatar,.admin-user-avatar{
  background:#000!important;
  color:#c0c0c0!important;
  border-color:rgba(255,255,255,.08)!important;
  border-radius:10px!important;
}

/* ================================================================
   FULL #000 SWEEP — ensure every sub-component uses the right bg
   ================================================================ */
.sidebar,.topbar,
.page,#dashboardPage,#leadsPage,#settingsPage,
#auditorPage,#supportPage,#adminPage,#composerPage,#templatesPage{
  background:#000!important;
}
/* Override any legacy #000 or #000 that may bleed through */
.settings-card,.composer-shell,.outreach-panel,.audit-panel,
.admin-users-card,.admin-user-meta-card,.analytics-main-card,
.analytics-side-card,.composer-history-card{
  background:#000!important;
}
/* Plan/status badges */
.clean-users-table .plan-badge,.admin-user-plan,.status-chip,.user-plan{
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--ux-border)!important;
}
/* Table body */
.table-wrapper,table{background:#000!important}
tbody tr:hover{background:rgba(255,255,255,.03)!important}
thead th,tbody td{background:transparent!important}

/* ================================================================
   LIXA OVERHAUL — April 2026
   ================================================================ */

/* ── 1. PAIN SCORE — green=high opportunity, amber=medium, muted=low ── */
.pain-score { font-family: Inter, system-ui, sans-serif !important; }
.pain-score.high  { background: rgba(74,222,128,.10) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.22) !important; }
.pain-score.medium{ background: rgba(251,191,36,.10)  !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.22) !important; }
.pain-score.low   { background: rgba(248,113,113,.10) !important; color: #f87171 !important; border: 1px solid rgba(248,113,113,.22) !important; }

/* ── 2. PROFILE AVATAR — Resend-style blue/slate ── */
.profile-avatar,
#profileAvatar,
.profile-trigger .profile-avatar {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 60%, #1d3a8a 100%) !important;
  color: #e0eaff !important;
  border: 1px solid rgba(37,99,235,.35) !important;
  border-radius: 10px !important;
}
.fake-user-avatar, .admin-user-avatar {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ── 3. INPUT BOXES — match Resend dark style ── */
.form-input, .filter-select, textarea, select {
  background: #0a0a0c !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  color: #f0f0f2 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
}
.form-input:focus, .filter-select:focus, textarea:focus, select:focus {
  border-color: rgba(255,255,255,.18) !important;
  background: #0d0d10 !important;
}
.form-input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,.28) !important;
  font-family: Inter, system-ui, sans-serif !important;
}

/* ── 4. FONT — force Inter everywhere, kill code fonts in support ── */
* { font-family: Inter, system-ui, -apple-system, sans-serif; }
code, pre, .code, kbd { font-family: Inter, system-ui, sans-serif !important; font-size: 12px !important; }
#supportBotInput, #supportBotInput::placeholder,
.support-resend-input, .support-resend-input::placeholder,
.lixa-chat-input, .lixa-chat-input::placeholder {
  font-family: Inter, system-ui, sans-serif !important;
}

/* ── 5. CHART SINGLE COLOR — silver/white only, no orange/purple mix ── */
/* Override the lixa-charts script colours via CSS filter — charts use canvas, 
   controlled in the inline script. We unify the SVG quality chart here. */
#qualityChartSvg path[fill="none"] { stroke: rgba(220,225,235,0.7) !important; filter: none !important; }
#qualityChartSvg .chart-dot { fill: rgba(220,225,235,0.9) !important; stroke: rgba(220,225,235,0.15) !important; }

/* ── 6. DASHBOARD WHITE / SILVER / GREEN accent system ── */
/* Stat values */
.hero-stat-number, .stat-value, .analytics-big-number, .a-num, .a-bignum {
  color: #ffffff !important;
}
/* Card borders - subtle silver */
.settings-card, .card, .stat-card, .audit-panel, .hero-panel,
.history-item, .mini-stat, .dashboard-intro, .leads-toolbar,
.composer-sidebar-card, .composer-editor-card, .admin-users-card {
  border-color: rgba(200,210,220,.07) !important;
}
/* Active nav - white border, clean */
.nav-item.active {
  border-color: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}
/* Page titles */
.page-title { color: #ffffff !important; font-weight: 600 !important; }
/* Section labels - silver */
.stat-label, .form-label, .label, .a-lbl, .filter-label, .card-title {
  color: rgba(200,210,230,.5) !important;
}

/* ── 7. MOBILE GATE — fully redesigned ── */
#lixa-mobile-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 32px 28px;
  text-align: center;
}
#lixa-mobile-gate .gate-logo { display: none !important; }
#lixa-mobile-gate .gate-icon { margin-bottom: 20px; opacity: 1; width: 44px !important; height: 44px !important; }
#lixa-mobile-gate .gate-icon path { stroke: rgba(255,255,255,.55) !important; }
#lixa-mobile-gate .gate-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.15;
}
#lixa-mobile-gate .gate-sub {
  font-size: 13px;
  color: rgba(255,255,255,.38);
  max-width: 28ch;
  line-height: 1.6;
  margin: 0 auto 28px;
}
#lixa-mobile-gate .gate-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 9px 18px;
}
#lixa-mobile-gate .gate-hint svg { opacity: .55; }
/* Subtle grid pattern behind */
#lixa-mobile-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .03;
  background-image: radial-gradient(rgba(255,255,255,.25) .6px, transparent .7px);
  background-size: 6px 6px;
  pointer-events: none;
}
/* Glow orb */
#lixa-mobile-gate::after {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events: none;
}
/* Mobile gate shown via inline @media in dashboard.html */

/* ── 8. TEMPLATES PAGE — full width layout ── */
#templatesPage .settings-grid {
  grid-template-columns: 1fr !important;
  max-width: 100% !important;
  gap: 14px !important;
}
#templatesPage .settings-card {
  width: 100% !important;
  max-width: 100% !important;
}
#templatesPage .history-list {
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 12px !important;
}
#templatesPage .template-item,
#templatesPage .history-item {
  margin: 0 !important;
  border-radius: 14px !important;
  background: #000 !important;
  border-color: rgba(255,255,255,.07) !important;
}
#templatesPage textarea { min-height: 120px !important; }

/* ── 9. AUDIT PAGE ANIMATION — cool multi-step loader ── */
.audit-loading-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 24px;
  gap: 24px;
  text-align: center;
}
.audit-scan-ring {
  position: relative;
  width: 64px;
  height: 64px;
}
.audit-scan-ring svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.audit-scan-ring circle.track {
  stroke: rgba(255,255,255,.06);
}
.audit-scan-ring circle.prog {
  stroke: rgba(220,225,235,.6);
  stroke-dasharray: 163;
  stroke-dashoffset: 163;
  animation: auditScanProg 2.4s ease-in-out infinite;
}
@keyframes auditScanProg {
  0%   { stroke-dashoffset: 163; opacity: 1; }
  60%  { stroke-dashoffset: 24; opacity: 1; }
  90%  { stroke-dashoffset: 0; opacity: .5; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.audit-scan-dot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audit-scan-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(220,225,235,.7);
  animation: auditDotPulse 1.6s ease-in-out infinite;
}
@keyframes auditDotPulse {
  0%, 100% { transform: scale(.8); opacity: .5; }
  50%       { transform: scale(1.2); opacity: 1; }
}
.audit-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}
.audit-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.3);
  animation: auditStepReveal 3s ease-in-out infinite;
}
.audit-step:nth-child(1) { animation-delay: 0s; }
.audit-step:nth-child(2) { animation-delay: .8s; }
.audit-step:nth-child(3) { animation-delay: 1.6s; }
.audit-step:nth-child(4) { animation-delay: 2.2s; }
@keyframes auditStepReveal {
  0%, 10%  { color: rgba(255,255,255,.3); }
  15%, 40% { color: rgba(220,225,235,.85); }
  55%, 100%{ color: rgba(255,255,255,.25); }
}
.audit-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: .7;
}
.audit-step-bar {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
}
.audit-step-fill {
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  width: 0%;
  animation: auditBarFill 3s ease-in-out infinite;
}
.audit-step:nth-child(1) .audit-step-fill { animation-delay: 0s; }
.audit-step:nth-child(2) .audit-step-fill { animation-delay: .8s; }
.audit-step:nth-child(3) .audit-step-fill { animation-delay: 1.6s; }
.audit-step:nth-child(4) .audit-step-fill { animation-delay: 2.2s; }
@keyframes auditBarFill {
  0%, 10%  { width: 0%; }
  40%, 60% { width: 100%; }
  80%, 100%{ width: 100%; opacity: .3; }
}
.audit-loading-label {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  letter-spacing: .04em;
}

/* ================================================================
   LIXA DASHBOARD POLISH — Silver, White, Green accent system
   ================================================================ */

/* ── Stat cards — white numbers, silver labels ── */
.stat-card .stat-value,
.stat-card .hero-stat-number,
.a-num, .hero-stat-number {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Leading stat — green accent for primary KPI */
.stat-card:first-child .stat-value,
.stat-card:first-child .hero-stat-number {
  color: #4ade80 !important;
}

/* Tiny labels above numbers */
.stat-card .stat-label,
.stat-card .hero-stat-label,
.a-lbl, .stat-label {
  color: rgba(180,195,215,.45) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

/* Silver dividers */
.settings-card hr,
.card hr,
.admin-section-divider {
  border-color: rgba(200,215,230,.06) !important;
}

/* Page section headers */
.section-label, .page-section-title, .settings-section-title {
  color: rgba(200,215,235,.5) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Sidebar nav items — active gets white text, inactive stays muted */
.nav-item {
  color: rgba(255,255,255,.38) !important;
  font-size: 13px !important;
}
.nav-item.active,
.nav-item:hover {
  color: rgba(255,255,255,.9) !important;
}
.nav-item.active svg,
.nav-item:hover svg {
  opacity: 1 !important;
}
.nav-item svg { opacity: .45 !important; }

/* Dashboard header bar */
.topbar, .dashboard-topbar, .dash-header {
  border-bottom: 1px solid rgba(200,215,230,.055) !important;
  background: #000 !important;
}

/* Card inner borders — hairline silver */
.card, .settings-card, .stat-card, .audit-panel {
  border: 1px solid rgba(200,215,230,.07) !important;
}

/* Positive delta indicators — green */
.delta-up, .stat-delta.up, .trend-up {
  color: #4ade80 !important;
}
.delta-down, .stat-delta.down, .trend-down {
  color: #f87171 !important;
}

/* Table header — silver text */
thead th {
  color: rgba(190,205,225,.38) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
tbody td {
  color: rgba(240,245,255,.75) !important;
  font-size: 13px !important;
}

/* Search / filter toolbar border */
.leads-toolbar, .filter-bar, .search-bar-wrap {
  border-bottom: 1px solid rgba(200,215,230,.055) !important;
}

/* Green-tinted quick action buttons */
.btn-success {
  background: rgba(74,222,128,.1) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74,222,128,.22) !important;
}
.btn-success:hover {
  background: rgba(74,222,128,.18) !important;
}

/* Purple accent stays for primary actions */
.btn-primary {
  background: #f0f0f3 !important;
  color: #000 !important;
}

/* Support page green online indicator */
.support-status-online, .status-online, .online-dot {
  background: #4ade80 !important;
  box-shadow: 0 0 6px rgba(74,222,128,.5) !important;
}

/* ── Analytics big numbers — white ── */
.analytics-big-number, .hero-big-number {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ── Lead row — subtle hover state ── */
.lead-row {
  border: 1px solid rgba(200,215,230,.06) !important;
  border-radius: 12px !important;
}
.lead-row:hover {
  border-color: rgba(200,215,230,.12) !important;
  background: rgba(255,255,255,.012) !important;
}

/* ── Empty states ── */
.empty-state {
  color: rgba(200,215,235,.25) !important;
}


/* ================================================================
   LIXA ADDITIONS — targeted, non-breaking
   ================================================================ */

/* Pain scores */
.pain-score { font-family: Inter, system-ui, sans-serif !important; }
.pain-score.high   { background: rgba(74,222,128,.10) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.22) !important; }
.pain-score.medium { background: rgba(251,191,36,.10)  !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.22) !important; }
.pain-score.low    { background: rgba(248,113,113,.10) !important; color: #f87171 !important; border: 1px solid rgba(248,113,113,.22) !important; }

/* Profile avatar — black */
.profile-avatar, #profileAvatar, .profile-trigger .profile-avatar, .profile-panel .profile-avatar, body .profile-avatar {
  background: #111 !important; color: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(255,255,255,.1) !important; border-radius: 10px !important;
  font-weight: 700 !important;
}
.fake-user-avatar, .admin-user-avatar {
  background: #0a0a0a !important; color: rgba(255,255,255,.4) !important;
  border-color: rgba(255,255,255,.07) !important; border-radius: 10px !important;
}

/* Inter font everywhere */
* { font-family: Inter, system-ui, -apple-system, sans-serif; }
#supportBotInput, #supportBotInput::placeholder, .lixa-chat-input, .lixa-chat-input::placeholder {
  font-family: Inter, system-ui, sans-serif !important;
}

/* Admin email view hidden by default — JS shows it when tab clicked */
#adminEmailView { display: none !important; }
#adminEmailView.active { display: block !important; }

/* Admin scraper card — match height of neighbour */
#adminPage .settings-card { align-self: stretch !important; }
#adminPage .settings-grid { align-items: stretch !important; }

/* Audit loading animation */
.audit-loading-anim { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:52px 24px; gap:24px; text-align:center; }
.audit-scan-ring { position:relative; width:64px; height:64px; }
.audit-scan-ring svg { width:64px; height:64px; transform:rotate(-90deg); }
.audit-scan-ring circle.track { stroke:rgba(255,255,255,.06); }
.audit-scan-ring circle.prog { stroke:rgba(220,225,235,.6); stroke-dasharray:163; stroke-dashoffset:163; animation:auditScanProg 2.4s ease-in-out infinite; }
@keyframes auditScanProg { 0%{stroke-dashoffset:163;opacity:1} 60%{stroke-dashoffset:24;opacity:1} 90%{stroke-dashoffset:0;opacity:.5} 100%{stroke-dashoffset:0;opacity:0} }
.audit-scan-dot { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.audit-scan-dot span { width:8px; height:8px; border-radius:50%; background:rgba(220,225,235,.7); animation:auditDotPulse 1.6s ease-in-out infinite; }
@keyframes auditDotPulse { 0%,100%{transform:scale(.8);opacity:.5} 50%{transform:scale(1.2);opacity:1} }
.audit-steps { display:flex; flex-direction:column; gap:8px; width:100%; max-width:280px; }
.audit-step { display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(255,255,255,.3); animation:auditStepReveal 3s ease-in-out infinite; }
.audit-step:nth-child(1){animation-delay:0s} .audit-step:nth-child(2){animation-delay:.8s} .audit-step:nth-child(3){animation-delay:1.6s} .audit-step:nth-child(4){animation-delay:2.2s}
@keyframes auditStepReveal { 0%,10%{color:rgba(255,255,255,.3)} 15%,40%{color:rgba(220,225,235,.85)} 55%,100%{color:rgba(255,255,255,.25)} }
.audit-step-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.7; }
.audit-step-bar { flex:1; height:2px; background:rgba(255,255,255,.05); border-radius:2px; overflow:hidden; }
.audit-step-fill { height:100%; background:currentColor; border-radius:2px; width:0%; animation:auditBarFill 3s ease-in-out infinite; }
.audit-step:nth-child(1) .audit-step-fill{animation-delay:0s} .audit-step:nth-child(2) .audit-step-fill{animation-delay:.8s} .audit-step:nth-child(3) .audit-step-fill{animation-delay:1.6s} .audit-step:nth-child(4) .audit-step-fill{animation-delay:2.2s}
@keyframes auditBarFill { 0%,10%{width:0%} 40%,60%{width:100%} 80%,100%{width:100%;opacity:.3} }
.audit-loading-label { font-size:12px; color:rgba(255,255,255,.3); letter-spacing:.04em; }

/* Mobile gate */
#lixa-mobile-gate { display:none; position:fixed; inset:0; z-index:99999; background:#000; flex-direction:column; align-items:center; justify-content:center; padding:32px 28px; text-align:center; }
#lixa-mobile-gate .gate-logo { display:none !important; }
#lixa-mobile-gate .gate-title { font-size:22px; font-weight:700; letter-spacing:-.035em; color:#fff; margin-bottom:10px; }
#lixa-mobile-gate .gate-sub { font-size:13px; color:rgba(255,255,255,.38); max-width:28ch; line-height:1.6; margin:0 auto 28px; }
#lixa-mobile-gate .gate-hint { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:rgba(255,255,255,.4); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:9px 18px; }

/* Templates full width */
#templatesPage .history-list { max-height:none !important; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important; gap:12px !important; }
#templatesPage .history-item { margin:0 !important; border-radius:14px !important; }

/* Leads rounded */
.leads-toolbar { border-radius:16px !important; }
.leads-shell { border-radius:18px !important; overflow:visible !important; }