/* ═══════════════════════════════════════════════════════════════════════════
   UDHARO — Premium SaaS Design System v3.0
   Mobile-First · Glassmorphism · Elite Fintech UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1 · DESIGN TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand gradients */
  --primary:         #6366f1;
  --primary-hover:   #4f46e5;
  --primary-light:   rgba(99,102,241,.1);
  --primary-border:  rgba(99,102,241,.25);
  --grad-primary:    linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  --grad-ultra:      linear-gradient(135deg,#f59e0b 0%,#ef4444 50%,#ec4899 100%);
  --grad-success:    linear-gradient(135deg,#10b981 0%,#059669 100%);
  --grad-mesh:       radial-gradient(ellipse 80% 80% at 20% 20%,rgba(99,102,241,.08) 0%,transparent 50%),
                     radial-gradient(ellipse 60% 60% at 80% 80%,rgba(139,92,246,.06) 0%,transparent 50%);

  /* Semantic */
  --success:        #10b981;
  --success-light:  rgba(16,185,129,.1);
  --warning:        #f59e0b;
  --warning-light:  rgba(245,158,11,.1);
  --danger:         #ef4444;
  --danger-light:   rgba(239,68,68,.1);
  --info:           #06b6d4;
  --info-light:     rgba(6,182,212,.1);

  /* Backgrounds */
  --bg-page:      #f3f4f8;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f8f9fc;
  --bg-overlay:   rgba(15,23,42,.55);
  --bg-glass:     rgba(255,255,255,.75);
  --bg-glass-dark:rgba(20,22,40,.8);

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-faint:     #cbd5e1;

  /* Borders */
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --border-glass:  rgba(255,255,255,.4);

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 24px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 80px rgba(0,0,0,.15),0 8px 24px rgba(0,0,0,.08);
  --shadow-primary: 0 4px 20px rgba(99,102,241,.35);
  --shadow-ultra:   0 4px 20px rgba(245,158,11,.35);
  --shadow-glass:   0 8px 32px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6);

  /* Sidebar */
  --sidebar-bg:     #ffffff;
  --sidebar-border: #e8eaf0;
  --nav-hover:      #f1f5f9;
  --nav-active-bg:  rgba(99,102,241,.08);
  --nav-active-text:#4f46e5;

  /* Radii */
  --r-xs:   4px;  --r-sm:  8px;  --r-md:  12px;
  --r-lg:   16px; --r-xl:  20px; --r-2xl: 28px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px;

  /* Legacy aliases (keeps older JS working) */
  --space-1:var(--sp-1);  --space-2:var(--sp-2);  --space-3:var(--sp-3);
  --space-4:var(--sp-4);  --space-5:var(--sp-5);  --space-6:var(--sp-6);
  --space-8:var(--sp-8);  --space-10:var(--sp-10);--space-12:var(--sp-12);
  --space-16:var(--sp-16);

  /* Typography */
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --text-xs:12px;  --text-sm:13.5px; --text-base:15px;
  --text-md:16.5px;--text-lg:19px;   --text-xl:22px;
  --text-2xl:28px; --text-3xl:36px;  --text-4xl:48px;

  /* Layout */
  --sidebar-w:256px;
  --topbar-h:58px;
  --bnav-h:72px;

  /* Transitions */
  --t-fast:100ms; --t-mid:200ms; --t-slow:280ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(0,0,.2,1);
}

/* ── Dark theme ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:    #080a12;
  --bg-surface: #0f1120;
  --bg-elevated:#171a2e;
  --bg-overlay: rgba(0,0,0,.75);
  --bg-glass:   rgba(15,17,32,.85);

  --text-primary:   #e8eaf6;
  --text-secondary: #8b8fbe;
  --text-muted:     #4a4e78;
  --text-faint:     #262a4a;

  --border:        rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.11);
  --border-glass:  rgba(255,255,255,.08);

  --shadow-xs:0 1px 3px rgba(0,0,0,.4);
  --shadow-sm:0 2px 8px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 24px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:0 8px 48px rgba(0,0,0,.7),0 4px 12px rgba(0,0,0,.35);
  --shadow-glass:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);

  --sidebar-bg:    #0f1120;
  --sidebar-border:rgba(255,255,255,.06);
  --nav-hover:     rgba(255,255,255,.04);
  --nav-active-bg: rgba(99,102,241,.14);
  --nav-active-text:#818cf8;

  --primary-light:  rgba(99,102,241,.14);
  --primary-border: rgba(99,102,241,.28);
  --success-light:  rgba(16,185,129,.12);
  --warning-light:  rgba(245,158,11,.12);
  --danger-light:   rgba(239,68,68,.12);
  --info-light:     rgba(6,182,212,.12);
  --grad-mesh:      radial-gradient(ellipse 80% 80% at 20% 20%,rgba(99,102,241,.12) 0%,transparent 50%),
                    radial-gradient(ellipse 60% 60% at 80% 80%,rgba(139,92,246,.08) 0%,transparent 50%);
}

/* ── Nepali font ─────────────────────────────────────────────────────────────── */
:root[lang="ne"] { --font:'Noto Sans Devanagari','Inter',system-ui,sans-serif; }
:root[lang="ne"] body,:root[lang="ne"] input,:root[lang="ne"] select,
:root[lang="ne"] button,:root[lang="ne"] textarea {
  font-family:'Noto Sans Devanagari','Inter',system-ui,sans-serif;
}


/* ───────────────────────────────────────────────────────────────────────────
   2 · RESET
   ─────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  height:100%;
  font-family:var(--font);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--text-primary);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit;}
input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img,svg{display:block;}
[hidden]{display:none!important;}

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}


/* ───────────────────────────────────────────────────────────────────────────
   3 · APP SHELL LAYOUT
   ─────────────────────────────────────────────────────────────────────────── */
#app{display:flex;height:100vh;height:100dvh;overflow:hidden;}
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}


/* ───────────────────────────────────────────────────────────────────────────
   4 · SIDEBAR
   ─────────────────────────────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);
  height:100%;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex;flex-direction:column;
  flex-shrink:0;overflow:hidden;
  transition:transform var(--t-slow) var(--ease);
  z-index:50;
}

/* Brand */
.sidebar-brand{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-5);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.brand-icon{
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--grad-primary);
  color:#fff;font-size:var(--text-md);font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:var(--shadow-primary);
}
/* When .brand-icon wraps the SVG logo, remove the gradient tile */
.brand-icon.brand-logo{
  background:transparent;
  box-shadow:none;
  width:40px;height:36px;
}
.brand-icon.brand-logo img{
  display:block;
  width:100%;height:auto;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.brand-meta{display:flex;flex-direction:column;min-width:0;}
.brand-name{font-size:var(--text-md);font-weight:700;color:var(--text-primary);line-height:1.2;}
.brand-sub{font-size:var(--text-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Nav links */
.sidebar-nav{flex:1;overflow-y:auto;padding:var(--sp-3);display:flex;flex-direction:column;gap:2px;}
.nav-link{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-3);border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:500;
  color:var(--text-secondary);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
  position:relative;
}
.nav-link:hover{background:var(--nav-hover);color:var(--text-primary);}
.nav-link.active{
  background:var(--nav-active-bg);color:var(--nav-active-text);font-weight:600;
}
.nav-link.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--primary);border-radius:0 var(--r-full) var(--r-full) 0;
}
.nav-link svg{flex-shrink:0;opacity:.65;transition:opacity var(--t-fast);}
.nav-link.active svg,.nav-link:hover svg{opacity:1;}
.nav-badge{
  margin-left:auto;font-size:11px;font-weight:600;
  background:var(--danger);color:#fff;
  border-radius:var(--r-full);padding:1px 6px;line-height:1.6;
}
.nav-badge:empty{display:none;}
.plan-badge{background:var(--primary-light);color:var(--primary);border:1px solid var(--primary-border);}

/* Sidebar bottom */
.sidebar-bottom{padding:var(--sp-3) var(--sp-3) var(--sp-4);flex-shrink:0;display:flex;flex-direction:column;gap:2px;}
.sidebar-divider{height:1px;background:var(--border);margin:var(--sp-2) 0 var(--sp-3);}
.theme-btn{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-3);border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:500;
  color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast);width:100%;
}
.theme-btn:hover{background:var(--nav-hover);color:var(--text-primary);}
.moon-icon{display:none;}
[data-theme="dark"] .sun-icon{display:none;}
[data-theme="dark"] .moon-icon{display:block;}

