:root{
    --bg1:#0d0710; --bg2:#25091d; --bg3:#3a0f2b;
    --glass:rgba(255,255,255,0.07); --glass-brd:rgba(255,255,255,0.16);
    --glass-strong:rgba(255,255,255,0.12);
    --text:#f5edf1; --text-dim:#c3a9ba;
    --primary:#8a1c5c; --primary2:#c14f8a; --accent:#d9a53f; --warm:#c65b3f; --danger:#e5497a;
    --shadow: 0 8px 32px rgba(0,0,0,0.35);
  }
  html[data-theme="light"]{
    --bg1:#faf1f6; --bg2:#f5e4ee; --bg3:#f0d9e8;
    --glass:rgba(255,255,255,0.55); --glass-brd:rgba(255,255,255,0.9);
    --glass-strong:rgba(255,255,255,0.75);
    --text:#2b1220; --text-dim:#7a5468;
    --shadow: 0 8px 28px rgba(140,40,90,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter',sans-serif; color:var(--text);
    background: radial-gradient(1200px 800px at 10% -10%, var(--bg3), transparent),
                radial-gradient(1000px 700px at 110% 10%, var(--bg2), transparent),
                var(--bg1);
    min-height:100vh; overflow-x:hidden; transition:background .4s ease, color .4s ease;
  }
  html[lang="bn"] body, .bn-text{ font-family:'Noto Sans Bengali','Inter',sans-serif; }
  h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; }
  html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] .display{
    font-family:'Noto Sans Bengali','Space Grotesk',sans-serif;
  }
  .blob{ position:fixed; border-radius:50%; filter:blur(90px); opacity:.35; z-index:0; pointer-events:none; animation:drift 22s ease-in-out infinite; }
  .blob1{ width:480px; height:480px; background:var(--primary); top:-120px; left:-100px; }
  .blob2{ width:420px; height:420px; background:var(--accent); bottom:-140px; right:-80px; animation-delay:-8s; }
  .blob3{ width:320px; height:320px; background:var(--warm); top:40%; right:20%; animation-delay:-14s; opacity:.2; }
  @keyframes drift{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(40px,-30px) scale(1.08);} }
  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--glass-brd); border-radius:8px; }

  .glass{
    background:var(--glass); backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border:1px solid var(--glass-brd); border-radius:20px; box-shadow:var(--shadow);
  }
  .glass-strong{ background:var(--glass-strong); }
  button, input, select, textarea{ font-family:inherit; color:inherit; }
  button{ cursor:pointer; }
  button:disabled{ cursor:not-allowed; }
  button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  .btn{
    padding:11px 20px; border-radius:14px; border:none; font-weight:600; font-size:14.5px;
    display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    white-space:nowrap;
  }
  .btn:active{ transform:scale(.97); }
  .btn-sm{ padding:7px 12px; font-size:13px; }
  .btn-primary{ background:linear-gradient(135deg,var(--primary),var(--primary2)); color:#fff; box-shadow:0 6px 20px rgba(124,111,255,.4); }
  .btn-primary:hover{ box-shadow:0 8px 26px rgba(124,111,255,.55); }
  .btn-accent{ background:linear-gradient(135deg,var(--accent),#b8842e); color:#2e1f04; box-shadow:0 6px 20px rgba(217,165,63,.35); }
  .btn-warm{ background:linear-gradient(135deg,var(--warm),#8a2f45); color:#fff6f0; box-shadow:0 6px 20px rgba(198,91,63,.35); }
  .btn-ghost{ background:var(--glass); border:1px solid var(--glass-brd); color:var(--text); }
  .btn-ghost:hover{ background:var(--glass-strong); }
  .btn-danger{ background:rgba(255,107,129,.15); color:var(--danger); border:1px solid rgba(255,107,129,.4); }
  .field{
    width:100%; padding:12px 14px; border-radius:12px; background:var(--glass);
    border:1px solid var(--glass-brd); color:var(--text); font-size:14.5px; outline:none;
  }
  html[data-theme="light"] .field{ background:rgba(255,255,255,.7); }
  .field::placeholder{ color:var(--text-dim); }
  .field:focus{ border-color:var(--primary2); }
  .field-sm{ padding:8px 10px; font-size:13px; border-radius:10px; }
  .pill{ padding:4px 12px; border-radius:100px; font-size:12px; font-weight:600; display:inline-block; white-space:nowrap; }
  .badge-new{ background:rgba(193,79,138,.18); color:#e7a9c8; }
  .badge-contacted{ background:rgba(198,91,63,.2); color:#f0ac8c; }
  .badge-followup{ background:rgba(217,165,63,.2); color:#f0cf8a; }
  .badge-interested{ background:rgba(193,79,138,.18); color:#e7a9c8; }
  .badge-converted{ background:rgba(80,200,120,.18); color:#7bf0a0; }
  .badge-lost{ background:rgba(229,73,122,.18); color:#f199b6; }
  html[data-theme="light"] .badge-new{ color:#9c2f66; }
  html[data-theme="light"] .badge-contacted{ color:#a2452c; }
  html[data-theme="light"] .badge-followup{ color:#8a6115; }
  html[data-theme="light"] .badge-interested{ color:#9c2f66; }
  html[data-theme="light"] .badge-converted{ color:#1c8a45; }
  html[data-theme="light"] .badge-lost{ color:#c23050; }
  .fade-in{ animation:fadeIn .4s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .nav-item{
    display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px;
    color:var(--text-dim); font-weight:500; font-size:14.5px; transition:all .15s ease; border:1px solid transparent;
  }
  .nav-item:hover{ background:var(--glass); color:var(--text); }
  .nav-item.active{ background:linear-gradient(135deg, rgba(124,111,255,.22), rgba(23,233,196,.12)); color:var(--text); border-color:var(--glass-brd); }
  .scale-in{ animation:scaleIn .25s ease; }
  @keyframes scaleIn{ from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);} }
  table{ border-collapse:collapse; width:100%; }
  th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); padding:10px 12px; font-weight:600; white-space:nowrap; }
  td{ padding:11px 12px; font-size:13.5px; border-top:1px solid var(--glass-brd); vertical-align:top; }
  .avatar{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; font-weight:700; font-size:13.5px; flex-shrink:0;
  }
  .bar-track{ width:100%; height:9px; border-radius:6px; background:var(--glass); overflow:hidden; border:1px solid var(--glass-brd); }
  .bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .4s ease; }
  .stat-card{ padding:20px 22px; flex:"1 1 180px"; }

  /* Bottom tab bar: mobile-only app-like navigation */
  .bottom-nav{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:55;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:var(--glass-strong); backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-top:1px solid var(--glass-brd);
  }
  .bottom-nav-inner{ display:flex; justify-content:space-around; align-items:center; }
  .bottom-nav-item{
    display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none;
    color:var(--text-dim); font-size:10.5px; padding:6px 10px; border-radius:12px; cursor:pointer; flex:1;
  }
  .bottom-nav-item.active{ color:var(--primary2); }

  /* Install app banner */
  .install-banner{
    position:fixed; left:16px; right:16px; z-index:70;
    display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px;
    background:var(--glass-strong); backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border:1px solid var(--glass-brd); box-shadow:var(--shadow);
  }
  .install-banner img{ width:38px; height:38px; border-radius:10px; object-fit:contain; flex-shrink:0; }

  @media (max-width: 880px){
    .sidebar{ display:none !important; }
    .mobile-nav{ display:flex !important; }
    .bottom-nav{ display:block; }
    .app-content-area{ padding-bottom:88px !important; }
    .install-banner{ bottom:76px; }
    body{ overscroll-behavior-y: contain; }
    .nav-item{ padding:14px 16px; font-size:15px; }
    .bottom-nav-item{ padding:8px 6px; }
    table{ font-size:12.5px; }
    .glass{ border-radius:16px; }
    .btn{ min-height:40px; }
  }
  @media (min-width: 881px){
    .install-banner{ bottom:24px; max-width:420px; left:auto; right:24px; }
  }