/* ═══════════════════════════════════════════════════
   LIANGMAI — style-additions.css (COMPLETE)
   All frontend styles — self-contained
   ═══════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;}
html,body{margin:0;padding:0;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#F1F5F9;color:#1E293B;min-height:100vh;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* ── PAGE WRAP ───────────────────────────── */
.page-wrap{max-width:480px;margin:0 auto;min-height:100vh;background:#F1F5F9;position:relative;}
@media (min-width:900px){
  body{background:linear-gradient(135deg,#EEF2FF,#E0E7FF);}
  .page-wrap{box-shadow:0 0 70px rgba(30,41,59,.12);}
}
@media (min-width:900px){
  html.dark-mode body{background:linear-gradient(135deg,#050505,#0A0A0A);}
  html.dark-mode .page-wrap{box-shadow:0 0 70px rgba(0,0,0,.6);}
}

/* ── NAVBAR ──────────────────────────────── */
.navbar{background:#fff;border-bottom:1px solid #E2E8F0;position:sticky;top:0;z-index:200;}
.navbar-inner{display:flex;align-items:center;gap:10px;padding:10px 14px;height:58px;}
.hamburger-btn{background:#0F172A;border:none;border-radius:10px;width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex-shrink:0;padding:9px;}
.hamburger-btn span{display:block;width:20px;height:2.5px;background:#fff;border-radius:2px;}
.nav-logo-icon{width:34px;height:34px;background:#0F172A;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900;flex-shrink:0;}
.nav-brand-text{font-size:16px;font-weight:900;color:#1E293B;letter-spacing:.5px;flex:1;}
.login-pill{background:#2563EB;color:#fff;font-size:13px;font-weight:700;padding:8px 18px;border-radius:24px;flex-shrink:0;}
.avatar-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3B82F6,#1D4ED8);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0;}

/* ── BANNER ──────────────────────────────── */
.banner-wrap{padding:14px 16px 0;}
.banner-slider{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.1);}
.banner-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.banner-slide{min-width:100%;flex-shrink:0;min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px 24px;position:relative;overflow:hidden;}
.banner-slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.banner-slide-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:1;}
.banner-slide-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.banner-emoji{font-size:46px;margin-bottom:10px;display:block;}
.banner-title{font-size:22px;font-weight:900;color:#fff;margin-bottom:6px;}
.banner-sub{font-size:13px;color:rgba(255,255,255,.9);margin-bottom:16px;}
.banner-btn{background:rgba(255,255,255,.95);color:#1D4ED8;font-weight:800;font-size:13px;padding:10px 26px;border-radius:24px;text-decoration:none;display:inline-block;}
.banner-dots{display:flex;justify-content:center;gap:6px;padding:12px 0 2px;}
.banner-dot{width:6px;height:6px;border-radius:50%;background:#CBD5E1;cursor:pointer;transition:all .3s;}
.banner-dot.active{background:#2563EB;width:20px;border-radius:4px;}

/* ── QUICK ACTIONS ───────────────────────── */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;}
.quick-action{background:#fff;border-radius:16px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 1px 3px rgba(15,23,42,.06);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}
.quick-action:hover,.quick-action:active{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(37,99,235,.35),0 8px 18px rgba(37,99,235,.18);}
.quick-action-icon{width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.08),inset 0 0 0 1px #EEF2F7;display:flex;align-items:center;justify-content:center;color:#2563EB;transition:box-shadow .15s ease;}
.quick-action-icon svg{width:24px;height:24px;}
.quick-action:hover .quick-action-icon,.quick-action:active .quick-action-icon{box-shadow:0 0 0 2px rgba(37,99,235,.45),0 4px 10px rgba(37,99,235,.2);}
.quick-action-label{font-size:11px;font-weight:700;color:#1E293B;text-align:center;margin:0;}

/* ── SECTION HEADER ──────────────────────── */
.section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px;}
.section-title-group{display:flex;align-items:center;gap:10px;}
.section-icon-badge{width:42px;height:42px;border-radius:12px;background:#EFF6FF;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.section-title{font-size:16px;font-weight:800;color:#1E293B;margin:0;}
.section-subtitle{font-size:11px;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.5px;margin:0;}
.live-clock{font-size:12px;font-weight:700;color:#2563EB;background:#EFF6FF;padding:5px 10px;border-radius:20px;}

/* ── GAME GRID ───────────────────────────── */
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 80px;}
.game-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.07);text-decoration:none;display:block;}
.game-card-img{height:96px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.game-card-badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:800;padding:2px 7px;border-radius:6px;color:#fff;text-transform:uppercase;background:rgba(0,0,0,.4);}
.game-card-body{padding:9px 8px 11px;text-align:center;}
.game-card-title{font-size:12px;font-weight:800;color:#1E293B;margin-bottom:4px;line-height:1.2;min-height:28px;display:flex;align-items:center;justify-content:center;}
.game-card-btn{background:#EFF6FF;color:#2563EB;font-size:10px;font-weight:800;padding:6px 4px;border-radius:18px;display:block;}

/* ── BOTTOM NAV ──────────────────────────── */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid #E2E8F0;display:flex;align-items:center;justify-content:space-around;padding:8px 0 14px;z-index:150;}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;text-decoration:none;padding:4px 0;}
.bottom-nav-icon{font-size:20px;}
.bottom-nav-label{font-size:10px;font-weight:700;color:#94A3B8;}
.bottom-nav-item.active .bottom-nav-label{color:#2563EB;}
.bottom-nav-center{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#3B82F6,#1D4ED8);display:flex;align-items:center;justify-content:center;font-size:22px;margin-top:-22px;box-shadow:0 4px 14px rgba(37,99,235,.35);flex-shrink:0;}

/* ── MENU OVERLAY ────────────────────────── */
.menu-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:400;opacity:0;pointer-events:none;transition:opacity .3s;}
.menu-overlay.open{opacity:1;pointer-events:all;}

/* ── SIDE MENU ───────────────────────────── */
.side-menu{position:fixed;top:0;left:0;bottom:0;width:290px;background:#fff;z-index:500;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:8px 0 30px rgba(0,0,0,.15);}
.side-menu.open{transform:translateX(0);}
.side-menu-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 16px;border-bottom:1px solid #F1F5F9;}
.side-menu-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#3B82F6,#1D4ED8);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;flex-shrink:0;}
.side-menu-welcome-label{font-size:11px;color:#94A3B8;font-weight:600;margin:0 0 2px;}
.side-menu-welcome-name{font-size:16px;font-weight:800;color:#1E293B;margin:0;}
.menu-close-btn{background:#F1F5F9;border:none;width:32px;height:32px;border-radius:9px;font-size:16px;color:#64748B;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.side-menu-nav{padding:6px 10px 4px;}
.side-menu-item{display:flex;align-items:center;gap:14px;padding:11px 10px;border-radius:14px;color:#1E293B;font-size:14.5px;font-weight:700;text-decoration:none;margin-bottom:2px;background:transparent;transition:background .15s;}
.side-menu-item:active{background:rgba(124,58,237,.08);}
.side-menu-item.active{background:rgba(124,58,237,.08);}
.side-menu-item-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#C026D3,#7C3AED);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 3px 10px rgba(124,58,237,.3);}
.side-menu-item-chevron{margin-left:auto;color:#CBD5E1;font-size:16px;}

/* Wallet card */
.side-menu-wallet-card{display:flex;align-items:center;gap:12px;padding:14px;margin:10px 16px 6px;border-radius:16px;background:#F8FAFC;border:1px solid #E2E8F0;}
.side-menu-wallet-icon{width:42px;height:42px;border-radius:11px;background:#E2E8F0;color:#475569;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.side-menu-wallet-info{flex:1;min-width:0;}
.side-menu-wallet-label{font-size:12px;color:#64748B;font-weight:600;margin:0;}
.side-menu-wallet-amt{font-size:17px;font-weight:800;color:#1E293B;margin:2px 0 0;}
.side-menu-wallet-btn{flex-shrink:0;background:linear-gradient(135deg,#C026D3,#7C3AED);color:#fff;font-size:12px;font-weight:800;padding:9px 14px;border-radius:20px;text-decoration:none;white-space:nowrap;box-shadow:0 3px 10px rgba(124,58,237,.3);}

/* Guest promo */
.side-menu-promo{padding:22px 20px 24px;}
.side-menu-promo-emoji{font-size:32px;margin-bottom:8px;}
.side-menu-promo-title{font-size:21px;font-weight:900;background:linear-gradient(135deg,#C026D3,#7C3AED);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0 0 10px;}
.side-menu-promo-desc{font-size:13.5px;color:#64748B;margin:0 0 22px;line-height:1.5;}
.side-menu-promo-bullet{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:13.5px;font-weight:600;color:#1E293B;}
.side-menu-promo-bullet-icon{width:28px;height:28px;border-radius:50%;background:rgba(124,58,237,.10);color:#7C3AED;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.side-menu-promo-btn-free{display:block;box-sizing:border-box;background:#1E293B;color:#fff;font-weight:800;font-size:14px;padding:14px;border-radius:14px;text-align:center;text-decoration:none;margin-bottom:12px;}
.side-menu-promo-btn-google{display:block;box-sizing:border-box;background:linear-gradient(135deg,#C026D3,#7C3AED);color:#fff;font-weight:800;font-size:14px;padding:14px;border-radius:14px;text-align:center;text-decoration:none;box-shadow:0 6px 18px rgba(124,58,237,.35);}

.side-menu-quick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;margin:8px 0;}
.side-menu-quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;border-radius:14px;background:linear-gradient(135deg,#3B82F6,#1D4ED8);text-decoration:none;box-shadow:0 4px 14px rgba(37,99,235,.28);}
.side-menu-quick-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:16px;}
.side-menu-quick-label{font-size:10.5px;font-weight:800;color:#fff;text-align:center;}
.dash-qa{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;background:linear-gradient(135deg,#3B82F6,#1D4ED8);border-radius:14px;padding:14px 6px;box-shadow:0 4px 14px rgba(37,99,235,.28);transition:transform .15s;}
.dash-qa:active{transform:scale(.96);}
.dash-qa-icon{font-size:22px;}
.dash-qa-label{font-size:11px;font-weight:800;color:#fff;}
.side-menu-section-label{font-size:11px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:.6px;padding:12px 22px 4px;}

/* ── SHARED DARK SHIMMER BANNER ─────────────
   Same look used on the leaderboard's "🏆 TOP RANKING" header - reusable
   anywhere a matching dark banner headline is needed (e.g. home page). */
.banner-dark-shimmer-font{font-family:'Orbitron',sans-serif;letter-spacing:1px;}
.banner-dark-shimmer{position:relative;overflow:hidden;border-radius:18px;padding:16px 20px;text-align:center;margin:16px 16px 20px;background:linear-gradient(135deg,#1E293B,#0F172A);border:1px solid #2A2A2A;text-decoration:none;display:block;}
.banner-dark-shimmer::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(226,232,240,.55) 48%,rgba(255,255,255,.9) 50%,rgba(226,232,240,.55) 52%,transparent 70%);background-size:250% 250%;animation:bdsSweep 5s ease-in-out infinite;}
@keyframes bdsSweep{0%{background-position:120% -20%;}45%{background-position:-20% 120%;}55%{background-position:-20% 120%;}100%{background-position:120% -20%;}}
.banner-dark-shimmer-text{position:relative;z-index:1;color:#F8FAFC;font-size:15px;font-weight:800;}

/* ── WALLET BALANCE SHIMMER ──────────────────
   Same 6s left-to-right sweep as the leaderboard podium, running inside
   the card fill (not on the border), used behind the balance amount. */
.wallet-balance-card{position:relative;overflow:hidden;}
.wallet-balance-card::after{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,transparent,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%,transparent);background-size:250% 100%;animation:bdsSweep2 6s linear infinite;pointer-events:none;}
@keyframes bdsSweep2{0%{background-position:120% 0;}100%{background-position:-120% 0;}}
.wallet-balance-card>*{position:relative;z-index:1;}

/* ── CENTERED SECTION HEADER (reusable) ──────
   For full centered headline+description sections like "Why Choose Us".
   Different pattern from .section-header (which is left-aligned with an
   icon badge, used for horizontal list headers like Popular Games). */
.center-section-title{font-size:21px;font-weight:900;color:#1E293B;text-align:center;margin-bottom:8px;}
.center-section-desc{font-size:13px;color:#64748B;text-align:center;line-height:1.6;max-width:340px;margin:0 auto 24px;}

/* ── WHY CHOOSE US - FEATURE CARDS ────────────
   .card never existed anywhere in the stylesheet before, so these
   rendered with zero box styling at all. Every card (including any new
   one an admin adds via store_features) gets this treatment automatically
   since it comes from a foreach loop, not individual markup. */
.wc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.wc-card{background:#fff;border:1px solid #E5E9F2;border-radius:18px;padding:24px 16px;text-align:center;box-shadow:0 1px 4px rgba(15,23,42,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.wc-card:hover{transform:translateY(-3px);border-color:#BFDBFE;box-shadow:0 0 0 3px rgba(37,99,235,.12),0 10px 22px rgba(37,99,235,.15);}
.wc-card-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:16px;background:linear-gradient(135deg,#EFF6FF,#DCEAFE);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:inset 0 0 0 1px rgba(37,99,235,.12);transition:transform .2s ease;}
.wc-card:hover .wc-card-icon{transform:scale(1.08);}
.wc-card-title{font-size:14px;font-weight:800;color:#1E293B;margin-bottom:6px;line-height:1.3;}
.wc-card-desc{font-size:12px;color:#64748B;line-height:1.6;}

/* ── THEME TOGGLE BUTTON ──────────────────── */
.theme-toggle-btn{width:36px;height:36px;border-radius:50%;background:#F1F5F9;border:1px solid #E2E8F0;display:flex;align-items:center;justify-content:center;color:#1E293B;flex-shrink:0;cursor:pointer;margin-right:2px;transition:background .2s ease;}
.theme-toggle-btn svg{width:19px;height:19px;}
.theme-toggle-btn:hover{background:#E2E8F0;}

/* ══════════════════════════════════════════════════════════════
   DARK MODE
   Scope: swap white/light backgrounds to dark surfaces only.
   Untouched on purpose: gradients, button colors, badge colors,
   icon stroke colors, brand colors, shimmer effects.
   Loose text that sat directly on a white/light background is
   flipped to a light color so it stays readable; text that already
   sits inside a colored button/badge is left exactly as it was.
   ══════════════════════════════════════════════════════════════ */
html.dark-mode body{background:#000000;color:#E2E8F0;}

/* Top navbar */
html.dark-mode .navbar{background:#0A0A0A;border-bottom-color:#1A1A1A;}
html.dark-mode .nav-brand-text{color:#F1F5F9;}
html.dark-mode .theme-toggle-btn{background:#1A1A1A;border-color:#2A2A2A;color:#F1F5F9;}
html.dark-mode .theme-toggle-btn:hover{background:#2A2A2A;}

/* Bottom floating nav (frosted white pill -> dark pill; button colors
   and the active blue circle are untouched) */
html.dark-mode .float-nav{background:rgba(17,24,39,.92);border-color:rgba(51,65,85,.6);}
html.dark-mode .fn-label{color:#94A3B8;}

/* Section headers */
html.dark-mode .section-title,
html.dark-mode .center-section-title{color:#F1F5F9;}
html.dark-mode .section-subtitle,
html.dark-mode .center-section-desc{color:#94A3B8;}
html.dark-mode .section-icon-badge{background:#1A1A1A;}

/* Quick action tiles (white -> dark surface) */
html.dark-mode .quick-action{background:#0A0A0A;box-shadow:0 1px 3px rgba(0,0,0,.4);}
html.dark-mode .quick-action-icon{background:#1A1A1A;box-shadow:inset 0 0 0 1px #2A2A2A;}
html.dark-mode .quick-action-label{color:#E2E8F0;}

/* Why Choose Us cards */
html.dark-mode .wc-card{background:#0A0A0A;border-color:#1A1A1A;}
html.dark-mode .wc-card-title{color:#F1F5F9;}
html.dark-mode .wc-card-desc{color:#94A3B8;}
html.dark-mode .wc-card-icon{background:linear-gradient(135deg,#1A1A1A,#0A0A0A);box-shadow:inset 0 0 0 1px #2A2A2A;}

/* Game / product cards (image + button colors untouched) */
html.dark-mode .game-card{background:#0A0A0A;box-shadow:0 1px 3px rgba(0,0,0,.4);}
html.dark-mode .game-card-title{color:#F1F5F9;}

/* Leaderboard - plain text only; medal/shimmer gradients untouched
   since those are intentional RGB colors, not backgrounds */
html.dark-mode .lb-pname{color:#F1F5F9;}
html.dark-mode .lb-row{background:linear-gradient(180deg,#161F2E,#0A0A0A);border-color:#1A1A1A;}
html.dark-mode .lb-row-name{color:#F1F5F9;}
html.dark-mode .lb-row-rank{color:#94A3B8;}

/* Wallet page plain text sitting on the page background (not the blue
   balance card itself, which already has its own intentional colors) */
html.dark-mode .wbal-sub{color:#CBD5E1;}
html.dark-mode .page-wrap{background:#000000;}

/* ── DARK MODE, EXPANDED COVERAGE ─────────────
   Orders, Wallet, Shop/game page, side menu, login/register.
   Same rule as before: only backgrounds swap; button/badge/icon
   colors are untouched; plain text on a swapped background flips
   to a light color for readability. */

/* Orders page */
html.dark-mode .card{background:#0A0A0A;border-color:#1A1A1A;}
html.dark-mode .order-card{background:#0A0A0A;}
html.dark-mode .order-row{border-color:#1A1A1A;}
html.dark-mode .order-key{color:#94A3B8;}
html.dark-mode .order-val{color:#F1F5F9;}
html.dark-mode h1,html.dark-mode h2.section-title{color:#F1F5F9;}

/* Wallet page - Add Money box + Transaction history (the blue balance
   card already has its own intentional gradient, untouched) */
html.dark-mode .add-money-section{background:#0A0A0A;}
html.dark-mode .am-title{color:#F1F5F9;}
html.dark-mode .amount-chip{background:#1A1A1A;border-color:#2A2A2A;}
html.dark-mode .amount-inp-label{color:#94A3B8;}
html.dark-mode .amount-inp{background:#000000;border-color:#2A2A2A;color:#F1F5F9;}
html.dark-mode .txn-card{background:#0A0A0A;}
html.dark-mode .txn-text{color:#F1F5F9;}
html.dark-mode .txn-title{color:#F1F5F9;}

/* Shop / game order page */
html.dark-mode .section-box{background:#0A0A0A;border-color:#1A1A1A;}
html.dark-mode .section-label{color:#94A3B8;}
html.dark-mode .inp-f{background:#000000;border-color:#2A2A2A;color:#F1F5F9;}

/* Side menu drawer */
html.dark-mode .side-menu{background:#0A0A0A;box-shadow:8px 0 30px rgba(0,0,0,.5);}
html.dark-mode .side-menu-header{border-color:#1A1A1A;}
html.dark-mode .side-menu-welcome-name{color:#F1F5F9;}
html.dark-mode .menu-close-btn{background:#1A1A1A;color:#94A3B8;}
html.dark-mode .side-menu-item{color:#F1F5F9;}
html.dark-mode .side-menu-item:active,html.dark-mode .side-menu-item.active{background:rgba(168,85,247,.14);}
html.dark-mode .side-menu-item-chevron{color:#475569;}
html.dark-mode .side-menu-wallet-card{background:#0A0A0A;border-color:#1A1A1A;}
html.dark-mode .side-menu-wallet-icon{background:#1A1A1A;color:#E2E8F0;}
html.dark-mode .side-menu-wallet-label{color:#94A3B8;}
html.dark-mode .side-menu-wallet-amt{color:#F1F5F9;}
html.dark-mode .side-menu-promo-desc{color:#94A3B8;}
html.dark-mode .side-menu-promo-bullet{color:#F1F5F9;}
html.dark-mode .side-menu-promo-bullet-icon{background:rgba(168,85,247,.16);}
html.dark-mode .side-menu-promo-btn-free{background:#1A1A1A;}
html.dark-mode .side-menu-section-label{color:#64748B;}
html.dark-mode .menu-close-btn{background:#1A1A1A;color:#F1F5F9;}

/* Login / Register pages */
html.dark-mode .auth-wrap{background:linear-gradient(180deg,#000000 0%,#0F172A 35%);}
html.dark-mode .auth-card{background:#0A0A0A;box-shadow:0 20px 60px rgba(0,0,0,.5);}

/* ── SITE-WIDE SCROLL REVEAL ────────────────────────────────────────────
   Cards, section headers, and buttons fade + rise into place on first
   paint and as the user scrolls them into view. See the reveal script
   at the bottom of includes/footer.php for the JS that toggles
   .reveal-show. */
.reveal-init{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal-init.reveal-show{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity:1; transform:none; transition:none; }
}