/* Sidebar overlay (mobile) */
.sidebar-overlay{
  position:fixed;inset:0;
  background:var(--bg-overlay);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:49;animation:fadeIn var(--t-mid) var(--ease);
}


/* ───────────────────────────────────────────────────────────────────────────
   5 · TOPBAR
   ─────────────────────────────────────────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);
  border-bottom:1px solid var(--border);
  background:var(--bg-surface);
  display:flex;align-items:center;
  padding:0 var(--sp-4);gap:var(--sp-3);
  flex-shrink:0;position:sticky;top:0;z-index:30;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.topbar-title{flex:1;font-size:var(--text-lg);font-weight:700;color:var(--text-primary);}
.topbar-right{display:flex;align-items:center;gap:var(--sp-2);}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--grad-primary);color:#fff;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
  box-shadow:0 2px 8px rgba(99,102,241,.3);
}
.icon-btn{
  width:36px;height:36px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  transition:background var(--t-fast),color var(--t-fast);flex-shrink:0;
}
.icon-btn:hover{background:var(--bg-elevated);color:var(--text-primary);}


/* ───────────────────────────────────────────────────────────────────────────
   6 · PAGE / CONTENT AREA
   ─────────────────────────────────────────────────────────────────────────── */
.page{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:var(--sp-4);
  padding-bottom:calc(var(--bnav-h) + var(--sp-4) + env(safe-area-inset-bottom));
  background:var(--grad-mesh);
}
.page-loader{display:flex;align-items:center;justify-content:center;height:60vh;}
.spinner{
  width:28px;height:28px;
  border:2.5px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;animation:spin .7s linear infinite;
}

/* Page header */
.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-5);flex-wrap:wrap;
}
.page-header-left h1{font-size:var(--text-xl);font-weight:800;color:var(--text-primary);line-height:1.2;}
.page-header-left p{font-size:var(--text-sm);color:var(--text-muted);margin-top:3px;}
.page-header-right{display:flex;gap:var(--sp-2);flex-wrap:wrap;}


/* ───────────────────────────────────────────────────────────────────────────
   7 · PREMIUM BOTTOM NAV (mobile — always visible)
   ─────────────────────────────────────────────────────────────────────────── */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:var(--bnav-h);
  background:var(--bg-glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  z-index:40;
  padding:6px var(--sp-2);
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around;
  gap:var(--sp-1);
}
.bnav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;flex:1;padding:6px 4px;
  color:var(--text-muted);font-size:10.5px;font-weight:600;
  border-radius:var(--r-md);
  transition:color var(--t-fast),background var(--t-fast),transform var(--t-fast);
  min-width:0;position:relative;
}
.bnav-item:active{transform:scale(.93);}
.bnav-item svg{flex-shrink:0;transition:transform var(--t-fast);}
.bnav-item.active{color:var(--primary);}
.bnav-item.active svg{transform:translateY(-1px);}
.bnav-item.active::before{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:0 0 var(--r-full) var(--r-full);
  background:var(--grad-primary);
}


/* ───────────────────────────────────────────────────────────────────────────
   8 · BUTTONS
   ─────────────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:11px 20px;border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:600;line-height:1;
  white-space:nowrap;transition:all var(--t-fast) var(--ease);cursor:pointer;
  min-height:44px;/* touch target */
}
.btn svg{flex-shrink:0;}

.btn-primary{
  background:var(--grad-primary);color:#fff;
  box-shadow:var(--shadow-primary);
  border:none;
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 24px rgba(99,102,241,.45);}
.btn-primary:active{transform:translateY(0);filter:brightness(.97);}

.btn-success{
  background:var(--grad-success);color:#fff;
  box-shadow:0 2px 10px rgba(16,185,129,.3);
}
.btn-success:hover{filter:brightness(1.06);transform:translateY(-1px);}

.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{filter:brightness(1.06);transform:translateY(-1px);}

.btn-outline{
  background:transparent;color:var(--text-secondary);
  border:1.5px solid var(--border-strong);
}
.btn-outline:hover{background:var(--bg-elevated);border-color:var(--primary);color:var(--primary);}

.btn-ghost{background:transparent;color:var(--text-secondary);padding:9px 14px;}
.btn-ghost:hover{background:var(--bg-elevated);color:var(--text-primary);}

.btn-sm{padding:8px 14px;font-size:var(--text-xs);border-radius:var(--r-sm);min-height:36px;}
.btn-lg{padding:14px 28px;font-size:var(--text-md);min-height:52px;}
.btn-block{width:100%;justify-content:center;}

.btn-icon{
  width:40px;height:40px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;color:var(--text-muted);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.btn-icon:hover{background:var(--bg-elevated);color:var(--text-primary);}
.btn-icon:active{transform:scale(.92);}
.btn-icon.danger:hover{background:var(--danger-light);color:var(--danger);}

/* Gradient CTA button (ultra premium) */
.btn-ultra{
  background:var(--grad-ultra);color:#fff;
  box-shadow:var(--shadow-ultra);border:none;
  position:relative;overflow:hidden;
}
.btn-ultra::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);
  pointer-events:none;
}
.btn-ultra:hover{filter:brightness(1.08);transform:translateY(-1px);}


/* ───────────────────────────────────────────────────────────────────────────
   9 · FORM CONTROLS
   ─────────────────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:var(--sp-2);}
.form-label{font-size:var(--text-xs);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;}
.form-hint{font-size:var(--text-xs);color:var(--text-muted);}

.input{
  width:100%;padding:12px var(--sp-3);
  background:var(--bg-surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-size:var(--text-base);color:var(--text-primary);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
  min-height:44px;
}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
.input::placeholder{color:var(--text-faint);}
select.input{cursor:pointer;}
textarea.input{resize:vertical;min-height:88px;line-height:1.5;}

.input-group{position:relative;display:flex;align-items:center;}
.input-group .input{padding-left:40px;}
.input-group .input-prefix{
  position:absolute;left:var(--sp-3);color:var(--text-muted);
  font-size:var(--text-sm);pointer-events:none;font-weight:500;
}
.search-wrap{position:relative;display:flex;align-items:center;}
.search-wrap .input{padding-left:38px;}
.search-wrap svg{position:absolute;left:11px;color:var(--text-muted);pointer-events:none;}


/* ───────────────────────────────────────────────────────────────────────────
   10 · CARDS
   ─────────────────────────────────────────────────────────────────────────── */
.card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--sp-5) 0;gap:var(--sp-4);
}
.card-title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.card-body{padding:var(--sp-5);}
.card-footer{padding:var(--sp-3) var(--sp-5) var(--sp-4);border-top:1px solid var(--border);}

/* Glass card */
.glass{
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border-glass);
  box-shadow:var(--shadow-glass);
}
[data-theme="dark"] .glass{background:var(--bg-glass-dark);}


