@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   ASSETRA — Clean White Fintech Theme
   Inspired by Prix, Songhai, professional apps
   ============================================ */

:root {
  --bg:        #f5f6fa;
  --surface:   #ffffff;
  --card:      #ffffff;

  --purple:    #6C2BD9;
  --purple-d:  #4c1d95;
  --purple-l:  #8b5cf6;
  --purple-g:  rgba(108,43,217,.1);
  --purple-b:  rgba(108,43,217,.15);

  --gold:      #d97706;
  --gold-l:    #f59e0b;
  --gold-g:    rgba(217,119,6,.1);

  --t1:  #111827;
  --t2:  #6b7280;
  --t3:  #9ca3af;

  --border:    #e5e7eb;
  --border-p:  rgba(108,43,217,.2);

  --ok:    #16a34a;  --ok-b:   rgba(22,163,74,.08);
  --err:   #dc2626;  --err-b:  rgba(220,38,38,.08);
  --warn:  #d97706;  --warn-b: rgba(217,119,6,.08);
  --info:  #0284c7;  --info-b: rgba(2,132,199,.08);

  --sh:   0 1px 8px rgba(0,0,0,.08);
  --sh2:  0 4px 20px rgba(0,0,0,.1);
  --sh3:  0 8px 32px rgba(108,43,217,.15);

  --r:  12px; --rl: 18px; --rs: 8px;
  --fn: 'Outfit', sans-serif;
  --navh: 64px;
  --sbw:  260px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--fn);
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color:var(--purple); text-decoration:none; transition:color .2s; }
a:hover { color:var(--purple-d); }
h1,h2,h3,h4,h5,h6 { font-family:var(--fn); line-height:1.3; color:var(--t1); }

/* ====== AUTH ====== */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #1a0d2e 0%, #3b1d8a 60%, #1a0d2e 100%);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 24px;
  padding: 36px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo-text {
  font-family: var(--fn);
  font-size: clamp(1.6rem, 8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #6C2BD9, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.auth-logo-sub { font-size:11px; color:var(--t3); letter-spacing:.18em; text-transform:uppercase; margin-top:3px; }
.auth-title { font-size:1.25rem; font-weight:700; color:var(--t1); margin-bottom:4px; }
.auth-sub   { font-size:13px; color:var(--t2); margin-bottom:22px; }
.auth-divider { text-align:center; position:relative; margin:16px 0; font-size:12px; color:var(--t3); }
.auth-divider::before,.auth-divider::after { content:''; position:absolute; top:50%; width:calc(50% - 28px); height:1px; background:var(--border); }
.auth-divider::before{left:0}.auth-divider::after{right:0}

/* ====== USER LAYOUT ====== */
.user-layout { min-height:100vh; display:flex; flex-direction:column; }

.user-topbar {
  position: sticky; top:0; z-index:100;
  background: #fff;
  height: 56px;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,.06);
}
.user-topbar-logo {
  font-family: var(--fn);
  font-size: clamp(1.1rem, 5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #6C2BD9, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.user-topbar-right { display:flex; align-items:center; gap:8px; }
.user-balance-pill {
  display: flex; align-items:center; gap:5px;
  background: var(--purple-g);
  border: 1px solid var(--purple-b);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  max-width: 155px;
  overflow: hidden;
}
.user-balance-pill i { font-size:11px; flex-shrink:0; }
.user-balance-pill span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-avatar-btn {
  width: 34px; height:34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--gold-l));
  display: flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight:700;
  color: #fff;
  text-decoration: none;
  border: none;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
}
.user-page-body {
  flex: 1;
  padding: 16px;
  padding-bottom: calc(var(--navh) + 20px);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

/* BALANCE HERO */
.balance-hero {
  background: linear-gradient(135deg, #4c1d95, #6C2BD9 50%, #8b5cf6);
  border-radius: var(--rl);
  padding: 22px 18px;
  margin-bottom: 16px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(108,43,217,.3);
}
.balance-hero::after {
  content:'';
  position:absolute;
  top:-40px; right:-40px;
  width:120px; height:120px;
  border-radius:50%;
  background: rgba(255,255,255,.06);
}
.balance-hero-label {
  font-size: 11px;
  font-weight: 600;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 8px;
  position: relative;
}
.balance-hero-amount {
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  font-weight: 800;
  color: #fcd34d;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  position: relative;
  letter-spacing: -.01em;
}
.balance-hero-date { font-size:12px; opacity:.55; margin-top:6px; position:relative; }

/* BOTTOM NAV */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  height: var(--navh);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  display: flex;
  align-items: stretch;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--t3);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: all .2s;
  border: none;
  background: none;
  padding: 8px 4px;
  position: relative;
  cursor: pointer;
}
.bottom-nav-item i { font-size: 20px; transition: transform .2s; }
.bottom-nav-item:hover,
.bottom-nav-item.active { color: var(--purple); }
.bottom-nav-item.active i { transform: translateY(-1px); }
.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  background: var(--purple);
  border-radius: 0 0 3px 3px;
}

