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

:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #DBEAFE;
  --primary-ultra: #EFF6FF;
  --accent: #F97316;
  --accent-light: #FFF7ED;
  --green: #16A34A;
  --green-light: #DCFCE7;
  --red: #DC2626;
  --red-light: #FEE2E2;
  --yellow: #D97706;
  --yellow-light: #FEF3C7;
  --purple: #7C3AED;
  --teal: #0D9488;
  --white: #FFFFFF;
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --text: #0F172A;
  --text-2: #334155;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --border-2: #CBD5E1;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 16px rgba(37,99,235,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(37,99,235,.12), 0 2px 8px rgba(0,0,0,.06);
  --shadow-blue: 0 4px 20px rgba(37,99,235,.25);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
button { font-family:'Inter',sans-serif; cursor:pointer; }

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.navbar {
  position:fixed; top:0; width:100%; z-index:300;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:62px;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.navbar-brand {
  font-size:1.15rem; font-weight:800; color:var(--primary);
  display:flex; align-items:center; gap:6px; letter-spacing:-.3px;
}
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-link { color:var(--text-muted); font-size:.85rem; font-weight:500; transition:color .2s; }
.nav-link:hover { color:var(--primary); }
.nav-link.danger { color:var(--red); }
.btn-nav {
  background:var(--primary); color:#fff;
  padding:.42rem 1.1rem; border-radius:20px;
  font-weight:700; font-size:.82rem; border:none;
  transition:background .2s, transform .15s;
}
.btn-nav:hover { background:var(--primary-dark); transform:translateY(-1px); }
.nav-balance {
  background:var(--green-light); color:var(--green);
  padding:.35rem .9rem; border-radius:20px;
  font-size:.82rem; font-weight:700; border:1px solid rgba(22,163,74,.15);
}
.page-content { padding-top:62px; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:.7rem 1.6rem; border-radius:50px; font-weight:700;
  font-size:.9rem; border:none; cursor:pointer;
  transition:all .2s; text-align:center; line-height:1;
}
.btn-primary { background:var(--primary); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 6px 24px rgba(37,99,235,.35); }
.btn-accent { background:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(249,115,22,.3); }
.btn-accent:hover { transform:translateY(-2px); }
.btn-outline { background:#fff; border:2px solid var(--primary); color:var(--primary); box-shadow:var(--shadow-sm); }
.btn-outline:hover { background:var(--primary-ultra); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { opacity:.9; }
.btn-red { background:var(--red); color:#fff; }
.btn-white { background:#fff; color:var(--primary); box-shadow:var(--shadow); }
.btn-sm { padding:.38rem .9rem; font-size:.78rem; border-radius:20px; }
.btn-full { width:100%; border-radius:var(--radius-sm); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  min-height:90vh;
  background:linear-gradient(160deg, #EFF6FF 0%, #DBEAFE 40%, #EDE9FE 80%, #F0FDF4 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px 60px;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-100px; right:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 70%);
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute; bottom:-80px; left:-80px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,58,237,.06) 0%, transparent 70%);
  pointer-events:none;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:var(--primary);
  border:1px solid var(--primary-light);
  border-radius:50px; padding:.4rem 1.1rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.04em; margin-bottom:1.2rem;
  box-shadow:var(--shadow-sm);
}
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }
.hero h1 {
  font-size:clamp(2rem,5vw,3.6rem); font-weight:900;
  line-height:1.12; color:var(--text); margin-bottom:.8rem;
  letter-spacing:-.5px;
}
.hero h1 .highlight { color:var(--primary); }
.hero p { color:var(--text-muted); font-size:1rem; max-width:500px; margin:0 auto 2rem; line-height:1.7; }
.hero-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.trust-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:2rem; }
.trust-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; border:1px solid var(--border);
  border-radius:50px; padding:.38rem .9rem;
  font-size:.75rem; font-weight:600; color:var(--text-2);
  box-shadow:var(--shadow-sm);
}

/* ═══════════════════════════════════════
   STATS BAR
═══════════════════════════════════════ */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.stat-box { padding:1.3rem 1rem; text-align:center; border-right:1px solid var(--border); }
.stat-box:last-child { border-right:none; }
.stat-num { font-size:1.4rem; font-weight:800; color:var(--primary); }
.stat-lbl { color:var(--text-muted); font-size:.72rem; margin-top:.2rem; font-weight:500; }

/* ═══════════════════════════════════════
   SECTIONS
═══════════════════════════════════════ */
.section { padding:64px 24px; }
.section-white { background:#fff; }
.section-gray { background:#F8FAFC; }
.section-blue { background:linear-gradient(135deg,#EFF6FF,#E0EFFE); }
.section-header { text-align:center; margin-bottom:2.5rem; }
.eyebrow { color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.5rem; display:block; }
.section-header h2 { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; color:var(--text); letter-spacing:-.3px; }
.section-header p { color:var(--text-muted); margin-top:.5rem; font-size:.9rem; }

/* ═══════════════════════════════════════
   PLAN CARDS — Professional Style
═══════════════════════════════════════ */
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; max-width:1100px; margin:0 auto; }

.plan-card {
  background:#fff; border-radius:var(--radius-lg);
  border:2px solid var(--border); overflow:hidden;
  position:relative; box-shadow:var(--shadow);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.plan-card:hover { transform:translateY(-5px); border-color:var(--primary); box-shadow:var(--shadow-lg); }
.plan-card.featured { border-color:var(--primary); box-shadow:var(--shadow-lg); }

/* Card Header Strip */
.plan-strip {
  height:6px;
  background:linear-gradient(90deg, var(--primary), var(--purple));
}
.plan-strip.green { background:linear-gradient(90deg, var(--teal), var(--green)); }
.plan-strip.orange { background:linear-gradient(90deg, var(--accent), #EF4444); }
.plan-strip.purple { background:linear-gradient(90deg, var(--purple), #EC4899); }

.plan-head { padding:16px 18px 12px; display:flex; align-items:center; justify-content:space-between; }
.plan-head-left { display:flex; align-items:center; gap:11px; }
.plan-icon-circle {
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.plan-head-name { font-size:1rem; font-weight:800; color:var(--text); }
.plan-head-sub { font-size:.72rem; color:var(--text-muted); margin-top:2px; }
.plan-head-wifi { color:var(--accent); font-size:1.1rem; }

.plan-pill-badge {
  position:absolute; top:14px; right:14px;
  background:var(--accent); color:#fff;
  font-size:.62rem; font-weight:800;
  padding:.2rem .6rem; border-radius:20px;
  text-transform:uppercase; letter-spacing:.05em;
}

/* Investment Amount Box */
.plan-amount-box {
  margin:0 16px 12px;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius:14px; padding:14px 16px; color:#fff; position:relative; overflow:hidden;
}
.plan-amount-box::after {
  content:''; position:absolute; top:-20px; right:-20px;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.plan-amount-box.green { background:linear-gradient(135deg, var(--teal), var(--green)); }
.plan-amount-box.orange { background:linear-gradient(135deg, var(--accent), #DC2626); }
.plan-amount-box.purple { background:linear-gradient(135deg, var(--purple), #7C3AED); }
.plan-amount-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.8; margin-bottom:4px; }
.plan-amount-val { font-size:1.8rem; font-weight:900; letter-spacing:-.5px; }
.plan-amount-range { font-size:.75rem; opacity:.75; margin-top:2px; }

/* 2x2 Stats Grid */
.plan-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 12px; }
.plan-stat {
  background:var(--bg); border-radius:10px; padding:10px 12px;
  border:1px solid var(--border);
}
.plan-stat-lbl { font-size:.65rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.plan-stat-val { font-size:.92rem; font-weight:800; color:var(--text); }
.plan-stat-val.green { color:var(--green); }
.plan-stat-val.blue { color:var(--primary); }
.plan-stat-val.orange { color:var(--accent); }
.plan-stat-val.purple { color:var(--purple); }

.plan-btn-wrap { padding:4px 16px 16px; }
.plan-invest-btn {
  width:100%; padding:.8rem; border-radius:12px; border:none;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; font-weight:800; font-size:.95rem;
  cursor:pointer; letter-spacing:.03em;
  transition:all .2s; box-shadow:0 4px 12px rgba(37,99,235,.3);
}
.plan-invest-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,.4); }
.plan-invest-btn.orange { background:linear-gradient(135deg, var(--accent), #DC2626); box-shadow:0 4px 12px rgba(249,115,22,.3); }
.plan-invest-btn.green { background:linear-gradient(135deg, var(--teal), var(--green)); box-shadow:0 4px 12px rgba(13,148,136,.3); }
.plan-invest-btn.purple { background:linear-gradient(135deg, var(--purple), #6D28D9); box-shadow:0 4px 12px rgba(124,58,237,.3); }

/* Filter Tabs */
.filter-tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.filter-tab {
  padding:.4rem 1.1rem; border-radius:20px; font-size:.8rem; font-weight:600;
  cursor:pointer; border:2px solid var(--border);
  color:var(--text-muted); background:#fff; transition:all .2s;
}
.filter-tab.active, .filter-tab:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-ultra); }

/* ═══════════════════════════════════════
   QUICK ACTIONS (Icon Buttons)
═══════════════════════════════════════ */
.quick-actions-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;
}
.qa-card {
  border-radius:16px; padding:18px 12px 14px; text-align:center;
  cursor:pointer; border:none; transition:all .2s; display:block;
  box-shadow:var(--shadow);
}
.qa-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.qa-card.blue { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; }
.qa-card.orange { background:linear-gradient(135deg, var(--accent), #DC2626); color:#fff; }
.qa-card.teal { background:linear-gradient(135deg, var(--teal), var(--green)); color:#fff; }
.qa-icon-wrap { width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:1.3rem; }
.qa-label { font-size:.8rem; font-weight:700; }

/* Services Grid */
.services-section { background:#fff; border-radius:var(--radius-lg); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); border:1px solid var(--border); }
.services-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.services-section-title { font-size:.95rem; font-weight:800; color:var(--text); }
.services-section-sub { font-size:.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.services-grid-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.svc-item {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 4px; border-radius:12px; border:1px solid var(--border);
  cursor:pointer; transition:all .2s; background:#fff;
}
.svc-item:hover { border-color:var(--primary); background:var(--primary-ultra); }
.svc-icon { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.svc-name { font-size:.62rem; font-weight:600; color:var(--text-muted); text-align:center; line-height:1.2; }

/* ═══════════════════════════════════════
   GENERAL CARDS
═══════════════════════════════════════ */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.card-title { font-size:.92rem; font-weight:700; color:var(--text); }

/* Metric Cards */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.metric-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); }
.metric-label { font-size:.67rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.metric-value { font-size:1.4rem; font-weight:800; color:var(--text); letter-spacing:-.3px; }
.metric-value.blue { color:var(--primary); }
.metric-value.green { color:var(--green); }
.metric-value.red { color:var(--red); }
.metric-value.orange { color:var(--accent); }
.metric-sub { font-size:.7rem; color:var(--text-muted); margin-top:3px; }

/* ═══════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════ */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--text); border-radius:20px 20px 0 0;
  padding:10px 16px 6px;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
.bn-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px; color:#94A3B8; text-decoration:none; }
.bn-item.active { color:#fff; }
.bn-icon { font-size:1.15rem; line-height:1; }
.bn-label { font-size:.6rem; font-weight:600; }
.bn-plus {
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #DC2626);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:#fff; margin-top:-16px;
  box-shadow:0 4px 16px rgba(249,115,22,.5);
}

/* ═══════════════════════════════════════
   TABLE
═══════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; background:#fff; }
th { padding:.8rem 1rem; font-size:.7rem; text-align:left; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid var(--border); background:#F8FAFC; }
td { padding:.82rem 1rem; font-size:.84rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#F8FAFC; }

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge { display:inline-block; padding:.2rem .62rem; border-radius:20px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.badge-pending  { background:var(--yellow-light); color:var(--yellow); border:1px solid rgba(217,119,6,.15); }
.badge-approved { background:var(--green-light);  color:var(--green);  border:1px solid rgba(22,163,74,.15); }
.badge-rejected { background:var(--red-light);    color:var(--red);    border:1px solid rgba(220,38,38,.15); }
.badge-active   { background:var(--primary-light); color:var(--primary); border:1px solid rgba(37,99,235,.15); }
.badge-completed{ background:#F1F5F9; color:#64748B; }

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-group { margin-bottom:14px; }
label { display:block; font-size:.82rem; font-weight:600; color:var(--text-2); margin-bottom:5px; }
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
input[type="number"],select,textarea {
  width:100%; background:#F8FAFC; border:2px solid var(--border);
  border-radius:10px; padding:.68rem 1rem; color:var(--text);
  font-size:.88rem; font-family:'Inter',sans-serif; transition:all .2s;
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:.73rem; color:var(--text-muted); margin-top:4px; }

/* ═══════════════════════════════════════
   AUTH
═══════════════════════════════════════ */
.auth-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; background:linear-gradient(135deg,#EFF6FF 0%,#E0EFFE 50%,#EDE9FE 100%);
}
.auth-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.2rem; width:100%; max-width:420px; box-shadow:var(--shadow-lg); }
.auth-logo { text-align:center; margin-bottom:1.5rem; }
.auth-logo-icon { font-size:2.5rem; display:block; margin-bottom:6px; }
.auth-card h2 { font-size:1.4rem; font-weight:800; margin-bottom:4px; text-align:center; }
.auth-card p { color:var(--text-muted); font-size:.86rem; margin-bottom:1.5rem; text-align:center; }
.form-link { color:var(--primary); font-weight:600; }

/* ═══════════════════════════════════════
   ALERTS
═══════════════════════════════════════ */
.alert { padding:.82rem 1rem; border-radius:10px; font-size:.86rem; margin-bottom:12px; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.alert-success { background:var(--green-light); border:1px solid rgba(22,163,74,.2); color:#14532D; }
.alert-danger  { background:var(--red-light);   border:1px solid rgba(220,38,38,.2);  color:#7F1D1D; }
.alert-info    { background:var(--primary-light);border:1px solid rgba(37,99,235,.2);  color:#1E3A8A; }
.alert-warning { background:var(--yellow-light); border:1px solid rgba(217,119,6,.2);  color:#78350F; }

/* ═══════════════════════════════════════
   PROGRESS
═══════════════════════════════════════ */
.progress-bar-wrap { background:var(--border); border-radius:50px; height:6px; margin-top:5px; overflow:hidden; }
.progress-bar-fill { height:6px; border-radius:50px; background:linear-gradient(90deg,var(--primary),var(--purple)); transition:width .6s; }

/* ═══════════════════════════════════════
   CLAIM WIDGET
═══════════════════════════════════════ */
.claim-widget {
  background:linear-gradient(135deg,#EFF6FF,#EDE9FE);
  border:2px solid rgba(37,99,235,.12);
  border-radius:var(--radius-lg); padding:20px; text-align:center;
}
.claim-days { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:12px 0; }
.claim-day {
  width:46px; height:58px; border-radius:11px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px solid var(--border); font-size:.68rem; color:var(--text-muted); background:#fff;
  transition:all .2s;
}
.claim-day.active-day { border-color:var(--primary); background:var(--primary-ultra); color:var(--primary); font-weight:700; box-shadow:0 4px 12px rgba(37,99,235,.2); }
.claim-day.done-day { background:var(--green-light); border-color:rgba(22,163,74,.3); color:var(--green); }
.claim-day .day-num { font-weight:800; font-size:.78rem; }
.claim-day .day-amt { font-size:.63rem; margin-top:2px; }
.claim-amount-big { font-size:2.4rem; font-weight:900; color:var(--primary); letter-spacing:-.5px; }

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.page-header { background:#fff; border-bottom:1px solid var(--border); padding:16px 24px; }
.page-header h1 { font-size:1.4rem; font-weight:800; color:var(--text); }
.page-header p { color:var(--text-muted); font-size:.85rem; margin-top:3px; }

/* ═══════════════════════════════════════
   INVESTMENT CARDS
═══════════════════════════════════════ */
.inv-card { background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:10px; box-shadow:var(--shadow-sm); transition:border-color .2s; }
.inv-card:hover { border-color:var(--primary); }
.inv-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.inv-plan { font-weight:800; font-size:.95rem; }
.inv-details { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; }
.inv-detail-lbl { color:var(--text-muted); display:block; font-size:.67rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.inv-detail-val { font-weight:700; font-size:.85rem; color:var(--text); }

/* Referral */
.ref-link-box { background:var(--bg); border:2px solid var(--border); border-radius:10px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:.8rem; word-break:break-all; gap:10px; }
.copy-btn { font-size:.72rem; background:var(--primary-light); border:none; color:var(--primary); padding:.25rem .7rem; border-radius:8px; cursor:pointer; font-weight:700; white-space:nowrap; }

/* Payment info */
.payment-info-box { background:var(--primary-ultra); border:2px solid rgba(37,99,235,.15); border-radius:12px; padding:14px; margin-bottom:14px; }
.acc-label { font-size:.68rem; color:var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.acc-num { font-size:1.15rem; font-weight:800; color:var(--primary-dark); margin-top:3px; }

/* Connect Buttons */
.connect-btn { display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; font-weight:700; font-size:.88rem; cursor:pointer; border:none; transition:all .2s; color:#fff; }
.connect-btn:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.connect-wa    { background:#25D366; }
.connect-admin { background:#128C7E; }
.connect-tg    { background:#2AABEE; }

/* ═══════════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════════ */
.admin-sidebar { position:fixed; left:0; top:0; bottom:0; width:220px; background:#0F172A; padding:0; z-index:100; overflow-y:auto; }
.admin-logo { padding:20px 18px; font-size:1rem; font-weight:800; color:var(--primary); display:flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,.06); }
.admin-nav a { display:flex; align-items:center; gap:9px; padding:11px 18px; color:#94A3B8; font-size:.84rem; font-weight:500; transition:all .2s; border-left:3px solid transparent; }
.admin-nav a:hover, .admin-nav a.active { color:#fff; background:rgba(37,99,235,.15); border-left-color:var(--primary); }
.admin-main { margin-left:220px; padding:24px; min-height:100vh; background:var(--bg); }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.admin-topbar h1 { font-size:1.3rem; font-weight:800; color:var(--text); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer { background:#0F172A; padding:40px 24px 24px; text-align:center; margin-bottom:62px; }
.footer-brand { font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:10px; }
.footer-links { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.footer-links a { color:#64748B; font-size:.8rem; transition:color .2s; }
.footer-links a:hover { color:#fff; }
.footer-warning { background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.15); color:#FCA5A5; font-size:.73rem; border-radius:8px; padding:10px 14px; max-width:580px; margin:0 auto 12px; line-height:1.6; }
.footer-copy { color:#475569; font-size:.73rem; }

/* ═══════════════════════════════════════
   DASHBOARD HERO
═══════════════════════════════════════ */
.dash-hero {
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--purple) 100%);
  color:#fff; padding:20px 20px 50px; position:relative; overflow:hidden;
}
.dash-hero::after {
  content:''; position:absolute; top:-40px; right:-40px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.dash-balance-card {
  background:#fff; border-radius:var(--radius-lg);
  padding:18px; margin:0 16px; margin-top:-30px;
  box-shadow:var(--shadow-lg); position:relative; z-index:10;
  border:1px solid var(--border);
}
.dash-balance-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; }
.dash-bal-item { text-align:center; padding:4px; }
.dash-bal-item + .dash-bal-item { border-left:1px solid var(--border); }
.dash-bal-label { font-size:.63rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:4px; }
.dash-bal-val { font-size:1.15rem; font-weight:900; letter-spacing:-.3px; }
.dash-bal-val.blue { color:var(--primary); }
.dash-bal-val.green { color:var(--green); }
.dash-bal-val.orange { color:var(--accent); }

/* Tx Row */
.tx-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.tx-row:last-child { border-bottom:none; }
.tx-icon-wrap { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.tx-info { flex:1; padding:0 10px; }
.tx-name { font-weight:600; font-size:.86rem; }
.tx-time { font-size:.7rem; color:var(--text-muted); margin-top:1px; }
.tx-amount { font-weight:800; font-size:.9rem; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:768px) {
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:repeat(2,1fr); }
  .admin-sidebar { display:none; }
  .admin-main { margin-left:0; }
  .bottom-nav { display:grid; }
  .site-footer { margin-bottom:70px; }
  .plans-grid { grid-template-columns:1fr; }
  .section { padding:48px 16px; }
  .navbar { padding:0 16px; }
}
@media(max-width:480px) {
  .hero h1 { font-size:1.9rem; }
  .stat-num { font-size:1.2rem; }
  .services-grid-inner { grid-template-columns:repeat(4,1fr); }
}

/* ── EXTRA MOBILE FIXES ── */
@media(max-width:600px){
  .plan-stats { grid-template-columns:1fr 1fr; }
  .dash-balance-grid { grid-template-columns:1fr 1fr 1fr; }
  .dash-bal-val { font-size:.95rem; }
  table { font-size:.78rem; }
  th,td { padding:.6rem .7rem; }
  .admin-topbar { flex-direction:column; align-items:flex-start; }
  .quick-actions-row { gap:8px; }
  .qa-card { padding:14px 8px 12px; }
  .services-grid-inner { grid-template-columns:repeat(4,1fr); gap:6px; }
  .svc-icon { width:36px; height:36px; font-size:.9rem; }
  .svc-name { font-size:.58rem; }
  .page-header { padding:14px 16px; }
  .page-header h1 { font-size:1.2rem; }
  .btn-full { font-size:.88rem; padding:.72rem; }
  .plan-amount-val { font-size:1.5rem; }
  .plan-head-name { font-size:.92rem; }
  .card { padding:14px; border-radius:14px; }
  .section { padding:40px 14px; }
}

/* ── NOTIFICATION BELL ── */
.notif-bell {
  position:relative; display:inline-flex; align-items:center;
  font-size:1.2rem; cursor:pointer; text-decoration:none;
  padding:4px 6px; border-radius:10px; transition:background .2s;
}
.notif-bell:hover { background:var(--primary-light); }
.notif-count {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff;
  font-size:.6rem; font-weight:800;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}