/* ═══════════════════════════════════════════════════════
   MLM Network — Main Stylesheet  (Mobile-App Card Style)
   ═══════════════════════════════════════════════════════ */

:root {
  --primary:    #6c3483;
  --primary-d:  #5b2c6f;
  --secondary:  #e74c3c;
  --accent:     #f39c12;
  --gold:       #f1c40f;
  --success:    #27ae60;
  --dark:       #1a0a2e;
  --dark2:      #2d0a4e;
  --card-bg:    #fff;
  --body-bg:    #f4f6fb;
  --text:       #333;
  --muted:      #777;
  --border:     #e0e0e0;
  --radius:     14px;
  --shadow:     0 4px 24px rgba(108,52,131,.10);
  --shadow-md:  0 8px 32px rgba(108,52,131,.16);
  --transition: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--body-bg);
  color: var(--text);
  font-size: 15px;
  margin: 0;
}

/* ── Topbar ── */
.topbar {
  background: var(--dark);
  color: rgba(255,255,255,.7);
  font-size: 12px;
  padding: 4px 0;
}

/* ── Navbar ── */
.main-navbar {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary-d) 100%);
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
  padding: 10px 0;
}
.main-navbar .navbar-brand { font-size: 1.3rem; color: #fff !important; }
.main-navbar .nav-link { color: rgba(255,255,255,.85) !important; font-weight: 500; transition: var(--transition); padding: 6px 14px !important; border-radius: 8px; }
.main-navbar .nav-link:hover, .main-navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.15); }
.logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg,var(--primary),var(--accent)); border-radius: 10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }

