/* =============================================================
   LeadVault — design system
   Self-hosted type · layered depth · glass ONLY on chrome
   8px grid · fluid type scale · brand-tinted darks (koi pure black nahi)
   ============================================================= */

/* Fonts self-hosted hain kyunki CSP me style-src/font-src sirf 'self' hai —
   Google Fonts <link> yahan load hi nahi hoga. Fraunces = display (Codelith ke
   proposals/audits wahi use karte hain), Jakarta = body. swap taaki text turant dikhe. */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");
  font-weight:300 700;font-display:swap;font-style:normal}
@font-face{font-family:"Jakarta";src:url(/fonts/jakarta.woff2) format("woff2");
  font-weight:400 800;font-display:swap;font-style:normal}

:root{
  /* ---- fluid type scale: step kabhi nahi, hamesha interpolate ---- */
  --f-display:clamp(2.5rem,1.2rem + 5.4vw,4.75rem);
  --f-h1:clamp(2rem,1.1rem + 3.9vw,3.5rem);
  --f-h2:clamp(1.65rem,1.1rem + 2.4vw,2.6rem);
  --f-h3:clamp(1.15rem,1rem + .55vw,1.35rem);
  --f-lede:clamp(1rem,.95rem + .45vw,1.2rem);
  --f-body:1rem; --f-sm:.875rem; --f-xs:.78rem;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Jakarta",-apple-system,"Segoe UI",system-ui,sans-serif;

  /* ---- 8px grid ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --s8:64px; --s10:80px; --s12:96px; --s16:128px;

  /* ---- motion ---- */
  --e-out:cubic-bezier(.32,.72,0,1); --e-soft:cubic-bezier(.4,0,.2,1);
  --d-fast:140ms; --d-base:220ms; --d-slow:420ms;
  /* 3 text shades. --muted pehle #6c807d tha = 3.61:1 par — AA (4.5:1) fail.
     Ab #5a6f6c = 4.6:1 light ground par, to supporting copy "shaant" lagti hai, "dhundhli" nahi. */
  --ink:#071a18; --body:#3d514e; --muted:#5a6f6c;
  --ink-dk:#061c1a;                                        /* dark band ka ground */
  --brand:#064e4a; --brand-2:#0a6d63; --accent:#13b981; --accent-2:#36d3a6;
  --gold:#d8a43a; --danger:#b23a2c; --warn:#8a6a1f;

  --glass:rgba(255,255,255,.66);
  --glass-2:rgba(255,255,255,.46);
  --glass-line:rgba(255,255,255,.65);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.35);
  --blur:blur(22px) saturate(180%);

  /* Stacked shadows — contact edge + near shadow + far floor. Ek bada blur kabhi nahi. */
  --sh:0 1px 1px rgba(5,40,36,.04), 0 2px 4px rgba(5,40,36,.04), 0 8px 18px rgba(5,40,36,.06), 0 22px 48px rgba(5,40,36,.05);
  --sh-lg:0 1px 2px rgba(5,40,36,.06), 0 4px 10px rgba(5,40,36,.06), 0 16px 36px rgba(5,40,36,.09), 0 40px 90px rgba(5,40,36,.10);
  --sh-hov:0 1px 2px rgba(5,40,36,.06), 0 6px 14px rgba(5,40,36,.08), 0 18px 44px rgba(5,40,36,.12), 0 44px 96px rgba(5,40,36,.10);

  --r:20px; --r-sm:14px; --r-xs:10px; --r-lg:26px;
  --t:200ms cubic-bezier(.32,.72,0,1);                     /* iOS jaisa spring-ish ease */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.55;font-weight:400;color:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#eef3f1;min-height:100dvh}

/* ---------- aurora mesh (har page ke peeche) ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(60% 55% at 12% 8%, rgba(19,185,129,.22), transparent 62%),
  radial-gradient(55% 50% at 88% 12%, rgba(6,78,74,.26), transparent 60%),
  radial-gradient(70% 60% at 50% 102%, rgba(216,164,58,.16), transparent 64%),
  linear-gradient(170deg,#f2f7f5,#e6eeeb 60%,#eaf2ef)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(6,78,74,.05) 1px,transparent 1px);background-size:22px 22px}

a{color:var(--brand-2);text-decoration:none}
/* Inverted display scale: jitna bada, utna HALKA weight aur utni TIGHT tracking.
   Yahi "editorial" feel deta hai — bada+bold sasta lagta hai. */
h1,h2,h3{color:var(--ink);font-family:var(--serif);font-optical-sizing:auto}
h1{font-size:var(--f-h1);font-weight:500;line-height:1.04;letter-spacing:-.028em}
h2{font-size:var(--f-h2);font-weight:520;line-height:1.08;letter-spacing:-.022em}
h3{font-size:var(--f-h3);font-weight:600;line-height:1.25;letter-spacing:-.012em}
.muted{color:var(--muted)} .small{font-size:var(--f-sm)} .tiny{font-size:var(--f-xs)}
/* JetBrains Mono kabhi load hi nahi hota tha — ab system mono stack par. */
.mono{font-family:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- glass primitives ---------- */
.glass{position:relative;background:var(--glass);border-radius:var(--r);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh),var(--glass-edge);overflow:hidden}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.side,.modal .box{background:rgba(255,255,255,.95)}   /* purane browser: solid */
}
/* specular sheen — glossy highlight jo hover par bahta hai */
.sheen::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 46%,transparent 62%);
  transform:translateX(-120%);transition:transform 900ms cubic-bezier(.32,.72,0,1)}
