/* ============================================================
   Floxora - all.css
   Shared stylesheet for login.php, register.php, dashboard.php
   ============================================================ */

/* ---------- Global reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
a{ text-decoration:none; color:inherit; }

/* ---------- Page-scoped color variables ---------- */
/* Auth pages (login + register) */
body.page-login,
body.page-register{
  --maroon:#7A1330;
  --maroon-dark:#63102A;
  --red:#D21F3C;

  --page-bg:#F7F3F3;
  --card-bg:#FFFFFF;
  --text-dark:#241016;
  --text-gray:#8A7378;
  --text-light-gray:#B3A2A6;
  --border-soft:#F2E9EA;
  --field-bg:#FBF7F8;

  --shadow-sm:0 4px 12px rgba(122,19,48,0.12);
  --shadow-card:0 20px 55px -10px rgba(122,19,48,0.30);
  --nav-bg:rgba(247,243,243,0.9);
}

/* Dashboard */
body.page-dashboard{
  --maroon:#7A1330;
  --maroon-dark:#63102A;
  --red:#D21F3C;

  --page-bg:#F7F3F3;
  --card-bg:#FFFFFF;
  --text-dark:#241016;
  --text-gray:#8A7378;
  --text-light-gray:#B3A2A6;
  --border-soft:#F2E9EA;
  --you-row-bg:#FBEEF0;

  --shadow-sm:0 2px 6px rgba(122,19,48,0.06);
  --shadow-card:0 14px 34px -8px rgba(122,19,48,0.22);
  --shadow-card2:0 10px 26px -8px rgba(122,19,48,0.18);
  --shadow-nav:0 -4px 24px rgba(122,19,48,0.15);
}

/* Admin */
body.page-admin{
  --maroon:#7A1330;
  --maroon-dark:#63102A;
  --red:#D21F3C;

  --page-bg:#F7F3F3;
  --card-bg:#FFFFFF;
  --text-dark:#241016;
  --text-gray:#8A7378;
  --text-light-gray:#B3A2A6;
  --border-soft:#F2E9EA;
  --sidebar-bg:#241016;
  --sidebar-bg2:#33161D;

  --shadow-sm:0 2px 6px rgba(122,19,48,0.06);
  --shadow-card:0 14px 34px -8px rgba(122,19,48,0.22);
}

/* ---------- Dark mode variable overrides ----------
   Applies automatically when the OS is in dark mode, unless the
   user has explicitly forced light mode (html.light). Also applies
   when the user has explicitly forced dark mode (html.dark), even
   if the OS is set to light. See theme.js for the toggle logic. */
@media (prefers-color-scheme: dark){
  html:not(.light) body.page-login,
  html:not(.light) body.page-register{
    --maroon:#A8264C;
    --maroon-dark:#7A1330;
    --red:#F0405E;

    --page-bg:#120A0D;
    --card-bg:#1E1216;
    --text-dark:#F5EDEF;
    --text-gray:#B7A3A9;
    --text-light-gray:#8A757B;
    --border-soft:rgba(255,255,255,0.08);
    --field-bg:#241318;

    --shadow-sm:0 4px 12px rgba(0,0,0,0.4);
    --shadow-card:0 20px 55px -10px rgba(0,0,0,0.6);
    --nav-bg:rgba(18,10,13,0.85);
  }
  html:not(.light) body.page-dashboard,
  html:not(.light) body.page-admin{
    --maroon:#A8264C;
    --maroon-dark:#7A1330;
    --red:#F0405E;

    --page-bg:#120A0D;
    --card-bg:#1E1216;
    --text-dark:#F5EDEF;
    --text-gray:#B7A3A9;
    --text-light-gray:#8A757B;
    --border-soft:rgba(255,255,255,0.08);
    --you-row-bg:rgba(210,31,60,0.16);

    --shadow-sm:0 2px 6px rgba(0,0,0,0.4);
    --shadow-card:0 14px 34px -8px rgba(0,0,0,0.55);
    --shadow-card2:0 10px 26px -8px rgba(0,0,0,0.5);
    --shadow-nav:0 -4px 24px rgba(0,0,0,0.55);
  }
}
html.dark body.page-login,
html.dark body.page-register{
  --maroon:#A8264C;
  --maroon-dark:#7A1330;
  --red:#F0405E;

  --page-bg:#120A0D;
  --card-bg:#1E1216;
  --text-dark:#F5EDEF;
  --text-gray:#B7A3A9;
  --text-light-gray:#8A757B;
  --border-soft:rgba(255,255,255,0.08);
  --field-bg:#241318;

  --shadow-sm:0 4px 12px rgba(0,0,0,0.4);
  --shadow-card:0 20px 55px -10px rgba(0,0,0,0.6);
  --nav-bg:rgba(18,10,13,0.85);
}
html.dark body.page-dashboard,
html.dark body.page-admin{
  --maroon:#A8264C;
  --maroon-dark:#7A1330;
  --red:#F0405E;

  --page-bg:#120A0D;
  --card-bg:#1E1216;
  --text-dark:#F5EDEF;
  --text-gray:#B7A3A9;
  --text-light-gray:#8A757B;
  --border-soft:rgba(255,255,255,0.08);
  --you-row-bg:rgba(210,31,60,0.16);

  --shadow-sm:0 2px 6px rgba(0,0,0,0.4);
  --shadow-card:0 14px 34px -8px rgba(0,0,0,0.55);
  --shadow-card2:0 10px 26px -8px rgba(0,0,0,0.5);
  --shadow-nav:0 -4px 24px rgba(0,0,0,0.55);
}

/* ---------- Base html/body ---------- */
html{ overflow-x:hidden; width:100%; }

body{
  font-family:'Poppins',sans-serif;
  color:var(--text-dark);
  background:var(--page-bg);
  min-height:100vh;
  width:100%;
  position:relative;
}
body.page-login,
body.page-register{ overflow-x:hidden; }
body.page-dashboard{ min-height:100dvh; }

/* ============================================================
   AUTH PAGES (login + register) — shared components
   ============================================================ */