/* ── Hero Slider ── */
.hero-slider { position: relative; overflow: hidden; }
.swiper-hero { height: 480px; }
.swiper-hero .swiper-slide { position: relative; }
.swiper-hero .slide-img { width: 100%; height: 100%; object-fit: cover; }
.slide-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(26,10,46,.7) 0%,rgba(108,52,131,.5) 100%); display:flex; align-items:center; }
.slide-content { color: #fff; padding: 0 20px; max-width: 600px; }
.slide-content h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.slide-content p { font-size: 1.1rem; opacity: .9; }
.swiper-pagination-bullet { background: rgba(255,255,255,.5) !important; }
.swiper-pagination-bullet-active { background: var(--accent) !important; }
@media (max-width:768px) { .swiper-hero { height: 260px; } .slide-content h1 { font-size: 1.4rem; } .slide-content p { font-size:.9rem; } }

/* ── Banners ── */
.banners-section { padding: 30px 0 10px; }
.banner-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; position: relative; }
.banner-card img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s ease; }
.banner-card:hover img { transform: scale(1.04); }
.banner-card .banner-overlay { position:absolute;inset:0;background:linear-gradient(to right,rgba(26,10,46,.5),transparent); display:flex;align-items:center;padding:20px; }
.banner-card .banner-overlay span { color:#fff;font-size:1.3rem;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.3); }

/* ── Section headings ── */
.section-title { text-align:center; margin-bottom:40px; }
.section-title h2 { font-size:2rem; font-weight:800; color:var(--dark); position:relative; display:inline-block; }
.section-title h2::after { content:''; display:block; width:60px; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:4px; margin:10px auto 0; }
.section-title p { color:var(--muted); margin-top:10px; }

/* ── Cards ── */
.card { border:none; border-radius: var(--radius); box-shadow: var(--shadow); transition: var(--transition); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-header { border-radius: var(--radius) var(--radius) 0 0 !important; border: none; }

/* ── Stat Cards ── */
.stat-card { border-radius: var(--radius); padding: 20px; color: #fff; position: relative; overflow: hidden; }
.stat-card .stat-icon { position:absolute;right:16px;top:16px;font-size:2.5rem;opacity:.25; }
.stat-card h3 { font-size:1.8rem;font-weight:800;margin:0; }
.stat-card p { margin:0;opacity:.9;font-size:.9rem; }
.bg-gradient-primary   { background: linear-gradient(135deg,var(--primary),#9b59b6); }
.bg-gradient-success   { background: linear-gradient(135deg,#27ae60,#2ecc71); }
.bg-gradient-warning   { background: linear-gradient(135deg,#e67e22,var(--accent)); }
.bg-gradient-danger    { background: linear-gradient(135deg,var(--secondary),#e91e63); }
.bg-gradient-info      { background: linear-gradient(135deg,#2980b9,#3498db); }
.bg-gradient-dark      { background: linear-gradient(135deg,var(--dark),var(--dark2)); }

/* ── About Section ── */
.about-section { background: #fff; padding: 60px 0; }
.about-icon-box { width:70px;height:70px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px; }

/* ── Plan / Rank Cards ── */
.rank-card { border-radius: var(--radius); padding: 24px 20px; text-align:center; background:#fff; box-shadow: var(--shadow); transition: var(--transition); border-top:4px solid var(--primary); }
.rank-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-top-color: var(--accent); }
.rank-icon { width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin:0 auto 14px; }
.rank-badge { display:inline-block;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-radius:20px;padding:3px 14px;font-size:12px;font-weight:700;margin-bottom:8px; }

/* ── Contact Form ── */
.contact-section { background: linear-gradient(135deg,var(--dark) 0%,var(--dark2) 100%); padding:60px 0; color:#fff; }
.contact-form-card { background:rgba(255,255,255,.07);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px; }
.contact-form-card .form-control, .contact-form-card .form-select { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px; }
.contact-form-card .form-control::placeholder { color:rgba(255,255,255,.5); }
.contact-form-card .form-control:focus { background:rgba(255,255,255,.15);border-color:var(--accent);box-shadow:0 0 0 3px rgba(243,156,18,.2);color:#fff; }
.contact-info-item { display:flex;align-items:flex-start;gap:16px;margin-bottom:24px; }
.contact-icon { width:50px;height:50px;background:rgba(243,156,18,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:20px;flex-shrink:0; }

/* ── Footer ── */
.main-footer { background: var(--dark); color: rgba(255,255,255,.8); }
.footer-heading { color: #fff; font-weight:700; margin-bottom:16px; position:relative; padding-bottom:10px; }
.footer-heading::after { content:'';display:block;width:30px;height:3px;background:var(--accent);position:absolute;bottom:0;left:0;border-radius:2px; }
.footer-links { margin:0;padding:0; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:rgba(255,255,255,.7);text-decoration:none;transition:var(--transition); }
.footer-links a:hover { color:var(--accent); padding-left:6px; }
.footer-divider { border-color:rgba(255,255,255,.1); }
.social-btn { width:36px;height:36px;background:rgba(255,255,255,.1);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:var(--transition); }
.social-btn:hover { background:var(--primary);color:#fff; }

/* ── Auth Pages (login/register) ── */
.auth-page { min-height:100vh;background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 50%,var(--primary-d) 100%);display:flex;align-items:center;padding:20px 0; }
.auth-card { background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;max-width:480px;width:100%; }
.auth-header { background:linear-gradient(135deg,var(--primary),var(--accent));padding:30px;text-align:center;color:#fff; }
.auth-header .auth-logo { width:70px;height:70px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px; }
.auth-body { padding:30px; }
.form-floating .form-control { border-radius:10px;border-color:var(--border); }
.form-floating .form-control:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,52,131,.15); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--accent));border:none;border-radius:10px;font-weight:600;transition:var(--transition); }
.btn-primary:hover { background:linear-gradient(135deg,var(--primary-d),#e67e22);transform:translateY(-1px);box-shadow:0 4px 12px rgba(108,52,131,.3); }
.btn-outline-primary { border-color:var(--primary);color:var(--primary);border-radius:10px; }
.btn-outline-primary:hover { background:var(--primary);border-color:var(--primary); }

/* ── User Dashboard ── */
.user-layout { display:flex;min-height:100vh; }
.user-sidebar { width:260px;background:linear-gradient(180deg,var(--dark) 0%,var(--dark2) 100%);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:1000;transition:var(--transition); }
.user-sidebar.collapsed { width:70px; }
.user-main { margin-left:260px;flex:1;background:var(--body-bg);transition:var(--transition); }
.user-sidebar.collapsed ~ .user-main { margin-left:70px; }
@media (max-width:991px) { .user-sidebar { transform:translateX(-100%); } .user-sidebar.open { transform:translateX(0); } .user-main { margin-left:0 !important; } }

.sidebar-brand { padding:20px;display:flex;align-items:center;gap:12px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-brand .brand-icon { width:42px;height:42px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.sidebar-brand .brand-text { font-weight:700;font-size:1.1rem;white-space:nowrap; }

.sidebar-user { padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:10px; }
.sidebar-user .user-avatar { width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0; }
.sidebar-user .user-info { overflow:hidden; }
.sidebar-user .user-name { color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sidebar-user .user-id { color:rgba(255,255,255,.5);font-size:.78rem; }

.sidebar-nav { list-style:none;padding:0 10px;margin:0; }
.sidebar-nav li { margin-bottom:4px; }
.sidebar-nav a { display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.7);text-decoration:none;padding:10px 14px;border-radius:10px;transition:var(--transition);font-size:.92rem; }
.sidebar-nav a:hover, .sidebar-nav a.active { background:rgba(255,255,255,.12);color:#fff; }
.sidebar-nav a .nav-icon { width:20px;text-align:center;font-size:15px;flex-shrink:0; }
.sidebar-nav .nav-text { white-space:nowrap; }
.sidebar-nav li .badge { margin-left:auto; }

.user-topbar { background:#fff;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.08);position:sticky;top:0;z-index:100; }
.user-topbar .toggle-btn { background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer; }
.user-content { padding:24px; }
.page-header { margin-bottom:24px; }
.page-header h4 { font-weight:700;color:var(--dark);margin:0; }

/* ── Wallet Card ── */
.wallet-card { background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius);padding:24px;color:#fff;position:relative;overflow:hidden; }
.wallet-card::before { content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:rgba(255,255,255,.1);border-radius:50%; }
.wallet-card .wallet-balance { font-size:2.5rem;font-weight:800;line-height:1; }
.wallet-card .wallet-label { opacity:.8;font-size:.85rem;margin-top:4px; }

/* ── Transaction Table ── */
.transaction-badge.credit { background:rgba(39,174,96,.15);color:#27ae60;border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:600; }
.transaction-badge.debit  { background:rgba(231,76,60,.15);color:#e74c3c;border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:600; }

/* ── Tree View ── */
.tree-wrap { overflow:auto; padding:10px; }
.tree-list { list-style:none;padding-left:30px;border-left:2px solid var(--border);margin:0; }
.tree-list:first-child { padding-left:0;border-left:none; }
.tree-list > li { position:relative;padding:8px 0; }
.tree-list > li::before { content:'';position:absolute;left:-30px;top:20px;width:28px;height:2px;background:var(--border); }
.tree-node { display:inline-flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--border);border-radius:12px;padding:8px 14px;cursor:default;transition:var(--transition);box-shadow:0 2px 8px rgba(0,0,0,.06); }
.tree-node.active { border-color:var(--success); }
.tree-node.inactive { border-color:#f39c12;opacity:.75; }
.tree-node:hover { box-shadow:var(--shadow-md); }
.tree-avatar { width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0; }
.tree-info { display:flex;flex-direction:column;gap:2px; }
.tree-name { font-weight:600;font-size:.88rem;color:var(--dark); }
.tree-id { font-size:.75rem;color:var(--muted); }
.tree-rank { font-size:.72rem;color:var(--primary);font-weight:600; }

/* ── Pin Cards ── */
.pin-card { background:#fff;border-radius:12px;border:2px dashed var(--border);padding:16px;text-align:center;transition:var(--transition); }
.pin-card.used { opacity:.5;background:#f8f8f8; }
.pin-code { font-family:monospace;font-size:1rem;font-weight:700;color:var(--primary);letter-spacing:1px;word-break:break-all; }

/* ── Upgrade Modal Alert ── */
.upgrade-alert { background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-radius:var(--radius);padding:20px;margin-bottom:20px; }
.upgrade-alert .upgrade-title { font-size:1.1rem;font-weight:700;margin-bottom:6px; }

/* ── Admin/User Page Header ── */
.page-header { margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #eee; }
.page-header h4 { font-size:1.4rem;font-weight:800;margin:0; }

/* ── Admin Panel ── */
.admin-sidebar { width:260px;background:linear-gradient(180deg,#1a0a2e 0%,#2d0a4e 100%);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:1000;transition:var(--transition); }
.admin-main { margin-left:260px;min-height:100vh;background:#f0f2f5;transition:var(--transition); }
@media (max-width:991px) { .admin-sidebar { transform:translateX(-100%); } .admin-sidebar.open { transform:translateX(0); } .admin-main { margin-left:0 !important; } }
.admin-topbar { background:#fff;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.08);position:sticky;top:0;z-index:100; }
.admin-content { padding:24px; }

/* ── Tables ── */
.table-card { background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden; }
.table-card .table { margin:0; }
.table thead th { background:linear-gradient(135deg,var(--dark),var(--dark2));color:#fff;font-weight:600;font-size:.83rem;text-transform:uppercase;letter-spacing:.5px;border:none;padding:12px 16px; }
.table tbody td { padding:12px 16px;vertical-align:middle;border-color:#f0f0f0;font-size:.9rem; }
.table tbody tr:hover { background:#fafbff; }

/* ── Badges / Tags ── */
.status-active   { background:rgba(39,174,96,.12);color:#27ae60;border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:600; }
.status-inactive { background:rgba(243,156,18,.12);color:#e67e22;border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:600; }
.status-blocked  { background:rgba(231,76,60,.12);color:#e74c3c;border-radius:20px;padding:3px 10px;font-size:.78rem;font-weight:600; }

/* ── Forms ── */
.form-control, .form-select { border-radius:10px;border-color:var(--border);font-size:.9rem; }
.form-control:focus, .form-select:focus { border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,52,131,.12); }
.form-label { font-weight:600;font-size:.85rem;color:#555; }

/* ── Buttons ── */
.btn { border-radius:10px;font-weight:600;transition:var(--transition); }
.btn-sm { border-radius:8px;font-size:.8rem; }
.btn-warning { background:linear-gradient(135deg,#e67e22,var(--accent));border:none;color:#fff; }
.btn-warning:hover { background:linear-gradient(135deg,#d35400,#e67e22);color:#fff; }
.btn-success { background:linear-gradient(135deg,#27ae60,#2ecc71);border:none; }
.btn-danger  { background:linear-gradient(135deg,#c0392b,var(--secondary));border:none; }

/* ── Misc ── */
.section-pad { padding:60px 0; }
.divider { height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;margin:0; }
.glass-card { background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius); }
.highlight { color:var(--accent);font-weight:700; }
.text-primary { color:var(--primary) !important; }
.bg-primary   { background:var(--primary) !important; }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999; }
@media (max-width:991px) { .sidebar-overlay.show { display:block; } }

/* ── Dynamic page banner ── */
.page-hero { background:linear-gradient(135deg,var(--dark),var(--primary-d));padding:60px 0 40px;color:#fff;text-align:center;position:relative;overflow:hidden; }
.page-hero::before { content:'';position:absolute;inset:0;opacity:.15;background-size:cover;background-position:center; }
.page-hero h1 { font-size:2.5rem;font-weight:800;position:relative; }
.page-hero p { opacity:.8;position:relative; }
.page-hero-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25; }
.breadcrumb-item a { color:rgba(255,255,255,.7); }
.breadcrumb-item.active { color:#fff; }
.breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.5); }

/* Income table highlight */
.table-plan tr:nth-child(3) td,
.table-plan tr:nth-child(6) td,
.table-plan tr:nth-child(9) td,
.table-plan tr:nth-child(12) td,
.table-plan tr:nth-child(15) td,
.table-plan tr:nth-child(18) td { background:linear-gradient(90deg,rgba(108,52,131,.08),rgba(243,156,18,.08));font-weight:700; }

/* Scrollbar */
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:#f0f0f0;border-radius:4px; }
::-webkit-scrollbar-thumb { background:var(--primary);border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary-d); }

/* animations */
@keyframes fadeInUp { from { opacity:0;transform:translateY(20px); } to { opacity:1;transform:translateY(0); } }
.fade-in-up { animation:fadeInUp .5s ease forwards; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.pulse { animation:pulse 2s infinite; }

/* Mobile tweaks */
@media (max-width:576px) {
  .user-content, .admin-content { padding:14px; }
  .wallet-card .wallet-balance { font-size:2rem; }
  .slide-content h1 { font-size:1.2rem; }
  .section-pad { padding:40px 0; }
  .section-title h2 { font-size:1.5rem; }
}

/* ══════════════════════════════════════════
   MOBILE APP HOMEPAGE STYLES
   ══════════════════════════════════════════ */

/* ── Slider: clean, no overlay ── */
.slide-default-bg {
  height: 100%;
  background: linear-gradient(135deg, #1a0a2e 0%, #6c3483 60%, #f39c12 100%);
}
@media (max-width: 576px) {
  .swiper-hero { height: 200px; }
}
@media (min-width: 577px) and (max-width: 768px) {
  .swiper-hero { height: 280px; }
}

/* ── Hero CTA Section ── */
.hero-cta {
  background: linear-gradient(135deg, var(--primary-d) 0%, var(--primary) 50%, #8e44ad 100%);
  padding: 26px 0 22px;
  position: relative;
  overflow: hidden;
}
.hero-cta::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
}
.hero-cta-inner { text-align: center; color: #fff; position: relative; }
.hero-cta-title {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.hero-cta-sub {
  font-size: .95rem;
  opacity: .9;
  margin-bottom: 20px;
}
.hero-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-btn-join {
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 18px rgba(243,156,18,.45);
  letter-spacing: .3px;
}
.hero-btn-plan {
  border-radius: 50px !important;
  padding: 12px 26px !important;
  font-size: 1rem !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
}
.hero-btn-plan:hover { background: rgba(255,255,255,.15) !important; }

@media (max-width: 480px) {
  .hero-cta-title { font-size: 1.3rem; }
  .hero-cta-btns { flex-direction: column; align-items: stretch; padding: 0 20px; }
  .hero-btn-join, .hero-btn-plan { width: 100%; justify-content: center; }
}

/* ── Banner placeholder (when no image uploaded) ── */
.banner-placeholder {
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: var(--radius);
  text-align: center;
  padding: 10px;
  font-size: .9rem;
}
.banner-card img { height: 160px; }
@media (max-width: 576px) {
  .banners-section { padding: 14px 0 6px; }
  .banner-card img { height: 120px; }
  .banner-placeholder { height: 120px; font-size: .8rem; }
}

/* ── Rank Cards: horizontal scroll on mobile ── */
.rank-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin: 0 -4px;
}
.rank-scroll-wrap::-webkit-scrollbar { height: 3px; }
.rank-scroll-wrap::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
@media (max-width: 767px) {
  .rank-scroll-inner { flex-wrap: nowrap !important; padding: 4px; }
  .rank-scroll-item { min-width: 160px; flex-shrink: 0; }
}

/* ── Mobile Bottom Navigation ── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: stretch;
  z-index: 1050;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 2px 6px;
  color: #999;
  text-decoration: none;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2px;
  transition: var(--transition);
  gap: 3px;
}
.mobile-bottom-nav a i { font-size: 19px; }
.mobile-bottom-nav a.active { color: var(--primary); }
.mobile-bottom-nav a:hover { color: var(--primary); }
.mobile-bottom-nav a.mobile-nav-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 14px 14px 0 0;
  margin: 0 4px;
  padding: 10px 6px 6px;
  box-shadow: 0 -4px 16px rgba(108,52,131,.3);
  font-size: .65rem;
}
.mobile-bottom-nav a.mobile-nav-cta:hover { color: #fff; }
.mobile-bottom-nav a.mobile-nav-cta i { font-size: 20px; }

/* body padding so content doesn't hide behind bottom nav */
@media (max-width: 991px) {
  body { padding-bottom: 68px; }
}

/* ── Quick Stats section: mobile app style ── */
@media (max-width: 576px) {
  .section-pad { padding: 32px 0; }
  .section-title h2 { font-size: 1.4rem; }
  .section-title { margin-bottom: 24px; }
}