/* ══════════════════════════════════════════════════════════════════════════
   LeadSecurely — Approx Light Theme
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --pri:#5b73e8;--pri-h:#4a62d0;--pri-l:#eef0fd;--pri-b:rgba(91,115,232,.12);
  --teal:#05b2a2;--teal-l:#e0f5f4;
  --grn:#1cbb8c;--grn-l:#d7f5ec;
  --org:#fcb92c;--org-l:#fef6e0;
  --red:#ff5c75;--red-l:#ffe0e4;
  --pur:#8b5cf6;--pur-l:#ede9fe;
  --cyn:#0dcaf0;--cyn-l:#e0f7fd;
  --bg:#f5f6fa;--white:#fff;--bdr:#e8eaf0;--bdr2:#d0d4e0;
  --tx:#343a40;--t2:#74788d;--t3:#adb5bd;
  --r:8px;--sidebar:240px;
  --sh:0 2px 12px rgba(0,0,0,.07);
  --sh2:0 6px 24px rgba(0,0,0,.11);
}

:root{
  --pri:#5b73e8;--pri-h:#4a62d0;--pri-l:#eef0fd;--pri-b:rgba(91,115,232,.12);
  --teal:#05b2a2;--teal-l:#e0f5f4;
  --grn:#1cbb8c;--grn-l:#d7f5ec;
  --org:#fcb92c;--org-l:#fef6e0;
  --red:#ff5c75;--red-l:#ffe0e4;
  --pur:#8b5cf6;--pur-l:#ede9fe;
  --cyn:#0dcaf0;--cyn-l:#e0f7fd;
  --bg:#f5f6fa;--white:#fff;--bdr:#e8eaf0;--bdr2:#d0d4e0;
  --tx:#343a40;--t2:#74788d;--t3:#adb5bd;
  --r:8px;--sidebar:240px;
  --sh:0 2px 12px rgba(0,0,0,.07);
  --sh2:0 6px 24px rgba(0,0,0,.11);
}

[data-theme="dark"]{
  --pri:#7c8dff;--pri-h:#9aa4ff;--pri-l:rgba(124,141,255,.18);--pri-b:rgba(124,141,255,.18);
  --teal:#1fd1c0;--teal-l:rgba(31,209,192,.16);
  --grn:#2fd39e;--grn-l:rgba(47,211,158,.16);
  --org:#ffc857;--org-l:rgba(255,200,87,.14);
  --red:#ff6b81;--red-l:rgba(255,107,129,.18);
  --pur:#a58bff;--pur-l:rgba(165,139,255,.2);
  --cyn:#40e0ff;--cyn-l:rgba(64,224,255,.16);
  --bg:#050816;--white:#0b1020;--bdr:#22273a;--bdr2:#343b54;
  --tx:#f6f7ff;--t2:#b0b4c5;--t3:#7f8499;
  --sh:0 2px 14px rgba(0,0,0,.7);
  --sh2:0 14px 35px rgba(0,0,0,.85);
}

[data-theme="dark"] body{background:var(--bg);color:var(--tx);}
[data-theme="dark"] .sidebar{background:#070c18;border-color:var(--bdr);}
[data-theme="dark"] .topbar{background:#070c18;border-color:var(--bdr);box-shadow:0 2px 14px rgba(0,0,0,.75);}
[data-theme="dark"] .card,
[data-theme="dark"] .projects-empty,
[data-theme="dark"] .auth-panel{background:#0b1020;border-color:var(--bdr);}
[data-theme="dark"] .page-content{background:var(--bg);}
[data-theme="dark"] .sb-item:hover{background:rgba(255,255,255,.02);}
[data-theme="dark"] .sb-item.active{background:rgba(124,141,255,.12);}
[data-theme="dark"] .upload-zone{background:#0d1020;border-color:var(--bdr2);}
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.drag{background:rgba(124,141,255,.18);}
[data-theme="dark"] thead tr{background:#14192a;}
[data-theme="dark"] tbody tr:hover td{background:rgba(255,255,255,.02);}
[data-theme="dark"] .toast{background:#0b1020;border-color:var(--bdr);box-shadow:var(--sh2);}
[data-theme="dark"] .project-actions{background:rgba(0,0,0,.25);border-top-color:var(--bdr);}
[data-theme="dark"] .project-actions .btn-ghost{background:var(--bdr2);color:var(--t2);border-color:var(--bdr);}
[data-theme="dark"] .project-actions .btn-ghost:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-l);}
[data-theme="dark"] .project-actions .btn-cta{background:var(--pri);color:#fff;}
[data-theme="dark"] .project-actions .btn-cta:hover{background:var(--pri-h);}
[data-theme="dark"] .project-actions .btn-red{background:var(--red);color:#fff;}
[data-theme="dark"] .project-actions .btn-red:hover{background:#ff8595;}
[data-theme="dark"] .export-inline{background:rgba(0,0,0,.2);border-top-color:var(--bdr);}
[data-theme="dark"] .tag-manual,[data-theme="dark"] .tag-unknown,[data-theme="dark"] .tag-free,[data-theme="dark"] .tag-closed,[data-theme="dark"] .tag-inactive{background:rgba(255,255,255,.1);color:var(--t2);}
[data-theme="dark"] .tag-risky,[data-theme="dark"] .tag-open,[data-theme="dark"] .tag-in_progress{color:var(--org);}

body{background:var(--bg);color:var(--tx);font-family:'Nunito',sans-serif;font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;cursor:pointer}
button{font-family:inherit;cursor:pointer}
svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* ══ SCROLLBAR ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:2px}

/* ══ AUTH PAGE ══════════════════════════════════════════════════════════ */
.auth-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  background-image:radial-gradient(ellipse at 30% 20%, rgba(91,115,232,.07) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(5,178,162,.05) 0%, transparent 60%);
  padding:2rem}