/* ───────────────────────────────────────────────────────────────────────────
   11 · KPI STAT CARDS
   ─────────────────────────────────────────────────────────────────────────── */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);margin-bottom:var(--sp-5);
}
.kpi-card{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:var(--sp-3);
  position:relative;overflow:hidden;
  transition:box-shadow var(--t-mid),transform var(--t-mid);
}
.kpi-card::after{
  content:'';position:absolute;
  top:-30px;right:-30px;width:80px;height:80px;
  border-radius:50%;opacity:.06;pointer-events:none;
}
.kpi-card.indigo::after{background:var(--primary);}
.kpi-card.green::after{background:var(--success);}
.kpi-card.amber::after{background:var(--warning);}
.kpi-card.red::after{background:var(--danger);}
.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;}
.kpi-icon{
  width:38px;height:38px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kpi-icon.indigo{background:var(--primary-light);color:var(--primary);}
.kpi-icon.green{background:var(--success-light);color:var(--success);}
.kpi-icon.amber{background:var(--warning-light);color:var(--warning);}
.kpi-icon.red{background:var(--danger-light);color:var(--danger);}
.kpi-icon.cyan{background:var(--info-light);color:var(--info);}
.kpi-sparkline{opacity:.7;}
.kpi-label{font-size:var(--text-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.kpi-value{font-size:var(--text-2xl);font-weight:800;color:var(--text-primary);line-height:1;margin-top:var(--sp-2);}
.kpi-value span{font-size:var(--text-sm);font-weight:500;color:var(--text-muted);margin-left:3px;}
.kpi-change{
  display:inline-flex;align-items:center;gap:2px;
  font-size:11px;font-weight:700;
  padding:2px 7px;border-radius:var(--r-full);margin-top:2px;
}
.kpi-change.up{color:var(--success);background:var(--success-light);}
.kpi-change.down{color:var(--danger);background:var(--danger-light);}
.kpi-change.flat{color:var(--text-muted);background:var(--bg-elevated);}


/* ───────────────────────────────────────────────────────────────────────────
   12 · TABLES
   ─────────────────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-xs);}
table{width:100%;border-collapse:collapse;background:var(--bg-surface);}
thead tr{border-bottom:1px solid var(--border);background:var(--bg-elevated);}
thead th{
  padding:12px var(--sp-4);text-align:left;
  font-size:var(--text-xs);font-weight:700;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--t-fast);}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--bg-elevated);}
tbody td{padding:14px var(--sp-4);font-size:var(--text-sm);color:var(--text-primary);vertical-align:middle;}
.td-name{font-weight:600;}
.td-muted{color:var(--text-muted);font-size:var(--text-xs);}
.td-actions{display:flex;align-items:center;gap:var(--sp-1);justify-content:flex-end;}


/* ───────────────────────────────────────────────────────────────────────────
   13 · BADGES
   ─────────────────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:600;white-space:nowrap;
}
.badge-green  {background:var(--success-light);color:var(--success);}
.badge-red    {background:var(--danger-light); color:var(--danger);}
.badge-amber  {background:var(--warning-light);color:var(--warning);}
.badge-indigo {background:var(--primary-light);color:var(--primary);}
.badge-gray   {background:var(--bg-elevated);  color:var(--text-secondary);border:1px solid var(--border);}
.badge-success{background:var(--success-light);color:var(--success);}
.badge-warning{background:var(--warning-light);color:var(--warning);}
.badge-danger {background:var(--danger-light); color:var(--danger);}
.badge-muted  {background:var(--bg-elevated);  color:var(--text-muted);border:1px solid var(--border);}
.badge::before{content:'●';font-size:7px;}

/* Nav badges */
.nav-badge.badge-success{background:var(--success-light);color:var(--success);border:1px solid rgba(16,185,129,.25);}
.nav-badge.badge-warning{background:var(--warning-light);color:var(--warning);border:1px solid rgba(245,158,11,.25);}
.nav-badge.badge-danger {background:var(--danger-light); color:var(--danger); border:1px solid rgba(239,68,68,.25);}
.nav-badge.badge-muted  {background:var(--bg-elevated);  color:var(--text-muted);border:1px solid var(--border);}


/* ───────────────────────────────────────────────────────────────────────────
   14 · MODALS
   ─────────────────────────────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;
  background:var(--bg-overlay);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:200;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);animation:fadeIn var(--t-mid) var(--ease);
}
.modal-box{
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  width:100%;max-width:480px;max-height:90vh;
  overflow:hidden;display:flex;flex-direction:column;
  animation:modalIn var(--t-slow) var(--ease-spring);
}
.modal-box.wide{max-width:640px;}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--sp-5);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.modal-header h3{font-size:var(--text-md);font-weight:700;}
.modal-body{
  padding:var(--sp-5);overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.modal-footer{
  padding:var(--sp-4) var(--sp-5);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);flex-shrink:0;
}


/* ───────────────────────────────────────────────────────────────────────────
   15 · TOASTS
   ─────────────────────────────────────────────────────────────────────────── */
#toasts{
  position:fixed;top:var(--sp-4);right:var(--sp-4);z-index:999;
  display:flex;flex-direction:column;gap:var(--sp-2);
  max-width:320px;width:calc(100% - var(--sp-8));
}
.toast{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--text-primary);color:var(--bg-surface);
  border-radius:var(--r-lg);
  font-size:var(--text-sm);font-weight:500;
  box-shadow:var(--shadow-lg);
  animation:toastIn var(--t-slow) var(--ease-spring);
}
.toast.success{background:var(--success);}
.toast.danger{background:var(--danger);}
.toast.warning{background:var(--warning);color:#fff;}
.toast.info{background:var(--info);}
.toast-close{margin-left:auto;opacity:.7;cursor:pointer;flex-shrink:0;}
.toast-close:hover{opacity:1;}


/* ───────────────────────────────────────────────────────────────────────────
   16 · EMPTY STATE
   ─────────────────────────────────────────────────────────────────────────── */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-12) var(--sp-6);text-align:center;gap:var(--sp-3);
}
.empty-icon{
  width:60px;height:60px;border-radius:var(--r-xl);
  background:var(--bg-elevated);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);margin-bottom:var(--sp-2);
}
.empty h3{font-size:var(--text-md);font-weight:600;color:var(--text-primary);}
.empty p{font-size:var(--text-sm);color:var(--text-muted);max-width:280px;}


/* ───────────────────────────────────────────────────────────────────────────
   17 · SKELETON LOADERS
   ─────────────────────────────────────────────────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--border) 37%,var(--bg-elevated) 63%);
  background-size:400px 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--r-sm);
}
.skeleton-text{height:14px;margin-bottom:8px;}
.skeleton-text.wide{width:80%;}
.skeleton-text.medium{width:60%;}
.skeleton-text.narrow{width:40%;}
.skeleton-card{height:96px;border-radius:var(--r-lg);}
.skeleton-circle{border-radius:50%;}

@keyframes shimmer{
  0%{background-position:-400px 0;}
  100%{background-position:400px 0;}
}


/* ───────────────────────────────────────────────────────────────────────────
   18 · DASHBOARD
   ─────────────────────────────────────────────────────────────────────────── */
.dash-grid{display:flex;flex-direction:column;gap:var(--sp-4);}
.dash-main{display:flex;flex-direction:column;gap:var(--sp-4);}

/* Transactions list */
.txn-list{display:flex;flex-direction:column;gap:1px;}
.txn-row{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  transition:background var(--t-fast);border-radius:var(--r-md);
}
.txn-row:hover{background:var(--bg-elevated);}
.txn-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:14px;
}
.txn-icon.credit{background:var(--danger-light);color:var(--danger);}
.txn-icon.payment{background:var(--success-light);color:var(--success);}
.txn-info{flex:1;min-width:0;}
.txn-name{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.txn-date{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
.txn-amount{font-size:var(--text-sm);font-weight:700;white-space:nowrap;}
.txn-amount.credit{color:var(--danger);}
.txn-amount.payment{color:var(--success);}

/* Top debtors */
.debtor-list{display:flex;flex-direction:column;gap:var(--sp-3);}
.debtor-row{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);}
.debtor-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--primary-light);color:var(--primary);
  font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.debtor-info{flex:1;min-width:0;}
.debtor-name{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.debtor-phone{font-size:var(--text-xs);color:var(--text-muted);margin-top:1px;}
.debtor-bal{font-size:var(--text-sm);font-weight:700;color:var(--danger);white-space:nowrap;}

/* Quick action buttons */
.quick-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
.qa-btn{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:13px 14px;
  background:var(--bg-surface);
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  font-size:var(--text-sm);font-weight:600;
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--t-fast) var(--ease);
  justify-content:center;min-height:48px;
}
.qa-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);}
.qa-btn:active{transform:scale(.97);}
.qa-btn svg{flex-shrink:0;}


/* ───────────────────────────────────────────────────────────────────────────
   19 · CUSTOMERS PAGE
   ─────────────────────────────────────────────────────────────────────────── */
.customer-grid{display:flex;flex-direction:column;gap:var(--sp-3);}
.customer-card{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:box-shadow var(--t-fast),transform var(--t-fast),border-color var(--t-fast);
  cursor:pointer;
}
.customer-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);border-color:var(--primary-border);}
.customer-card:active{transform:scale(.99);}
.customer-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--grad-primary);color:#fff;
  font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px rgba(99,102,241,.25);
}
.customer-info{flex:1;min-width:0;}
.customer-name{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.customer-phone{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px;}
.customer-bal-wrap{text-align:right;flex-shrink:0;}
.customer-bal{font-size:var(--text-sm);font-weight:800;}
.customer-bal.positive{color:var(--danger);}
.customer-bal.zero{color:var(--success);}
.customer-bal-label{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}


/* ───────────────────────────────────────────────────────────────────────────
   20 · UDHARO PAGE
   ─────────────────────────────────────────────────────────────────────────── */
.udharo-header-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  background:linear-gradient(135deg,var(--danger-light),rgba(239,68,68,.04));
  border:1px solid rgba(239,68,68,.2);
  border-radius:var(--r-lg);margin-bottom:var(--sp-4);
}
.udharo-total-label{font-size:var(--text-xs);font-weight:700;color:var(--danger);text-transform:uppercase;letter-spacing:.06em;}
.udharo-total-val{font-size:var(--text-2xl);font-weight:800;color:var(--danger);line-height:1;margin-top:3px;}
.msg-usage{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--primary-light);border:1px solid var(--primary-border);
  border-radius:var(--r-md);font-size:var(--text-xs);color:var(--primary);
  font-weight:500;margin-bottom:var(--sp-3);flex-wrap:wrap;
}
.msg-usage strong{font-weight:700;}
.progress-bar{height:4px;background:var(--border);border-radius:var(--r-full);overflow:hidden;flex:1;min-width:60px;}
.progress-fill{height:100%;background:var(--grad-primary);border-radius:var(--r-full);transition:width .5s var(--ease);}
.progress-fill.warning{background:var(--warning);}
.progress-fill.danger{background:var(--danger);}

