/* =========================================================
   LeadMitra AI theme – dark, neon, glass (used on all pages)
   Loaded after style.css and overrides its light look.
   ========================================================= */
:root {
  --bg: #05070d; --cyan: #22d3ee; --violet: #8b5cf6; --pink: #f472b6; --neon: #ff7a1a;
  --ink: #e6ebf5; --ink-2: #c3cbdc; --muted: #94a0b8; --line: rgba(255,255,255,.10);
  --paper: transparent; --card: rgba(15,22,40,.72);
  --saffron-l: rgba(255,122,26,.12); --teal: #22d3ee; --teal-l: rgba(34,211,238,.12);
  --shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.35);
  --glass: rgba(255,255,255,.05); --gline: rgba(255,255,255,.10);
}
html { background: var(--bg); }
body { background: transparent !important; color: var(--ink); }
h1, h2, h3 { color: #fff; font-family: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif; }
a { color: var(--cyan); }
code { color: #ffb27a; }
::selection { background: rgba(139,92,246,.45); }

/* background layers (added by common.js) */
#ai-net { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; }
.ai-blob { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; animation: aiDrift 18s ease-in-out infinite alternate; }
.ai-blob.b1 { width: 520px; height: 520px; background: var(--violet); top: -180px; right: -140px; opacity: .28; }
.ai-blob.b2 { width: 460px; height: 460px; background: var(--cyan); bottom: -200px; left: -160px; opacity: .16; animation-delay: -6s; }
@keyframes aiDrift { to { transform: translate(50px, 40px) scale(1.12); } }

/* brand */
.logo { color: #fff !important; }
.logo small { color: var(--muted) !important; }
.logo-mark { background: #111a2e !important; box-shadow: 0 0 18px rgba(255,122,26,.45); }

/* buttons */
.btn-primary { background: linear-gradient(100deg, var(--neon), #ff4d8d 55%, var(--violet)); color: #fff; box-shadow: 0 10px 30px rgba(255,90,90,.28); }
.btn-primary:hover { background: linear-gradient(100deg, var(--neon), #ff4d8d 55%, var(--violet)); filter: brightness(1.1); }
.btn-dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--gline); }
.btn-dark:hover { background: rgba(255,255,255,.14); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid var(--gline); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-wa { box-shadow: 0 0 18px rgba(37,211,102,.25); }

/* cards & glass */
.card { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--gline); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(0,0,0,.30); color: var(--ink); }
.kpi .n { color: #fff; font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; }
.muted { color: var(--muted); }

/* forms */
label { color: #dfe5f0; }
input, select, textarea { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); color: #fff; }
input::placeholder, textarea::placeholder { color: #6b7690; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(34,211,238,.35); border-color: var(--cyan); background: rgba(255,255,255,.06); }
select option { background: #0d1424; color: #fff; }
input[readonly] { color: #cfe9ff; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #0d1424 inset; -webkit-text-fill-color: #fff; }
.pw-eye { color: var(--muted); }
.pw-eye:hover { color: #fff; background: rgba(255,255,255,.08); }
.check { color: var(--ink-2); }
.err { color: #fb7185; }

/* badges */
.badge { background: rgba(255,255,255,.08); color: #dfe5f0; }
.badge.New { background: rgba(129,140,248,.18); color: #c7d2fe; }
.badge.Contacted { background: rgba(251,191,36,.15); color: #fcd34d; }
.badge.Replied { background: rgba(56,189,248,.15); color: #7dd3fc; }
.badge.Interested { background: rgba(34,211,238,.15); color: #67e8f9; }
.badge.Customer { background: rgba(52,211,153,.16); color: #6ee7b7; }
.badge.Not { background: rgba(148,163,184,.12); color: #94a3b8; }
.badge.Wrong { background: rgba(244,63,94,.15); color: #fda4af; }

/* banners & toast */
.banner.warn { background: rgba(251,191,36,.10); color: #fcd34d; border: 1px solid rgba(251,191,36,.25); }
.banner.info { background: rgba(34,211,238,.08); color: #a5f3fc; border: 1px solid rgba(34,211,238,.25); }
#toast { background: #111a2e; border: 1px solid var(--gline); color: #fff; }
#toast.error { background: #7f1d1d; }

/* tables */
.table-wrap { background: rgba(15,22,40,.65); border: 1px solid var(--gline); backdrop-filter: blur(10px); box-shadow: none; }
th { background: rgba(255,255,255,.04); color: var(--muted); border-bottom: 1px solid var(--gline); }
td { border-bottom: 1px solid rgba(255,255,255,.06); color: var(--ink-2); }
td .nm { color: #fff; }
tr:hover td { background: rgba(255,255,255,.03); }
td select { background: rgba(255,255,255,.05); }

/* bars, progress, toggles */
.bars .b .track { background: rgba(255,255,255,.08); }
.bars .b .track i { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.progress div { background: rgba(255,255,255,.10); }
.progress div.on { background: linear-gradient(90deg, var(--cyan), var(--violet), var(--neon)); box-shadow: 0 0 12px rgba(34,211,238,.4); }
.toggle { background: rgba(255,255,255,.05); border: 1px solid var(--gline); }
.toggle button { color: var(--muted); }
.toggle button.on { background: linear-gradient(90deg, var(--cyan), var(--violet)); color: #05070d; }
.price-card.pop { outline: 1px solid rgba(255,122,26,.6); box-shadow: 0 0 60px rgba(255,122,26,.15); }
.price-card .tag { background: linear-gradient(90deg, var(--neon), #ff4d8d); }
.price small { color: var(--muted); }

/* chips, wizard */
.chip { background: rgba(255,122,26,.14); color: #ffb27a; }
.chip button { background: rgba(255,255,255,.12); color: #fff; }
.chip.sugg { background: rgba(255,255,255,.04); border: 1px dashed var(--neon); color: #ffb27a; }
.state-grid { background: rgba(255,255,255,.03); border-color: var(--gline); }
.radio-cards label { background: rgba(255,255,255,.04); border-color: var(--gline); color: #dfe5f0; }
.radio-cards label:has(input:checked) { border-color: var(--cyan); background: rgba(34,211,238,.10); }
.tpl { background: #005c4b; color: #e9edef; }
.wiz-tips { background: linear-gradient(160deg, rgba(139,92,246,.18), rgba(15,22,40,.85)); border: 1px solid var(--gline); }
#gpt-box { background: rgba(34,211,238,.06) !important; border: 1px solid rgba(34,211,238,.18); }
#gpt-box summary { color: #fff; }

/* side menu (dashboard) */
.side { background: rgba(6,10,20,.85); border-right: 1px solid var(--gline); backdrop-filter: blur(14px); }
.side a.nav-i.on { background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(139,92,246,.16)); box-shadow: inset 2px 0 0 var(--cyan); }
.usage { background: rgba(255,255,255,.05); border: 1px solid var(--gline); }
.bar i { background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.mobile-top { background: rgba(6,10,20,.92); border-bottom: 1px solid var(--gline); }
.main { background: transparent; }
.empty { color: var(--muted); }

/* modal */
.modal-bg { background: rgba(2,4,10,.7); }
.modal { background: #0d1424; border: 1px solid var(--gline); color: var(--ink); }

/* auth pages */
.auth-brand { background: rgba(6,10,20,.55); border-right: 1px solid var(--gline); }
.auth-form { background: transparent; }
.auth-mini { background: rgba(15,22,40,.85); color: #fff; border: 1px solid var(--gline); backdrop-filter: blur(10px); }
.auth-mini .r { border-bottom-color: rgba(255,255,255,.07); }

/* top bars & footers */
.site-nav { background: rgba(5,7,13,.65); border-bottom: 1px solid var(--gline); }
.site-foot { background: transparent; border-top: 1px solid var(--gline); }

/* inline light backgrounds used in a few places */
[style*="#fbfaf7"] { background: rgba(255,255,255,.04) !important; }
[style*="#fff1e6"] { background: linear-gradient(120deg, rgba(139,92,246,.18), rgba(255,122,26,.10)) !important; }
[style*="#f0ece4"] { border-color: rgba(255,255,255,.08) !important; }
[style*="var(--line)"] { border-color: var(--gline) !important; }

@media (prefers-reduced-motion: reduce) {
  .ai-blob { animation: none; }
}