.auth-panel{background:var(--white);border:1px solid var(--bdr);border-radius:14px;
  padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--sh2)}
.auth-brand{display:flex;align-items:center;gap:.85rem;margin-bottom:2rem}
.auth-brand h1{font-size:1.35rem;font-weight:800;color:var(--tx)}
.auth-brand p{font-size:.78rem;color:var(--t2);margin-top:.15rem}
.brand-logo{width:42px;height:42px;background:linear-gradient(135deg,var(--pri),var(--teal));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;color:#fff;flex-shrink:0;
  box-shadow:0 4px 12px rgba(91,115,232,.3)}
.brand-logo.sm{width:32px;height:32px;font-size:.72rem;border-radius:8px}
.tab-pills{display:flex;background:var(--bg);border-radius:8px;padding:3px;gap:3px;margin-bottom:1.5rem;border:1px solid var(--bdr)}
.pill{flex:1;padding:.5rem;border:none;background:transparent;color:var(--t2);border-radius:6px;
  cursor:pointer;font-size:.8rem;font-weight:600;transition:all .18s;font-family:inherit}
.pill:hover{color:var(--tx)}
.pill.active{background:var(--white);color:var(--pri);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.field{margin-bottom:.9rem}
.field label{display:block;font-size:.7rem;font-weight:700;color:var(--t2);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--bdr);
  border-radius:6px;padding:.65rem .9rem;color:var(--tx);font-size:.82rem;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pri);background:var(--white);box-shadow:0 0 0 3px rgba(91,115,232,.1)}
.field input::placeholder,.field textarea::placeholder{color:var(--t3)}
.field textarea{resize:vertical;min-height:80px}
.auth-note{font-size:.72rem;color:var(--t3);text-align:center;margin-top:.75rem}
.text-sm{font-size:.8rem}.text-xs{font-size:.7rem}.text-muted{color:var(--t2)}
.mb-2{margin-bottom:1rem}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}
.recaptcha-wrap{margin-top:.75rem;display:flex;justify-content:center}

/* ══ BUTTONS ════════════════════════════════════════════════════════════ */
.btn-cta{background:var(--pri);color:#fff;border:none;border-radius:6px;padding:.68rem 1.2rem;
  font-size:.8rem;font-weight:700;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;gap:.45rem;font-family:inherit}
.btn-cta:hover{background:var(--pri-h)}
.btn-cta:disabled{opacity:.55;cursor:not-allowed}
.btn-ghost{background:var(--white);color:var(--t2);border:1px solid var(--bdr);border-radius:6px;
  padding:.62rem 1rem;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem;font-family:inherit}