/* Transaction history */
.txn-history{display:flex;flex-direction:column;}
.txn-history-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border);
}
.txn-history-item:last-child{border-bottom:none;}
.txn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.txn-dot.credit{background:var(--danger);}
.txn-dot.payment{background:var(--success);}


/* ───────────────────────────────────────────────────────────────────────────
   21 · SALES PAGE
   ─────────────────────────────────────────────────────────────────────────── */
.sales-summary-bar{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.summary-chip{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-4);text-align:center;
}
.summary-chip .val{font-size:var(--text-xl);font-weight:800;line-height:1;}
.summary-chip .lbl{font-size:var(--text-xs);color:var(--text-muted);margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.summary-chip.green .val{color:var(--success);}
.summary-chip.red .val{color:var(--danger);}
.summary-chip.amber .val{color:var(--warning);}


/* ───────────────────────────────────────────────────────────────────────────
   22 · ANALYTICS PAGE
   ─────────────────────────────────────────────────────────────────────────── */
.chart-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);overflow:hidden;}
.chart-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);
}
.chart-title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.chart-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
.chart-body{padding:var(--sp-4);}
.chart-body svg{display:block;width:100%;height:auto;}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-3);}
.legend-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);color:var(--text-secondary);font-weight:500;}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.analytics-grid{display:flex;flex-direction:column;gap:var(--sp-4);}


/* ───────────────────────────────────────────────────────────────────────────
   23 · SETTINGS PAGE
   ─────────────────────────────────────────────────────────────────────────── */
.settings-layout{display:flex;flex-direction:column;gap:var(--sp-5);}
.settings-nav{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.settings-nav-item{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:9px var(--sp-3);border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:500;
  color:var(--text-secondary);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
  min-height:40px;
}
.settings-nav-item:hover{background:var(--bg-elevated);color:var(--text-primary);}
.settings-nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:600;}
.settings-section{display:flex;flex-direction:column;gap:var(--sp-4);}
.settings-card{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-5);
}
.settings-card h4{
  font-size:var(--text-sm);font-weight:700;color:var(--text-primary);
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border);
}
.form-grid-2{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
.form-row{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--border);gap:var(--sp-4);
}
.settings-row:last-child{border-bottom:none;padding-bottom:0;}
.settings-row-info h5{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);}
.settings-row-info p{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px;}
.settings-grid{display:flex;flex-direction:column;gap:var(--sp-4);}

/* Toggle */
.toggle{
  width:46px;height:26px;background:var(--border-strong);
  border-radius:var(--r-full);position:relative;cursor:pointer;
  transition:background var(--t-fast);flex-shrink:0;
}
.toggle.on{background:var(--success);}
.toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;background:#fff;border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:transform var(--t-fast) var(--ease-spring);
}
.toggle.on::after{transform:translateX(20px);}


/* ───────────────────────────────────────────────────────────────────────────
   24 · PREMIUM BILLING PAGE — 4-TIER PLAN SYSTEM
   ─────────────────────────────────────────────────────────────────────────── */

/* Hero */
.billing-hero{
  text-align:center;
  padding:var(--sp-8) var(--sp-4) var(--sp-6);
  position:relative;overflow:hidden;
}
.billing-hero::before{
  content:'';position:absolute;inset:0;
  background:var(--grad-mesh);pointer-events:none;
}
.billing-hero-badge{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:5px 14px;border-radius:var(--r-full);
  background:var(--primary-light);border:1px solid var(--primary-border);
  color:var(--primary);font-size:var(--text-xs);font-weight:700;
  margin-bottom:var(--sp-4);letter-spacing:.03em;
}
.billing-hero h2{
  font-size:var(--text-2xl);font-weight:800;
  color:var(--text-primary);line-height:1.2;
  margin-bottom:var(--sp-3);
}
.billing-hero h2 span{
  background:var(--grad-primary);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.billing-hero p{font-size:var(--text-sm);color:var(--text-muted);max-width:400px;margin:0 auto;}

/* Plan type toggle (SMS / WhatsApp) */
.billing-toggle-wrap{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-3);margin:var(--sp-5) 0;
}
.billing-toggle{
  display:flex;align-items:center;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-full);padding:4px;gap:2px;
}
.billing-toggle-btn{
  padding:8px 18px;border-radius:var(--r-full);
  font-size:var(--text-sm);font-weight:600;
  color:var(--text-muted);cursor:pointer;
  transition:all var(--t-fast) var(--ease);
  display:flex;align-items:center;gap:var(--sp-2);
  white-space:nowrap;min-height:38px;
}
.billing-toggle-btn.active{
  background:var(--bg-surface);color:var(--text-primary);
  box-shadow:var(--shadow-sm);
}

/* App plan tier badge */
.current-tier-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:linear-gradient(135deg,var(--success-light),rgba(16,185,129,.03));
  border:1.5px solid rgba(16,185,129,.25);
  border-radius:var(--r-xl);margin-bottom:var(--sp-5);
  flex-wrap:wrap;
}
.current-tier-left{display:flex;align-items:center;gap:var(--sp-3);}
.current-tier-icon{font-size:24px;flex-shrink:0;}
.current-tier-title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.current-tier-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}

/* Plans grid */
.app-plans-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}
.plans-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}

/* Base plan card */
.plan-card{
  position:relative;
  background:var(--bg-surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-xl);
  padding:var(--sp-5);
  transition:box-shadow var(--t-mid),transform var(--t-mid),border-color var(--t-mid);
  overflow:hidden;
}
.plan-card::before{
  content:'';position:absolute;inset:0;
  opacity:0;transition:opacity var(--t-mid);
  pointer-events:none;
}
.plan-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}

/* Popular plan */
.plan-card.popular{border-color:var(--primary);}
.plan-card.popular::before{
  background:radial-gradient(ellipse at top,var(--primary-light) 0%,transparent 60%);
  opacity:1;
}

/* Ultra premium plan */
.plan-card.ultra{
  border-color:transparent;
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,
             var(--grad-ultra) border-box;
}
.plan-card.ultra::before{
  background:radial-gradient(ellipse at top,rgba(245,158,11,.08) 0%,transparent 60%);
  opacity:1;
}
.plan-card.ultra:hover{box-shadow:0 8px 40px rgba(245,158,11,.2),0 4px 16px rgba(239,68,68,.15);}

/* Plan popular tag */
.plan-popular-tag,.plan-badge-popular{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--grad-primary);color:#fff;
  font-size:11px;font-weight:700;
  padding:4px 16px;border-radius:0 0 var(--r-lg) var(--r-lg);
  white-space:nowrap;z-index:1;letter-spacing:.03em;
}
.plan-ultra-tag{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--grad-ultra);color:#fff;
  font-size:11px;font-weight:700;
  padding:4px 16px;border-radius:0 0 var(--r-lg) var(--r-lg);
  white-space:nowrap;z-index:1;letter-spacing:.03em;
}
.plan-badge-active{
  position:absolute;top:var(--sp-3);right:var(--sp-3);
  background:var(--success);color:#fff;
  font-size:10px;font-weight:700;padding:3px 10px;
  border-radius:var(--r-full);white-space:nowrap;
}