.wrap{ max-width:460px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* Background decoration (shared shape; slight mask position differs per page) */
.bg-blob{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:min(720px, 100vw); height:min(720px, 100vw); border-radius:50%;
  background:radial-gradient(circle, rgba(122,19,48,0.10), transparent 68%);
  pointer-events:none; z-index:0;
}
.bg-dots{
  position:absolute; inset:0; opacity:0.5; pointer-events:none; z-index:0;
  background-image:radial-gradient(#D9C4C9 1.4px, transparent 1.4px);
  background-size:26px 26px;
}
body.page-login .bg-dots{
  mask-image:radial-gradient(circle at 50% 30%, black 0%, transparent 65%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, black 0%, transparent 65%);
}
body.page-register .bg-dots{
  mask-image:radial-gradient(circle at 50% 25%, black 0%, transparent 65%);
  -webkit-mask-image:radial-gradient(circle at 50% 25%, black 0%, transparent 65%);
}

/* Brand + primary button (shared) */
.brand{ display:flex; align-items:center; gap:8px; }
.brand svg{ width:22px; height:22px; }
.brand-name{ font-size:17px; font-weight:800; letter-spacing:-0.3px; background:linear-gradient(90deg,var(--maroon),var(--red)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-primary{
  height:38px; padding:0 18px; border-radius:999px;
  background:linear-gradient(90deg,var(--maroon),var(--red));
  color:#fff; font-size:12.5px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 12px 28px -6px rgba(122,19,48,0.65);
}
.btn-primary svg{ width:13px; height:13px; }

/* Theme toggle button (shared across all pages) */
.theme-toggle{
  width:36px; height:36px; min-width:36px;
  border-radius:50%;
  background:var(--card-bg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  color:var(--text-dark);
  cursor:pointer;
  flex-shrink:0;
}
.theme-toggle svg{ width:16px; height:16px; }

/* Nav (differs: login = static, register = sticky w/ blur) */
body.page-login nav{ padding:24px 0 8px; }
body.page-login .nav-inner{ display:flex; align-items:center; justify-content:space-between; }

body.page-register nav{
  position:sticky; top:0; z-index:20;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  padding:20px 0; margin-bottom:0;
}
body.page-register .nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width:460px; margin:0 auto; padding:0 24px; }

/* Header copy (padding differs per page) */
h1{ font-size:32px; font-weight:800; letter-spacing:-0.4px; margin-bottom:14px; color:var(--red); }
.head p{ font-size:14px; color:var(--text-gray); font-weight:500; line-height:1.6; max-width:340px; margin:0 auto; }
body.page-login .head{ text-align:center; padding:48px 0 32px; }
body.page-register .head{ text-align:center; padding:28px 0 30px; }

/* Card (padding differs per page) */
.card{ background:var(--card-bg); border-radius:32px; box-shadow:var(--shadow-card); margin-bottom:36px; }
body.page-login .card{ padding:32px 26px 30px; }
body.page-register .card{ padding:30px 26px; }

/* Two-column row (register only) */
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Field groups & labels */
.field-group{ margin-bottom:20px; }
.field-label-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.field-label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-dark); margin-bottom:9px; }
.field-label-row .field-label{ margin-bottom:0; }
.forgot-link{ font-size:13px; font-weight:600; color:var(--red); }
.forgot-link:hover{ color:var(--maroon); }

/* Pill input field (with icon) */
.field{
  display:flex; align-items:center; gap:10px;
  background:var(--field-bg); border:1px solid var(--border-soft);
  border-radius:999px; padding:0 16px; height:52px;
}
.field:focus-within{ border-color:var(--red); box-shadow:0 0 0 3px rgba(210,31,60,0.1); }
.field.error{ border-color:var(--red); }
.field svg{ width:18px; height:18px; color:var(--text-light-gray); flex-shrink:0; }
.field input{
  border:none; outline:none; background:transparent; flex:1; min-width:0;
  font-family:'Poppins',sans-serif; font-size:14.5px; color:var(--text-dark);
}
.field input::placeholder{ color:var(--text-light-gray); }

/* Plain pill input field (no icon; register name fields) */
.field-plain{
  background:var(--field-bg); border:1px solid var(--border-soft);
  border-radius:999px; padding:0 16px; height:52px;
}
.field-plain:focus-within{ border-color:var(--red); box-shadow:0 0 0 3px rgba(210,31,60,0.1); }
.field-plain.error{ border-color:var(--red); }
.field-plain input{
  width:100%; height:100%; border:none; outline:none; background:transparent;
  font-family:'Poppins',sans-serif; font-size:14.5px; color:var(--text-dark);
}
.field-plain input::placeholder{ color:var(--text-light-gray); }

.eye-btn{ background:none; border:none; cursor:pointer; display:flex; color:var(--text-light-gray); padding:0; }
.eye-btn:hover{ color:var(--text-gray); }

/* Alerts */
.alert{
  display:none; border-radius:14px; padding:12px 16px; font-size:13px; font-weight:500;
  margin-bottom:18px; line-height:1.5;
}
.alert-error{ background:#FCEAEC; color:var(--maroon); border-left:3px solid var(--red); }
.alert-success{ background:#EAF7ED; color:#1E7A34; border-left:3px solid #2FA84A; }

/* Submit button (margin-top differs slightly) */
.btn-submit{
  width:100%; height:52px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg,var(--maroon),var(--red));
  color:#fff; font-family:'Poppins',sans-serif; font-size:15px; font-weight:700;
  box-shadow:0 20px 44px -10px rgba(122,19,48,0.7);
  margin-bottom:26px;
  transition:transform 0.12s ease, filter 0.12s ease;
}
body.page-login .btn-submit{ margin-top:6px; }
body.page-register .btn-submit{ margin-top:8px; }
.btn-submit:active{ transform:scale(0.98); filter:brightness(0.96); }
.btn-submit:disabled{ opacity:0.6; cursor:not-allowed; }

/* Bottom "switch page" row */
.signup-row, .signin-row{ text-align:center; font-size:13.5px; color:var(--text-gray); font-weight:500; }
.signup-row a, .signin-row a{ color:var(--red); font-weight:700; }
.signup-row a:hover, .signin-row a:hover{ color:var(--maroon); }

/* Footer (padding differs per page) */
footer{ text-align:center; }
body.page-login footer{ padding:28px 0 40px; }
body.page-register footer{ padding:8px 0 40px; }
.footer-brand{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.footer-brand svg{ width:20px; height:20px; }
.footer-copy{ font-size:12px; color:var(--text-light-gray); font-weight:500; margin-bottom:14px; }
.footer-links{ display:flex; justify-content:center; gap:22px; }
.footer-links a{ font-size:12px; font-weight:500; color:var(--text-gray); }
.footer-links a:hover{ color:var(--text-dark); }

/* ============================================================
   DASHBOARD PAGE
   ============================================================ */

/* press feedback — real app tap feel */
body.page-dashboard .btn,
body.page-dashboard .action-item,
body.page-dashboard .service-item,
body.page-dashboard .copy-btn,
body.page-dashboard .see-more-btn,
body.page-dashboard .nav-item,
body.page-dashboard .lb-row{
  transition:transform 0.12s ease, filter 0.12s ease;
}
body.page-dashboard .btn:active,
body.page-dashboard .copy-btn:active,
body.page-dashboard .see-more-btn:active{ transform:scale(0.95); filter:brightness(0.96); }
body.page-dashboard .action-item:active .action-circle,
body.page-dashboard .service-item:active .service-circle{ transform:scale(0.92); filter:brightness(0.96); }
body.page-dashboard .nav-item:active{ opacity:0.6; }

.page{
  width:100%;
  max-width:459px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--page-bg);
  padding-bottom:96px;
  position:relative;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 16px 12px;
}
.topbar-left{ display:flex; align-items:center; gap:11px; }
.topbar-right{ display:flex; align-items:center; gap:9px; }

.flag-badge{ width:24px; height:24px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px rgba(122,19,48,0.12), var(--shadow-sm); flex-shrink:0; }
.flag-badge svg{ display:block; width:100%; height:100%; }

.avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--maroon); flex-shrink:0; }
.avatar-initials{ width:34px; height:34px; border-radius:50%; background:var(--maroon); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--maroon); flex-shrink:0; }

/* ---------- Scroll body ---------- */
.scroll-body{ padding:6px 16px 0; display:flex; flex-direction:column; gap:14px; }

.welcome-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.welcome-text{ font-size:14px; color:var(--text-gray); }
.welcome-text b{ color:var(--text-dark); font-weight:700; }
.free-plan{
  background:var(--card-bg);
  color:var(--maroon);
  font-size:9px;
  font-weight:700;
  padding:5px 11px;
  border-radius:20px;
  letter-spacing:0.3px;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}

/* ---------- Balance Card ---------- */
.balance-card{
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 60%, #4A0C1F 100%);
  border-radius:28px;
  padding:18px 18px 16px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 44px -12px rgba(122,19,48,0.7);
}
.balance-watermark{
  position:absolute; top:-18px; right:-18px;
  width:120px; height:120px; opacity:0.14;
}
.balance-watermark svg{ width:100%; height:100%; }

.balance-label{ display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,0.75); margin-bottom:5px; position:relative; z-index:1; }
.balance-label svg{ width:12px; height:12px; }
.balance-amount{ font-size:28px; font-weight:800; letter-spacing:-0.4px; margin-bottom:3px; position:relative; z-index:1; }
.balance-desc{ font-size:10.5px; color:rgba(255,255,255,0.65); position:relative; z-index:1; }

.divider-line{ border:none; border-top:1px solid rgba(255,255,255,0.16); margin:16px 0 14px; position:relative; z-index:1; }