.btn-ghost:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-l)}
.btn-red{background:var(--red);color:#fff;border:none;border-radius:6px;padding:.62rem 1rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn-red:hover{background:#e0364e}
.btn-green{background:var(--grn);color:#fff;border:none;border-radius:6px;padding:.62rem 1rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn-sm{padding:.38rem .75rem;font-size:.72rem;border-radius:5px}
.w-full{width:100%}
.mt-3{margin-top:1.25rem}.mb-3{margin-bottom:1.25rem}

/* ══ LAYOUT ═════════════════════════════════════════════════════════════ */
#app{display:flex;min-height:100vh}

/* ══ SIDEBAR ════════════════════════════════════════════════════════════ */
.sidebar{width:var(--sidebar);background:var(--white);border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto;z-index:100}
.sidebar::-webkit-scrollbar{width:0}
.sb-brand{height:65px;display:flex;align-items:center;padding:0 18px;
  border-bottom:1px solid var(--bdr);cursor:pointer;gap:10px;flex-shrink:0}
.sb-brand span{font-size:.9rem;font-weight:600;color:var(--tx)}
.sb-brand strong{font-weight:800;color:var(--pri)}
.sb-nav{flex:1;padding:10px 0}
.sb-group{margin-bottom:4px}
.sb-label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);padding:9px 20px 4px}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 20px;font-size:.8rem;font-weight:600;
  color:var(--t2);cursor:pointer;border-left:3px solid transparent;transition:all .15s;
  margin-bottom:1px;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.sb-item:hover{background:#f8f9ff;color:var(--pri)}
.sb-item.active{background:var(--pri-l);color:var(--pri);border-left-color:var(--pri)}
.sb-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.88rem;flex-shrink:0;transition:all .15s}
.sb-icon svg{width:14px;height:14px}
.ic-pri{background:var(--pri-l);color:var(--pri)}.ic-teal{background:var(--teal-l);color:var(--teal)}
.ic-grn{background:var(--grn-l);color:var(--grn)}.ic-org{background:var(--org-l);color:var(--org)}
.ic-red{background:var(--red-l);color:var(--red)}.ic-pur{background:var(--pur-l);color:var(--pur)}
.ic-cyn{background:var(--cyn-l);color:var(--cyn)}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;
  padding:1px 7px;font-size:.57rem;font-weight:700}
.sb-footer{padding:12px;border-top:1px solid var(--bdr);flex-shrink:0}
.user-card{display:flex;align-items:center;gap:.6rem;padding:.5rem;border-radius:7px;
  cursor:pointer;margin-bottom:.5rem;transition:background .15s}