/* Plan card inner */
.plan-header{
  display:flex;align-items:center;gap:var(--sp-3);
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.plan-icon{
  width:42px;height:42px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.plan-name{font-size:var(--text-xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}
.plan-price{
  font-size:var(--text-3xl);font-weight:800;color:var(--text-primary);
  line-height:1;margin:var(--sp-2) 0;
  display:flex;align-items:baseline;gap:4px;
}
.plan-price .currency{font-size:var(--text-md);font-weight:600;color:var(--text-secondary);}
.plan-price .period{font-size:var(--text-sm);font-weight:500;color:var(--text-muted);}
.plan-price .usd{font-size:var(--text-xs);color:var(--text-muted);font-weight:400;}
.plan-desc{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--sp-4);line-height:1.5;}
.plan-features{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5);}
.plan-feature{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--text-sm);color:var(--text-secondary);
}
.plan-feature svg{flex-shrink:0;color:var(--success);}
.plan-feature.locked{color:var(--text-faint);}
.plan-feature.locked svg{color:var(--text-faint);}
.plan-sms{font-size:var(--text-xs);color:var(--text-muted);font-weight:500;margin-top:2px;}
.plan-price-amount{font-size:var(--text-2xl);font-weight:800;color:var(--text-primary);}
.plan-price-period{font-size:var(--text-sm);color:var(--text-muted);margin-left:var(--sp-1);}
.plan-features li{font-size:var(--text-sm);color:var(--text-secondary);padding:var(--sp-1) 0;list-style:none;}

/* Plan CTA button */
.btn-plan{
  width:100%;padding:12px var(--sp-4);
  border-radius:var(--r-md);
  font-size:var(--text-sm);font-weight:600;text-align:center;
  border:2px solid var(--plan-color,var(--primary));
  color:var(--plan-color,var(--primary));background:transparent;
  transition:all var(--t-fast) var(--ease);cursor:pointer;
  display:block;margin-top:var(--sp-4);min-height:44px;
}
.btn-plan:hover{
  background:var(--plan-color,var(--primary));color:#fff;
  transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.btn-plan:active{transform:translateY(0);}
.btn-plan-primary{
  background:var(--plan-color,var(--primary));color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.btn-plan-primary:hover{filter:brightness(1.08);}
.btn-plan-ultra{
  background:var(--grad-ultra);color:#fff;
  border:none;box-shadow:var(--shadow-ultra);
}
.btn-plan-ultra:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn-plan-popular{
  background:var(--grad-primary);color:#fff;
  border:none;box-shadow:var(--shadow-primary);
}
.btn-plan-popular:hover{filter:brightness(1.08);transform:translateY(-1px);}

/* Usage card */
.usage-card{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--sp-5);
}
.usage-card h4{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--sp-4);}
.usage-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border);gap:var(--sp-4);
}
.usage-row:last-child{border-bottom:none;}
.usage-label{font-size:var(--text-sm);color:var(--text-secondary);}
.usage-nums{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);white-space:nowrap;}

/* Billing section header */
.billing-section-header{
  display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.billing-section-icon{
  width:38px;height:38px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Billing active banners */
.billing-active-row{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5);}
.msg-balance-row{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-4);}

/* Active plan banner */
.active-plan-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:linear-gradient(135deg,var(--success-light),rgba(16,185,129,.03));
  border:1.5px solid rgba(16,185,129,.28);
  border-radius:var(--r-xl);flex-wrap:wrap;
}
.active-plan-left{display:flex;align-items:center;gap:var(--sp-3);}
.active-plan-icon{font-size:26px;flex-shrink:0;}
.active-plan-title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.active-plan-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:3px;}
.active-plan-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);}
.sms-counter{display:flex;align-items:baseline;gap:4px;}
.sms-big{font-size:var(--text-2xl);font-weight:800;color:var(--success);line-height:1;}
.sms-label{font-size:var(--text-xs);color:var(--text-muted);}

/* No plan notice */
.no-plan-notice{
  text-align:center;
  padding:var(--sp-8) var(--sp-5);
  background:var(--bg-elevated);
  border:1.5px dashed var(--border-strong);
  border-radius:var(--r-xl);margin-bottom:var(--sp-5);
}
.no-plan-notice h3{font-size:var(--text-md);font-weight:700;color:var(--text-primary);margin-bottom:var(--sp-2);}
.no-plan-notice p{font-size:var(--text-xs);color:var(--text-muted);max-width:360px;margin:0 auto;}


/* ───────────────────────────────────────────────────────────────────────────
   25 · UPGRADE PROMPTS (non-intrusive, elegant)
   ─────────────────────────────────────────────────────────────────────────── */

/* Inline locked feature card */
.upgrade-lock{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--sp-10) var(--sp-5);text-align:center;gap:var(--sp-3);
  background:var(--bg-elevated);
  border:1.5px dashed var(--primary-border);
  border-radius:var(--r-xl);position:relative;overflow:hidden;
}
.upgrade-lock::before{
  content:'';position:absolute;inset:0;
  background:var(--grad-mesh);opacity:.5;pointer-events:none;
}
.upgrade-lock-icon{
  width:52px;height:52px;border-radius:var(--r-xl);
  background:var(--grad-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;box-shadow:var(--shadow-primary);
  position:relative;z-index:1;
}
.upgrade-lock h3{font-size:var(--text-md);font-weight:700;color:var(--text-primary);position:relative;z-index:1;}
.upgrade-lock p{font-size:var(--text-sm);color:var(--text-muted);max-width:280px;position:relative;z-index:1;}
.upgrade-lock .btn{position:relative;z-index:1;}

/* Slide-up upgrade nudge (floating, non-blocking) */
.upgrade-nudge{
  position:fixed;bottom:calc(var(--bnav-h) + 10px);left:var(--sp-3);right:var(--sp-3);
  z-index:100;
  background:var(--bg-glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--primary-border);
  border-radius:var(--r-xl);
  padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-lg),0 0 0 1px var(--primary-border);
  display:flex;align-items:center;gap:var(--sp-3);
  animation:nudgeIn .4s var(--ease-spring) both;
  max-width:500px;margin:0 auto;
}
.upgrade-nudge-icon{font-size:22px;flex-shrink:0;}
.upgrade-nudge-text{flex:1;min-width:0;}
.upgrade-nudge-text strong{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.upgrade-nudge-text p{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
.upgrade-nudge-close{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);flex-shrink:0;
  transition:background var(--t-fast),color var(--t-fast);
}
.upgrade-nudge-close:hover{background:var(--bg-elevated);color:var(--text-primary);}

/* Free plan limit bar */
.free-limit-bar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:linear-gradient(135deg,var(--warning-light),rgba(245,158,11,.04));
  border:1px solid rgba(245,158,11,.25);
  border-radius:var(--r-lg);margin-bottom:var(--sp-4);
  flex-wrap:wrap;
}
.free-limit-bar.danger{
  background:linear-gradient(135deg,var(--danger-light),rgba(239,68,68,.04));
  border-color:rgba(239,68,68,.25);
}
.free-limit-icon{font-size:18px;flex-shrink:0;}
.free-limit-text{flex:1;min-width:0;font-size:var(--text-xs);font-weight:600;color:var(--text-secondary);}
.free-limit-text strong{color:var(--warning);font-weight:700;}
.free-limit-bar.danger .free-limit-text strong{color:var(--danger);}


/* ───────────────────────────────────────────────────────────────────────────
   26 · SMS / WA BANNERS
   ─────────────────────────────────────────────────────────────────────────── */
.sms-banner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-4);
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-surface);margin-bottom:var(--sp-4);flex-wrap:wrap;
}
.sms-banner.success{border-color:rgba(16,185,129,.3);background:var(--success-light);}
.sms-banner.warning{border-color:rgba(245,158,11,.3);background:var(--warning-light);}
.sms-banner.danger{border-color:rgba(239,68,68,.35);background:var(--danger-light);}
.sms-banner.no-plan{border-color:var(--border-strong);background:var(--bg-elevated);border-style:dashed;}
.sms-banner-left{display:flex;align-items:center;gap:var(--sp-3);min-width:0;flex:1;}
.sms-icon{font-size:20px;flex-shrink:0;}
.sms-banner-title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);}
.sms-banner-sub{font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px;}
.sms-warn{font-size:var(--text-xs);color:var(--warning);font-weight:600;margin-top:3px;}
.sms-banner.danger .sms-warn{color:var(--danger);}
.sms-banner-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0;}
.sms-progress-wrap{display:flex;align-items:center;gap:var(--sp-2);}
.sms-progress-bar{height:5px;width:80px;background:var(--border);border-radius:var(--r-full);overflow:hidden;}
.sms-progress-fill{height:100%;background:var(--grad-success);border-radius:var(--r-full);transition:width .5s var(--ease);}
.sms-progress-fill.warning{background:var(--warning);}
.sms-progress-fill.danger{background:var(--danger);}
.sms-pct{font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap;font-weight:600;}