.actions-row{ display:flex; justify-content:space-between; padding:0 4px; position:relative; z-index:1; }
.action-item{ display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; cursor:pointer; }
.action-circle{
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.action-circle svg{ width:17px; height:17px; }
.action-label{ font-size:10px; font-weight:500; color:rgba(255,255,255,0.9); }

/* ---------- Section headers ---------- */
.section-header{ display:flex; justify-content:space-between; align-items:center; }
.section-title{ font-size:15px; font-weight:700; color:var(--text-dark); }
.see-more-btn{
  display:flex; align-items:center; gap:4px;
  background:var(--card-bg);
  color:var(--maroon);
  font-size:11px; font-weight:600;
  padding:6px 12px;
  border-radius:20px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.see-more-btn svg{ width:9px; height:9px; }

/* ---------- Stat Cards ---------- */
.stat-row{ display:flex; gap:10px; }
.stat-card{
  flex:1;
  background:var(--card-bg);
  border-radius:20px;
  padding:14px 14px 15px;
  box-shadow:var(--shadow-card);
}
.stat-icon{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:9px; }
.stat-icon svg{ width:14px; height:14px; }
.stat-icon.rose{ background:#F7DEE1; color:#C24A63; }
.stat-icon.gold{ background:#FBEBCB; color:#D19A2B; }
.stat-label{ font-size:9.5px; color:var(--text-gray); margin-bottom:3px; }
.stat-value{ font-size:15px; font-weight:700; color:var(--text-dark); }

/* ---------- Services Card ---------- */
.services-card{
  background:var(--card-bg);
  border-radius:24px;
  padding:18px 10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  box-shadow:var(--shadow-card);
}
.service-item{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; }
.service-circle{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.service-circle svg{ width:19px; height:19px; }
.service-circle.airtime{ background:#F7DEE1; color:#C24A63; }
.service-circle.data{ background:#DCEBF7; color:#3E8FC4; }
.service-circle.electricity{ background:#FBEBCB; color:#D19A2B; }
.service-circle.tv{ background:#E9DEF5; color:#8A55C7; }
.service-label{ font-size:10.5px; font-weight:500; color:var(--text-dark); }

/* ---------- Referral Card ---------- */
.referral-card{
  background:var(--card-bg);
  border-radius:24px;
  padding:14px 15px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--shadow-card2);
}
.referral-icon{ width:38px; height:38px; border-radius:50%; background:#FBEEF0; color:var(--maroon); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.referral-icon svg{ width:17px; height:17px; }
.referral-text{ flex:1; min-width:0; }
.referral-label{ font-size:9.5px; color:var(--text-light-gray); margin-bottom:3px; }
.referral-link{ font-size:12px; font-weight:600; color:var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.copy-btn{
  width:34px; height:34px; min-width:34px;
  border-radius:50%;
  background:var(--maroon);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  box-shadow:0 4px 10px -3px rgba(122,19,48,0.5);
}
.copy-btn svg{ width:15px; height:15px; }

/* ---------- Leaderboard (Weekly Top Affiliates) ---------- */
.lb-card{ background:var(--card-bg); border-radius:24px; padding:4px 14px; box-shadow:var(--shadow-card2); }
.lb-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.lb-row:last-child{ border-bottom:none; }
.lb-row.lb-you{ background:var(--you-row-bg); margin:0 -14px; padding:11px 14px; border-radius:16px; border-bottom:none; }
.lb-rank{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; background:var(--text-light-gray); }
.lb-rank.gold{ background:#F5B301; }
.lb-rank.silver{ background:#B0B4BC; }
.lb-rank.bronze{ background:#C4783C; }
.lb-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.lb-info{ flex:1; min-width:0; }
.lb-name{ font-size:12.5px; font-weight:600; color:var(--text-dark); }
.lb-sub{ font-size:10px; color:var(--text-light-gray); }
.lb-earn{ font-size:12px; font-weight:700; color:var(--maroon); flex-shrink:0; }

/* ---------- Bottom Nav ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:459px;
  background:var(--card-bg);
  display:flex; justify-content:space-around; align-items:center;
  padding:9px 5px 16px;
  box-shadow:var(--shadow-nav);
  border-radius:24px 24px 0 0;
  z-index:100;
}
.nav-item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-light-gray); font-size:9.5px; font-weight:500; cursor:pointer; }
.nav-item svg{ width:18px; height:18px; }
.nav-item.active{ color:var(--maroon); }
.nav-item.active .nav-icon-wrap{
  background:var(--maroon);
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:-4px;
  box-shadow:0 5px 12px -3px rgba(122,19,48,0.55);
}
.nav-item.active .nav-icon-wrap svg{ color:#fff; width:16px; height:16px; }
.nav-item.active span{ margin-top:6px; }

/* ============================================================
   DARK MODE — component refinements
   A handful of colors above are hardcoded pastels rather than
   variables (alerts, stat/service icon chips, bg decoration).
   These overrides keep them legible on a dark background.
   ============================================================ */
@media (prefers-color-scheme: dark){
  html:not(.light) body.page-login .bg-dots,
  html:not(.light) body.page-register .bg-dots{
    background-image:radial-gradient(rgba(255,255,255,0.08) 1.4px, transparent 1.4px);
  }
  html:not(.light) body.page-login .bg-blob,
  html:not(.light) body.page-register .bg-blob{
    background:radial-gradient(circle, rgba(240,64,94,0.16), transparent 68%);
  }
  html:not(.light) body.page-login .alert-error,
  html:not(.light) body.page-register .alert-error{ background:rgba(240,64,94,0.14); }
  html:not(.light) body.page-login .alert-success,
  html:not(.light) body.page-register .alert-success{ background:rgba(47,168,74,0.16); color:#6FDB8A; }

  html:not(.light) body.page-dashboard .stat-icon.rose,
  html:not(.light) body.page-dashboard .service-circle.airtime{ background:rgba(194,74,99,0.2); color:#F0839A; }
  html:not(.light) body.page-dashboard .stat-icon.gold,
  html:not(.light) body.page-dashboard .service-circle.electricity{ background:rgba(209,154,43,0.2); color:#F0C566; }
  html:not(.light) body.page-dashboard .service-circle.data{ background:rgba(62,143,196,0.2); color:#7FC3EE; }
  html:not(.light) body.page-dashboard .service-circle.tv{ background:rgba(138,85,199,0.2); color:#C9A6F0; }
}
html.dark body.page-login .bg-dots,
html.dark body.page-register .bg-dots{
  background-image:radial-gradient(rgba(255,255,255,0.08) 1.4px, transparent 1.4px);
}
html.dark body.page-login .bg-blob,
html.dark body.page-register .bg-blob{
  background:radial-gradient(circle, rgba(240,64,94,0.16), transparent 68%);
}
html.dark body.page-login .alert-error,
html.dark body.page-register .alert-error{ background:rgba(240,64,94,0.14); }
html.dark body.page-login .alert-success,
html.dark body.page-register .alert-success{ background:rgba(47,168,74,0.16); color:#6FDB8A; }

html.dark body.page-dashboard .stat-icon.rose,
html.dark body.page-dashboard .service-circle.airtime{ background:rgba(194,74,99,0.2); color:#F0839A; }
html.dark body.page-dashboard .stat-icon.gold,
html.dark body.page-dashboard .service-circle.electricity{ background:rgba(209,154,43,0.2); color:#F0C566; }
html.dark body.page-dashboard .service-circle.data{ background:rgba(62,143,196,0.2); color:#7FC3EE; }
html.dark body.page-dashboard .service-circle.tv{ background:rgba(138,85,199,0.2); color:#C9A6F0; }

/* Smooth the color-scheme transition when toggling */
body.page-login, body.page-register, body.page-dashboard,
.card, .field, .field-plain, .balance-card, .stat-card, .services-card,
.referral-card, .lb-card, .bottom-nav, .theme-toggle{
  transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

  /* ---------- Page head (Daily Tasks) ---------- */
  .page-head{ padding:4px 0 2px; }
  .page-title{ font-size:22px; font-weight:800; letter-spacing:-0.3px; margin-bottom:4px; color:var(--text-dark); }
  .page-sub{ font-size:12.5px; color:var(--text-gray); }

  /* ---------- Task section cards ---------- */
  .task-card{
    background:var(--card-bg);
    border-radius:24px;
    padding:18px;
    box-shadow:var(--shadow-card2);
  }
  .task-card + .section-header{ margin-top:4px; }

  .pill{ font-size:10.5px; font-weight:700; padding:6px 13px; border-radius:20px; flex-shrink:0; }
  .pill-live{ background:#DCEBF7; color:#3E8FC4; }
  .pill-green{ background:#EAF7ED; color:#1E7A34; }
  @media (prefers-color-scheme: dark){ html:not(.light) .pill-live{ background:rgba(62,143,196,0.18); color:#7FC2EE; } }
  html.dark .pill-live{ background:rgba(62,143,196,0.18); color:#7FC2EE; }
  html.dark .pill-green{ background:rgba(47,168,74,0.16); color:#5FD07F; }
  @media (prefers-color-scheme: dark){ html:not(.light) .pill-green{ background:rgba(47,168,74,0.16); color:#5FD07F; } }

  /* ---------- Task item ---------- */
  .task{ border-top:1px solid var(--border-soft); padding-top:16px; margin-top:14px; }
  .task:first-child{ border-top:none; padding-top:0; margin-top:0; }

  .task-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .task-badges{ display:flex; gap:8px; flex-wrap:wrap; }
  .badge{ background:var(--border-soft); color:var(--text-gray); font-size:11px; font-weight:600; padding:6px 12px; border-radius:20px; }
  .task-price{ font-size:17px; font-weight:800; color:var(--maroon); white-space:nowrap; }

  .task-desc{ font-size:13.5px; line-height:1.6; color:var(--text-dark); margin-bottom:16px; }

  .progress-row{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; margin-bottom:8px; }
  .progress-row span:first-child{ color:var(--text-gray); font-weight:500; }
  .progress-row span:last-child{ color:var(--maroon); font-weight:700; }
  .progress-track{ height:8px; border-radius:5px; background:var(--border-soft); overflow:hidden; margin-bottom:16px; }
  .progress-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,var(--maroon),var(--red)); width:33.9%; }

  /* ---------- Buttons ---------- */
  .btn{
    border:none; border-radius:999px; cursor:pointer; font-family:'Poppins',sans-serif;
    font-weight:700; display:flex; align-items:center; justify-content:center; gap:7px;
    transition:transform .12s ease, filter .12s ease, opacity .2s ease;
  }
  .btn:active{ transform:scale(0.96); filter:brightness(0.96); }
  .btn svg{ width:15px; height:15px; }

  .btn-start{
    width:100%; height:50px; font-size:14.5px; color:#fff;
    background:linear-gradient(90deg,var(--maroon),var(--red));
    box-shadow:0 14px 30px -8px rgba(122,19,48,0.55);
  }

  .btn-row{ display:flex; gap:10px; }
  .btn-reopen{
    height:46px; padding:0 20px; font-size:13px;
    background:var(--border-soft); color:var(--text-dark);
  }
  .btn-verify{
    flex:1; height:46px; font-size:14px; color:#fff;
    background:linear-gradient(90deg,#2FBF6E,#1E7A34);
    box-shadow:0 12px 24px -8px rgba(30,122,52,0.5);
  }
  .btn-verify.loading{ opacity:0.75; cursor:not-allowed; }
  .spin{ animation:spin 0.8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .reward-pill{
    width:100%; height:46px; border-radius:999px;
    background:#EAF7ED; color:#1E7A34;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:13.5px; font-weight:700;
  }
  .reward-pill svg{ width:16px; height:16px; }
  @media (prefers-color-scheme: dark){ html:not(.light) .reward-pill{ background:rgba(47,168,74,0.16); color:#5FD07F; } }
  html.dark .reward-pill{ background:rgba(47,168,74,0.16); color:#5FD07F; }

  /* ---------- Plan gate (tasks locked until a plan is active) ---------- */
  .plan-gate{ text-align:center; padding:34px 20px; }
  .plan-gate-icon{
    width:58px; height:58px; border-radius:50%;
    background:rgba(122,19,48,0.10); color:var(--maroon);
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  }
  .plan-gate-icon svg{ width:24px; height:24px; }
  @media (prefers-color-scheme: dark){ html:not(.light) .plan-gate-icon{ background:rgba(168,38,76,0.18); color:#E88CA4; } }
  html.dark .plan-gate-icon{ background:rgba(168,38,76,0.18); color:#E88CA4; }
  .plan-gate-title{ font-size:16.5px; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
  .plan-gate-sub{ font-size:13px; line-height:1.6; color:var(--text-gray); margin-bottom:22px; }
  .plan-gate .btn-start{ width:auto; padding:0 28px; }

  /* ---------- Empty state ---------- */
  .empty{ text-align:center; padding:30px 10px; }
  .empty-icon{
    width:58px; height:58px; border-radius:50%; background:var(--border-soft);
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
    color:var(--text-light-gray);
  }
  .empty-icon svg{ width:24px; height:24px; }
  .empty p{ color:var(--text-light-gray); font-size:13px; font-weight:500; }

/* ============================================================
   SETTINGS / PROFILE PAGE
   ============================================================ */

/* ---------- Header ---------- */
.settings-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.settings-title{ font-size:24px; font-weight:800; letter-spacing:-0.3px; color:var(--text-dark); margin-bottom:4px; }
.settings-sub{ font-size:12.5px; color:var(--text-gray); font-weight:500; }
.logout-btn{
  width:38px; height:38px; min-width:38px; border-radius:50%;
  background:#FCEAEC; color:var(--red);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); cursor:pointer; flex-shrink:0;
}
.logout-btn svg{ width:16px; height:16px; }
@media (prefers-color-scheme: dark){ html:not(.light) .logout-btn{ background:rgba(240,64,94,0.16); } }
html.dark .logout-btn{ background:rgba(240,64,94,0.16); }

/* ---------- Segmented tabs ---------- */
.tab-row{ display:flex; gap:8px; }
.tab-pill{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  height:42px; border-radius:999px; background:var(--card-bg); color:var(--text-gray);
  font-size:12px; font-weight:700; box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform 0.12s ease, filter 0.12s ease;
}
.tab-pill:active{ transform:scale(0.96); }
.tab-pill svg{ width:14px; height:14px; }
.tab-pill.active{
  background:linear-gradient(90deg,var(--maroon),var(--red)); color:#fff;
  box-shadow:0 12px 24px -8px rgba(122,19,48,0.55);
}

/* ---------- Settings card (generic container for tab content) ---------- */
.settings-card{ background:var(--card-bg); border-radius:24px; padding:22px 18px; box-shadow:var(--shadow-card2); }
.settings-card .field-group:last-of-type{ margin-bottom:20px; }

/* ---------- Avatar upload block ---------- */
.avatar-upload{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:24px; }
.avatar-upload-ring{
  width:96px; height:96px; border-radius:50%; border:3px solid var(--red);
  padding:3px; position:relative;
}
.avatar-upload-ring .avatar-initials,
.avatar-upload-ring .avatar{ width:100%; height:100%; font-size:32px; border:none; }
.avatar-upload-ring .verified-badge{
  position:absolute; bottom:-2px; right:-2px; width:26px; height:26px; border-radius:50%;
  background:#2FA84A; color:#fff; display:flex; align-items:center; justify-content:center;
  border:3px solid var(--card-bg);
}
.avatar-upload-ring .verified-badge svg{ width:12px; height:12px; }
.username-pill{ background:var(--field-bg); color:var(--red); font-size:12.5px; font-weight:600; padding:6px 16px; border-radius:20px; }

/* ---------- Bank select field (Payout tab) ---------- */
.field-select{ position:relative; }
.field-select select{
  width:100%; height:52px; border-radius:999px; border:1px solid var(--border-soft);
  background:var(--field-bg); padding:0 40px 0 16px;
  font-family:'Poppins',sans-serif; font-size:14.5px; color:var(--text-dark);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.field-select select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(210,31,60,0.1); }
.field-select .chevron{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-light-gray); pointer-events:none; }
.field-plain input:disabled{ color:var(--text-light-gray); cursor:not-allowed; }

/* ---------- Notice box (Withdrawal Notice) ---------- */
.notice-box{ display:flex; gap:12px; background:#FDF3E7; border-radius:16px; padding:14px 16px; margin-bottom:20px; }
.notice-icon{
  width:32px; height:32px; min-width:32px; border-radius:50%; background:#fff; color:#D19A2B;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.notice-icon svg{ width:15px; height:15px; }
.notice-title{ font-size:13px; font-weight:700; color:#B8791E; margin-bottom:4px; }
.notice-text{ font-size:11.5px; color:#B8791E; line-height:1.55; opacity:0.9; }
@media (prefers-color-scheme: dark){ html:not(.light) .notice-box{ background:rgba(209,154,43,0.14); } html:not(.light) .notice-icon{ background:rgba(255,255,255,0.06); } }
html.dark .notice-box{ background:rgba(209,154,43,0.14); }
html.dark .notice-icon{ background:rgba(255,255,255,0.06); }

/* ---------- Account status card ---------- */
.status-card{ background:var(--card-bg); border-radius:24px; padding:18px; box-shadow:var(--shadow-card2); display:flex; flex-direction:column; gap:16px; }
.status-top{ display:flex; align-items:center; gap:12px; }
.status-icon{ width:38px; height:38px; min-width:38px; border-radius:50%; background:#DCEBF7; color:#3E8FC4; display:flex; align-items:center; justify-content:center; }
.status-icon svg{ width:17px; height:17px; }
.status-label{ font-size:10.5px; color:var(--text-light-gray); margin-bottom:2px; }
.status-value{ font-size:14.5px; font-weight:700; color:var(--text-dark); }
.status-divider{ border:none; border-top:1px solid var(--border-soft); }
.status-row{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; }
.status-row span:first-child{ color:var(--text-gray); font-weight:500; }
.status-row span:last-child{ font-weight:700; color:var(--text-dark); }
.status-row .link-value{ color:var(--maroon); }
@media (prefers-color-scheme: dark){ html:not(.light) .status-icon{ background:rgba(62,143,196,0.18); color:#7FC2EE; } }
html.dark .status-icon{ background:rgba(62,143,196,0.18); color:#7FC2EE; }

/* ---------- Link list card (Terms / Privacy) ---------- */
.link-card{ background:var(--card-bg); border-radius:24px; box-shadow:var(--shadow-card2); overflow:hidden; }
.link-item{ display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; border-bottom:1px solid var(--border-soft); transition:background-color 0.12s ease; }
.link-item:last-child{ border-bottom:none; }
.link-item:active{ background:var(--field-bg); }
.link-icon{ width:34px; height:34px; min-width:34px; border-radius:50%; background:var(--border-soft); color:var(--text-gray); display:flex; align-items:center; justify-content:center; }
.link-icon svg{ width:15px; height:15px; }
.link-item span{ flex:1; font-size:13px; font-weight:600; color:var(--text-dark); }
.link-item .chevron-right{ width:14px; height:14px; color:var(--text-light-gray); }

/* Fallback styling for save/update feedback — move into all.css if you already have an equivalent class */
.form-msg { font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; }
.form-msg-error { background: rgba(210,31,60,0.12); color: #D21F3C; }
.form-msg-success { background: rgba(0,135,81,0.12); color: #008751; }

/* ============================================================
   ADS / ADVERTISE PAGE
   ============================================================ */

/* ---------- Header row (title + Create New Ad button) ---------- */
.ads-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ads-header .page-title{ margin-bottom:6px; }
.ads-header .page-sub{ max-width:190px; line-height:1.5; }
.btn-create-ad{
  height:48px; padding:0 20px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg,var(--maroon),var(--red)); color:#fff;
  display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif;
  font-size:13.5px; font-weight:700; white-space:nowrap; flex-shrink:0;
  box-shadow:0 14px 30px -8px rgba(122,19,48,0.55);
  transition:transform 0.12s ease, filter 0.12s ease;
}
.btn-create-ad:active{ transform:scale(0.96); filter:brightness(0.96); }
.btn-create-ad svg{ width:15px; height:15px; }
.btn-create-ad-icon{ width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.btn-create-ad-icon svg{ width:12px; height:12px; }

/* ---------- Growth tip card ---------- */
.tip-card{ background:var(--card-bg); border-radius:24px; padding:20px 18px; box-shadow:var(--shadow-card2); }
.tip-header{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.tip-icon{ width:32px; height:32px; min-width:32px; border-radius:9px; background:#DCEBF7; color:#3E8FC4; display:flex; align-items:center; justify-content:center; }
.tip-icon svg{ width:15px; height:15px; }
.tip-title{ font-size:14px; font-weight:700; color:var(--text-gray); }
.tip-text{ font-size:13.5px; line-height:1.65; color:var(--text-dark); margin-bottom:18px; }
.btn-tip{
  width:100%; height:48px; border:none; border-radius:999px; cursor:pointer;
  background:var(--field-bg); color:var(--maroon); font-family:'Poppins',sans-serif;
  font-size:13.5px; font-weight:700; transition:transform 0.12s ease, filter 0.12s ease;
}
.btn-tip:active{ transform:scale(0.97); filter:brightness(0.96); }
@media (prefers-color-scheme: dark){ html:not(.light) .tip-icon{ background:rgba(62,143,196,0.18); color:#7FC2EE; } }
html.dark .tip-icon{ background:rgba(62,143,196,0.18); color:#7FC2EE; }

/* ---------- "Your campaigns" list card (reuses .task-card + .empty) ---------- */
.campaigns-title{ display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:var(--text-dark); margin-bottom:6px; }
.campaigns-title .tip-icon{ background:#DCEBF7; color:#3E8FC4; width:26px; height:26px; border-radius:8px; }
.campaigns-title .tip-icon svg{ width:13px; height:13px; }

/* ============================================================
   CREATE CAMPAIGN FORM (Ads → Create New Ad)
   ============================================================ */

/* ---------- Sub-page header with back button ---------- */
.subpage-header{ display:flex; align-items:center; gap:12px; }
.back-btn{
  width:38px; height:38px; min-width:38px; border-radius:50%;
  background:var(--card-bg); color:var(--text-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); cursor:pointer; flex-shrink:0;
}
.back-btn svg{ width:16px; height:16px; }
.subpage-title{ font-size:19px; font-weight:800; color:var(--text-dark); }

/* ---------- Platform grid ---------- */
.platform-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.platform-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:var(--field-bg); border:1px solid var(--border-soft); border-radius:18px;
  padding:18px 6px; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--text-dark);
  transition:transform 0.12s ease, filter 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}
.platform-btn:active{ transform:scale(0.95); }
.platform-btn svg{ width:21px; height:21px; color:var(--text-gray); transition:color 0.15s ease; }
.platform-btn.active{
  background:linear-gradient(135deg,var(--maroon),var(--red)); color:#fff; border-color:transparent;
  box-shadow:0 14px 28px -8px rgba(122,19,48,0.55);
}
.platform-btn.active svg{ color:#fff; }

/* ---------- Service select rows (radio + name + price chip) ---------- */
.service-select-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--field-bg); border:1.5px solid var(--border-soft); border-radius:18px;
  padding:16px 18px; cursor:pointer; transition:border-color 0.12s ease;
}
.service-select-row.active{ border-color:var(--red); }
.service-select-left{ display:flex; align-items:center; gap:14px; }
.radio-dot{ width:20px; height:20px; min-width:20px; border-radius:50%; border:2px solid var(--border-soft); position:relative; transition:border-color 0.12s ease; }
.radio-dot.active{ border-color:var(--red); }
.radio-dot.active::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--red); }
.service-name{ font-size:14px; font-weight:700; color:var(--text-dark); }
.price-chip{ background:#FBEEF0; color:var(--maroon); font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
@media (prefers-color-scheme: dark){ html:not(.light) .price-chip{ background:rgba(210,31,60,0.16); } }
html.dark .price-chip{ background:rgba(210,31,60,0.16); }

/* ---------- Textarea field ---------- */
.field-textarea{
  width:100%; min-height:100px; border-radius:22px; border:1px solid var(--border-soft);
  background:var(--field-bg); padding:15px 17px; font-family:'Poppins',sans-serif;
  font-size:14px; color:var(--text-dark); resize:vertical;
}
.field-textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(210,31,60,0.1); }
.field-textarea::placeholder{ color:var(--text-light-gray); }

.field-hint{ font-size:11.5px; color:var(--text-light-gray); margin-top:7px; }

  /* ---------- Referrals page (extends all.css design tokens) ---------- */
  .ref-tabs{
    display:flex; gap:10px; background:var(--card-bg); border-radius:999px;
    padding:6px; box-shadow:var(--shadow-card2);
  }
  .ref-tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:12px 8px; border-radius:999px; cursor:pointer;
    font-size:13px; font-weight:700; color:var(--text-light-gray);
    transition:transform 0.12s ease, filter 0.12s ease;
  }
  .ref-tab:active{ transform:scale(0.97); }
  .ref-tab.active{
    background:linear-gradient(90deg,var(--maroon),var(--red)); color:#fff;
    box-shadow:0 12px 24px -8px rgba(122,19,48,0.55);
  }
  .ref-tab-count{
    font-size:11px; font-weight:700; padding:3px 12px; border-radius:20px;
    background:rgba(0,0,0,0.08); color:inherit;
  }
  .ref-tab:not(.active) .ref-tab-count{ background:var(--field-bg); color:var(--text-dark); }
  .ref-tab.active .ref-tab-count{ background:rgba(255,255,255,0.22); color:#fff; }

  .ref-list{ display:flex; flex-direction:column; gap:10px; }
  .ref-row{
    display:flex; align-items:center; gap:12px;
    background:var(--card-bg); border-radius:20px; padding:12px 14px;
    box-shadow:var(--shadow-card2);
  }
  .ref-avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--field-bg); }
  .ref-avatar-initials{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--maroon); color:#fff; font-size:14px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .ref-info{ flex:1; min-width:0; }
  .ref-name{ font-size:13.5px; font-weight:700; color:var(--text-dark); margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .plan-badge{
    display:inline-block; font-size:10.5px; font-weight:700; color:#fff;
    padding:4px 12px; border-radius:20px; background:#3FAE4A;
  }
  .plan-badge.starter{ background:#3FAE4A; }
  .plan-badge.ruby{ background:#3FAE4A; }
  .ref-amount{ font-size:13.5px; font-weight:700; color:#2FA84A; white-space:nowrap; flex-shrink:0; }
  .ref-amount.pending{ text-decoration:line-through; opacity:0.55; }

  @media (prefers-color-scheme: dark){
    html:not(.light) .ref-tab-count{ background:rgba(255,255,255,0.1); }
  }

/* ============================================================
   EARNING PLANS PAGE
   ============================================================ */

/* ---------- Intro copy ---------- */
.eplan-intro{ text-align:center; padding:4px 6px 2px; }
.eplan-intro .page-title{ margin-bottom:8px; }
.eplan-intro .page-title span{ color:var(--red); }
.eplan-intro p{ font-size:13px; color:var(--text-gray); line-height:1.6; }

/* ---------- Plan card ---------- */
.eplan-card{
  background:var(--card-bg); border-radius:24px; padding:20px 18px 18px;
  box-shadow:var(--shadow-card2); position:relative; overflow:hidden;
}
.eplan-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--ep-c1), var(--ep-c2));
}
.eplan-card.lite{ --ep-c1:#4FA3D8; --ep-c2:#3E8FC4; }
.eplan-card.plus{ --ep-c1:#3FC46B; --ep-c2:#1E7A34; }
.eplan-card.ultra{ --ep-c1:#A26AD9; --ep-c2:#8A55C7; }
.eplan-card.supreme{ --ep-c1:#E6B84D; --ep-c2:#D19A2B; }

.eplan-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.eplan-name{ font-size:17px; font-weight:800; color:var(--text-dark); letter-spacing:-0.2px; }
.eplan-crown{
  width:36px; height:36px; min-width:36px; border-radius:12px;
  background:linear-gradient(135deg, var(--ep-c1), var(--ep-c2)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -6px var(--ep-c2);
}
.eplan-crown svg{ width:17px; height:17px; }

.eplan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; margin-bottom:18px; }
.eplan-stat{ display:flex; align-items:center; gap:10px; min-width:0; }
.eplan-stat-icon-wrap{
  width:34px; height:34px; min-width:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ep-c2); background:color-mix(in srgb, var(--ep-c2) 14%, transparent);
  flex-shrink:0;
}
.eplan-stat-icon-wrap svg{ width:15px; height:15px; }
.eplan-stat-text{ min-width:0; }
.eplan-stat-label{ font-size:10px; color:var(--text-light-gray); font-weight:600; margin-bottom:2px; white-space:nowrap; }
.eplan-stat-value{ font-size:14px; font-weight:800; color:var(--text-dark); white-space:nowrap; }

.eplan-banner{
  border-radius:14px; padding:11px; text-align:center;
  font-size:12.5px; font-weight:700; color:#fff;
  background:linear-gradient(90deg, var(--ep-c1), var(--ep-c2));
}

@media (prefers-color-scheme: dark){
  html:not(.light) .eplan-stat-icon-wrap{ background:color-mix(in srgb, var(--ep-c2) 22%, transparent); }
}
html.dark .eplan-stat-icon-wrap{ background:color-mix(in srgb, var(--ep-c2) 22%, transparent); }

/* ---------- Withdrawal notice (two-part row) ---------- */
.eplan-notice{
  background:var(--card-bg); border-radius:20px; padding:16px 18px;
  box-shadow:var(--shadow-card2); display:flex; align-items:center; gap:14px;
}
.eplan-notice-icon{
  width:38px; height:38px; min-width:38px; border-radius:50%;
  background:#FCEAEC; color:var(--red);
  display:flex; align-items:center; justify-content:center;
}
.eplan-notice-icon svg{ width:17px; height:17px; }
.eplan-notice-text{ flex:1; font-size:12px; color:var(--text-gray); line-height:1.5; }
.eplan-notice-text b{ color:var(--red); font-weight:700; }
.eplan-notice-divider{ width:1px; align-self:stretch; background:var(--border-soft); }
.eplan-notice-min{ text-align:center; flex-shrink:0; }
.eplan-notice-min-label{ font-size:9.5px; color:var(--text-light-gray); font-weight:600; margin-bottom:6px; line-height:1.4; max-width:88px; }
.eplan-notice-min-value{
  display:inline-block; background:linear-gradient(90deg,var(--maroon),var(--red)); color:#fff;
  font-size:13px; font-weight:800; padding:6px 14px; border-radius:999px;
}
@media (prefers-color-scheme: dark){ html:not(.light) .eplan-notice-icon{ background:rgba(240,64,94,0.16); } }
html.dark .eplan-notice-icon{ background:rgba(240,64,94,0.16); }

/* ---------- Weekly contest card ---------- */
.eplan-contest{ background:var(--card-bg); border-radius:24px; padding:20px 18px; box-shadow:var(--shadow-card2); }
.eplan-contest-title{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:12px; font-weight:800; letter-spacing:1px; color:var(--text-dark);
  text-transform:uppercase; margin-bottom:18px;
}
.eplan-contest-title::before, .eplan-contest-title::after{ content:''; flex:1; height:1px; background:var(--border-soft); }
.eplan-contest-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.eplan-contest-item{ display:flex; align-items:center; gap:11px; }
.eplan-medal{
  width:36px; height:36px; min-width:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.eplan-medal.gold{ background:linear-gradient(135deg,#F5D06B,#D19A2B); }
.eplan-medal.silver{ background:linear-gradient(135deg,#DCE1E4,#9AA3A9); }
.eplan-medal.bronze{ background:linear-gradient(135deg,#D9925F,#A85A2D); }
.eplan-medal svg{ width:16px; height:16px; }
.eplan-contest-label{ font-size:10.5px; color:var(--text-light-gray); font-weight:600; margin-bottom:2px; }
.eplan-contest-value{ font-size:13.5px; font-weight:800; color:var(--text-dark); }
.eplan-contest-item.commission .eplan-medal{ background:linear-gradient(135deg,var(--red),var(--maroon)); }
.eplan-contest-item.commission .eplan-contest-value{ color:var(--red); }

/* ============================================================
   MEMBERSHIP UPGRADE PAGE
   ============================================================ */

/* ---------- Deposit balance card ---------- */
.mu-balance-card{
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 60%, #4A0C1F 100%);
  border-radius:24px; padding:20px; color:#fff;
  box-shadow:0 22px 44px -12px rgba(122,19,48,0.7);
  position:relative; overflow:hidden;
}
.mu-balance-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mu-balance-label-row{ display:flex; align-items:center; gap:10px; }
.mu-balance-icon{
  width:36px; height:36px; min-width:36px; border-radius:50%;
  background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; color:#fff;
}
.mu-balance-icon svg{ width:16px; height:16px; }
.mu-balance-label{ font-size:11px; font-weight:600; color:rgba(255,255,255,0.85); }
.mu-btn-add{
  background:#fff; color:var(--maroon); font-size:12.5px; font-weight:800;
  padding:11px 20px; border-radius:999px; border:none; cursor:pointer;
  font-family:'Poppins',sans-serif; white-space:nowrap; flex-shrink:0;
  transition:transform 0.12s ease, filter 0.12s ease;
}
.mu-btn-add:active{ transform:scale(0.96); }
.mu-balance-amount{ font-size:28px; font-weight:800; letter-spacing:-0.5px; }

/* ---------- Plan card ---------- */
.mu-card{
  background:var(--card-bg); border-radius:24px; padding:22px 20px;
  box-shadow:var(--shadow-card2);
}
.mu-card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.mu-icon-badge{
  width:52px; height:52px; min-width:52px; border-radius:50%;
  background:#FBEEF0; color:var(--red);
  display:flex; align-items:center; justify-content:center;
}
.mu-icon-badge svg{ width:22px; height:22px; }
.mu-price-block{ text-align:right; }
.mu-price{ font-size:18px; font-weight:800; color:var(--red); letter-spacing:-0.3px; }
.mu-price-sub{ font-size:11.5px; color:var(--text-light-gray); font-weight:500; margin-top:2px; }

.mu-title{ font-size:16px; font-weight:800; color:var(--text-dark); letter-spacing:-0.3px; margin-bottom:4px; }
.mu-sub{ font-size:12px; color:var(--text-light-gray); font-weight:500; margin-bottom:20px; }

.mu-feature-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:22px; }
.mu-feature{ display:flex; align-items:center; gap:14px; }
.mu-feature-icon{
  width:30px; height:30px; min-width:30px; border-radius:50%;
  background:var(--field-bg); color:var(--text-gray);
  display:flex; align-items:center; justify-content:center;
}
.mu-feature-icon svg{ width:14px; height:14px; }
.mu-feature-text{ font-size:13px; font-weight:600; color:var(--text-dark); line-height:1.4; }
.mu-feature-text s{ color:var(--text-light-gray); text-decoration-color:var(--text-light-gray); }
.mu-feature.is-disabled .mu-feature-icon{ opacity:0.5; }
.mu-feature.is-disabled .mu-feature-text{ color:var(--text-light-gray); text-decoration:line-through; text-decoration-color:var(--text-light-gray); }

.mu-cta{
  width:100%; height:52px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(90deg,var(--maroon),var(--red)); color:#fff;
  font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:700;
  box-shadow:0 18px 38px -10px rgba(122,19,48,0.65);
  transition:transform 0.12s ease, filter 0.12s ease;
}
.mu-cta:active{ transform:scale(0.98); filter:brightness(0.96); }
  html.dark .ref-tab-count{ background:rgba(255,255,255,0.1); }
/* ============================================================
   CONFIRM UPGRADE MODAL (bottom sheet)
   ============================================================ */

.mu-modal-overlay{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(20,8,12,0.55); backdrop-filter:blur(3px);
  align-items:flex-end; justify-content:center;
}
.mu-modal-overlay.open{ display:flex; }

.mu-modal{
  width:100%; max-width:459px; background:var(--card-bg);
  border-radius:28px 28px 0 0; padding:14px 24px 28px;
  position:relative; max-height:92vh; overflow-y:auto;
  animation:muSheetUp 0.22s ease-out;
  box-shadow:0 -20px 50px rgba(0,0,0,0.25);
}
@keyframes muSheetUp{ from{ transform:translateY(24px); opacity:0.6; } to{ transform:translateY(0); opacity:1; } }

.mu-modal-handle{ width:40px; height:4px; border-radius:3px; background:var(--border-soft); margin:0 auto 6px; }

.mu-modal-close{
  position:absolute; top:14px; right:20px; width:34px; height:34px; border-radius:50%;
  background:var(--field-bg); color:var(--text-dark); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mu-modal-close svg{ width:15px; height:15px; }

.mu-modal-icon{
  width:76px; height:76px; border-radius:50%; margin:22px auto 20px;
  background:linear-gradient(135deg, var(--maroon), var(--red));
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 16px 34px -10px rgba(122,19,48,0.6);
}
.mu-modal-icon svg{ width:32px; height:32px; }

.mu-modal-title{ text-align:center; font-size:22px; font-weight:800; color:var(--text-dark); margin-bottom:10px; }
.mu-modal-sub{ text-align:center; font-size:14px; color:var(--text-gray); line-height:1.6; margin-bottom:26px; }
.mu-modal-plan{ color:var(--red); font-weight:700; }

.mu-wallet-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1.5px solid var(--red); background:var(--field-bg);
  border-radius:18px; padding:14px 16px; margin-bottom:22px;
}
.mu-wallet-left{ display:flex; align-items:center; gap:14px; }
.mu-wallet-icon{
  width:44px; height:44px; min-width:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--maroon), var(--red)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.mu-wallet-icon svg{ width:19px; height:19px; }
.mu-wallet-name{ font-size:15px; font-weight:700; color:var(--text-dark); margin-bottom:3px; }
.mu-wallet-balance{ font-size:13px; color:var(--text-light-gray); text-decoration:line-through; }
.mu-wallet-check{
  width:24px; height:24px; min-width:24px; border-radius:50%;
  background:linear-gradient(135deg, var(--maroon), var(--red)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.mu-wallet-check svg{ width:12px; height:12px; }

.mu-terms-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; cursor:pointer; }
.mu-checkbox{
  width:23px; height:23px; min-width:23px; border-radius:50%; margin-top:1px;
  border:2px solid var(--border-soft); display:flex; align-items:center; justify-content:center;
  transition:background-color 0.12s ease, border-color 0.12s ease;
}
.mu-checkbox svg{ width:11px; height:11px; color:#fff; display:none; }
.mu-checkbox.checked{ background:linear-gradient(135deg, var(--maroon), var(--red)); border-color:transparent; }
.mu-checkbox.checked svg{ display:block; }
.mu-terms-text{ font-size:13.5px; color:var(--text-gray); line-height:1.55; }
.mu-terms-text a{ color:var(--red); font-weight:700; }

.mu-proceed-btn{
  width:100%; height:54px; border:none; border-radius:999px; cursor:not-allowed;
  background:var(--border-soft); color:var(--text-light-gray);
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:700;
  margin-bottom:20px; transition:transform 0.12s ease, filter 0.12s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mu-proceed-btn.enabled{
  cursor:pointer; color:#fff;
  background:linear-gradient(90deg,var(--maroon),var(--red));
  box-shadow:0 18px 38px -10px rgba(122,19,48,0.65);
}
.mu-proceed-btn.enabled:active{ transform:scale(0.98); filter:brightness(0.96); }

.mu-topup-link{
  display:flex; align-items:center; justify-content:center; gap:6px;
  text-align:center; font-size:14px; font-weight:700; color:var(--text-dark);
  margin-bottom:22px; cursor:pointer;
}
.mu-topup-link svg{ width:15px; height:15px; color:var(--text-light-gray); }

.mu-cancel-btn{
  width:100%; height:54px; border:none; border-radius:999px; cursor:pointer;
  background:var(--field-bg); color:var(--text-dark);
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:700;
  transition:transform 0.12s ease, filter 0.12s ease;
}
.mu-cancel-btn:active{ transform:scale(0.98); filter:brightness(0.97); }

/* ============================================================
   NGN BANK TRANSFER DEPOSIT (fund.php, scoped "bd-")
   ============================================================ */

.bd-trigger-card{ cursor:pointer; transition:transform 0.12s ease; }
.bd-trigger-card:active{ transform:scale(0.98); }

.bd-modal-overlay{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(20,8,12,0.55); backdrop-filter:blur(3px);
  align-items:flex-end; justify-content:center;
}
.bd-modal-overlay.open{ display:flex; }

.bd-modal{
  width:100%; max-width:459px; background:var(--card-bg);
  border-radius:28px 28px 0 0; padding:14px 0 24px;
  position:relative; max-height:90vh; overflow-y:auto;
  animation:bdSheetUp 0.22s ease-out;
  box-shadow:0 -20px 50px rgba(0,0,0,0.25);
}
@keyframes bdSheetUp{ from{ transform:translateY(24px); opacity:0.6; } to{ transform:translateY(0); opacity:1; } }

.bd-modal-handle{ width:40px; height:4px; border-radius:3px; background:var(--border-soft); margin:0 auto 10px; }

.bd-modal-head{
  padding:0 20px 12px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border-soft);
}
.bd-modal-title{ font-size:16px; font-weight:800; color:var(--text-dark); }
.bd-modal-close{
  width:30px; height:30px; border-radius:50%; background:var(--field-bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.bd-modal-close svg{ width:14px; height:14px; color:var(--text-gray); }

.bd-body{ padding:16px 20px 4px; }
.bd-label{ font-size:11.5px; font-weight:700; color:var(--text-gray); margin:0 0 8px; text-transform:uppercase; letter-spacing:.3px; }
.bd-label.bd-label-spaced{ margin-top:18px; }

.bd-amount-row{
  display:flex; align-items:center; gap:8px; background:var(--field-bg);
  border:1px solid var(--border-soft); border-radius:14px; padding:13px 14px;
}
.bd-amount-prefix{ font-size:15px; font-weight:700; color:var(--maroon); }
.bd-amount-row input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:700; color:var(--text-dark);
}
.bd-amount-row input::placeholder{ color:var(--text-light-gray); }
.bd-min-hint{ font-size:10.5px; color:var(--text-gray); margin-top:6px; }

.bd-bank-list{ max-height:260px; overflow-y:auto; margin-top:2px; border-top:1px solid var(--border-soft); }
.bd-bank-row{
  display:flex; align-items:center; gap:12px; padding:13px 2px; cursor:pointer;
  border-bottom:1px solid var(--border-soft);
}
.bd-bank-row:last-child{ border-bottom:none; }
.bd-bank-icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--you-row-bg); color:var(--maroon);
}
.bd-bank-icon svg{ width:17px; height:17px; }
.bd-bank-name{ flex:1; font-size:13.5px; font-weight:600; color:var(--text-dark); }
.bd-bank-radio{
  width:19px; height:19px; border-radius:50%; border:2px solid var(--border-soft);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.bd-bank-row.selected .bd-bank-radio{ border-color:var(--maroon); }
.bd-bank-row.selected .bd-bank-radio::after{
  content:''; width:10px; height:10px; border-radius:50%; background:var(--maroon);
}
.bd-bank-row.selected .bd-bank-name{ color:var(--maroon); }

.bd-msg{ font-size:11.5px; margin-top:10px; min-height:14px; }
.bd-msg.error{ color:#c0392b; }
.bd-msg.ok{ color:#12856A; }

.bd-submit-btn{
  width:100%; height:52px; border:none; border-radius:999px; cursor:not-allowed;
  background:var(--border-soft); color:var(--text-light-gray);
  font-family:'Poppins',sans-serif; font-size:15px; font-weight:700;
  margin-top:18px; margin-bottom:6px;
  transition:transform 0.12s ease, filter 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}
.bd-submit-btn:not(:disabled){
  cursor:pointer; color:#fff;
  background:linear-gradient(90deg,var(--maroon),var(--red));
  box-shadow:0 18px 38px -10px rgba(122,19,48,0.65);
}
.bd-submit-btn:not(:disabled):active{ transform:scale(0.98); filter:brightness(0.96); }

/* Account details (post-generation) */
.bd-acct-body{ padding:16px 20px 6px; }
.bd-loading{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 0; }
.bd-spinner{ width:32px; height:32px; border:3px solid var(--border-soft); border-top-color:var(--maroon); border-radius:50%; animation:bd-spin 0.7s linear infinite; }
@keyframes bd-spin{ to{ transform:rotate(360deg); } }
.bd-loading-text{ font-size:12px; color:var(--text-gray); }

.bd-acct-wrap{ text-align:center; padding:6px 0 4px; }
.bd-acct-bank{ font-size:12px; font-weight:600; color:var(--text-gray); margin-bottom:6px; }
.bd-acct-number{ font-size:24px; font-weight:800; color:var(--text-dark); letter-spacing:1px; margin-bottom:10px; }
.bd-acct-copy{
  display:inline-flex; align-items:center; gap:6px; background:var(--you-row-bg); color:var(--maroon);
  border-radius:20px; padding:8px 16px; font-size:12px; font-weight:700; cursor:pointer; margin-bottom:14px;
}
.bd-acct-copy svg{ width:14px; height:14px; }
.bd-acct-amount-row{ display:flex; justify-content:space-between; font-size:13px; padding:10px 0; border-top:1px dashed var(--border-soft); }
.bd-acct-amount-row span:first-child{ color:var(--text-gray); }
.bd-acct-amount-row span:last-child{ font-weight:700; color:var(--text-dark); }

.bd-timer-badge{
  display:inline-flex; align-items:center; gap:6px; background:#FEF3C7; color:#B45309;
  border-radius:10px; padding:7px 12px; font-size:11.5px; font-weight:700; margin:12px 0;
}
.bd-timer-badge svg{ width:13px; height:13px; }
.bd-timer-badge.bd-expired{ background:#FEE2E2; color:#B91C1C; }

.bd-status-row{
  display:flex; align-items:center; gap:9px; background:var(--field-bg);
  border-radius:12px; padding:11px 12px; font-size:11.5px; color:var(--text-gray);
}
.bd-status-dot{ width:8px; height:8px; border-radius:50%; background:#F5A623; flex-shrink:0; animation:bd-pulse 1.4s ease-in-out infinite; }
.bd-status-dot.confirmed{ background:#12B67F; animation:none; }
@keyframes bd-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

.bd-cancel-link{
  display:block; text-align:center; font-size:12px; font-weight:600; color:var(--text-gray);
  margin-top:14px; cursor:pointer; text-decoration:underline;
}

.bd-success-wrap{ text-align:center; padding:26px 0 10px; }
.bd-success-icon{ font-size:38px; margin-bottom:8px; }
.bd-success-title{ font-size:15px; font-weight:800; color:var(--text-dark); margin-bottom:4px; }
.bd-success-desc{ font-size:11.5px; color:var(--text-gray); }

.bd-toast{
  position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px);
  background:#1A1B25; color:#fff; padding:11px 18px; border-radius:12px;
  font-size:12.5px; font-weight:600; opacity:0; pointer-events:none;
  transition:all 0.3s ease; z-index:300; white-space:nowrap; max-width:88%; text-align:center;
}
.bd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.bd-toast.error{ background:#c0392b; }

/* ============================================================
   TOP-UP HISTORY ROWS (fund.php, scoped "hist-")
   ============================================================ */
.hist-row{
  display:flex; align-items:center; gap:12px; padding:12px 2px;
  border-bottom:1px solid var(--border-soft);
}
.hist-row:last-child{ border-bottom:none; }
.hist-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--you-row-bg); color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
}
.hist-icon svg{ width:16px; height:16px; }
.hist-body{ flex:1; min-width:0; }
.hist-title{ font-size:13.5px; font-weight:700; color:var(--text-dark); }
.hist-sub{ font-size:11px; color:var(--text-gray); margin-top:2px; }
.hist-right{ text-align:right; flex-shrink:0; }
.hist-amount{ font-size:13.5px; font-weight:700; color:var(--text-dark); }
.hist-status{ font-size:10px; font-weight:700; margin-top:3px; }
.hist-status-confirmed{ color:#12856A; }
.hist-status-pending{ color:#B45309; }
.hist-status-cancelled,
.hist-status-failed{ color:#B91C1C; }
  /* ============================================================
     Floxora - withdraw.php
     Uses the SAME maroon/red theme vars as dashboard.php/upgrade.php
     (body.page-dashboard in all.css). Only page-specific components
     below; no new color variables introduced.
     ============================================================ */

  /* Top banner (insufficient balance / errors) — same pattern as upgrade.php */
  .top-banner{
    position:fixed; top:0; left:0; right:0; z-index:200;
    display:flex; align-items:center; gap:10px;
    background:#FDECEE; border-bottom:1px solid rgba(210,31,60,0.25);
    padding:16px 18px; box-sizing:border-box;
    transform:translateY(-110%); transition:transform 0.32s cubic-bezier(0.34,1.2,0.64,1);
  }
  .top-banner.open{ transform:translateY(0); }
  html.dark .top-banner{ background:#3A1218; border-bottom-color:rgba(240,64,94,0.3); }
  .top-banner-icon{
    width:22px; height:22px; min-width:22px; border-radius:50%;
    background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  }
  .top-banner-icon svg{ width:12px; height:12px; }
  .top-banner-text{ font-size:15px; font-weight:700; color:var(--red); }

  /* Wallet toggle pill */
  .wallet-toggle{
    display:flex; gap:2px; background:var(--field-bg); border-radius:999px; padding:4px;
  }
  .wallet-opt{
    flex:1; text-align:center; padding:13px 10px; border-radius:999px; cursor:pointer;
    font-size:13.5px; font-weight:700; color:var(--text-gray);
    transition:color 0.15s ease;
  }
  .wallet-opt.active{
    color:#fff;
    background:linear-gradient(90deg,var(--maroon),var(--red));
    box-shadow:0 10px 22px -6px rgba(122,19,48,0.55);
  }

  /* Wallet card container */
  .wallet-card{ background:var(--card-bg); border-radius:26px; padding:18px; box-shadow:var(--shadow-card); }

  /* Amount row */
  .amt-row{ display:flex; align-items:baseline; justify-content:space-between; margin:20px 0 12px; gap:10px; }
  .amt-label{ font-size:14px; font-weight:500; color:var(--text-gray); }
  .amt-meta{ text-align:right; }
  .amt-balance{ font-size:14px; font-weight:700; color:var(--maroon); }
  .amt-min{ font-size:11.5px; color:var(--text-light-gray); margin-top:2px; }
  .amt-min s{ text-decoration:line-through; }

  .amt-field{
    display:flex; align-items:center; gap:8px;
    background:var(--field-bg); border:1.5px solid var(--border-soft);
    border-radius:16px; padding:0 8px 0 16px; height:64px;
  }
  .amt-field:focus-within{ border-color:var(--red); }
  .amt-field .naira{ font-size:20px; font-weight:700; color:var(--text-light-gray); }
  .amt-field input{
    flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-family:'Poppins',sans-serif; font-size:24px; font-weight:800; color:var(--text-dark);
  }
  .amt-field input::placeholder{ color:var(--text-light-gray); }
  .max-btn{
    background:#FBEEF0; color:var(--maroon); border:none; cursor:pointer;
    font-family:'Poppins',sans-serif; font-size:13px; font-weight:800; letter-spacing:0.2px;
    padding:9px 16px; border-radius:12px; flex-shrink:0;
  }
  html.dark .max-btn{ background:rgba(210,31,60,0.16); }

  .amt-sub-row{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; }
  .amt-sub-row .lbl{ color:var(--text-gray); }
  .amt-sub-row .val{ font-weight:700; }
  .amt-sub-row .val.fee{ color:var(--maroon); }
  .amt-sub-row .val.linked{ color:var(--maroon); }

  .btn-withdraw{
    width:100%; height:56px; margin-top:18px; border:none; border-radius:999px; cursor:pointer;
    font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:700; color:#fff;
    background:linear-gradient(90deg,var(--maroon),var(--red));
    box-shadow:0 20px 44px -10px rgba(122,19,48,0.7);
    transition:transform 0.12s ease, filter 0.12s ease;
  }
  .btn-withdraw:active{ transform:scale(0.98); filter:brightness(0.96); }

  /* No bank linked state */
  .nobank{ text-align:center; padding:30px 10px 6px; }
  .nobank-icon{
    width:88px; height:88px; border-radius:50%; background:#FBEEF0;
    display:flex; align-items:center; justify-content:center; margin:0 auto 20px; color:var(--maroon);
  }
  html.dark .nobank-icon{ background:rgba(210,31,60,0.16); }
  .nobank-icon svg{ width:34px; height:34px; }
  .nobank-title{ font-size:18px; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
  .nobank-sub{ font-size:13.5px; color:var(--text-gray); margin-bottom:24px; line-height:1.5; }

  /* Engagement wallet — withdrawals unavailable */
  .unavailable-banner{
    display:flex; gap:12px; align-items:flex-start;
    background:#FCEAEC; border-radius:20px; padding:16px;
  }
  html.dark .unavailable-banner{ background:rgba(240,64,94,0.14); }
  .unavailable-icon{
    width:30px; height:30px; min-width:30px; border-radius:50%; background:var(--red); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .unavailable-icon svg{ width:15px; height:15px; }
  .unavailable-title{ font-size:15px; font-weight:800; color:var(--red); margin-bottom:5px; }
  .unavailable-text{ font-size:13.5px; font-weight:500; color:var(--maroon); line-height:1.5; }

  /* Recent payouts card */
  .payouts-card{ background:var(--card-bg); border-radius:24px; padding:18px; box-shadow:var(--shadow-card2); }
  .payouts-head{ display:flex; justify-content:space-between; align-items:center; }
  .payouts-title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--text-dark); }
  .payouts-title-icon{
    width:22px; height:22px; border-radius:50%; background:#FBEEF0; color:var(--maroon);
    display:flex; align-items:center; justify-content:center;
  }
  html.dark .payouts-title-icon{ background:rgba(210,31,60,0.16); }
  .payouts-title-icon svg{ width:11px; height:11px; }
  .view-all{ font-size:13px; font-weight:700; color:var(--red); cursor:pointer; }

  /* Recent payouts — row list (mirrors .hist-row on fund.php) */
  .payouts-list{ margin-top:6px; }

  .payout-row{
    display:flex; align-items:center; gap:12px; padding:12px 2px;
    border-bottom:1px solid var(--border-soft);
  }
  .payout-row:last-child{ border-bottom:none; }

  .payout-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .payout-icon svg{ width:16px; height:16px; }
  .payout-icon-completed{ background:#E3F6EF; color:#12856A; }
  .payout-icon-failed{ background:#FBEAEA; color:#B91C1C; }
  .payout-icon-processing{ background:#FEF3C7; color:#B45309; }
  html.dark .payout-icon-completed{ background:rgba(18,182,127,0.16); }
  html.dark .payout-icon-failed{ background:rgba(217,45,45,0.18); }
  html.dark .payout-icon-processing{ background:rgba(245,166,35,0.16); }

  .payout-body{ flex:1; min-width:0; }
  .payout-amount{ font-size:14px; font-weight:700; color:var(--text-dark); }
  .payout-meta{ font-size:11.5px; color:var(--text-gray); margin-top:2px; }

  .payout-status{
    flex-shrink:0; font-size:10.5px; font-weight:700; padding:5px 11px;
    border-radius:999px; text-align:center; white-space:nowrap;
  }
  .payout-status-completed{ background:#E3F6EF; color:#12856A; }
  .payout-status-failed{ background:#FBEAEA; color:#B91C1C; }
  .payout-status-processing{ background:#FEF3C7; color:#B45309; }
  html.dark .payout-status-completed{ background:rgba(18,182,127,0.16); }
  html.dark .payout-status-failed{ background:rgba(217,45,45,0.18); }
  html.dark .payout-status-processing{ background:rgba(245,166,35,0.16); }

/* ============================================================
   Admin shell — sidebar layout for /admin pages
   (Overview, Users, Withdrawals, etc.)
   ============================================================ */
body.page-admin{ font-family:'Poppins',sans-serif; }
body.page-admin *, body.page-admin a, body.page-admin button{ -webkit-tap-highlight-color:transparent; }

.admin-shell{ display:flex; min-height:100vh; min-height:100dvh; width:100%; background:var(--page-bg); }

/* ---------- Mobile top bar ---------- */
.admin-mobile-header{
  display:none;
  align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; z-index:40;
}
.admin-mobile-header .brand{ display:flex; align-items:center; gap:8px; }
.admin-mobile-header .brand svg{ width:20px; height:20px; }
.admin-sidebar-toggle{
  background:transparent; border:none; font-size:19px; color:var(--text-dark);
  cursor:pointer; padding:6px 8px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Overlay (mobile drawer backdrop) ---------- */
.admin-sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(18,10,13,0.55); z-index:58; }
.admin-sidebar-overlay.active{ display:block; }

/* ---------- Sidebar ---------- */
.admin-sidebar{
  width:250px; flex-shrink:0;
  background:linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg2) 100%);
  color:#F5EDEF;
  padding:0 0 20px;
  overflow-y:auto;
}
.admin-sidebar-brand{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.admin-sidebar-brand .brand{ display:flex; align-items:center; gap:8px; }
.admin-sidebar-brand .brand svg{ width:22px; height:22px; }
.admin-sidebar-brand .brand-name{
  font-size:16px; font-weight:800; letter-spacing:-0.3px; color:#fff;
}
.admin-sidebar-close{
  display:none; background:transparent; border:none; color:rgba(255,255,255,0.8);
  font-size:17px; cursor:pointer; padding:4px 6px;
}

.admin-section-label{
  color:rgba(255,255,255,0.42); font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; margin:16px 16px 6px;
}
.admin-sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:9px 16px; margin:0 8px; border-radius:10px;
  color:rgba(255,255,255,0.78); font-size:13.5px; font-weight:500;
}
.admin-sidebar nav a i{ width:16px; text-align:center; font-size:13px; color:rgba(255,255,255,0.55); }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active{
  background:rgba(255,255,255,0.10); color:#fff; text-decoration:none;
}
.admin-sidebar nav a.active i{ color:var(--red); }
.admin-sidebar nav a.admin-logout{ color:#F3B4BE; }
.admin-sidebar nav a.admin-logout i{ color:#F3B4BE; }

/* ---------- Main content ---------- */
.admin-main{ flex:1; min-width:0; width:100%; }
.admin-content{ padding:24px; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; gap:12px; flex-wrap:wrap;
}
.admin-topbar h1{ font-size:20px; font-weight:800; color:var(--text-dark); margin:0; }
.admin-topbar .sub{ font-size:12px; color:var(--text-gray); }

/* ---------- Stat cards ---------- */
.admin-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:14px; margin-bottom:24px;
}
.admin-card{
  background:var(--card-bg); border-radius:18px; padding:14px 14px;
  box-shadow:var(--shadow-card); border:1px solid var(--border-soft);
  display:flex; align-items:center; gap:10px;
}
.admin-card .admin-card-icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(122,19,48,0.10); color:var(--maroon); font-size:15px;
}
.admin-card .admin-card-body{ min-width:0; }
.admin-card .lbl{ color:var(--text-gray); font-size:9.5px; font-weight:500; line-height:1.2; }
.admin-card .val{ font-size:15px; font-weight:800; color:var(--text-dark); margin-top:2px; white-space:nowrap; }
.admin-card.admin-card-warn .admin-card-icon{ background:rgba(217,119,6,0.14); color:#B45309; }
html.dark .admin-card.admin-card-warn .admin-card-icon{ background:rgba(245,166,35,0.16); color:#F5A623; }

@media (max-width: 991px){
  .admin-shell{ flex-direction:column; }
  .admin-mobile-header{ display:flex; }
  .admin-sidebar{
    position:fixed; top:0; left:-270px; width:250px; height:100vh; height:100dvh;
    z-index:59; transition:left 0.25s ease-in-out; box-shadow:6px 0 24px rgba(0,0,0,0.25);
  }
  .admin-sidebar.active{ left:0; }
  .admin-sidebar-close{ display:flex; }
  .admin-content{ padding:16px; }
  .admin-cards{ grid-template-columns:repeat(auto-fit, minmax(145px,1fr)); gap:10px; }
  
  /* Mobile card tweaks to prevent text overflow */
  .admin-card{ padding:12px 10px; gap:8px; }
  .admin-card .admin-card-icon{ width:34px; height:34px; font-size:14px; }
  .admin-card .val{ font-size:13.5px; }
}

/* ---------- Admin data tables (users, deposits, withdrawals, etc.) ---------- */
.admin-table-wrap{
  background:var(--card-bg); border-radius:18px;
  box-shadow:var(--shadow-card); border:1px solid var(--border-soft);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.admin-table{ width:100%; min-width:640px; border-collapse:collapse; font-size:13px; }
.admin-table th{
  background:rgba(122,19,48,0.05); padding:11px 14px; text-align:left;
  font-weight:600; color:var(--text-gray); font-size:11px;
  text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;
}
.admin-table td{
  padding:11px 14px; border-top:1px solid var(--border-soft);
  color:var(--text-dark); vertical-align:top; white-space:nowrap;
}
.admin-table td:nth-child(2){ white-space:normal; min-width:170px; }
.admin-table tr:hover td{ background:rgba(122,19,48,0.03); }
html.dark .admin-table th{ background:rgba(255,255,255,0.04); }
html.dark .admin-table tr:hover td{ background:rgba(255,255,255,0.03); }

@media (max-width: 991px){
  .admin-table-wrap{ border-radius:14px; }
  .admin-table{ font-size:12.5px; }
  .admin-table th, .admin-table td{ padding:9px 12px; }
}


/* ============================================================
   Admin login — standalone centered card (admin_login.php)
   ============================================================ */
.admin-login-wrap{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--page-bg);
}
.admin-login-card{
  width:100%; max-width:380px;
  background:var(--card-bg);
  border-radius:24px;
  box-shadow:var(--shadow-card);
  padding:32px 28px;
}
.admin-login-brand{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:22px;
}
.admin-login-brand svg{ width:24px; height:24px; }
.admin-login-brand .brand-name{
  font-size:19px; font-weight:800; letter-spacing:-0.3px;
  background:linear-gradient(90deg,var(--maroon),var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.admin-login-title{ font-size:19px; font-weight:800; color:var(--text-dark); text-align:center; margin-bottom:4px; }
.admin-login-sub{ font-size:12.5px; color:var(--text-gray); text-align:center; margin-bottom:24px; }

/* ---------- Join Community modal (dashboard) ---------- */
.jc-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(20,10,13,0.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  font-family:'Poppins',sans-serif;
}
.jc-modal{
  position:relative;
  width:100%; max-width:340px;
  background:var(--card-bg);
  border-radius:28px;
  padding:36px 26px 28px;
  box-shadow:0 30px 70px -12px rgba(0,0,0,0.45);
  text-align:center;
  animation:jc-pop .25s ease;
}
@keyframes jc-pop{
  from{ opacity:0; transform:translateY(10px) scale(0.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.jc-close{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:50%;
  background:var(--border-soft);
  color:var(--text-gray);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.jc-icon-wrap{
  width:70px; height:70px; border-radius:50%;
  background:rgba(210,31,60,0.14);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.jc-icon-wrap svg{ width:32px; height:32px; }
.jc-title{ font-size:20px; font-weight:800; color:var(--text-dark); margin-bottom:8px; }
.jc-sub{ font-size:13px; color:var(--text-gray); line-height:1.5; margin-bottom:24px; }
.jc-btn{
  display:block; width:100%; height:50px; line-height:50px;
  border-radius:999px; border:none; cursor:pointer;
  font-family:'Poppins',sans-serif; font-size:14.5px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,var(--maroon),var(--red));
  box-shadow:0 16px 32px -8px rgba(122,19,48,0.6);
}