/* ====== ADMIN LAYOUT ====== */
.admin-app-wrapper { display:flex; min-height:100vh; background:var(--bg); }

.admin-sidebar {
  width: var(--sbw);
  background: linear-gradient(180deg, #1a0d2e 0%, #2d1260 100%);
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0;
  height: 100vh;
  overflow-y: auto;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 100;
}
.admin-sidebar::-webkit-scrollbar { width:3px; }
.admin-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }

.sidebar-logo { padding:24px 20px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.logo-text {
  font-size: 1.4rem; font-weight:800; letter-spacing:.04em;
  background: linear-gradient(135deg, #f59e0b, #fcd34d);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-tagline { font-size:10px; color:rgba(255,255,255,.35); letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.sidebar-user { padding:14px 18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#fcd34d); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#1a0d2e; flex-shrink:0; }
.sidebar-user-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-nav { padding:10px 0; flex:1; }
.nav-section-label { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.25); padding:12px 20px 6px; font-weight:600; }
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 20px; color:rgba(255,255,255,.55); font-size:13.5px; font-weight:500; cursor:pointer; transition:all .2s; border-left:3px solid transparent; text-decoration:none; }
.nav-item i { width:18px; text-align:center; font-size:14px; flex-shrink:0; } .nav-item span{flex:1;}
.nav-item:hover { color:#fff; background:rgba(255,255,255,.07); border-left-color:rgba(255,255,255,.3); }
.nav-item.active { color:#fff; background:rgba(245,158,11,.12); border-left-color:#f59e0b; }
.nav-item.active i { color:#f59e0b; }
.sidebar-footer { padding:14px 18px; border-top:1px solid rgba(255,255,255,.07); }
.btn-logout { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.2); border-radius:var(--rs); color:#fca5a5; font-size:13px; font-weight:500; cursor:pointer; transition:all .2s; text-decoration:none; }
.btn-logout:hover { background:rgba(220,38,38,.22); color:#fff; }

.admin-main { margin-left:var(--sbw); flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--border); background:#fff; box-shadow:var(--sh); position:sticky; top:0; z-index:50; }
.topbar-left { display:flex; align-items:center; gap:14px; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; border-radius:var(--rs); border:none; background:none; -webkit-tap-highlight-color:transparent; }
.hamburger:hover,.hamburger:active { background:var(--purple-g); }
.hamburger span { display:block; width:20px; height:2px; background:var(--t2); border-radius:1px; transition:all .3s; }
.topbar-breadcrumb { font-size:13px; color:var(--t2); display:flex; align-items:center; gap:6px; }
.topbar-breadcrumb .current { color:var(--t1); font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.admin-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; background:var(--purple-g); border:1px solid var(--purple-b); color:var(--purple); padding:4px 10px; border-radius:20px; font-weight:600; }
.page-body { padding:22px 24px; flex:1; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:99; }
.sidebar-overlay.show { display:block; }

/* ====== CARDS ====== */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); padding:18px; box-shadow:var(--sh); transition:all .2s; }
.card:hover { box-shadow:var(--sh2); }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:12px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.1em; display:flex; align-items:center; gap:8px; }

/* STAT GRID */
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); padding:16px; box-shadow:var(--sh); transition:all .2s; position:relative; overflow:hidden; }
.stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--purple),var(--gold-l)); opacity:0; transition:opacity .2s; }
.stat-card:hover { box-shadow:var(--sh2); transform:translateY(-1px); }
.stat-card:hover::after { opacity:1; }
.stat-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:10px; }
.stat-icon.purple{background:var(--purple-g);color:var(--purple)} .stat-icon.gold{background:var(--gold-g);color:var(--gold)}
.stat-icon.success{background:var(--ok-b);color:var(--ok)} .stat-icon.danger{background:var(--err-b);color:var(--err)}
.stat-icon.info{background:var(--info-b);color:var(--info)} .stat-icon.warning{background:var(--warn-b);color:var(--warn)}
.stat-label { font-size:10px; color:var(--t3); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:4px; }
.stat-value { font-size:clamp(.9rem,3.5vw,1.1rem); font-weight:700; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-title { font-size:1.2rem; font-weight:700; display:flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--t1); }