/* SMS usage bar (udharo page) */
.sms-usage-bar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--primary-light);border:1px solid var(--primary-border);
  border-radius:var(--r-md);font-size:var(--text-xs);color:var(--text-secondary);
  font-weight:500;margin-bottom:var(--sp-3);flex-wrap:wrap;
}
.sms-usage-bar strong{font-weight:700;color:var(--primary);}
.sms-usage-bar .progress-bar{flex:1;min-width:80px;max-width:200px;}


/* ───────────────────────────────────────────────────────────────────────────
   27 · DETAIL DRAWER
   ─────────────────────────────────────────────────────────────────────────── */
.detail-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:400px;max-width:100vw;
  background:var(--bg-surface);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow-xl);z-index:150;
  display:flex;flex-direction:column;
  animation:drawerIn var(--t-slow) var(--ease);overflow:hidden;
}
.drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);flex-shrink:0;
}
.drawer-body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);}
.drawer-footer{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);display:flex;gap:var(--sp-3);flex-shrink:0;}
.drawer-overlay{
  position:fixed;inset:0;background:var(--bg-overlay);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:149;animation:fadeIn var(--t-mid) var(--ease);
}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.info-item .lbl{font-size:var(--text-xs);color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.info-item .val{font-size:var(--text-sm);font-weight:600;color:var(--text-primary);margin-top:3px;}


/* ───────────────────────────────────────────────────────────────────────────
   28 · UTILITY CLASSES
   ─────────────────────────────────────────────────────────────────────────── */
.flex{display:flex;} .flex-col{flex-direction:column;}
.items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);} .gap-4{gap:var(--sp-4);} .gap-5{gap:var(--sp-5);}
.mt-2{margin-top:var(--sp-2);} .mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);}
.mb-4{margin-bottom:var(--sp-4);} .mb-5{margin-bottom:var(--sp-5);}
.text-muted{color:var(--text-muted);} .text-sm{font-size:var(--text-sm);} .text-xs{font-size:var(--text-xs);}
.font-bold{font-weight:700;} .w-full{width:100%;} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}
.section-title{font-size:var(--text-sm);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-4);}


/* ───────────────────────────────────────────────────────────────────────────
   29 · ANIMATIONS & KEYFRAMES
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes fadeIn   {from{opacity:0} to{opacity:1}}
@keyframes spin     {to{transform:rotate(360deg)}}
@keyframes modalIn  {from{opacity:0;transform:scale(.94) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes drawerIn {from{transform:translateX(100%)} to{transform:translateX(0)}}
@keyframes toastIn  {from{opacity:0;transform:translateX(24px) scale(.96)} to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes pageIn   {from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}
@keyframes nudgeIn  {from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shimmer  {0%{background-position:-400px 0} 100%{background-position:400px 0}}
@keyframes pulse    {0%,100%{opacity:1} 50%{opacity:.5}}
@keyframes float    {0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes glow     {0%,100%{box-shadow:0 0 20px rgba(99,102,241,.3)} 50%{box-shadow:0 0 40px rgba(99,102,241,.6)}}

.page > *{animation:pageIn var(--t-slow) var(--ease) both;}

/* Micro-interaction: press */
.pressable:active{transform:scale(.97)!important;}

/* Focus */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px;}
button:focus:not(:focus-visible){outline:none;}
::selection{background:var(--primary-light);color:var(--primary);}


/* ───────────────────────────────────────────────────────────────────────────
   30 · RESPONSIVE — TABLET (min-width: 640px)
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:640px){
  .page{padding:var(--sp-5);}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4);}
  .quick-actions{grid-template-columns:repeat(2,1fr);}
  .customer-grid{display:grid;grid-template-columns:repeat(2,1fr);}
  .sales-summary-bar{grid-template-columns:repeat(3,1fr);}
  .form-grid-2{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr 1fr;}
  .settings-nav-item{flex:1;justify-content:center;min-width:120px;}
  .msg-balance-row{grid-template-columns:1fr 1fr;display:grid;}
  .billing-active-row{grid-template-columns:1fr 1fr;display:grid;}
  .app-plans-grid{grid-template-columns:repeat(2,1fr);}
  .plans-grid{grid-template-columns:repeat(2,1fr);}
  .billing-hero h2{font-size:var(--text-xl);}
}


/* ───────────────────────────────────────────────────────────────────────────
   31 · RESPONSIVE — DESKTOP (min-width: 768px)
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:768px){
  /* Hide mobile bottom nav, show desktop sidebar */
  .bottom-nav{display:none!important;}
  .sidebar{position:relative;transform:none!important;}

  .page{
    padding:var(--sp-6);
    padding-bottom:var(--sp-6);
  }
  .page-header-left h1{font-size:var(--text-2xl);}
  .customer-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .kpi-value{font-size:var(--text-2xl);}
  .analytics-grid{grid-template-columns:1fr 1fr;}
  .settings-layout{grid-template-columns:200px 1fr;display:grid;}
  .settings-nav{flex-direction:column;position:sticky;top:var(--sp-4);}
  .settings-nav-item{justify-content:flex-start;flex:none;}
  .dash-grid{grid-template-columns:1fr 320px;display:grid;}
  .dash-main{flex:1;}
  .topbar-title{font-size:var(--text-lg);}
}

@media(min-width:768px) and (max-width:1023px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .dash-grid{grid-template-columns:1fr;}
}


/* ───────────────────────────────────────────────────────────────────────────
   32 · RESPONSIVE — LARGE DESKTOP (min-width: 1024px)
   ─────────────────────────────────────────────────────────────────────────── */
@media(min-width:1024px){
  .page{padding:var(--sp-8);}
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
  .app-plans-grid{grid-template-columns:repeat(4,1fr);}
  .plans-grid{grid-template-columns:repeat(3,1fr);}
}


/* ───────────────────────────────────────────────────────────────────────────
   33 · MOBILE SIDEBAR (overlay mode for < 768px)
   ─────────────────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  /* Show bottom nav on mobile */
  .bottom-nav{display:flex;}

  /* Sidebar slides in from left */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    transform:translateX(-100%);
    box-shadow:var(--shadow-xl);
  }
  .sidebar.open{transform:translateX(0);}

  /* Compact modal on mobile */
  .modal-body{padding:var(--sp-4);}
  .modal-header{padding:var(--sp-4);}
  .modal-footer{padding:var(--sp-3) var(--sp-4);}
  .modal-box{margin:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:95vh;position:fixed;bottom:0;left:0;right:0;max-width:100%;}

  /* Full-width drawer on mobile */
  .detail-drawer{width:100%;}

  /* Smaller plan cards */
  .plan-card{padding:var(--sp-4);}
  .plan-price{font-size:var(--text-2xl);}

  /* Billing toggle wrap */
  .billing-toggle-btn{padding:7px 14px;font-size:var(--text-xs);}
}

/* ───────────────────────────────────────────────────────────────────────────
   34 · SMALL MOBILE (max-width: 380px)
   ─────────────────────────────────────────────────────────────────────────── */
@media(max-width:380px){
  :root{
    --text-base:14px;--text-sm:13px;--text-xs:11.5px;
    --text-md:15px;--text-lg:18px;--text-xl:21px;
    --text-2xl:25px;--text-3xl:30px;
  }
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .sales-summary-bar{grid-template-columns:1fr;}
  .quick-actions{grid-template-columns:1fr 1fr;}
  .page-header{flex-direction:column;align-items:flex-start;}
  .page-header-right{width:100%;}
  .page-header-right .btn{flex:1;justify-content:center;}
  .kpi-value{font-size:var(--text-xl);}
}

/* ═══════════════════════════════════════════════════════════════════════════
   35 · PREMIUM BILLING v2 — Toggle, Plan Cards, Active Sub
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Active subscription card (compact, reads from DB sub object) */
.billing-active-section{margin-bottom:var(--sp-6);}
.billing-active-label{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--sp-3);
}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.4);
  animation:pulseDot 2s ease infinite;
}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4);}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,0);}
}