.user-card:hover{background:var(--bg)}
.u-avatar{width:30px;height:30px;background:linear-gradient(135deg,var(--pri),var(--teal));
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;color:#fff;flex-shrink:0}
.u-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.u-info span:first-child{font-size:.78rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.plan-chip{background:var(--pri-l);color:var(--pri);padding:.1rem .4rem;border-radius:4px;
  font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;width:fit-content}
.btn-signout{width:100%;background:transparent;border:1px solid var(--bdr);color:var(--t2);
  border-radius:6px;padding:.45rem;font-size:.75rem;cursor:pointer;transition:all .18s;font-family:inherit}
.btn-signout:hover{border-color:var(--red);color:var(--red)}
.sb-upgrade{margin:10px 14px 14px;background:linear-gradient(135deg,var(--pri),#7c3aed);
  border-radius:var(--r);padding:14px;color:#fff;text-align:center}
.sb-upgrade h4{font-size:.82rem;font-weight:800;margin-bottom:4px}
.sb-upgrade p{font-size:.68rem;opacity:.85;margin-bottom:10px;line-height:1.4}
.sb-upgrade-btn{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);
  color:#fff;border-radius:5px;padding:6px 12px;font-size:.7rem;font-weight:700;
  cursor:pointer;font-family:inherit;width:100%;transition:background .15s}
.sb-upgrade-btn:hover{background:rgba(255,255,255,.32)}

/* ══ MAIN & TOPBAR ══════════════════════════════════════════════════════ */
.main{margin-left:var(--sidebar);flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:65px;background:var(--white);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;padding:0 24px;gap:12px;flex-shrink:0;
  position:sticky;top:0;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.tb-crumb{font-size:.78rem;font-weight:600;color:var(--t2);flex:1}
.tb-crumb strong{color:var(--tx)}
.tb-crumb .sep{color:var(--t3);margin:0 6px}
.tb-btn{width:36px;height:36px;border-radius:8px;background:var(--bg);border:1px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.88rem;
  color:var(--t2);position:relative;transition:all .15s}
.tb-btn:hover{background:var(--pri-l);border-color:var(--pri);color:var(--pri)}
.tb-ndot{position:absolute;top:5px;right:5px;width:7px;height:7px;
  background:var(--red);border-radius:50%;border:2px solid var(--white)}
.tb-div{width:1px;height:28px;background:var(--bdr)}
.tb-user{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 8px;
  border-radius:8px;transition:background .15s}
.tb-user:hover{background:var(--bg)}
.tb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--teal));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;color:#fff}
.tb-uname{font-size:.78rem;font-weight:700;line-height:1.3}
.tb-urole{font-size:.62rem;color:var(--t2)}

/* ══ PAGE CONTENT ═══════════════════════════════════════════════════════ */
.page-content{flex:1;padding:22px 24px;overflow-y:auto}
.page{display:none}
.page.active{display:block;animation:fadeUp .2s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ══ PAGE HEADER ════════════════════════════════════════════════════════ */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.ph-left h2{font-size:1.05rem;font-weight:800;color:var(--tx)}
.ph-left p{color:var(--t2);font-size:.75rem;margin-top:2px}
.ph-actions{display:flex;gap:.6rem;flex-shrink:0;align-items:center}

/* ══ STAT CARDS ═════════════════════════════════════════════════════════ */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);
  box-shadow:var(--sh);padding:15px 18px;display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;transition:all .2s}
.stat:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.stat::after{content:'';position:absolute;top:0;right:0;width:4px;height:100%;
  background:var(--stat-c,var(--pri));border-radius:0 var(--r) var(--r) 0}
.stat-ic{width:48px;height:48px;border-radius:11px;background:var(--stat-l,var(--pri-l));
  color:var(--stat-c,var(--pri));display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0}
.stat-val{font-size:1.45rem;font-weight:800;line-height:1;color:var(--tx)}
.stat-lbl{font-size:.68rem;color:var(--t2);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat-sub{font-size:.62rem;margin-top:3px}
.stat-up{color:var(--grn)}.stat-dn{color:var(--red)}.stat-muted{color:var(--t3)}

/* ══ CARDS ══════════════════════════════════════════════════════════════ */
.card{background:var(--white);border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;border-bottom:1px solid var(--bdr)}
.card-h h3{font-size:.85rem;font-weight:700;color:var(--tx)}
.card-b{padding:16px 18px}
.card+.card{margin-top:14px}

/* Bulk upload two-panel layout */
.bulk-two-panels{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px}
.bulk-panel{min-width:0}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--tx);cursor:pointer}
.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--pri);cursor:pointer}
@media (max-width:900px){.bulk-two-panels{grid-template-columns:1fr}}

/* ══ GRID HELPERS ═══════════════════════════════════════════════════════ */
.flex{display:flex}.gap-2{gap:14px}.gap-1{gap:8px}.items-c{align-items:center}.wrap{flex-wrap:wrap}
.ml-auto{margin-left:auto}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.tbl-wrap{overflow-x:auto}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.7rem}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ TABLE ══════════════════════════════════════════════════════════════ */
table{width:100%;border-collapse:collapse;font-size:.78rem}
thead tr{background:#f8f9ff}
th{padding:9px 14px;text-align:left;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--t2);
  border-bottom:2px solid var(--bdr);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--bdr);vertical-align:middle;color:var(--tx)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:#fbfcff}