/* QUICK ACTIONS */
.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.quick-action { display:flex; flex-direction:column; align-items:center; gap:7px; padding:16px 8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); text-decoration:none; box-shadow:var(--sh); transition:all .2s; }
.quick-action:hover { border-color:var(--purple); box-shadow:var(--sh2); transform:translateY(-2px); }
.quick-action-icon { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--purple-l)); display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; box-shadow:0 4px 12px rgba(108,43,217,.25); }
.quick-action span { font-size:11px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:.04em; }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:var(--rs); font-family:var(--fn); font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all .2s; text-decoration:none; white-space:nowrap; line-height:1; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--purple); color:#fff; box-shadow:0 4px 14px rgba(108,43,217,.35); }
.btn-primary:hover { background:var(--purple-d); transform:translateY(-1px); color:#fff; box-shadow:0 6px 20px rgba(108,43,217,.45); }
.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-l)); color:#fff; font-weight:700; box-shadow:0 4px 14px rgba(217,119,6,.3); }
.btn-gold:hover { transform:translateY(-1px); color:#fff; }
.btn-outline { background:#fff; border:1.5px solid var(--border); color:var(--t1); }
.btn-outline:hover { border-color:var(--purple); color:var(--purple); background:var(--purple-g); }
.btn-danger { background:var(--err-b); border:1px solid rgba(220,38,38,.2); color:var(--err); }
.btn-danger:hover { background:rgba(220,38,38,.15); }
.btn-success { background:var(--ok-b); border:1px solid rgba(22,163,74,.2); color:var(--ok); }
.btn-success:hover { background:rgba(22,163,74,.15); }
.btn-sm{padding:7px 14px;font-size:12px} .btn-lg{padding:14px 28px;font-size:15px;border-radius:var(--r)} .btn-block{width:100%}

.btn-invest { background:var(--purple); color:#fff; font-weight:700; border:none; padding:13px 20px; border-radius:var(--rs); width:100%; font-size:14px; cursor:pointer; font-family:var(--fn); transition:all .2s; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 14px rgba(108,43,217,.35); }
.btn-invest:hover { background:var(--purple-d); transform:translateY(-1px); box-shadow:0 6px 20px rgba(108,43,217,.45); }

/* FORMS */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:11px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }
.form-control { width:100%; background:#fff; border:1.5px solid var(--border); border-radius:var(--rs); color:var(--t1); font-family:var(--fn); font-size:14px; padding:11px 14px; transition:all .2s; outline:none; }
.form-control:focus { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-g); background:#fff; }
.form-control::placeholder { color:var(--t3); }
.form-control option { background:#fff; }
select.form-control { appearance:none; cursor:pointer; }
textarea.form-control { resize:vertical; min-height:90px; }
.input-group { position:relative; display:flex; }
.input-group .form-control { border-radius:0; }
.input-group .form-control:last-child { border-radius:0 var(--rs) var(--rs) 0; }
.input-group-text { display:flex; align-items:center; padding:0 14px; background:var(--purple-g); border:1.5px solid var(--border); color:var(--purple); font-size:14px; border-radius:var(--rs) 0 0 var(--rs); border-right:none; white-space:nowrap; flex-shrink:0; }
.form-hint { font-size:11px; color:var(--t3); margin-top:5px; }
.form-error { font-size:12px; color:var(--err); margin-top:5px; display:none; }
.form-error.show { display:block; }
.toggle-switch { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle-switch input { display:none; }
.toggle-track { width:44px; height:24px; background:var(--border); border-radius:12px; position:relative; transition:background .2s; flex-shrink:0; }
.toggle-track::after { content:''; width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.toggle-switch input:checked + .toggle-track { background:var(--purple); }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); }

/* TABLES */
.table-wrap { overflow-x:auto; border-radius:var(--rs); }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th { padding:11px 14px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); border-bottom:2px solid var(--border); white-space:nowrap; background:#fafafa; }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#fafafa; }
tbody td { padding:12px 14px; color:var(--t1); vertical-align:middle; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
tbody td.no-trunc { max-width:none; overflow:visible; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-success  {background:var(--ok-b);  color:var(--ok);   border:1px solid rgba(22,163,74,.2);}
.badge-danger   {background:var(--err-b); color:var(--err);  border:1px solid rgba(220,38,38,.2);}
.badge-warning  {background:var(--warn-b);color:var(--warn); border:1px solid rgba(217,119,6,.2);}
.badge-info     {background:var(--info-b);color:var(--info); border:1px solid rgba(2,132,199,.2);}
.badge-secondary{background:#f3f4f6; color:var(--t2); border:1px solid var(--border);}

/* TABS */
.tab-bar { display:flex; gap:4px; background:#f3f4f6; border-radius:var(--r); padding:5px; margin-bottom:18px; }
.tab-btn { flex:1; padding:9px 12px; border-radius:var(--rs); border:none; background:transparent; color:var(--t2); font-family:var(--fn); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.tab-btn.active { background:#fff; color:var(--purple); box-shadow:var(--sh); }
.tab-btn:hover:not(.active) { color:var(--t1); }

/* PLAN CARDS */
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.plan-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--rl); padding:20px; transition:all .25s; position:relative; overflow:hidden; box-shadow:var(--sh); }
.plan-card:hover { border-color:var(--purple); transform:translateY(-3px); box-shadow:var(--sh3); }
.plan-price { font-size:clamp(1.2rem,4vw,1.6rem); font-weight:800; color:var(--purple); margin-bottom:12px; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-stat { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.plan-stat:last-child { border-bottom:none; }
.plan-stat-label { color:var(--t3); } .plan-stat-value { color:var(--t1); font-weight:500; }
.plan-stat-value.income { color:var(--ok); font-weight:700; }
.currency-badge-ngn { background:var(--ok-b); color:var(--ok); border:1px solid rgba(22,163,74,.2); padding:3px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.currency-badge-usd { background:var(--info-b); color:var(--info); border:1px solid rgba(2,132,199,.2); padding:3px 8px; border-radius:20px; font-size:10px; font-weight:700; }

/* MODALS */
.modal-overlay { position:fixed; inset:0; background:rgba(17,24,39,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; animation:fadeIn .2s; }
.modal-box { background:#fff; border-radius:var(--rl); padding:28px; max-width:420px; width:100%; position:relative; box-shadow:0 24px 64px rgba(0,0,0,.2); max-height:90vh; overflow-y:auto; animation:slideUp .3s; }
.modal-close { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:var(--bg); border:1.5px solid var(--border); color:var(--t2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; transition:all .2s; }
.modal-close:hover { background:var(--err-b); color:var(--err); border-color:rgba(220,38,38,.2); }
.modal-title { font-size:1.1rem; font-weight:700; margin-bottom:10px; color:var(--purple); }
.modal-body { font-size:14px; color:var(--t2); line-height:1.7; margin-bottom:20px; }
.modal-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ALERTS */
.alert { padding:12px 14px; border-radius:var(--rs); font-size:13px; display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; }
.alert i { margin-top:1px; flex-shrink:0; }
.alert-success{background:var(--ok-b);  border:1px solid rgba(22,163,74,.2);  color:#15803d;}
.alert-danger {background:var(--err-b); border:1px solid rgba(220,38,38,.2);  color:#b91c1c;}
.alert-warning{background:var(--warn-b);border:1px solid rgba(217,119,6,.2);  color:#92400e;}
.alert-info   {background:var(--info-b);border:1px solid rgba(2,132,199,.2);  color:#075985;}

/* PAGINATION */
.pagination { display:flex; align-items:center; gap:6px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.page-link { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:var(--rs); border:1.5px solid var(--border); background:#fff; color:var(--t2); font-size:13px; transition:all .2s; text-decoration:none; font-weight:500; }
.page-link:hover { border-color:var(--purple); color:var(--purple); }
.page-link.active { background:var(--purple); border-color:var(--purple); color:#fff; }

/* MISC */
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-top:6px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--purple),var(--gold-l)); border-radius:3px; transition:width .6s; }
.me-option { display:flex; align-items:center; gap:14px; padding:15px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); text-decoration:none; color:var(--t1); box-shadow:var(--sh); transition:all .2s; }
.me-option:hover,.me-option:active { border-color:var(--purple); background:var(--purple-g); transform:translateX(3px); }
.me-option-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.me-option-icon.purple{background:var(--purple-g);color:var(--purple)} .me-option-icon.gold{background:var(--gold-g);color:var(--gold)}
.me-option-icon.success{background:var(--ok-b);color:var(--ok)} .me-option-icon.danger{background:var(--err-b);color:var(--err)}
.me-option-icon.info{background:var(--info-b);color:var(--info)} .me-option-icon.warning{background:var(--warn-b);color:var(--warn)}
.me-option-text{flex:1} .me-option-title{font-size:14px;font-weight:600} .me-option-sub{font-size:12px;color:var(--t3);margin-top:1px}
.me-option-arrow{color:var(--t3);font-size:12px;flex-shrink:0}
.support-option{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);text-decoration:none;color:var(--t1);box-shadow:var(--sh);transition:all .2s;margin-bottom:10px}
.support-option:hover{border-color:var(--purple);transform:translateX(3px)}
.toast-container{position:fixed;top:16px;right:16px;z-index:99999;display:flex;flex-direction:column;gap:8px;max-width:300px;width:100%}
.toast{background:#fff;border:1.5px solid var(--border);border-radius:var(--rs);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;box-shadow:var(--sh2);animation:slideIn .3s;font-size:13px;color:var(--t1)}
.toast.success{border-left:3px solid var(--ok)} .toast.error{border-left:3px solid var(--err)} .toast.info{border-left:3px solid var(--purple)}
.toast.success i{color:var(--ok)} .toast.error i{color:var(--err)} .toast.info i{color:var(--purple)}
.referral-link-box{display:flex;align-items:center;gap:10px;background:#f9fafb;border:1.5px solid var(--border);border-radius:var(--rs);padding:12px 14px;font-size:13px;word-break:break-all}
.referral-link-box .link-text{flex:1;color:var(--t2)}
.empty-state{text-align:center;padding:40px 20px;color:var(--t3)}
.empty-state i{font-size:2.5rem;margin-bottom:12px;display:block;color:var(--border)}
.empty-state h4{font-size:.95rem;color:var(--t2);margin-bottom:6px}
.separator{height:1px;background:var(--border);margin:16px 0}
.text-purple{color:var(--purple)} .text-gold{color:var(--gold)} .text-success{color:var(--ok)} .text-danger{color:var(--err)} .text-muted{color:var(--t3)}
.fw-600{font-weight:600} .fw-bold{font-weight:700}
.mt-16{margin-top:16px} .mt-20{margin-top:20px} .mt-24{margin-top:24px}
.mb-16{margin-bottom:16px} .mb-20{margin-bottom:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:4px}
.pw-toggle:hover{color:var(--purple)}

@keyframes fadeIn  {from{opacity:0}to{opacity:1}}
@keyframes slideUp {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn {from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin    {to{transform:rotate(360deg)}}

@media(max-width:768px){
  .admin-sidebar{transform:translateX(-100%)}
  .admin-sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vw rgba(0,0,0,.4)}
  .admin-main{margin-left:0}
  .hamburger{display:flex}
  .topbar{padding:0 16px}
  .page-body{padding:16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .auth-card{padding:28px 18px}
  .balance-hero-amount{font-size:clamp(1.3rem,6vw,1.8rem)}
}
@media(min-width:521px){
  .user-layout,.bottom-nav{max-width:520px;margin-left:auto;margin-right:auto}
  .bottom-nav{left:50%;transform:translateX(-50%)}
}