.active-sub-card{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;
  padding:14px 18px;
  border:1.5px solid var(--border);
  border-radius:var(--r-xl);
  margin-bottom:var(--sp-3);
  transition:box-shadow var(--t-fast);
}
.active-sub-card:hover{box-shadow:var(--shadow-sm);}
.asc-left{display:flex;align-items:center;gap:var(--sp-3);}
.asc-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(var(--ac-rgb,.5),.15);
}
.asc-title{font-size:13px;font-weight:700;color:var(--text-primary);}
.asc-exp{font-size:11px;color:var(--text-muted);margin-top:2px;}
.asc-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.asc-count{font-size:22px;font-weight:800;line-height:1;}
.asc-unit{font-size:11px;color:var(--text-muted);}
.asc-bar{
  width:110px;height:4px;background:var(--border);
  border-radius:var(--r-full);overflow:hidden;margin-top:2px;
}
.asc-fill{
  height:100%;border-radius:var(--r-full);
  transition:width .5s var(--ease);
}

/* ── Billing toggle (SMS ↔ WhatsApp switcher) */
.billing-toggle-wrap{
  display:flex;justify-content:center;
  margin:0 0 var(--sp-5);
}
.billing-toggle{
  display:inline-flex;
  background:var(--bg-elevated);
  border:1.5px solid var(--border);
  border-radius:var(--r-full);
  padding:4px;
  gap:4px;
  box-shadow:var(--shadow-xs);
}
.billing-ch-btn{
  display:flex;align-items:center;gap:7px;
  padding:10px 18px;
  border:none;border-radius:var(--r-full);
  background:transparent;
  color:var(--text-muted);
  font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:all .2s var(--ease);
  min-height:42px;position:relative;
}
.billing-ch-btn:hover{color:var(--text-primary);}
.billing-ch-btn.active{
  background:var(--bg-surface);
  color:var(--text-primary);
  box-shadow:0 2px 10px rgba(0,0,0,.09),0 1px 3px rgba(0,0,0,.06);
}
.billing-ch-btn[data-ch="sms"].active{color:var(--primary);}
.billing-ch-btn[data-ch="wa"].active{color:#128C7E;}
.ch-active-dot{
  width:6px;height:6px;border-radius:50%;
  display:inline-block;margin-left:2px;flex-shrink:0;
}
.billing-ch-note{
  text-align:center;font-size:13px;color:var(--text-muted);
  margin:0 0 var(--sp-5);
}

/* ── Plans grid v2 */
.plans-grid-v2{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}

/* ── Plan Card v2 (pcv2) */
.pcv2{
  position:relative;
  background:var(--bg-surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-2xl);
  padding:26px 22px 22px;
  display:flex;flex-direction:column;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
  overflow:hidden;
}
/* Coloured accent line on top */
.pcv2::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--pc,var(--primary));
  opacity:0;
  transition:opacity .22s var(--ease);
}
.pcv2:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.pcv2:hover::before{opacity:1;}

/* Popular card */
.pcv2.popular{
  border-color:var(--primary);
}
.pcv2.popular::before{
  background:var(--grad-primary);opacity:1;
}
.pcv2.popular:hover{box-shadow:var(--shadow-primary),var(--shadow-md);}

/* Ultra card — animated gradient border */
.pcv2.ultra{
  border:1.5px solid transparent;
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,
             var(--grad-ultra) border-box;
}
.pcv2.ultra::before{background:var(--grad-ultra);opacity:1;}
.pcv2.ultra::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(245,158,11,.07) 0%,transparent 60%);
  pointer-events:none;
}
.pcv2.ultra:hover{box-shadow:0 8px 40px rgba(245,158,11,.22),0 4px 16px rgba(239,68,68,.12);}

/* Current card */
.pcv2.current{border-color:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,.08);}
.pcv2.current::before{background:var(--success);opacity:1;}

/* Badges */
.pcv2-badge{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 16px;border-radius:0 0 var(--r-lg) var(--r-lg);
  white-space:nowrap;z-index:2;
}
.pcv2-badge.popular{background:var(--grad-primary);color:#fff;}
.pcv2-badge.ultra{background:var(--grad-ultra);color:#fff;}
.pcv2-badge.current{background:var(--success);color:#fff;}

/* Top row: name + credit pill */
.pcv2-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
  padding-top:10px; /* room for badge */
}
.pcv2-name{
  font-size:12px;font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.pcv2-credits{
  font-size:12px;font-weight:800;
  padding:4px 11px;border-radius:var(--r-full);
  white-space:nowrap;
}

/* Price row */
.pcv2-price-row{
  display:flex;align-items:baseline;gap:3px;
  margin-bottom:var(--sp-4);flex-wrap:wrap;
}
.pcv2-price{
  font-size:30px;font-weight:800;
  color:var(--text-primary);line-height:1;
}
.pcv2-per{font-size:14px;font-weight:500;color:var(--text-muted);}
.pcv2-usd{font-size:12px;color:var(--text-faint);margin-left:4px;}

/* Feature list */
.pcv2-feats{
  list-style:none;padding:0;margin:0 0 var(--sp-5);
  display:flex;flex-direction:column;gap:9px;
  flex:1;
}
.pcv2-feats li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;color:var(--text-secondary);line-height:1.45;
}
.pcv2-check{flex-shrink:0;margin-top:1px;}

/* CTA buttons */
.pcv2-cta{
  width:100%;padding:13px 18px;
  border-radius:var(--r-md);
  border:2px solid var(--pc,var(--primary));
  background:transparent;color:var(--pc,var(--primary));
  font-size:14px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s var(--ease);min-height:46px;
  position:relative;z-index:1;
}
.pcv2-cta:hover{
  background:var(--pc,var(--primary));color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
}
.pcv2-cta:active{transform:translateY(0);}

.pcv2-cta-popular{
  background:var(--grad-primary);color:#fff;
  border:none;box-shadow:var(--shadow-primary);
}
.pcv2-cta-popular:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-primary);}

.pcv2-cta-ultra{
  background:var(--grad-ultra);color:#fff;
  border:none;box-shadow:var(--shadow-ultra);
}
.pcv2-cta-ultra:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-ultra);}

.pcv2-cta-renew{
  width:100%;padding:12px 18px;
  border-radius:var(--r-md);
  border:1.5px solid;background:transparent;
  font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .2s var(--ease);min-height:44px;
  position:relative;z-index:1;
}
.pcv2-cta-renew:hover{opacity:.8;}

.cta-arrow{
  font-size:16px;line-height:1;
  transition:transform .2s var(--ease);
  display:inline-block;
}
.pcv2-cta:hover .cta-arrow,
.pcv2-cta-popular:hover .cta-arrow,
.pcv2-cta-ultra:hover .cta-arrow{transform:translateX(3px);}

/* Billing history section */
.billing-history-section{
  margin-top:var(--sp-6);
  padding-top:var(--sp-6);
  border-top:1px solid var(--border);
}
.billing-history-section .section-title{margin-bottom:var(--sp-3);}

/* ── Responsive grid for plan cards v2 */
@media(min-width:640px){
  .plans-grid-v2{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
  .plans-grid-v2{grid-template-columns:repeat(3,1fr);}
}
/* Mobile billing toggle: full width */
@media(max-width:500px){
  .billing-toggle{width:100%;max-width:100%;}
  .billing-ch-btn{flex:1;justify-content:center;padding:9px 12px;}
  .pcv2{padding:22px 16px 18px;}
  .pcv2-price{font-size:26px;}
}

/* Dark mode overrides for new billing components */
[data-theme="dark"] .billing-toggle{background:var(--bg-elevated);border-color:var(--border);}
[data-theme="dark"] .billing-ch-btn.active{background:var(--bg-surface);}
[data-theme="dark"] .pcv2{background:var(--bg-surface);}
[data-theme="dark"] .pcv2.ultra{
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,
             var(--grad-ultra) border-box;
}
[data-theme="dark"] .active-sub-card{background:var(--bg-elevated);}

/* ═══════════════════════════════════════════════════════════════════════════
   36 · PAYMENT MODAL v2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Plan summary pill shown at top of payment modal */
.pay-summary-pill{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;border-radius:var(--r-md);
  border:1.5px solid;margin-bottom:var(--sp-4);
  font-size:13px;
}
.pay-summary-credits{font-weight:800;font-size:15px;}
.pay-summary-divider{color:var(--text-muted);font-size:16px;}
.pay-summary-price{font-weight:700;color:var(--text-primary);}
.pay-summary-period{color:var(--text-muted);}
.pay-summary-usd{
  margin-left:auto;font-size:11px;color:var(--text-muted);
  background:var(--bg-elevated);padding:2px 8px;
  border-radius:20px;border:1px solid var(--border);
}

/* 3-col payment method selector */
.pay-method-grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:0;
}
.pay-method-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:16px 10px;
  border:1.5px solid var(--border);border-radius:var(--r-lg);
  background:var(--bg-surface);
  cursor:pointer;transition:all .2s var(--ease);
  text-align:center;user-select:none;
}
.pay-method-card:hover{
  border-color:var(--primary-border);
  background:var(--primary-light);
  transform:translateY(-2px);box-shadow:var(--shadow-sm);
}
.pay-method-card.selected{
  border-color:var(--primary);
  background:var(--primary-light);
  box-shadow:0 0 0 3px var(--primary-border);
}
.pay-method-logo{
  display:flex;align-items:center;justify-content:center;
  line-height:0;
}
.pay-method-name{font-size:12px;font-weight:700;color:var(--text-primary);}
.pay-method-sub{font-size:10px;color:var(--text-muted);}