.sheen:hover::before{transform:translateX(120%)}

/* ---------- auth / landing ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:452px;padding:36px}
.brandmark{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.brandmark i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  font-style:normal;font-weight:750;font-size:17px;letter-spacing:-.02em;
  background:linear-gradient(145deg,var(--brand-2),var(--brand));
  box-shadow:0 2px 6px rgba(5,40,36,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.brandmark b{font-size:21px;color:var(--ink);letter-spacing:-.02em;display:block;line-height:1.1}
.brandmark span{font-size:12px;color:var(--muted);display:block;font-weight:400}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:260px 1fr;min-height:100dvh;gap:16px;padding:16px}
.side{position:sticky;top:16px;height:calc(100dvh - 32px);border-radius:var(--r-lg);padding:24px 16px;
  display:flex;flex-direction:column;gap:10px;color:rgba(255,255,255,.78);overflow:hidden;
  background:linear-gradient(165deg,rgba(6,78,74,.94),rgba(4,56,53,.97));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.14)}
.side::after{content:"";position:absolute;inset:-40% -60% auto auto;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(19,185,129,.3),transparent 66%);pointer-events:none}
.side .brandmark{margin-bottom:18px;position:relative}
.side .brandmark i{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.side .brandmark b{color:#fff} .side .brandmark span{color:rgba(255,255,255,.55)}
.nav{display:flex;flex-direction:column;gap:3px;position:relative}
.nav button{all:unset;display:flex;align-items:center;gap:11px;min-height:46px;padding:0 14px;border-radius:14px;
  cursor:pointer;color:rgba(255,255,255,.76);font-size:15px;
  transition:background var(--t),color var(--t),transform var(--t)}
.nav button:hover{background:rgba(255,255,255,.09);color:#fff}
.nav button:active{transform:scale(.975)}
.nav button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.nav button.on{color:#fff;font-weight:600;background:rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 14px rgba(0,0,0,.14)}
.nav .count{margin-left:auto;font-size:12px;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:999px;
  font-variant-numeric:tabular-nums}
.side .foot{margin-top:auto;font-size:12px;color:rgba(255,255,255,.5);position:relative}
.main{padding:8px 16px 48px;min-width:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.head p{font-size:14px;color:var(--muted);margin-top:4px}

/* ---------- cards / kpi ---------- */
.card{padding:22px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:16px;margin-bottom:24px}
.kpi{padding:18px 22px}
.kpi b{display:block;font-weight:700;font-size:34px;line-height:1.05;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.kpi span{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.kpi.accent b{background:linear-gradient(135deg,var(--accent),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{all:unset;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;
  color:#fff;overflow:hidden;background:linear-gradient(145deg,var(--brand-2),var(--brand));
  box-shadow:0 1px 2px rgba(5,40,36,.2),0 6px 18px rgba(5,40,36,.18),inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform var(--t),box-shadow var(--t),filter var(--t)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.4) 48%,transparent 64%);
  transform:translateX(-130%);transition:transform 750ms cubic-bezier(.32,.72,0,1)}
.btn:hover{filter:brightness(1.07);box-shadow:0 2px 4px rgba(5,40,36,.2),0 10px 26px rgba(5,40,36,.24),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:hover::before{transform:translateX(130%)}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn.ghost{background:var(--glass-2);color:var(--ink);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 2px 10px rgba(5,40,36,.08)}
.btn.ghost:hover{background:rgba(255,255,255,.72);filter:none}
.btn.danger{background:linear-gradient(145deg,#c4483a,var(--danger))}
/* 44px har jagah — touch rule to hai hi, aur header me chunky buttons premium lagte hain */
.btn.sm{min-height:44px;padding:0 16px;font-size:14px;border-radius:12px}

/* ---------- form ---------- */
.fld{display:block;width:100%;min-height:46px;padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.58);color:var(--ink);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-family:inherit;font-weight:400;font-size:16px;line-height:1.4;  /* 16px: isse kam par iPhone focus pe zoom karta hai */
  box-shadow:inset 0 1px 2px rgba(5,40,36,.05);
  transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.fld::placeholder{color:#9aa9a6}
.fld:hover{background:rgba(255,255,255,.72)}
.fld:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.88);
  box-shadow:0 0 0 4px rgba(19,185,129,.16),inset 0 1px 2px rgba(5,40,36,.04)}
.fld[disabled]{opacity:.6;cursor:not-allowed}
label{display:block;font-size:13px;font-weight:650;color:var(--ink);margin:0 0 7px;letter-spacing:-.005em}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 180px}
.stack{display:flex;flex-direction:column;gap:18px}
.chk{display:flex;gap:11px;align-items:flex-start;font-size:14px;cursor:pointer;line-height:1.5}
.chk input{width:20px;height:20px;margin-top:1px;accent-color:var(--brand-2);flex:none}

/* ---------- badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;
  font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-green{background:rgba(19,185,129,.14);color:#0a7d5c}
.b-amber{background:rgba(216,164,58,.17);color:#8a6a1f}
.b-red{background:rgba(178,58,44,.13);color:var(--danger)}
.b-gray{background:rgba(108,128,125,.14);color:var(--muted)}
.b-blue{background:rgba(10,109,99,.13);color:var(--brand-2)}

/* ---------- table (glass frame, rows flat = scroll smooth rehta hai) ---------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r);background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh),var(--glass-edge)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:14px 18px;color:var(--muted);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid rgba(5,40,36,.08);background:rgba(255,255,255,.3)}
td{padding:13px 18px;border-bottom:1px solid rgba(5,40,36,.055);color:var(--ink);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:rgba(255,255,255,.5)}
tr.clickable{cursor:pointer}
.nowrap{white-space:nowrap}

/* ---------- sad paths ---------- */
.empty{padding:64px 24px;text-align:center}
.empty i{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:19px;
  font-style:normal;font-size:27px;background:linear-gradient(145deg,rgba(19,185,129,.2),rgba(6,78,74,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.empty b{display:block;color:var(--ink);font-size:19px;margin-bottom:7px}
.empty p{font-size:14px;color:var(--muted);max-width:400px;margin:0 auto;line-height:1.6}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.3) 25%,rgba(255,255,255,.72) 37%,rgba(255,255,255,.3) 63%);
  background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:8px;height:15px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-row{display:grid;gap:12px;padding:20px}
.alert{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-sm);font-size:14px;margin-bottom:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);line-height:1.5}
.alert.err{background:rgba(178,58,44,.1);color:var(--danger)}
.alert.ok{background:rgba(19,185,129,.12);color:#0a7d5c}
.alert.info{background:rgba(10,109,99,.1);color:var(--brand)}

/* ---------- toast ---------- */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:80}
.toast{padding:14px 18px;border-radius:var(--r-sm);font-size:14px;max-width:380px;color:#fff;
  background:linear-gradient(145deg,rgba(10,109,99,.96),rgba(6,78,74,.97));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,255,255,.2);animation:tin var(--t)}
.toast.err{background:linear-gradient(145deg,rgba(196,72,58,.96),rgba(178,58,44,.97))}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- modal / drawer ---------- */
.modal{position:fixed;inset:0;background:rgba(7,26,24,.4);display:grid;place-items:center;padding:16px;z-index:70;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade var(--t)}
.modal .box{width:100%;max-width:560px;border-radius:var(--r-lg);padding:28px;max-height:88dvh;overflow:auto;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-lg),var(--glass-edge);animation:pop var(--t)}
.modal h3{margin-bottom:18px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:26px;flex-wrap:wrap}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- segmented control (iOS jaisa) ---------- */
/* max-width + apna scroll: warna chhoti screen par ye poore PAGE ko chauda kar deta hai */
.seg{display:inline-flex;gap:3px;padding:4px;border-radius:13px;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.seg::-webkit-scrollbar{display:none}
.seg button{all:unset;cursor:pointer;padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
  white-space:nowrap;text-align:center;color:var(--muted);
  transition:background var(--t),color var(--t),box-shadow var(--t)}
.seg button:hover{color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(5,40,36,.14)}

/* ---------- mini bar chart ---------- */
.chart{display:flex;align-items:flex-end;gap:4px;height:120px;padding:4px 0}
.chart div{flex:1;min-width:3px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--accent-2),var(--brand-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:filter var(--t)}
.chart div:hover{filter:brightness(1.15)}
/* jis din koi lead nahi aayi — poori height ka halka track, taaki "data hi nahi hai" padha jaye */
.chart div.zero{background:rgba(5,40,36,.05);box-shadow:none}
.chart div.zero:hover{background:rgba(5,40,36,.09);filter:none}

/* ---------- mobile ---------- */
@media (max-width:880px){
  .shell{grid-template-columns:1fr;padding:12px;gap:12px}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;overflow-x:auto;
    border-radius:18px}
  .side .brandmark,.side .foot{display:none}
  .nav{flex-direction:row}
  .nav button{white-space:nowrap;min-height:44px}
  .btn.sm{min-height:44px}            /* phone par har tap target 44px */
  .main{padding:0 4px 40px}
  h1{font-size:28px} h2{font-size:24px}
  .kpi b{font-size:28px}
  .modal .box{padding:22px}
  .seg button{min-height:44px;display:flex;align-items:center}   /* touch target 44px */
  .kpis{grid-template-columns:repeat(2,1fr)}                      /* phone par 2-2 */
}
/* koi bhi cheez page ko chauda na kare — table/seg apne andar scroll karein */
html,body{max-width:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .sheen::before,.btn::before{display:none}
}