/* ══ BADGES / STATUS TAGS ═══════════════════════════════════════════════ */
.tag{display:inline-flex;align-items:center;gap:4px;padding:.22rem .6rem;border-radius:999px;
  font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.tag-deliverable  {background:var(--grn-l);color:var(--grn)}
.tag-undeliverable{background:var(--red-l);color:var(--red)}
.tag-catch_all    {background:var(--pur-l);color:var(--pur)}
.tag-risky        {background:var(--org-l);color:#b07200}
.tag-unknown      {background:#f0f1f5;color:var(--t2)}
.tag-invalid      {background:var(--red-l);color:var(--red);opacity:.8}
.tag-free         {background:#f0f1f5;color:var(--t2)}
.tag-starter      {background:var(--teal-l);color:var(--teal)}
.tag-pro          {background:var(--pri-l);color:var(--pri)}
.tag-ultimate     {background:var(--pur-l);color:var(--pur)}
.tag-open         {background:var(--org-l);color:#b07200}
.tag-in_progress  {background:var(--org-l);color:#b07200}
.tag-resolved     {background:var(--grn-l);color:var(--grn)}
.tag-closed       {background:#f0f1f5;color:var(--t2)}
.tag-pending      {background:var(--pri-l);color:var(--pri)}
.tag-running      {background:var(--teal-l);color:var(--teal)}
.tag-completed    {background:var(--grn-l);color:var(--grn)}
.tag-failed       {background:var(--red-l);color:var(--red)}
.tag-active       {background:var(--grn-l);color:var(--grn)}
.tag-inactive     {background:#f0f1f5;color:var(--t2)}
.tag-leads        {background:var(--teal-l);color:var(--teal)}
.tag-manual       {background:#f0f1f5;color:var(--t2)}
.tag-bulk         {background:var(--pri-l);color:var(--pri)}
.tag-admin-email  {background:var(--pri-l);color:var(--pri)}

/* ══ RESULT CARD (VERIFY) ═══════════════════════════════════════════════ */
.result-card{border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);margin-top:14px}
.result-verdict{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--bdr)}
.rv-deliverable  {background:#edfaf5}
.rv-undeliverable{background:#fff4f5}
.rv-catch_all    {background:#f5f0fe}
.rv-risky        {background:#fffbf0}
.rv-unknown      {background:#f8f9fa}
.rv-invalid      {background:#fff4f5}
.rv-icon{font-size:1.8rem}
.rv-text h3{font-size:.95rem;font-weight:800}
.rv-text p{font-size:.72rem;color:var(--t2);margin-top:2px}
.rv-score{margin-left:auto;text-align:right}
.rv-score .num{font-size:2rem;font-weight:800;line-height:1}
.rv-score .lbl{font-size:.57rem;color:var(--t3);text-transform:uppercase;letter-spacing:.1em}
.checks-list{display:grid;grid-template-columns:1fr 1fr}
.chk{display:flex;align-items:center;gap:8px;padding:8px 16px;
  border-bottom:1px solid var(--bdr);font-size:.73rem}
.chk:nth-last-child(-n+2){border-bottom:none}
.chk-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.chk-dot.pass{background:var(--grn)}.chk-dot.fail{background:var(--red)}
.chk-dot.warn{background:var(--org)}.chk-dot.info{background:var(--t3)}
.chk-name{font-size:.72rem;font-weight:600;flex:1;color:var(--t2)}
.chk-val{font-size:.68rem;color:var(--tx);font-family:'IBM Plex Mono',monospace;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ PROGRESS BAR ═══════════════════════════════════════════════════════ */
.pbar{background:var(--bg);border-radius:999px;height:6px;overflow:hidden}
.pbar-fill{height:100%;background:var(--pri);border-radius:999px;transition:width .4s ease}
.pbar-fill.green{background:var(--grn)}

/* ══ UPLOAD ZONE ════════════════════════════════════════════════════════ */
.upload-zone{border:2px dashed var(--bdr2);border-radius:var(--r);padding:2.5rem 2rem;
  text-align:center;cursor:pointer;transition:all .2s;background:#fafbff}
.upload-zone:hover,.upload-zone.drag{border-color:var(--pri);background:var(--pri-l)}
.upload-icon{font-size:2.5rem;margin-bottom:.75rem}
.upload-zone p{color:var(--t2);font-size:.85rem;font-weight:600;margin-bottom:4px}
.upload-zone small{color:var(--t3);font-size:.72rem}
#file-input{display:none}

/* ══ ALERTS / MESSAGES ══════════════════════════════════════════════════ */
.msg{padding:.7rem .95rem;border-radius:7px;font-size:.78rem;margin-top:.75rem;
  display:flex;align-items:flex-start;gap:7px;font-weight:500}
.msg-error  {background:var(--red-l);color:#a01c2c;border-left:4px solid var(--red)}
.msg-success{background:var(--grn-l);color:#0a6b50;border-left:4px solid var(--grn)}
.msg-info   {background:var(--pri-l);color:#2d4ab0;border-left:4px solid var(--pri)}
.msg-warn   {background:var(--org-l);color:#7c5200;border-left:4px solid var(--org)}

/* ══ API KEY ════════════════════════════════════════════════════════════ */
.apikey-box{display:flex;align-items:center;gap:.7rem;background:var(--bg);
  border:1px solid var(--bdr);border-radius:7px;padding:.7rem 1rem}
.apikey-box .key{font-family:'IBM Plex Mono',monospace;font-size:.75rem;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pri)}

/* ══ CODE BLOCK ═════════════════════════════════════════════════════════ */
.code{background:#1a2035;border-radius:var(--r);padding:.9rem 1.1rem;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:#a8d0f0;overflow-x:auto;line-height:1.8}
.code .k{color:#f7c59f}.code .s{color:#79d9f5}.code .c{color:#3d5070}.code .v{color:#7de06e}

/* ══ PRICING ════════════════════════════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.plan-card{background:var(--white);border:2px solid var(--bdr);border-radius:var(--r);
  padding:20px 18px;position:relative;text-align:center;transition:all .2s}
.plan-card:hover{border-color:var(--pri);box-shadow:0 8px 28px rgba(91,115,232,.14)}
.plan-card.current{border-color:var(--pri);box-shadow:0 8px 28px rgba(91,115,232,.14)}
.plan-card.popular{border-color:var(--grn)}
.plan-card.popular:hover{border-color:var(--grn);box-shadow:0 8px 28px rgba(28,187,140,.14)}
.plan-ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:3px 12px;border-radius:999px;font-size:.58rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;background:var(--grn);color:#fff;white-space:nowrap}
.plan-name{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--t2);margin-bottom:8px}
.plan-price{font-size:1.75rem;font-weight:800;line-height:1;color:var(--tx)}
.plan-price span{font-size:.75rem;font-weight:500;color:var(--t2)}
.plan-interval{font-size:.65rem;color:var(--t3);margin-bottom:14px;margin-top:4px}
.plan-features{list-style:none;margin-bottom:16px;text-align:left}
.plan-features li{font-size:.73rem;color:var(--t2);padding:4px 0;display:flex;align-items:flex-start;gap:.45rem}
.plan-features li::before{content:"✓";color:var(--pri);font-weight:800;flex-shrink:0}

/* ══ SUPPORT BUBBLES ════════════════════════════════════════════════════ */
.bubble{padding:.75rem 1rem;border-radius:10px;margin-bottom:.65rem;max-width:82%;font-size:.78rem;line-height:1.55}
.bubble.user{background:#f0f2ff;border:1px solid #dde2f8}
.bubble.admin{background:var(--pri);color:#fff;margin-left:auto}
.bubble-meta{font-size:.62rem;color:var(--t3);margin-top:.3rem}
.bubble.admin .bubble-meta{color:rgba(255,255,255,.6)}

/* ══ MODAL ══════════════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999;
  display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--white);border:1px solid var(--bdr);border-radius:12px;
  padding:1.75rem;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh2)}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.modal-h h3{font-size:.95rem;font-weight:800;color:var(--tx)}
.modal-close{background:none;border:none;color:var(--t2);cursor:pointer;font-size:1.3rem;padding:.2rem;line-height:1}
.modal-ft{display:flex;justify-content:flex-end;gap:.65rem;margin-top:1.25rem;
  padding-top:1rem;border-top:1px solid var(--bdr)}

/* ══ SERPER SETUP ═══════════════════════════════════════════════════════ */
.serper-setup{background:linear-gradient(135deg,rgba(91,115,232,.05),rgba(5,178,162,.04));
  border:1px solid rgba(91,115,232,.2);border-radius:var(--r);padding:1.5rem}
.serper-setup h3{font-size:.95rem;font-weight:800;margin-bottom:.5rem;color:var(--tx)}
.steps{list-style:none;counter-reset:steps;margin:1rem 0}
.steps li{counter-increment:steps;display:flex;align-items:flex-start;gap:.75rem;
  padding:.6rem 0;border-bottom:1px solid var(--bdr);font-size:.8rem;color:var(--t2)}
.steps li:last-child{border:none}
.steps li::before{content:counter(steps);background:var(--pri);color:#fff;border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-size:.67rem;font-weight:700;flex-shrink:0;margin-top:1px}
.step-link{color:var(--pri);text-decoration:underline}

/* ══ PROJECT STAT BAR ═══════════════════════════════════════════════════ */
.stat-bar{display:flex;height:7px;border-radius:999px;overflow:hidden;gap:1px;margin:.5rem 0}
.sb-deliverable{background:var(--grn)}
.sb-catch_all{background:var(--pur)}
.sb-risky{background:var(--org)}
.sb-free{background:var(--cyn)}
.sb-unknown{background:var(--t3)}
.sb-undeliverable,.sb-invalid{background:var(--red)}
.stat-bar-empty{flex:1;min-height:7px;background:var(--bg);border-radius:999px}

/* ══ PROJECTS PAGE ═════════════════════════════════════════════════════ */
.ph-projects{margin-bottom:1.75rem}
.ph-projects .ph-left h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--tx)}
.ph-projects .ph-left p{font-size:.8rem;margin-top:4px;color:var(--t2)}

.projects-empty{text-align:center;padding:3.5rem 2rem;background:var(--white);
  border:1px solid var(--bdr);border-radius:12px;box-shadow:var(--sh)}
.projects-empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.9}
.projects-empty h3{font-size:1.1rem;font-weight:700;color:var(--tx);margin-bottom:.5rem}
.projects-empty p{font-size:.85rem;color:var(--t2);max-width:320px;margin:0 auto;line-height:1.5}

.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem;
  align-items:stretch}
.projects-grid .project-card{margin:0}
.project-card{background:var(--white);border:1px solid var(--bdr);border-radius:12px;
  box-shadow:var(--sh);overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s;
  display:flex;flex-direction:column;height:100%;min-height:0}
.project-card:hover{box-shadow:var(--sh2);border-color:var(--bdr2)}
.project-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:1.1rem 1.25rem .6rem}
.project-card-title{font-size:1.05rem;font-weight:700;color:var(--tx);margin:0;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.project-card-meta{font-size:.75rem;color:var(--t2);padding:0 1.25rem .75rem;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-card-bar-wrap{padding:0 1.25rem}
.project-stat-bar{height:8px;margin:.4rem 0 .85rem}
.project-stats{display:flex;flex-wrap:wrap;gap:10px 14px;padding:0 1.25rem;margin-bottom:.6rem}
.project-stat{font-size:.72rem;font-weight:600;padding:.2rem 0}
.project-stat-safe{color:var(--grn)}
.project-stat-catch{color:var(--pur)}
.project-stat-risky{color:var(--org)}
.project-stat-free{color:var(--cyn)}
.project-stat-unknown{color:var(--t3)}
.project-stat-bad{color:var(--red)}
.project-summary{font-size:.7rem;color:var(--t3);padding:0 1.25rem .85rem}
.project-summary-sep{margin:0 4px;opacity:.7}
.project-summary-pending{color:var(--org);font-weight:600}
.project-pending-hint{font-size:.7rem;color:var(--t2);padding:0 1.25rem .5rem;margin:0}
.project-live-progress{padding:0 1.25rem}
.project-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 1.25rem 1.1rem;
  border-top:1px solid var(--bdr);background:#fafbfc;margin-top:auto}
.project-action-btn{flex:1;min-width:80px}
.project-action-del{flex:0;min-width:auto}

.export-inline{border-top:1px solid var(--bdr);padding:12px 1.25rem;background:#f8f9fc;margin:0 0 -1px}
.export-inline-h{font-size:.75rem;font-weight:700;color:var(--t2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.export-all-label{display:block;font-size:.8rem;font-weight:600;color:var(--tx);margin-bottom:6px;cursor:pointer}
.export-all-label input{margin-right:8px;accent-color:var(--pri)}
.export-statuses{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:8px}
.export-statuses label{font-size:.78rem;color:var(--t2);cursor:pointer}
.export-status-count{font-size:.7rem;color:var(--t3);font-weight:600;margin-left:2px}
.export-all-modal{margin-bottom:4px}

/* ══ TOAST ══════════════════════════════════════════════════════════════ */
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--white);
  border:1px solid var(--bdr);border-radius:9px;padding:.75rem 1.1rem;
  font-size:.8rem;z-index:9999;max-width:340px;box-shadow:var(--sh2);
  animation:slideUp .2s ease;font-weight:600;color:var(--tx)}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══ TOGGLE SWITCH ══════════════════════════════════════════════════════ */
.toggle{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--bdr2);border-radius:999px;transition:.2s}
.toggle-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked + .toggle-slider{background:var(--pri)}
.toggle input:checked + .toggle-slider::before{transform:translateX(20px)}

/* ══ MISC ═══════════════════════════════════════════════════════════════ */
.spin{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.text-danger{color:var(--red)}.text-success{color:var(--grn)}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile overlay backdrop ─────────────────────────────────────────── */
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;backdrop-filter:blur(2px)}
.sb-backdrop.visible{display:block}

/* ── Hamburger button (mobile only) ─────────────────────────────────── */
.tb-hamburger{display:none;width:36px;height:36px;border-radius:8px;background:var(--bg);
  border:1px solid var(--bdr);align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;flex-direction:column;gap:4px;padding:8px}
.tb-hamburger span{display:block;width:16px;height:2px;background:var(--t2);border-radius:2px;transition:all .2s}

@media (max-width: 768px) {

  /* Show hamburger */
  .tb-hamburger{display:flex}

  /* Sidebar slides in as drawer */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:200;
    box-shadow:var(--sh2);
  }
  .sidebar.open{transform:translateX(0)}

  /* Main takes full width */
  .main{margin-left:0;width:100%}

  /* Topbar: compact */
  .topbar{padding:0 14px;gap:8px}
  .tb-crumb{font-size:.72rem}
  .tb-uname,.tb-urole,.tb-div{display:none}
  .tb-user{padding:4px}
  .tb-av{width:30px;height:30px;font-size:.7rem}

  /* Page content padding */
  .page-content{padding:14px}

  /* Stat row: 2 columns on mobile */
  .stat-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:12px 14px;gap:10px}
  .stat-ic{width:38px;height:38px;font-size:1rem}
  .stat-val{font-size:1.15rem}

  /* Cards: remove horizontal padding squeeze */
  .card-b{padding:14px}
  .card-h{padding:11px 14px}

  /* Page header: stack on mobile */
  .ph{flex-direction:column;gap:10px;margin-bottom:14px}
  .ph-actions{width:100%;flex-wrap:wrap}
  .ph-actions .btn-cta,.ph-actions .btn-ghost{flex:1;justify-content:center}

  /* Grid layouts: single column */
  .flex.gap-2.wrap{flex-direction:column}
  .pricing-grid{grid-template-columns:1fr}

  /* Settings grid: single column */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(380px"]{
    grid-template-columns:1fr !important;
  }
  div[style*="grid-template-columns:repeat(auto-fit,minmax(400px"]{
    grid-template-columns:1fr !important;
  }

  /* Projects grid: single column */
  .projects-grid{grid-template-columns:1fr}
  .project-card-h,.project-card-meta,.project-card-bar-wrap,.project-stats,.project-summary{padding-left:1rem;padding-right:1rem}
  .project-actions{padding-left:1rem;padding-right:1rem}

  /* Table: allow horizontal scroll */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:520px}
  th,td{padding:8px 10px;font-size:.72rem}

  /* Auth panel: tighter on small screens */
  .auth-panel{padding:1.75rem 1.25rem}
  .auth-bg{padding:1rem}

  /* API page code blocks */
  .code{font-size:.65rem;padding:.75rem}

  /* Verify result checks: single column */
  .checks-list{grid-template-columns:1fr}
  .chk:nth-last-child(-n+2){border-bottom:1px solid var(--bdr)}
  .chk:last-child{border-bottom:none}

  /* Serper setup form: stack */
  .serper-setup .flex.gap-1{flex-direction:column}

  /* Bulk/Verify form grids */
  div[style*="grid-template-columns:1fr 1fr auto"]{
    grid-template-columns:1fr !important;
  }

  /* Leads form selects row: stack */
  .flex.gap-2.wrap .field{min-width:100% !important}

  /* Admin email setup grid */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(200px"]{
    grid-template-columns:1fr !important;
  }

  /* Toast: full width bottom */
  .toast{left:1rem;right:1rem;max-width:none;bottom:1rem}

  /* Modal: full width */
  .modal{max-width:100%;margin:0;border-radius:12px}
  .overlay{padding:.5rem;align-items:flex-end}

  /* Sidebar upgrade box: hide on mobile to save space */
  .sb-upgrade{margin:8px 10px 10px;padding:12px}

  /* Plan cards: ensure buttons fit */
  .plan-card{padding:16px 14px}
}

@media (max-width: 420px) {
  /* Extra small: single column stats */
  .stat-row{grid-template-columns:1fr}
  .tb-crumb{display:none}
}