/* Instructions panel */
.pay-instructions-box{
  background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4);
  transition:all .2s var(--ease);
}

/* Instruction header row: logo + title + open-link */
.pay-inst-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:var(--sp-4);
}
.pay-inst-title{font-size:14px;font-weight:700;color:var(--text-primary);line-height:1.2;}
.pay-inst-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}

/* ID row: shows payment ID with copy button */
.pay-id-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:10px 14px;margin:var(--sp-3) 0;
}
.pay-id-row code{
  flex:1;font-family:monospace;font-size:14px;font-weight:700;
  color:var(--text-primary);word-break:break-all;
}
.pay-copy-btn{
  flex-shrink:0;padding:5px 12px;border-radius:var(--r-md);
  font-size:11px;font-weight:600;
  border:1px solid var(--border);background:var(--bg-surface);
  color:var(--text-secondary);cursor:pointer;
  transition:all .2s var(--ease);white-space:nowrap;
}
.pay-copy-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary-border);}

/* Open payment app external link */
.pay-open-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:var(--r-md);
  font-size:12px;font-weight:600;
  border:1.5px solid var(--primary-border);
  color:var(--primary);background:var(--primary-light);
  text-decoration:none;transition:all .2s var(--ease);
  margin-left:auto;white-space:nowrap;flex-shrink:0;
}
.pay-open-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

/* Numbered payment steps */
.pay-steps{
  display:flex;flex-direction:column;gap:8px;
  margin-top:var(--sp-3);
}
.pay-step{
  display:flex;align-items:flex-start;gap:10px;
  font-size:12px;color:var(--text-secondary);line-height:1.5;
}
.pay-step-num{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:var(--primary-light);color:var(--primary);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}

/* Bank details card */
.bank-details-card{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;margin:var(--sp-3) 0;
}
.bank-detail-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px;
}
.bank-detail-row:last-child{border-bottom:none;}
.bank-detail-label{
  min-width:100px;color:var(--text-muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;
}
.bank-detail-val{flex:1;color:var(--text-primary);font-weight:600;word-break:break-all;}

/* Not configured warning */
.pay-not-configured{
  padding:var(--sp-4);
  background:var(--warning-light);border:1px solid rgba(245,158,11,.25);
  border-radius:var(--r-md);
  font-size:12px;color:var(--warning);line-height:1.5;
}

/* Dark mode payment modal */
[data-theme="dark"] .pay-method-card{background:var(--bg-surface);border-color:var(--border);}
[data-theme="dark"] .pay-method-card.selected{background:var(--primary-light);}
[data-theme="dark"] .pay-instructions-box{background:var(--bg-elevated);}
[data-theme="dark"] .pay-id-row{background:var(--bg-elevated);}
[data-theme="dark"] .bank-details-card{background:var(--bg-elevated);}
[data-theme="dark"] .bank-detail-row{border-color:var(--border);}
[data-theme="dark"] .pay-copy-btn{background:var(--bg-elevated);border-color:var(--border);}

/* Mobile: stack payment methods */
@media(max-width:400px){
  .pay-method-grid-3{grid-template-columns:repeat(3,1fr);gap:6px;}
  .pay-method-card{padding:12px 6px;gap:6px;}
  .pay-method-name{font-size:10px;}
  .pay-method-sub{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   37 · ANALYTICS v2 — Meta Row, MoM, Preview, Ultra Teaser
   ═══════════════════════════════════════════════════════════════════════════ */

/* Secondary KPI row: 4 smaller metric cards */
.analytics-meta-row{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);margin-bottom:var(--sp-5);
}
@media(min-width:640px){
  .analytics-meta-row{grid-template-columns:repeat(4,1fr);}
}
.analytics-meta-card{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-4);
  transition:all .2s var(--ease);
}
.analytics-meta-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.analytics-meta-label{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-muted);margin-bottom:4px;
}
.analytics-meta-val{
  font-size:17px;font-weight:800;color:var(--text-primary);line-height:1.1;
}

/* Month-over-month growth badge */
.analytics-mom{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;margin-top:4px;
}
.analytics-mom.up{color:var(--success);}
.analytics-mom.down{color:var(--danger);}

/* Lock-screen blurred preview cards grid */
.analytics-preview-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-3);margin-top:var(--sp-5);
  max-width:460px;width:100%;
}
.analytics-preview-card{
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-4);
  text-align:left;pointer-events:none;
}

/* Ultra teaser banner at bottom of mid analytics */
.analytics-ultra-teaser{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-3);
  margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);
  background:linear-gradient(135deg,rgba(245,158,11,.08) 0%,rgba(239,68,68,.06) 50%,rgba(236,72,153,.06) 100%);
  border:1.5px solid rgba(245,158,11,.25);border-radius:var(--r-lg);
}

/* Dark mode analytics */
[data-theme="dark"] .analytics-meta-card{background:var(--bg-surface);}
[data-theme="dark"] .analytics-preview-card{background:var(--bg-elevated);}
[data-theme="dark"] .analytics-ultra-teaser{border-color:rgba(245,158,11,.2);}

/* ═══════════════════════════════════════════════════════════════════════════
   38 · SETTINGS — Payment Accounts Section
   ═══════════════════════════════════════════════════════════════════════════ */

/* Each payment provider block (eSewa / Khalti / Bank) */
.settings-pay-section{
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--border);
}
.settings-pay-section:last-of-type{border-bottom:none;}

/* Section heading row with logo + label */
.settings-pay-heading{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--text-primary);
}
.settings-pay-heading strong{font-weight:700;}

/* Dark mode settings pay */
[data-theme="dark"] .settings-pay-section{border-color:var(--border);}

/* ── Approve payment button (inline in payment history table) */
.approve-pay-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-md);
  font-size:11px;font-weight:700;
  background:var(--success-light);color:var(--success);
  border:1px solid rgba(16,185,129,.3);
  cursor:pointer;transition:all .18s var(--ease);white-space:nowrap;
}
.approve-pay-btn:hover{background:var(--success);color:#fff;border-color:var(--success);}
.approve-pay-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ═══════════════════════════════════════════════════════════════════════════
   39 · PDF ACCESS BANNER (Analytics lock screen — Basic plan)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Banner shown to Basic plan users on the Analytics lock screen */
.pdf-access-banner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-5);
  background:linear-gradient(135deg,rgba(99,102,241,.07) 0%,rgba(16,185,129,.06) 100%);
  border:1.5px solid var(--primary-border);
  border-radius:var(--r-lg);
}
.pdf-access-left{
  display:flex;align-items:flex-start;gap:var(--sp-3);flex:1;min-width:0;
}
.pdf-access-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:var(--r-md);
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.pdf-access-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:3px;}
.pdf-access-sub{font-size:12px;color:var(--text-muted);line-height:1.5;}

/* PDF quick-action button on Dashboard (distinct indigo tint) */
.qa-btn.qa-btn-pdf{
  color:var(--primary);
  border-color:var(--primary-border);
  background:var(--primary-light);
}
.qa-btn.qa-btn-pdf:hover{
  background:var(--primary);color:#fff;border-color:var(--primary);
}

/* Dark mode */
[data-theme="dark"] .pdf-access-banner{
  background:linear-gradient(135deg,rgba(99,102,241,.1) 0%,rgba(16,185,129,.07) 100%);
  border-color:var(--primary-border);
}
[data-theme="dark"] .pdf-access-icon{background:var(--primary-light);}
[data-theme="dark"] .qa-btn.qa-btn-pdf{background:var(--primary-light);border-color:var(--primary-border);}
[data-theme="dark"] .qa-btn.qa-btn-pdf:hover{background:var(--primary);}