/* ===== css/styles.css ===== */
/* ===================== TOKENS — HBBATTLE unified theme (matches Admin Panel) ===================== */
:root {
  --red:       #FF2E43;
  --red-dark:  #D41B30;
  --red-glow:  rgba(255,46,67,0.35);
  --red-soft:  rgba(255,46,67,0.08);
  --blue:      #ff6a39;
  --blue-glow: rgba(255,106,57,0.35);
  --blue-soft: rgba(255,106,57,0.08);
  --gold:      #FFB627;
  --gold-glow: rgba(255,182,39,0.40);
  --gold-soft: rgba(255,182,39,0.14);
  --white:     #FFFFFF;
  --off-white: #F8F6F0;
  --surface:   #FFFFFF;
  --border:    #ECE3CE;
  --text:      #171A21;
  --text2:     #5C6472;
  --text3:     #6B7684;
  --success:   #ff6a39;
  --warning:   #C2860F;
  --danger:    #D92D2D;
  --victory-gradient: linear-gradient(120deg, #15171d 0%, #15171d 48%, #FFC531 130%);
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --shadow:    0 4px 20px rgba(23,26,33,0.06);
  --shadow-lg: 0 12px 40px rgba(23,26,33,0.12);
  --trans:     0.2s ease;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* ===================== DARK MODE — matches Admin Panel dark theme ===================== */
[data-theme="dark"] {
  --red-glow:  rgba(255,90,105,0.40);
  --red-soft:  rgba(255,90,105,0.16);
  --gold:      #FFC94A;
  --warning:   #FFC94A;
  --blue-soft: rgba(45,224,204,0.22);
  --gold-soft: rgba(255,184,0,0.20);
  --success:   #ff6a39;
  --danger:    #FF6B6B;
  --white:     #131A2B;
  --off-white: #0C1019;
  --surface:   #182033;
  --border:    #2A3348;
  --text:      #F2F0EA;
  --text2:     #B9C0CC;
  --text3:     #8994A8;
  --victory-gradient: linear-gradient(120deg, #0C1019 0%, #17423C 52%, #FFC94A 135%);
  --shadow:    0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
}
[data-theme="dark"] body { background:#0C1019; }
[data-theme="dark"] .app { background:var(--off-white); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background:var(--surface); color:var(--text); border-color:var(--border);
}
[data-theme="dark"] .form-input { background:var(--surface); color:var(--text); }
[data-theme="dark"] img { opacity:0.95; }
[data-theme="dark"] .info-card,[data-theme="dark"] .settings-group,
[data-theme="dark"] .leader-item,[data-theme="dark"] .notif-item,[data-theme="dark"] .approval-card{
  border:1px solid var(--border);
}

/* ===================== GREEN MODE — same dark-native base, green signal accent ===================== */
[data-theme="green"] {
  --blue:      #ff6a39;
  --blue-glow: rgba(255,106,57,0.40);
  --blue-soft: rgba(255,106,57,0.18);
  --red-glow:  rgba(255,90,105,0.40);
  --red-soft:  rgba(255,90,105,0.16);
  --gold:      #FFC94A;
  --warning:   #FFC94A;
  --gold-soft: rgba(255,184,0,0.20);
  --success:   #ff6a39;
  --danger:    #FF6B6B;
  --white:     #131A2B;
  --off-white: #0C1019;
  --surface:   #182033;
  --border:    #2A3348;
  --text:      #F2F0EA;
  --text2:     #B9C0CC;
  --text3:     #8994A8;
  --victory-gradient: linear-gradient(120deg, #0C1019 0%, #15171d 52%, #FFC94A 135%);
  --shadow:    0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
}
[data-theme="green"] body { background:#0C1019; }
[data-theme="green"] .app { background:var(--off-white); }
[data-theme="green"] input, [data-theme="green"] select, [data-theme="green"] textarea {
  background:var(--surface); color:var(--text); border-color:var(--border);
}
[data-theme="green"] .form-input { background:var(--surface); color:var(--text); }
[data-theme="green"] img { opacity:0.95; }
[data-theme="green"] .info-card,[data-theme="green"] .settings-group,
[data-theme="green"] .leader-item,[data-theme="green"] .notif-item,[data-theme="green"] .approval-card{
  border:1px solid var(--border);
}

/* ===================== RESET ===================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:#111;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:0;
  overflow-x:hidden;
}

/* ===================== APP SHELL ===================== */
.app{
  width:100%;
  max-width:430px;
  min-height:100vh;
  background:var(--off-white);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,0.6);
}

/* ===================== SCREENS ===================== */
.screen{display:none;min-height:100vh;animation:fadeUp .3s ease;}
.screen.active{display:block;}
.chat-screen{height:100vh;overflow:hidden;}
.chat-screen.active{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ===================== SPLASH ===================== */
#splashScreen{
  background:var(--victory-gradient);
  flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;position:relative;overflow:hidden;
}
#splashScreen.active{display:flex;}
.splash-glow{
  position:absolute;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,77,94,0.45) 0%,transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-60%);
  animation:pulse 2.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.6;transform:translate(-50%,-60%) scale(1);}50%{opacity:1;transform:translate(-50%,-60%) scale(1.1);}}
.splash-icons{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.splash-icon{position:absolute;color:rgba(255,77,94,0.18);font-size:28px;animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.splash-logo{position:relative;z-index:2;text-align:center;}
.splash-logo-text{
  font-family:var(--font-display);font-size:72px;font-weight:700;
  color:var(--white);letter-spacing:-2px;line-height:1;
}
.splash-logo-text span{color:var(--red);}
.splash-tagline{color:rgba(255,255,255,0.5);font-size:13px;letter-spacing:4px;text-transform:uppercase;margin-top:8px;}
.splash-loader{width:60px;height:3px;background:rgba(255,255,255,0.1);border-radius:99px;margin:60px auto 0;overflow:hidden;}
.splash-loader-bar{height:100%;width:0;background:var(--red);border-radius:99px;animation:load 2s ease forwards;}
@keyframes load{to{width:100%;}}

/* ===================== AUTH SCREENS ===================== */
.auth-screen{
  background:var(--surface);
  min-height:100vh;
  position:relative;overflow:hidden;
}
.auth-bg{
  position:absolute;top:-80px;right:-80px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(255,77,94,0.20) 0%,transparent 70%);
  pointer-events:none;
}
.auth-bg2{
  position:absolute;bottom:-60px;left:-60px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,77,94,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.auth-icons-bg{
  position:absolute;top:0;left:0;width:100%;height:45%;pointer-events:none;overflow:hidden;
}
.auth-float-icon{position:absolute;color:rgba(255,77,94,0.14);font-size:24px;}
.auth-content{position:relative;z-index:2;padding:50px 28px 40px;}
.auth-logo{font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--text);margin-bottom:4px;}
.auth-logo span{color:var(--red);}
.auth-subtitle{color:var(--text2);font-size:14px;margin-bottom:36px;}

/* ===================== FORM ===================== */
.form-group{margin-bottom:20px;}
.form-label{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:8px;display:block;text-transform:uppercase;letter-spacing:.5px;}
.form-input{
  width:100%;padding:0 0 12px;
  border:none;border-bottom:2px solid var(--border);
  background:transparent;font-size:16px;color:var(--text);
  outline:none;transition:var(--trans);font-family:'Inter',sans-serif;
}
.form-input:focus{border-color:var(--red);}
.form-input::placeholder{color:var(--text3);}
.input-wrap{position:relative;}
.input-icon{position:absolute;right:0;bottom:14px;color:var(--text3);cursor:pointer;font-size:16px;}

/* ===================== BUTTONS ===================== */
.btn{
  display:block;width:100%;padding:16px;
  border:none;border-radius:14px;font-weight:700;
  font-size:17px;cursor:pointer;text-align:center;
  transition:all .2s;font-family:var(--font-display);
  letter-spacing:.5px;text-transform:uppercase;
}
.btn-red{
  background:var(--victory-gradient);
  color:#fff;box-shadow:0 8px 24px var(--red-glow);
}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--red-glow);}
.btn-red:active{transform:translateY(0);}
.btn-ghost{background:transparent;border:2px solid var(--red);color:var(--red);}
.btn-ghost:hover{background:var(--red-soft);}
.btn-sm{padding:10px 20px;font-size:13px;width:auto;display:inline-block;}
.btn-icon{display:inline-flex;align-items:center;gap:8px;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;}
.btn-glow{
  position:relative;overflow:hidden;
}
.btn-glow::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60%;height:4px;
  background:radial-gradient(ellipse,var(--blue-glow),transparent);
  border-radius:99px;
}

.auth-link{color:var(--text2);font-size:14px;text-align:center;margin-top:20px;}
.auth-link a,.auth-link span{color:var(--red);font-weight:600;cursor:pointer;}

/* ===================== HEADER ===================== */
.header{
  background:var(--surface);
  padding:16px 20px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.header-back{
  width:38px;height:38px;border-radius:50%;
  background:var(--off-white);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text);font-size:16px;flex-shrink:0;
}
.header-title{font-weight:700;font-size:18px;color:var(--text);flex:1;}
.header-action{color:var(--red);cursor:pointer;font-size:22px;position:relative;}

/* ===================== GLOBAL SIDE DRAWER ===================== */
.global-menu-btn{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text) !important;
  background:var(--off-white);
  font-size:15px;cursor:pointer;flex-shrink:0;
  margin-left:auto;
  border:1px solid var(--border);
}
.global-menu-btn:active{background:var(--border);}
[data-theme="dark"] .global-menu-btn{ color:var(--text) !important; background:var(--off-white); }
[data-theme="green"] .global-menu-btn{ color:var(--text) !important; background:var(--off-white); }
.overlay.global-menu-overlay{ justify-content:flex-start; align-items:stretch; background:rgba(10,5,20,0.55); }
.modal.global-menu-modal{
  width:82%;max-width:320px;height:100%;max-height:100%;
  border-radius:0 26px 26px 0;
  padding:26px 16px 20px;
  background: radial-gradient(circle at 30% 0%, #2A1B4D 0%, #150C29 55%, #0D0819 100%);
  animation: slideInLeft .28s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
@keyframes slideInLeft{from{transform:translateX(-100%);}to{transform:translateX(0);}}

.drawer-profile{ text-align:center; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.08); position:relative; flex-shrink:0; }
.drawer-avatar{
  width:60px;height:60px;border-radius:50%;margin:0 auto 10px;
  background:var(--victory-gradient); display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:20px;color:#fff;
  border:3px solid rgba(255,255,255,0.15); overflow:hidden;
}
.drawer-avatar img{width:100%;height:100%;object-fit:cover;}
.drawer-name{color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;}
.drawer-uid{font-size:9px;color:rgba(255,255,255,0.4);margin-top:2px;}
.drawer-rank{
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;background:var(--gold-soft);
  color:var(--gold);font-size:10px;font-weight:800;padding:4px 12px;border-radius:20px;
  border:1px solid var(--gold-glow);
}
.global-menu-grid{
  flex:1; overflow-y:auto; padding-top:10px;
  display:flex; flex-direction:column; gap:1px;
}
.global-menu-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 8px;border-radius:12px;cursor:pointer;
  color:rgba(255,255,255,0.75); transition:var(--trans);
}
.global-menu-item:active{background:rgba(255,255,255,0.08);color:#fff;transform:scale(.98);}
.global-menu-item span{font-size:13px;font-weight:600;line-height:1.3;}
.global-menu-icon{
  width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.85);font-size:13px;flex-shrink:0;
}
.drawer-logout{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:14px;border:1px solid rgba(255,122,26,0.35);
  color:#FFAB73;font-size:12px;font-weight:700;margin-top:10px;flex-shrink:0;cursor:pointer;
}
[data-theme="dark"] .drawer-logout{ border-color:rgba(59,130,246,0.4); color:#93C5FD; }
[data-theme="green"] .drawer-logout{ border-color:rgba(255,106,57,0.4); color:#ff8f5e; }

/* ===================== HOME DASHBOARD ===================== */
.home-hero{
  background:var(--surface);
  padding:18px 16px 0;position:relative;
  border-bottom:1px solid var(--border);
}
.home-hero-watermark{ display:none; }
.home-hero-kicker{ display:none; }
.home-hero-glow,.home-hero-glow2{ display:none; }
.home-greeting{color:var(--text3);font-size:13px;font-weight:600;margin-bottom:2px;}
.home-name{color:var(--text);font-size:22px;font-weight:800;font-family:var(--font-display);letter-spacing:.2px;}
.home-balance-chip{ display:none; }
.home-wallet-card{
  margin:16px 16px 0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 6px 24px rgba(23,26,33,0.08), 0 0 0 1px var(--gold-soft);padding:16px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
}
.home-wallet-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--red), var(--gold), var(--blue));
}
.home-wallet-label{color:var(--text3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.home-wallet-amt{color:var(--text);font-size:26px;font-weight:800;font-family:var(--font-display);margin-top:2px;}
.home-wallet-add{
  background:var(--qa-accent-1, var(--gold));color:#fff;border:none;border-radius:10px;
  padding:9px 16px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:pointer;
}
.home-card-float{
  margin:14px 16px 0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.home-stat{text-align:center;}
.home-stat-val{font-size:22px;font-weight:800;color:var(--text);font-family:var(--font-display);letter-spacing:.3px;}
.home-stat-val.red{color:var(--gold);}
.home-stat-val.blue{color:var(--blue);}
.home-stat-label{font-size:10px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.home-stat-div{width:1px;background:var(--border);height:36px;margin:auto;}
.home-promo{
  margin:14px 16px 0;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  background:var(--victory-gradient);padding:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.home-promo-title{color:#fff;font-size:16px;font-weight:800;font-family:var(--font-display);}
.home-promo-sub{color:rgba(255,255,255,.85);font-size:11px;margin-top:2px;}
.home-promo-btn{
  background:rgba(0,0,0,.22);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:8px;padding:7px 12px;font-size:11px;font-weight:700;white-space:nowrap;
}
.home-body{padding:18px 16px 100px;}

/* LIVE pulse indicator (esports HUD signature) */
.live-pulse{display:inline-flex;align-items:center;gap:6px;}
.live-pulse::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(255,77,94,0.60);
  animation:livePulse 1.6s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,94,0.55);}
  70%{box-shadow:0 0 0 7px rgba(255,77,94,0);}
  100%{box-shadow:0 0 0 0 rgba(255,77,94,0);}
}

/* QUICK ACTION LIST */
.qa-grid{display:flex;flex-direction:column;margin-top:14px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.qa-card{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:13px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-bottom:1px solid var(--border);transition:background var(--trans);
}
.qa-card:last-child{border-bottom:none;}
.qa-card:active{background:var(--off-white);}
.qa-card-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:var(--qa-accent, var(--red));display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px var(--qa-glow, var(--red-glow));
}
.qa-card-icon i{color:#fff;font-size:16px;}
.qa-card-title{font-weight:700;font-size:13.5px;color:var(--text);font-family:var(--font-display);letter-spacing:.1px;}
.qa-card-sub{font-size:11px;color:var(--text3);margin-top:1px;}
.qa-card::after{
  content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;
  color:var(--text3);font-size:12px;margin-left:auto;flex-shrink:0;
}
.qa-badge{
  position:absolute;top:8px;right:30px;
  background:var(--red);color:#fff;
  border-radius:50px;padding:2px 7px;font-size:9px;font-weight:700;
  box-shadow:0 2px 6px var(--red-glow);
}

/* ===================== BOTTOM NAV ===================== */
.bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:var(--surface);border-top:1px solid var(--border);
  padding:8px 0 20px;z-index:200;
  display:none;
}
.bottom-nav.visible{
  display:flex;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;color:var(--text3);font-size:10px;font-weight:700;
  transition:var(--trans);text-transform:uppercase;letter-spacing:.5px;
  font-family:var(--font-display);
}
.nav-item i{font-size:22px;}
.nav-item.active{color:var(--red);}
.nav-item.active i{filter:drop-shadow(0 0 6px var(--red-glow));}
.nav-item-center{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.nav-fab{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;margin-top:-28px;
  box-shadow:0 6px 20px var(--red-glow);
  cursor:pointer;border:2px solid rgba(255,255,255,0.1);
}

/* AMOUNT CHIPS */
.amount-chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
.chip{
  padding:8px 16px;border-radius:50px;
  border:1.5px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--text2);cursor:pointer;transition:var(--trans);
}
.chip.active,.chip:hover{border-color:var(--red);color:var(--red);background:var(--red-soft);}

/* ===================== TRANSACTION ITEM ===================== */
.txn-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.txn-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}
.txn-icon.green{background:#fdede5;color:var(--success);}
.txn-icon.red{background:#fff0f0;color:var(--red);}
.txn-icon.orange{background:#fff8ee;color:var(--warning);}
.txn-title{font-weight:600;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.txn-date{font-size:11px;color:var(--text3);margin-top:2px;}
.txn-amount{margin-left:auto;font-weight:700;font-size:15px;flex-shrink:0;white-space:nowrap;}
.txn-amount.credit{color:var(--success);}
.txn-amount.debit{color:var(--red);}

/* ===================== STATUS BADGE ===================== */
.badge{
  display:inline-block;padding:4px 12px;border-radius:50px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.badge-pending{background:#fff8ee;color:var(--warning);}
.badge-approved{background:#fdede5;color:var(--success);}
.badge-rejected{background:#fff0f0;color:var(--red);}
.badge-live{background:var(--red);color:#fff;animation:blink 1.2s ease infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.6;}}

/* ===================== TOURNAMENT CARD ===================== */
.tour-card{
  background:var(--surface);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
  transition:var(--trans);cursor:pointer;
  border:1px solid var(--border);
}
.tour-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.12);border-color:var(--red);}
.tour-card-banner{
  background:var(--victory-gradient);
  padding:16px;display:flex;align-items:center;gap:14px;
  position:relative;overflow:hidden;
}
.tour-card-banner::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--red),var(--blue));
}
.tour-game-icon{
  width:50px;height:50px;border-radius:10px;
  background:rgba(255,77,94,0.20);border:1px solid rgba(255,77,94,0.40);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:22px;flex-shrink:0;
}
.tour-name{color:#fff;font-weight:700;font-size:16px;font-family:var(--font-display);letter-spacing:.2px;}
.tour-game-tag{
  display:inline-block;background:rgba(45,91,255,0.15);border:1px solid rgba(45,91,255,0.3);
  color:var(--blue);font-size:10px;font-weight:700;
  padding:3px 10px;border-radius:5px;margin-top:5px;text-transform:uppercase;letter-spacing:.5px;
}
.tour-card-body{padding:14px 16px;}
.tour-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px;}
.tour-stat-item{text-align:center;}
.tour-stat-val{font-weight:800;font-size:17px;color:var(--text);font-family:var(--font-display);}
.tour-stat-val.prize{color:var(--red);}
.tour-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;margin-top:1px;font-weight:700;}
.tour-divider{width:1px;background:var(--border);}
.tour-footer{display:flex;align-items:center;justify-content:space-between;}
.tour-slots-bar{flex:1;margin-right:16px;}
.tour-slots-text{font-size:11px;color:var(--text3);margin-bottom:4px;font-weight:600;}
.tour-slots-track{height:4px;background:var(--border);border-radius:99px;overflow:hidden;}
.tour-slots-fill{height:100%;background:linear-gradient(90deg,var(--red),#ff4d6d);border-radius:99px;transition:width .5s ease;}
.tour-join-btn{
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;border:none;border-radius:8px;padding:10px 22px;
  font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 12px var(--red-glow);font-family:var(--font-display);letter-spacing:.3px;
}
.tour-join-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ===================== PROFILE ===================== */
.profile-hero{
  background:var(--victory-gradient);
  padding:40px 20px 80px;text-align:center;
}
.avatar-ring{
  width:90px;height:90px;border-radius:50%;
  border:3px solid var(--red);padding:3px;
  display:inline-block;margin-bottom:14px;
}
.avatar-ring img,.avatar-ring .avatar-placeholder{
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;
}
.avatar-placeholder{
  background:rgba(255,77,94,0.22);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);font-size:32px;
}
.profile-name{color:#fff;font-size:22px;font-weight:700;}
.profile-uid{color:rgba(255,255,255,0.4);font-size:12px;margin-top:4px;}
.profile-stats-float{
  margin:-55px 16px 0;background:var(--surface);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:20px;display:grid;grid-template-columns:1fr 1fr 1fr;
  position:relative;z-index:10;
}
.profile-body{padding:20px 16px 100px;}
.info-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;}
.info-row{
  display:flex;align-items:center;padding:16px;
  border-bottom:1px solid var(--border);
}
.info-row:last-child{border-bottom:none;}
.info-icon{width:38px;height:38px;border-radius:10px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:16px;flex-shrink:0;margin-right:14px;}
.info-label{font-size:12px;color:var(--text3);font-weight:500;}
.info-val{font-size:14px;color:var(--text);font-weight:600;margin-top:1px;}

/* ===================== MODAL ===================== */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:500;display:none;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(4px);
}
.overlay.active{display:flex;}
.modal{
  background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:28px 20px 40px;width:100%;max-width:430px;
  animation:slideUp .3s ease;max-height:90vh;overflow-y:auto;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal-handle{width:40px;height:4px;background:var(--border);border-radius:99px;margin:0 auto 20px;}
.modal-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:20px;}

/* ===================== ONBOARDING TUTORIAL ===================== */
.onboard-overlay{
  position:fixed;inset:0;background:var(--off-white);
  z-index:600;display:none;flex-direction:column;
}
.onboard-overlay.active{display:flex;}
.onboard-skip{
  position:absolute;top:18px;right:18px;z-index:2;
  color:var(--text3);font-size:13px;font-weight:700;cursor:pointer;
  padding:8px 14px;
}
.onboard-track{flex:1;display:flex;transition:transform .35s ease;}
.onboard-slide{
  flex:0 0 100%;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:40px 28px;
}
.onboard-icon{
  width:96px;height:96px;border-radius:28px;
  background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:42px;margin-bottom:28px;
  box-shadow:0 12px 32px var(--red-glow);
}
.onboard-slide:nth-child(2) .onboard-icon{background:var(--blue-soft);color:var(--blue);box-shadow:0 12px 32px var(--blue-glow);}
.onboard-slide:nth-child(3) .onboard-icon{background:var(--gold-soft);color:var(--gold);box-shadow:0 12px 32px var(--gold-glow);}
.onboard-slide:nth-child(4) .onboard-icon{background:var(--red-soft);color:var(--red);box-shadow:0 12px 32px var(--red-glow);}
.onboard-title{font-size:23px;font-weight:800;color:var(--text);font-family:var(--font-display);letter-spacing:.3px;margin-bottom:10px;}
.onboard-text{font-size:14px;color:var(--text2);line-height:1.6;max-width:300px;}
.onboard-footer{padding:0 24px 40px;}
.onboard-dots{display:flex;justify-content:center;gap:7px;margin-bottom:20px;}
.onboard-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:var(--trans);}
.onboard-dot.active{width:22px;border-radius:50px;background:var(--red);}

/* ===================== ADMIN ===================== */
.admin-hero{
  background:var(--victory-gradient);
  padding:30px 20px;
}
.admin-title{color:#fff;font-size:24px;font-weight:800;}
.admin-sub{color:rgba(255,255,255,0.5);font-size:13px;margin-top:4px;}
.admin-grid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.admin-card{
  background:var(--surface);border-radius:var(--radius);padding:20px 16px;
  box-shadow:var(--shadow);cursor:pointer;transition:var(--trans);
  border-left:3px solid var(--red);
}
.admin-card:hover{transform:translateY(-2px);}
.admin-card i{font-size:24px;color:var(--red);margin-bottom:10px;}
.admin-card-title{font-weight:700;font-size:13px;color:var(--text);}

/* ===================== SECTION TITLE ===================== */
.sec-title{font-size:18px;font-weight:700;color:var(--text);margin:24px 0 12px;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);letter-spacing:.3px;}
.sec-title a{font-size:12px;color:var(--gold);font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;}

/* ===== Banner Ads Slider (Home) ===== */
.banner-slider{position:relative;margin:16px 16px 4px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.banner-track{display:flex;transition:transform .4s ease;}
.banner-slide{flex:0 0 100%;width:100%;aspect-ratio:16/7;cursor:pointer;background:var(--off-white);}
.banner-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.banner-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px;}
.banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5);transition:var(--trans);}
.banner-dot.active{width:18px;border-radius:50px;background:#fff;}

/* ===================== EMPTY STATE ===================== */
.empty{text-align:center;padding:50px 20px;color:var(--text3);}
.empty i{font-size:48px;margin-bottom:12px;display:block;opacity:.3;}
.empty p{font-size:14px;}

/* ===================== TOAST ===================== */
#toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#111;color:#fff;padding:12px 20px;border-radius:20px;
  font-size:13px;font-weight:600;white-space:normal;text-align:center;
  max-width:calc(100vw - 48px);width:max-content;
  opacity:0;transition:all .3s;z-index:9999;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.success{background:var(--success);}
#toast.error{background:var(--red);}

/* ===================== SPINNER ===================== */
.spinner{
  width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .6s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================== BADGE / STATUS ===================== */
.badge{display:inline-block;padding:2px 10px;border-radius:50px;font-size:10px;font-weight:700;text-transform:uppercase;}
.badge-pending{background:#fff3cd;color:#856404;}
.badge-approved{background:#f7f5f2;color:#e5501c;}
.badge-rejected{background:#fee2e2;color:#991b1b;}

/* ===================== TXN ITEM ===================== */
.txn-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.txn-item:last-child{border-bottom:none;}
.txn-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.txn-icon.green{background:#f7f5f2;color:var(--success);}
.txn-icon.red{background:#fee2e2;color:var(--red);}
.txn-icon.orange{background:#fff3cd;color:var(--warning);}
.txn-icon.blue{background:#dbeafe;color:#1d4ed8;}
.txn-title{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.txn-date{font-size:11px;color:var(--text3);margin-top:2px;}
.txn-amount{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap;flex-shrink:0;}
.txn-amount.credit{color:var(--success);}
.txn-amount.debit{color:var(--red);}

/* ===================== CHIP ===================== */
.chip{display:inline-block;padding:7px 16px;border-radius:50px;font-size:12px;font-weight:600;cursor:pointer;background:var(--off-white);color:var(--text2);border:1.5px solid var(--border);transition:var(--trans);}
.chip.active{background:var(--red);color:#fff;border-color:var(--red);}

/* ===================== AMOUNT CHIPS ===================== */
.amount-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}

/* ===================== WALLET ===================== */
.wallet-hero{
  background:linear-gradient(135deg,#15171d 0%,#15171d 45%,#e5501c 78%,#e5501c 100%);
  padding:30px 20px;position:relative;overflow:hidden;
  border-bottom:2px solid var(--gold);
}
.wallet-hero-pattern{position:absolute;top:0;right:0;width:180px;height:100%;opacity:.07;background:repeating-linear-gradient(45deg,#fff,#fff 2px,transparent 2px,transparent 14px);}
.wallet-label{color:rgba(255,255,255,0.5);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;}
.wallet-amount{color:#fff;font-size:44px;font-weight:800;margin:6px 0;font-family:var(--font-display);letter-spacing:.5px;}
.wallet-sub{color:rgba(255,255,255,0.55);font-size:13px;}
.wallet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;}
.wallet-btn{flex:1;background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.15);border-radius:10px;padding:12px;text-align:center;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);letter-spacing:.3px;transition:var(--trans);}
.wallet-btn:hover{background:var(--red-soft);border-color:var(--red);}
.wallet-btn i{color:var(--gold);}
.wallet-body{padding:20px 16px 100px;}

/* ===================== PROFILE ===================== */
.profile-hero{background:var(--victory-gradient);padding:30px 20px 80px;position:relative;overflow:hidden;}
.avatar-ring{width:90px;height:90px;border-radius:50%;border:3px solid var(--red);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:rgba(255,77,94,0.22);overflow:hidden;box-shadow:0 0 24px var(--red-glow);}
.avatar-placeholder{font-size:36px;color:rgba(255,255,255,0.6);}
.profile-name{color:#fff;font-size:22px;font-weight:700;font-family:var(--font-display);letter-spacing:.3px;}
.profile-uid{color:rgba(255,255,255,0.4);font-size:12px;margin-top:4px;}
.profile-stats-float{margin:-55px 16px 0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:20px;display:grid;grid-template-columns:1fr 1fr 1fr;position:relative;z-index:10;border-top:2px solid var(--blue);}
.profile-body{padding:20px 16px 100px;}
.info-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;}
.info-row{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--border);}
.info-row:last-child{border-bottom:none;}
.info-icon{width:38px;height:38px;border-radius:10px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:16px;flex-shrink:0;margin-right:14px;}
.info-label{font-size:12px;color:var(--text3);font-weight:500;}
.info-val{font-size:14px;color:var(--text);font-weight:600;margin-top:1px;}

/* ===================== SEARCH BAR ===================== */
.search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:50px;padding:0 16px;margin-bottom:16px;
}
.search-bar i{color:var(--text3);font-size:16px;}
.search-bar input{
  flex:1;border:none;background:transparent;padding:12px 0;
  font-size:14px;outline:none;color:var(--text);font-family:'Inter',sans-serif;
}

/* ===================== LEADERBOARD ===================== */
.leader-podium{
  background:var(--victory-gradient);
  padding:30px 20px;display:flex;align-items:flex-end;justify-content:center;gap:12px;
}
.podium-item{text-align:center;flex:1;min-width:0;}
.podium-item.first{flex:1.25;}
.podium-avatar{
  width:60px;height:60px;border-radius:50%;
  background:rgba(255,77,94,0.22);border:2px solid rgba(255,77,94,0.45);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.6);font-size:22px;margin:0 auto 8px;
}
.podium-item.first .podium-avatar{width:75px;height:75px;border-color:gold;background:rgba(255,215,0,0.1);}
.podium-item.first{transform:translateY(-18px);}
.podium-rank-badge{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;margin:0 auto 6px;
}
.rank-1{background:linear-gradient(135deg,#FFD700,#FFA500);color:#fff;box-shadow:0 0 16px rgba(255,215,0,0.5);}
.rank-2{background:linear-gradient(135deg,#C0C0C0,#909090);color:#fff;}
.rank-3{background:linear-gradient(135deg,#CD7F32,#8B4513);color:#fff;}
.podium-name{color:rgba(255,255,255,0.85);font-size:12px;font-weight:700;font-family:var(--font-display);max-width:90px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.podium-prize{color:var(--gold);font-size:13px;font-weight:700;margin-top:2px;font-family:var(--font-display);}
.leader-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:var(--surface);border-radius:var(--radius);
  margin-bottom:8px;box-shadow:var(--shadow);border:1px solid var(--border);
}
.leader-rank{width:30px;text-align:center;font-weight:800;color:var(--text2);font-family:var(--font-display);font-size:16px;}
.leader-avatar{width:42px;height:42px;border-radius:50%;background:var(--red-soft);display:flex;align-items:center;justify-content:center;color:var(--red);}
.leader-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px;color:var(--text);font-family:var(--font-display);letter-spacing:.2px;}
.leader-prize{font-weight:700;color:var(--success);font-family:var(--font-display);}

/* ===================== NOTIFICATION ===================== */
.notif-item{
  display:flex;gap:14px;padding:16px;
  background:var(--surface);border-radius:var(--radius);
  margin-bottom:8px;box-shadow:var(--shadow);
  border-left:3px solid transparent;
}
.notif-item.unread{border-left-color:var(--red);}
.notif-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.notif-body{flex:1;}
.notif-title{font-weight:600;font-size:14px;color:var(--text);}
.notif-msg{font-size:12px;color:var(--text2);margin-top:2px;}
.notif-time{font-size:11px;color:var(--text3);margin-top:4px;}

/* ===================== SETTINGS ===================== */
.settings-group{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;}
.settings-row{
  display:flex;align-items:center;gap:14px;padding:16px;
  border-bottom:1px solid var(--border);cursor:pointer;transition:var(--trans);
}
.settings-row:last-child{border-bottom:none;}
.settings-row:hover{background:var(--off-white);}
.settings-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.settings-label{flex:1;font-size:14px;font-weight:600;color:var(--text);}
.settings-arrow{color:var(--text3);font-size:14px;}

/* ===================== ADMIN APPROVAL CARD ===================== */
.approval-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;margin-bottom:12px;
}
.approval-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.approval-name{font-weight:700;font-size:15px;color:var(--text);}
.approval-amount{font-size:18px;font-weight:800;color:var(--red);}
.approval-meta{font-size:12px;color:var(--text2);margin-bottom:4px;}
.approval-actions{display:flex;gap:10px;margin-top:14px;}
.btn-approve{
  flex:1;background:#fdede5;color:var(--success);border:none;
  border-radius:50px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.btn-reject{
  flex:1;background:#fff0f0;color:var(--red);border:none;
  border-radius:50px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;
}

/* ===================== MISC ===================== */
.divider{height:1px;background:var(--border);margin:16px 0;}
.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}.mt-20{margin-top:20px;}
.text-center{text-align:center;}
.hidden{display:none!important;}
.flex{display:flex;}.gap-8{gap:8px;}.gap-12{gap:12px;}
.items-center{align-items:center;}

/* ===================== TOGGLE SWITCH ===================== */
.toggle-switch{position:relative;display:inline-block;width:46px;height:26px;margin-left:auto;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:26px;transition:.2s;}
.toggle-slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle-switch input:checked + .toggle-slider{background:var(--red);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(20px);}

/* ===================== RESPONSIVE ===================== */
@media(min-width:431px){
  body{align-items:center;min-height:100vh;}
  .app{min-height:100vh;border-radius:40px;overflow:hidden;}
  .bottom-nav{border-radius:0 0 40px 40px;}
}

/* ============================================================
   ===================== VICTORY SUNSET ==========================
   Full visual identity reset. Philosophy:
   - Warm, celebratory energy instead of cold black-HUD gamer look
   - White/light base — the sunset gradient is earned, used only on
     the numbers that matter (balance, prize, winner reveals)
   - Rounded, soft everywhere — no angular military cut-corners
   - Coral -> violet -> amber gradient is the one signature move
   - Snappy 130ms motion, not floaty
   ============================================================ */

:root{
  --trans: 0.13s cubic-bezier(.2,.8,.2,1);
}

*{ -webkit-tap-highlight-color: transparent; }

/* ---------- One accent everywhere — richer layered gradient + glass shine ---------- */
.btn-red{
  background:linear-gradient(135deg, #FF4D5E 0%, var(--red) 45%, var(--red-dark) 100%);
  box-shadow:0 8px 26px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 6px rgba(0,0,0,0.15);
  position:relative;
}
.btn-red::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 55%);
  pointer-events:none;
}
.btn:active{transform:scale(.96);}
.btn-red:active{box-shadow:0 3px 10px var(--red-glow);}
.chip.active{ background:var(--victory-gradient); border-color:transparent; color:#fff; }
.qa-card{ transition:transform var(--trans); position:relative; }
.qa-card:active,.tour-card:active{transform:scale(.96);}

/* ---------- Splash: warm sunset gradient burst, soft rounded base ---------- */
#splashScreen{
  background: var(--victory-gradient);
  position:relative;
  overflow:hidden;
}
#splashScreen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(255,255,255,0.15), transparent 40%);
}

/* ---------- Numbers on WHITE cards: gradient-filled for pop ---------- */
.leader-prize,.home-prize-amt{
  font-variant-numeric: tabular-nums;
  letter-spacing:0.3px;
  font-weight:800;
  background: var(--victory-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* dashBalance sits on var(--surface), which is dark in dark mode — the
   gradient (designed for white cards) was nearly invisible there. Solid,
   theme-adaptive color instead, so it's always readable. */
#dashBalance{
  font-variant-numeric: tabular-nums;
  letter-spacing:0.3px;
  font-weight:800;
  color: var(--gold);
}
/* ---------- Numbers sitting ON TOP of the colorful gradient hero itself:
   solid white text — gradient-on-gradient was unreadable ---------- */
.wallet-amount,#rankPointsDisplay,.podium-prize{
  font-variant-numeric: tabular-nums;
  letter-spacing:0.3px;
  font-weight:800;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* ---------- Floating soft-glow bottom nav ---------- */
.bottom-nav{
  left:50%;transform:translateX(-50%);
  width:calc(100% - 24px);max-width:406px;
  bottom:12px;border-radius:26px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.90);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 12px 40px rgba(124,58,237,0.16);
}
.nav-item{ color:var(--text3); transition:color var(--trans); }
.nav-item.active{ color:var(--red); }
.nav-item.active i{ filter:drop-shadow(0 0 6px var(--red-glow)); }
.nav-fab{
  background:var(--victory-gradient);
  box-shadow:0 8px 24px var(--blue-glow);
  border:2px solid rgba(255,255,255,0.5);
}

/* ---------- Dark mode: deep plum, not charcoal-black ---------- */
[data-theme="dark"] body{ background:#120B24; }
[data-theme="dark"] .app{
  background:
    radial-gradient(circle at 50% 0%, rgba(124,58,237,0.18), transparent 45%),
    var(--off-white);
}
[data-theme="dark"] .tour-card,[data-theme="dark"] .settings-group{
  background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.45);
}
[data-theme="dark"] .header{ background:var(--surface); border-bottom-color:var(--border); }
[data-theme="dark"] .btn-ghost{ border-color:var(--red); color:#ff8a96; }
[data-theme="dark"] .bottom-nav{ background:rgba(36,26,61,0.90); border-color:var(--border); }

/* ---------- Green mode: same deep base, emerald glow instead of purple ---------- */
[data-theme="green"] body{ background:#0A1512; }
[data-theme="green"] .app{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,106,57,0.16), transparent 45%),
    var(--off-white);
}
[data-theme="green"] .tour-card,[data-theme="green"] .settings-group{
  background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.45);
}
[data-theme="green"] .header{ background:var(--surface); border-bottom-color:var(--border); }
[data-theme="green"] .btn-ghost{ border-color:var(--blue); color:#ff8f5e; }
[data-theme="green"] .bottom-nav{ background:rgba(24,45,38,0.90); border-color:var(--border); }

/* ---------- Status color system — same meaning everywhere ---------- */
.badge-live{ background:var(--red)!important; animation:livePulse 1.3s ease-in-out infinite; }
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 var(--red-glow);}50%{box-shadow:0 0 0 5px transparent;}}
.badge-approved{ box-shadow:0 0 0 1px rgba(255,106,57,0.25) inset; }
.badge-pending{ box-shadow:0 0 0 1px rgba(255,182,39,0.30) inset; }
.badge-rejected{ box-shadow:0 0 0 1px rgba(255,77,94,0.30) inset; }

/* ---------- Misc polish ---------- */
button:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}
*{scrollbar-width:thin;scrollbar-color:var(--red) transparent;}
*::-webkit-scrollbar{width:6px;height:6px;}
*::-webkit-scrollbar-thumb{background:var(--red);border-radius:99px;}
#toast{box-shadow:0 10px 30px rgba(124,58,237,0.20);}


/* ---------- Marketplace (ID Bazar) ---------- */
.mp-tab,.mp-filter{ background:var(--off-white); color:var(--text2); border:1px solid var(--border); flex-shrink:0; }
.mp-tab.active,.mp-filter.active{ background:var(--red); color:#fff; border-color:var(--red); }
.mp-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:12px; box-shadow:var(--shadow); cursor:pointer; }
.mp-card-img{ width:100%; height:150px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:10px; background:var(--off-white); }
.mp-card-title{ font-weight:700; font-size:14px; color:var(--text); margin-bottom:2px; }
.mp-card-sub{ font-size:12px; color:var(--text3); margin-bottom:8px; }
.mp-card-price{ font-weight:800; font-size:16px; color:var(--gold); }
.mp-status-chip{ font-size:11px; padding:3px 10px; border-radius:99px; font-weight:700; text-transform:uppercase; }
.mp-status-active{ background:var(--blue-soft); color:var(--blue); }
.mp-status-pending_approval{ background:var(--gold-soft); color:var(--gold); }
.mp-status-sold{ background:rgba(107,118,132,0.15); color:var(--text3); }
.mp-status-rejected,.mp-status-removed{ background:rgba(217,45,45,0.10); color:var(--danger); }
.mp-status-locked{ background:var(--gold-soft); color:var(--gold); }
.mp-status-released{ background:var(--blue-soft); color:var(--blue); }
.mp-status-disputed,.mp-status-refunded{ background:rgba(217,45,45,0.10); color:var(--danger); }

/* ── Google Sign-In button (added: Google OAuth) ── */
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px;border-radius:14px;
  background:var(--white,#fff);color:#3c4043;
  border:1.5px solid var(--border);
  font-weight:700;font-size:15px;cursor:pointer;
  font-family:var(--font-display);transition:all .2s;
}
.btn-google i{color:#EA4335;font-size:17px;}
.btn-google:hover{background:var(--surface);transform:translateY(-1px);}
.btn-google:active{transform:translateY(0);}
.btn-google:disabled{opacity:.55;cursor:not-allowed;}

/* ===================== USER-FACING ARTICLES (premium) ===================== */
.article-user-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:14px;overflow:hidden;cursor:pointer;transition:var(--trans);
  border:1px solid var(--border);
}
.article-user-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--red);}
.article-user-cover{width:100%;height:150px;object-fit:cover;display:block;background:var(--off-white);}
.article-user-cover-placeholder{
  width:100%;height:90px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--off-white),var(--border));color:var(--text3);font-size:26px;
}
.article-user-body{padding:15px;}
.article-user-cat{
  font-size:10px;font-weight:700;padding:3px 11px;border-radius:50px;text-transform:uppercase;
  letter-spacing:.4px;display:inline-block;
}
.article-user-cat.guide{background:var(--red-soft);color:var(--red);}
.article-user-cat.news{background:var(--blue-soft);color:var(--blue);}
.article-user-cat.event{background:var(--gold-soft);color:var(--gold);}
.article-user-title{font-weight:700;font-size:15.5px;color:var(--text);margin-top:9px;line-height:1.35;}
.article-user-excerpt{font-size:13px;color:var(--text2);margin-top:5px;line-height:1.5;}
.article-user-date{font-size:11px;color:var(--text3);margin-top:9px;}

/* Filter tabs — shared pattern with Admin Panel */
.art-filter-tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding:0 16px;}
.art-filter-tab{
  font-size:12px;font-weight:700;color:var(--text2);background:var(--off-white);
  border:1px solid var(--border);padding:7px 16px;border-radius:50px;cursor:pointer;
  white-space:nowrap;transition:var(--trans);
}
.art-filter-tab:hover{border-color:var(--red);color:var(--text);}
.art-filter-tab.active{background:var(--red-soft);border-color:var(--red);color:var(--red);}


/* ===== css/premium.css ===== */
/* =====================================================================
   HB BATTLE — "NEON CYBER ARENA" (Emerald Edition)
   A fresh visual identity, not another polish pass. Loads after
   styles.css. Concept: an esports scoreboard/HUD — deep forest-black
   base, two signal colours (bright emerald for data/live, deep jade
   for action/prize), gold reserved only for currency/rank so it stays
   meaningful. Angular HUD corners, scanline texture, glowing hairline
   borders instead of heavy glow-blobs. Built to feel precise and
   trustworthy (real-money platform) rather than just loud.
   ===================================================================== */

:root{
  /* signal colours — emerald duo instead of the old cyan/magenta */
  --cy-cyan:      #ff6a39;
  --cy-cyan-dim:  rgba(255,106,57,0.22);
  --cy-magenta:   #ff6a39;
  --cy-magenta-dim: rgba(255,106,57,0.20);
  --cy-gold:      #FFC531;
  --cy-gold-dim:  rgba(255,197,49,0.18);
  --cy-ink:       #061510;
  --cy-panel:     #15171d;
  --cy-panel-2:   #15171d;
  --cy-line:      rgba(255,106,57,0.38);
  --cy-text:      #f7f5f2;
}

/* ---------- base arena backdrop ---------- */
body{
  background:
    linear-gradient(180deg, rgba(255,106,57,0.08), transparent 220px),
    var(--cy-ink) !important;
  background-attachment: fixed;
}
.app{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,106,57,0.05) 0px, rgba(255,106,57,0.05) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,106,57,0.04) 0px, rgba(255,106,57,0.04) 1px, transparent 1px, transparent 34px);
}
[data-theme="dark"] body, [data-theme="dark"] .app{ background-color:var(--cy-ink) !important; }
[data-theme="green"] body, [data-theme="green"] .app{ background-color:var(--cy-ink) !important; }

/* everything sits on ink + panel now, light mode included — an esports
   HUD reads as dark-native, so we unify both themes into one arena */
.header, .bottom-nav, .home-hero, .tour-list, .qa-grid, .profile-hero,
.modal.global-menu-modal, .auth-screen{
  background-color:var(--cy-panel);
  color:var(--cy-text);
}
.tour-card, .info-card, .home-wallet-card, .profile-stats-float,
.leader-item, .notif-item, .approval-card{
  background: linear-gradient(150deg, #e5501c 0%, var(--cy-panel-2) 55%, var(--cy-panel) 100%) !important;
  color:var(--cy-text);
  border-color:var(--cy-line) !important;
}
.form-input{
  background-color:var(--cy-panel-2) !important;
  color:var(--cy-text);
  border-color:var(--cy-line) !important;
}
.qa-card-title, .tour-name, .home-name, .header-title, .profile-name, .txn-title{ color:var(--cy-text) !important; }
.qa-card-sub, .tour-stat-lbl, .home-stat-label, .text3, .txn-date{ color:rgba(232,244,255,0.5) !important; }

/* ---------- fix: these sit on the forced-dark panels above but never
   got a matching light text colour, so they were rendering dark-on-dark
   (invisible) — Account Info values, tour card stats, profile numbers ---------- */
.info-label{ color:rgba(232,244,255,0.55) !important; }
.info-val{ color:var(--cy-text) !important; }
.profile-stats-float .home-stat-val{ color:var(--cy-text) !important; }
.tour-stat-val{ color:var(--cy-text) !important; }
.auth-screen .form-label{ color:rgba(232,244,255,0.55) !important; }
.auth-screen .auth-subtitle{ color:rgba(232,244,255,0.6) !important; }

/* ---------- fix: same problem on Leaderboard / Notifications / Admin
   Approval cards now that they sit on the emerald gradient too ---------- */
.leader-name, .notif-title, .approval-name{ color:var(--cy-text) !important; }
.leader-rank, .notif-msg, .notif-time, .approval-meta{ color:rgba(232,244,255,0.55) !important; }
.leader-prize{ color:var(--cy-cyan) !important; }
.approval-amount{ color:var(--cy-gold) !important; }

/* ---------- signature motif: scanning HUD stripe ---------- */
.header, .home-hero, .profile-hero, .wallet-hero, .leader-podium, .tour-card-banner{ position:relative; overflow:hidden; }
.header::after, .home-hero::after, .profile-hero::after, .wallet-hero::after, .leader-podium::after, .tour-card-banner::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cy-cyan), var(--cy-magenta), transparent);
  background-size:250% 100%;
  animation: hudScan 4s linear infinite;
  box-shadow:0 0 12px var(--cy-cyan);
}
@keyframes hudScan{ 0%{background-position:0% 0;} 100%{background-position:250% 0;} }

/* ---------- angular HUD card cut (kept — it's the one shape motif) ---------- */
:root{ --cut:16px; }
.tour-card-banner{
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.tour-card-banner::before{ background:var(--cy-cyan) !important; width:3px; box-shadow:0 0 10px var(--cy-cyan); }
.home-promo{
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:linear-gradient(135deg, var(--cy-panel-2), var(--cy-panel)) !important;
  border:1px solid var(--cy-gold-dim);
  box-shadow:0 0 30px var(--cy-gold-dim);
}

/* ---------- cards: hairline neon border instead of glow-blobs ---------- */
.tour-card{
  border:1px solid var(--cy-line);
  box-shadow: 0 0 0 1px rgba(0,240,255,0.05), 0 12px 30px rgba(0,0,0,0.45);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tour-card:hover, .tour-card:active{
  border-color:var(--cy-cyan);
  box-shadow: 0 0 0 1px var(--cy-cyan-dim), 0 0 24px var(--cy-cyan-dim), 0 16px 34px rgba(0,0,0,0.5);
  transform: translateY(-3px);
}
.tour-game-icon{
  background:linear-gradient(135deg, var(--cy-magenta), #8A0030) !important;
  box-shadow:0 0 16px var(--cy-magenta-dim);
}
.tour-game-tag{
  background:transparent !important; color:var(--cy-cyan) !important;
  border:1px solid var(--cy-cyan) !important; font-weight:700; letter-spacing:.4px;
}
.tour-stat-val.prize{
  color:var(--cy-gold) !important; text-shadow:0 0 14px var(--cy-gold-dim);
}
.tour-slots-fill{ background:linear-gradient(90deg, var(--cy-cyan), var(--cy-magenta)) !important; box-shadow:0 0 8px var(--cy-cyan-dim); }
.badge-live{
  background:var(--cy-magenta) !important; box-shadow:0 0 14px var(--cy-magenta-dim);
  animation:hudPulse 1.3s ease-in-out infinite;
}
@keyframes hudPulse{ 0%,100%{box-shadow:0 0 10px var(--cy-magenta-dim);} 50%{box-shadow:0 0 22px var(--cy-magenta-dim);} }

/* ---------- wallet card: data-panel treatment ---------- */
.home-wallet-card{
  box-shadow:0 0 0 1px var(--cy-gold-dim), 0 16px 40px rgba(0,0,0,0.5);
}
.home-wallet-card::before{ background:var(--cy-gold) !important; box-shadow:0 0 10px var(--cy-gold-dim); }
.home-wallet-amt{
  color:var(--cy-gold) !important; text-shadow:0 0 18px var(--cy-gold-dim);
  background:none !important; -webkit-text-fill-color:var(--cy-gold);
}

/* ---------- quick actions: keep per-item colour, add HUD ring ---------- */
.qa-grid{ border:1px solid var(--cy-line); }
.qa-card-icon{
  box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 0 14px var(--qa-glow, var(--cy-cyan-dim));
}

/* ---------- buttons: solid signal colour, sharp glow on press ---------- */
.btn-red, .tour-join-btn, .nav-fab{
  background:linear-gradient(135deg, var(--cy-magenta), #C4004A) !important;
  box-shadow:0 0 20px var(--cy-magenta-dim), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  letter-spacing:.5px; text-transform:uppercase; font-size:12.5px;
}
.btn-red:hover, .tour-join-btn:hover{
  box-shadow:0 0 32px var(--cy-magenta-dim), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-ghost{ border-color:var(--cy-cyan) !important; color:var(--cy-cyan) !important; }
.btn-ghost:hover{ background:var(--cy-cyan-dim) !important; box-shadow:0 0 16px var(--cy-cyan-dim); }
.nav-fab{ box-shadow:0 0 0 5px rgba(255,45,110,0.12), 0 0 22px var(--cy-magenta-dim) !important; }

/* ---------- nav & chips: cyan active state ---------- */
.nav-item.active, .nav-item.active i{ color:var(--cy-cyan) !important; filter:drop-shadow(0 0 8px var(--cy-cyan-dim)) !important; }
.bottom-nav{ border-top:1px solid var(--cy-line); background:var(--cy-panel) !important; }
.chip{ background:var(--cy-panel-2) !important; border-color:var(--cy-line) !important; color:rgba(232,244,255,0.7) !important; }
.chip.active{ background:var(--cy-magenta) !important; border-color:var(--cy-magenta) !important; color:#fff !important; }

/* ---------- inputs ---------- */
.form-input:focus{ border-color:var(--cy-cyan) !important; box-shadow:0 0 0 3px var(--cy-cyan-dim); }
.form-input::placeholder{ color:rgba(232,244,255,0.35); }

/* ---------- avatars / rank ---------- */
.avatar-ring, .drawer-avatar{ box-shadow:0 0 0 3px var(--cy-gold-dim), 0 0 20px var(--cy-gold-dim); }
.drawer-rank{ background:var(--cy-gold) !important; color:#241800 !important; border:none; }
.avatar-placeholder{ background:linear-gradient(135deg, var(--cy-magenta), #8A0030); color:#fff; }

/* ---------- txn icons keep semantic colour, HUD ring added ---------- */
.txn-icon{ box-shadow:0 0 0 1px rgba(255,255,255,0.06); }
.txn-icon.green{ background:rgba(255,106,57,0.14) !important; color:#ff6a39 !important; }
.txn-icon.red{ background:var(--cy-magenta-dim) !important; color:var(--cy-magenta) !important; }
.txn-icon.orange, .txn-icon.blue{ background:var(--cy-cyan-dim) !important; color:var(--cy-cyan) !important; }
.txn-amount.credit{ color:#ff6a39 !important; text-shadow:0 0 10px rgba(255,106,57,0.35); }

/* ---------- headings: HUD label tracking ---------- */
.tour-stat-lbl, .home-stat-label{ text-transform:uppercase; letter-spacing:1.2px; font-size:10px; }

/* ---------- scanline film grain — sells the "screen" feel ---------- */
.app::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 3px);
}

/* ---------- theme selector (Light / Dark / Green) ---------- */
.theme-selector{ display:flex; gap:8px; }
.theme-option{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 6px; border-radius:10px; border:1px solid var(--cy-line);
  background:var(--cy-panel-2); color:var(--cy-text); opacity:.6;
  font-size:12px; font-weight:700; font-family:var(--font-body);
  cursor:pointer; transition:.2s ease;
}
.theme-option.active{
  opacity:1; border-color:var(--cy-cyan); color:var(--cy-cyan);
  box-shadow:0 0 0 1px var(--cy-cyan-dim), 0 0 14px var(--cy-cyan-dim);
}
.theme-option:active{ transform:scale(.96); }

/* ---------- Refer & Earn screen ---------- */
.refer-hero{
  text-align:center; padding:26px 20px; border-radius:16px; margin-bottom:16px;
  background: radial-gradient(circle at 50% 0%, rgba(255,106,57,0.18), transparent 60%), var(--cy-panel);
  border:1px solid var(--cy-line);
}
.refer-hero-icon{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:var(--cy-cyan-dim); color:var(--cy-cyan); border:1px solid var(--cy-cyan);
  box-shadow:0 0 20px var(--cy-cyan-dim);
}
.refer-hero-title{ color:var(--cy-text); font-size:17px; font-weight:800; font-family:var(--font-display); margin-bottom:6px; }
.refer-hero-sub{ color:rgba(232,255,242,0.65); font-size:12.5px; line-height:1.5; max-width:280px; margin:0 auto; }
.refer-hero-sub b{ color:var(--cy-gold); }

.refer-code-card{
  background: linear-gradient(150deg, #e5501c 0%, var(--cy-panel-2) 55%, var(--cy-panel) 100%);
  border:1px solid var(--cy-line); border-radius:16px; padding:18px; margin-bottom:14px;
}
.refer-code-label{ color:rgba(232,255,242,0.55); font-size:12px; margin-bottom:8px; }
.refer-code-row{ display:flex; align-items:center; gap:10px; }
.refer-code-text{
  flex:1; font-family:monospace; font-size:19px; font-weight:800; letter-spacing:3px;
  color:var(--cy-cyan); background:rgba(255,106,57,0.10); border:1px dashed var(--cy-cyan);
  padding:12px; border-radius:10px; text-align:center;
}
.refer-copy-btn{
  width:46px; height:46px; border-radius:10px; flex-shrink:0; font-size:16px; cursor:pointer;
  background:var(--cy-panel); border:1px solid var(--cy-line); color:var(--cy-text);
}
.refer-copy-btn:active{ background:var(--cy-cyan-dim); }
.refer-share-btn{
  width:100%; margin-top:14px; padding:13px; border:none; border-radius:12px; cursor:pointer;
  font-weight:800; font-size:14px; letter-spacing:.3px; color:#15171d;
  background:linear-gradient(135deg, var(--cy-cyan), var(--cy-magenta));
  box-shadow:0 6px 18px rgba(255,106,57,0.35);
}
.refer-share-btn:active{ transform:scale(.98); }

.refer-stats-row{ display:flex; gap:12px; margin:16px 0 18px; }
.refer-stat-card{
  flex:1; text-align:center; padding:16px 8px; border-radius:14px;
  background:var(--cy-panel-2); border:1px solid var(--cy-line);
}
.refer-stat-val{ font-size:24px; font-weight:900; color:var(--cy-text); }
.refer-stat-val.gold{ color:var(--cy-gold); }
.refer-stat-lbl{ font-size:11px; color:rgba(232,255,242,0.55); margin-top:4px; }

.refer-steps{ display:flex; flex-direction:column; gap:10px; }
.refer-step{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cy-text);
  background:var(--cy-panel); border:1px solid var(--cy-line); border-radius:12px; padding:12px 14px;
}
.refer-step-num{
  width:22px; height:22px; flex-shrink:0; border-radius:50%; background:var(--cy-cyan-dim);
  color:var(--cy-cyan); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:var(--cy-cyan-dim); border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (max-width:360px){ :root{ --cut:12px; } }

/* =====================================================================
   HBBATTLE v2 — OBSIDIAN ARENA
   Final visual pass: quieter surfaces, one primary neon signal,
   gold only for money/rank, stronger hierarchy and less visual noise.
   ===================================================================== */
:root{
  --arena-bg:#050807;
  --arena-panel:#0a100e;
  --arena-panel-2:#0f1714;
  --arena-panel-3:#14201b;
  --arena-line:rgba(247,245,242,.16);
  --arena-line-strong:rgba(247,245,242,.34);
  --arena-green:#ff8f5e;
  --arena-green-2:#ff6a39;
  --arena-lime:#f7f5f2;
  --arena-gold:#ffc83d;
  --arena-text:#f7f5f2;
  --arena-muted:#ff6a39;
  --arena-dim:#5b6470;
  --arena-danger:#ff4d67;
  --arena-shadow:0 18px 50px rgba(0,0,0,.42);
  --arena-radius:20px;
}

html,body{background:var(--arena-bg)!important;color:var(--arena-text)!important;}
body{font-family:Inter,system-ui,sans-serif;}
.app{
  background:
    radial-gradient(circle at 100% 0,rgba(255,143,94,.055),transparent 30%),
    linear-gradient(180deg,#070c0a 0%,#080d0b 48%,#060907 100%)!important;
  color:var(--arena-text)!important;
}
.app::before{display:none!important;}

/* Remove the old cyan/magenta identity completely. */
[data-theme="dark"], [data-theme="green"]{
  --red:var(--arena-danger);
  --blue:var(--arena-green);
  --success:var(--arena-green-2);
  --gold:var(--arena-gold);
  --surface:var(--arena-panel);
  --off-white:var(--arena-bg);
  --border:var(--arena-line);
  --text:var(--arena-text);
  --text2:#a7b5ae;
  --text3:var(--arena-muted);
  --victory-gradient:linear-gradient(135deg,#0b1712,#15171d);
}
[data-theme="green"] .app{
  background:
    radial-gradient(circle at 50% -10%,rgba(255,106,57,.12),transparent 34%),
    linear-gradient(180deg,#07100b,#08110d 60%,#050806)!important;
}

.header,.bottom-nav,.home-hero,.tour-list,.qa-grid,.profile-hero,
.modal.global-menu-modal,.auth-screen,.wallet-hero,.leader-podium{
  background:var(--arena-panel)!important;color:var(--arena-text)!important;
}
.header{border-bottom:1px solid var(--arena-line)!important;box-shadow:0 8px 30px rgba(0,0,0,.18);}
.header-title,.home-name,.profile-name,.tour-name,.txn-title,.qa-card-title{color:var(--arena-text)!important;}
.home-greeting,.profile-uid,.home-stat-label,.tour-stat-lbl,.text3,.txn-date,
.qa-card-sub,.info-label,.leader-rank,.notif-msg,.notif-time,.approval-meta{color:var(--arena-muted)!important;}

/* Surfaces: nearly black, subtle border, no green wash. */
.tour-card,.info-card,.home-wallet-card,.profile-stats-float,.leader-item,
.notif-item,.approval-card,.settings-group,.qa-grid{
  background:linear-gradient(180deg,var(--arena-panel-2),var(--arena-panel))!important;
  border:1px solid var(--arena-line)!important;
  box-shadow:var(--arena-shadow)!important;
}
.tour-card:hover,.tour-card:active{border-color:var(--arena-line-strong)!important;box-shadow:0 18px 45px rgba(0,0,0,.5)!important;transform:translateY(-2px);}

/* Headers get a single electric hairline. */
.header::after,.home-hero::after,.profile-hero::after,.wallet-hero::after,.leader-podium::after,
.tour-card-banner::after{height:1px!important;background:linear-gradient(90deg,transparent,var(--arena-green),transparent)!important;box-shadow:0 0 12px rgba(255,143,94,.4)!important;}

/* Home */
.home-hero{padding:22px 20px 18px!important;}
.home-wallet-card{
  margin:0 16px!important;border-radius:var(--arena-radius)!important;
  background:linear-gradient(145deg,#0e1b15,#0a110e)!important;
  border:1px solid rgba(255,143,94,.28)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.45)!important;
}
.home-wallet-card::before{background:var(--arena-green)!important;box-shadow:0 0 14px rgba(255,143,94,.45)!important;}
.home-wallet-label{color:var(--arena-muted)!important;}
.home-wallet-amt{color:var(--arena-gold)!important;-webkit-text-fill-color:var(--arena-gold)!important;text-shadow:0 0 18px rgba(255,200,61,.18)!important;}
.home-wallet-add{background:rgba(255,143,94,.10)!important;border:1px solid rgba(255,143,94,.25)!important;color:var(--arena-green)!important;}
.home-stat-val{color:var(--arena-text)!important;}
.home-stat-val.red,.home-prize-amt{color:var(--arena-gold)!important;}
.home-stat-val.blue{color:var(--arena-green)!important;}
.home-promo{clip-path:none!important;border-radius:var(--arena-radius)!important;background:linear-gradient(135deg,#15171d,#0a120f)!important;border:1px solid var(--arena-line-strong)!important;box-shadow:none!important;}
.home-promo-btn{background:transparent!important;border:1px solid rgba(255,143,94,.35)!important;color:var(--arena-green)!important;}

/* Quick actions */
.qa-grid{overflow:hidden!important;}
.qa-card{background:transparent!important;border-bottom:1px solid var(--arena-line)!important;}
.qa-card:hover,.qa-card:active{background:rgba(255,143,94,.035)!important;}
.qa-card-icon{box-shadow:none!important;background:rgba(255,143,94,.10)!important;color:var(--arena-green)!important;}
.qa-card-icon i{color:var(--arena-green)!important;}

/* Tournament cards */
.tour-card-banner{background:linear-gradient(135deg,#15171d,#15171d)!important;}
.tour-game-icon{background:rgba(255,143,94,.10)!important;box-shadow:none!important;border:1px solid rgba(255,143,94,.18);}
.tour-game-tag{color:var(--arena-green)!important;border-color:rgba(255,143,94,.35)!important;background:rgba(255,143,94,.06)!important;}
.tour-stat-val{color:var(--arena-text)!important;}
.tour-stat-val.prize{color:var(--arena-gold)!important;text-shadow:none!important;}
.tour-slots-track{background:#1b2721!important;}
.tour-slots-fill{background:linear-gradient(90deg,var(--arena-green-2),var(--arena-green))!important;box-shadow:none!important;}
.badge-live{background:var(--arena-danger)!important;box-shadow:0 0 12px rgba(255,77,103,.22)!important;}
.tour-join-btn,.btn-red{background:linear-gradient(135deg,var(--arena-green-2),#e5501c)!important;color:#15171d!important;box-shadow:0 10px 28px rgba(255,106,57,.18)!important;}
.btn-red:hover,.tour-join-btn:hover{box-shadow:0 14px 34px rgba(255,106,57,.25)!important;}
.btn-ghost{border-color:var(--arena-green)!important;color:var(--arena-green)!important;background:transparent!important;}

/* Chips / filters */
.chip{background:#0c1411!important;border:1px solid var(--arena-line)!important;color:#ff6a39!important;}
.chip.active,.chip:hover{background:rgba(255,143,94,.10)!important;border-color:var(--arena-green)!important;color:var(--arena-green)!important;}

/* Leaderboard */
.leader-podium{background:linear-gradient(180deg,#0b1712,#0a100d)!important;}
.leader-item{border-radius:16px!important;box-shadow:none!important;}
.leader-prize{color:var(--arena-gold)!important;}
.leader-avatar{background:rgba(255,143,94,.08)!important;color:var(--arena-green)!important;}

/* Profile */
.profile-hero{background:radial-gradient(circle at 50% 0,rgba(255,143,94,.12),transparent 50%),#0a1711!important;}
.profile-stats-float{border-top:1px solid var(--arena-green)!important;}
.info-card{box-shadow:none!important;}
.info-val{color:var(--arena-text)!important;}
.avatar-ring,.drawer-avatar{box-shadow:0 0 0 2px rgba(255,143,94,.35),0 0 22px rgba(255,143,94,.12)!important;}

/* Wallet */
.wallet-hero{background:radial-gradient(circle at 100% 20%,rgba(247,245,242,.08),transparent 35%),linear-gradient(145deg,#0b1912,#0a110e)!important;}
.wallet-amount{color:var(--arena-gold)!important;text-shadow:0 0 18px rgba(255,200,61,.14)!important;}
.wallet-btn{background:rgba(255,255,255,.025)!important;border-color:var(--arena-line)!important;}
.wallet-btn:hover{background:rgba(255,143,94,.06)!important;border-color:var(--arena-green)!important;}
.wallet-btn i{color:var(--arena-green)!important;}

/* Navigation: floating, compact, one active colour. */
.bottom-nav{background:rgba(7,12,10,.96)!important;border:1px solid rgba(255,143,94,.24)!important;border-top:1px solid rgba(255,143,94,.3)!important;box-shadow:0 14px 40px rgba(0,0,0,.55)!important;backdrop-filter:blur(16px);}
.nav-item{color:#e5501c!important;}
.nav-item.active,.nav-item.active i{color:var(--arena-green)!important;filter:drop-shadow(0 0 7px rgba(255,143,94,.28))!important;}
.nav-fab{background:linear-gradient(145deg,#15171d,#15171d)!important;border:1px solid var(--arena-green)!important;box-shadow:0 0 0 4px rgba(255,143,94,.07),0 10px 30px rgba(0,0,0,.5)!important;color:var(--arena-text)!important;}
.nav-fab i{color:var(--arena-text)!important;}

/* Forms / auth */
.auth-screen{background:var(--arena-bg)!important;}
.auth-logo,.auth-subtitle{color:var(--arena-text)!important;}
.auth-bg,.auth-bg2{opacity:.35!important;}
.form-input{background:#0c1411!important;border:1px solid var(--arena-line)!important;border-radius:12px!important;padding:14px!important;color:var(--arena-text)!important;}
.form-input:focus{border-color:var(--arena-green)!important;box-shadow:0 0 0 3px rgba(255,143,94,.08)!important;}
.form-label{color:var(--arena-muted)!important;}
.auth-link a,.auth-link span{color:var(--arena-green)!important;}

/* Settings */
.theme-option{background:#0b1310!important;border-color:var(--arena-line)!important;color:var(--arena-muted)!important;}
.theme-option.active{border-color:var(--arena-green)!important;color:var(--arena-green)!important;background:rgba(255,143,94,.08)!important;box-shadow:none!important;}

/* Red remains semantic only: errors, unread alerts, destructive actions. */
.notif-item.unread{border-left-color:var(--arena-danger)!important;}
.txn-amount.debit{color:var(--arena-danger)!important;}
.txn-icon.red{background:rgba(255,77,103,.10)!important;color:var(--arena-danger)!important;}

/* Mobile polish */
@media(max-width:430px){
  .home-body,.profile-body,.wallet-body{padding-left:14px!important;padding-right:14px!important;}
  .tour-card,.info-card,.leader-item{border-radius:17px!important;}
  .bottom-nav{left:10px!important;right:10px!important;width:auto!important;border-radius:28px!important;}
}

/* ================================================================
   HB BATTLE — CLEAN ARENA V3 HOTFIX
   Fixes the broken home composition from the previous pass:
   dark stat surface, stable bottom navigation, calmer home spacing,
   and a less intrusive banner area.
   ================================================================ */
:root{
  --surface: #0b1210;
  --off-white: #080d0b;
  --border: rgba(255,143,94,.18);
  --text: #f7f5f2;
  --text2: #a7b5ae;
  --text3: #737b87;
  --red: #ff4d67;
  --red-dark: #d9364f;
  --red-glow: rgba(255,77,103,.18);
  --blue: #ff8f5e;
  --blue-glow: rgba(255,143,94,.18);
  --gold: #ffc83d;
  --gold-glow: rgba(255,200,61,.18);
}

html,body{overflow-x:hidden!important;background:#050807!important;}
.app{max-width:430px!important;background:#050807!important;}

/* Home header: clean, premium, no giant empty hero. */
.home-hero{
  background:#070d0b!important;
  padding:20px 20px 18px!important;
  border-bottom:1px solid rgba(255,143,94,.16)!important;
}
.home-greeting{font-size:14px!important;color:#ff6a39!important;}
.home-name{font-size:28px!important;line-height:1.05!important;letter-spacing:-.4px!important;}

/* Wallet: dark glass, gold only for money. */
.home-wallet-card{
  margin:14px 16px 0!important;
  min-height:145px!important;
  padding:20px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#0e1914 0%,#09100d 100%)!important;
  border:1px solid rgba(255,143,94,.30)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.42)!important;
}
.home-wallet-card::before{height:3px!important;background:#ff8f5e!important;}
.home-wallet-label{font-size:12px!important;letter-spacing:1px!important;text-transform:uppercase!important;color:#87958e!important;}
.home-wallet-amt{font-size:31px!important;letter-spacing:-.6px!important;color:#ffc83d!important;-webkit-text-fill-color:#ffc83d!important;}
.home-wallet-add{font-size:12px!important;padding:8px 13px!important;border-radius:12px!important;background:rgba(255,143,94,.07)!important;border:1px solid rgba(255,143,94,.28)!important;color:#ff8f5e!important;}

/* Stats: the previous version accidentally fell back to white. */
.home-card-float{
  margin:12px 16px 0!important;
  padding:14px 12px!important;
  min-height:82px!important;
  border-radius:20px!important;
  background:#0b1410!important;
  border:1px solid rgba(255,143,94,.16)!important;
  box-shadow:0 14px 35px rgba(0,0,0,.32)!important;
  color:#f7f5f2!important;
}
.home-stat-val,.home-stat-val.red,.home-stat-val.blue{color:#f7f5f2!important;-webkit-text-fill-color:#f7f5f2!important;font-size:23px!important;}
.home-stat-val.red{color:#ffc83d!important;-webkit-text-fill-color:#ffc83d!important;}
.home-stat-label{color:#737b87!important;font-size:9px!important;letter-spacing:1.3px!important;}
.home-stat-div{background:rgba(255,255,255,.10)!important;height:30px!important;}

/* Promo: compact call-to-action instead of another heavy card. */
.home-promo{
  margin:12px 16px 0!important;
  min-height:76px!important;
  padding:16px 18px!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#15171d,#0a110e)!important;
  border:1px solid rgba(255,143,94,.22)!important;
}
.home-promo-title{font-size:16px!important;}
.home-promo-sub{font-size:11px!important;color:#9eaba5!important;}
.home-promo-btn{border-color:rgba(255,143,94,.35)!important;color:#ff8f5e!important;background:rgba(255,143,94,.04)!important;border-radius:11px!important;}

/* Don't let an old ad graphic dominate the first viewport. */
.banner-slider{max-height:150px!important;margin:12px 16px 0!important;border-radius:18px!important;overflow:hidden!important;}
.banner-slider img,.banner-slider .banner-item{max-height:150px!important;object-fit:cover!important;border-radius:18px!important;}

/* Quick actions sit naturally below the fold. */
.home-body{padding:16px 16px 110px!important;}
.sec-title{color:#f7f5f2!important;}
.sec-title a{color:#ff8f5e!important;}

/* Bottom navigation: centered correctly; never clipped off-screen. */
.bottom-nav{
  left:12px!important;
  right:12px!important;
  bottom:10px!important;
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  border-radius:24px!important;
  padding:7px 4px 10px!important;
  background:rgba(7,13,10,.97)!important;
  border:1px solid rgba(255,143,94,.28)!important;
  box-shadow:0 16px 45px rgba(0,0,0,.62)!important;
}
.nav-item{font-size:9px!important;color:#65736c!important;gap:3px!important;}
.nav-item i{font-size:20px!important;}
.nav-item.active,.nav-item.active i{color:#ff8f5e!important;filter:none!important;}
.nav-fab{width:52px!important;height:52px!important;border-radius:16px!important;margin-top:-25px!important;background:linear-gradient(145deg,#15171d,#15171d)!important;border:1px solid #ff8f5e!important;box-shadow:0 0 0 4px rgba(255,143,94,.06),0 10px 25px rgba(0,0,0,.55)!important;}

/* Never allow legacy light-theme declarations to leak into the arena. */
.home-card-float,.home-card-float *,.profile-stats-float,.profile-stats-float *{color:inherit;}
[data-theme="light"] .home-card-float{background:#0b1410!important;color:#f7f5f2!important;}

@media(max-width:430px){
  .bottom-nav{left:10px!important;right:10px!important;width:auto!important;transform:none!important;}
}

/* =====================================================================
   HB BATTLE — OBSIDIAN ARENA // V4 "PRO CIRCUIT"
   Stronger hierarchy, cleaner geometry, controlled signal colour.
   No white cards, no oversized promo art, no clipped navigation.
   ===================================================================== */
:root{
  --v4-bg:#040806;
  --v4-surface:#08110d;
  --v4-surface-2:#15171d;
  --v4-surface-3:#15171d;
  --v4-line:rgba(255,143,94,.18);
  --v4-line-strong:rgba(255,143,94,.42);
  --v4-green:#ff8f5e;
  --v4-green-2:#ff6a39;
  --v4-gold:#ffc83d;
  --v4-text:#f2f8f4;
  --v4-muted:#7d8b84;
}

html,body{background:var(--v4-bg)!important;color:var(--v4-text)!important;overflow-x:hidden!important;}
body{background-image:radial-gradient(circle at 50% -8%,rgba(255,106,57,.12),transparent 34%),linear-gradient(180deg,#07110c 0,#040806 42%,#040806 100%)!important;}
.app{background:transparent!important;max-width:430px!important;min-height:100vh;}

/* GLOBAL SHAPE LANGUAGE */
.home-wallet-card,.home-card-float,.home-promo,.tour-card,.info-card,.leader-item,.notif-item,.profile-stats-float,.qa-grid,.settings-group,.wallet-btn,.amount-chips,.chip{
  border-radius:18px!important;
}
.home-wallet-card,.home-card-float,.home-promo,.tour-card,.info-card,.leader-item,.notif-item,.profile-stats-float,.qa-grid,.settings-group{
  border:1px solid var(--v4-line)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.34)!important;
}

/* HOME HEADER */
.home-hero{
  background:linear-gradient(180deg,#08120d 0%,#060c09 100%)!important;
  padding:22px 20px 20px!important;
  border-bottom:1px solid rgba(255,143,94,.18)!important;
}
.home-hero:before{
  content:"";position:absolute;right:-55px;top:-90px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,143,94,.10),transparent 68%);pointer-events:none;
}
.home-greeting{font-size:13px!important;letter-spacing:.2px;color:#ff6a39!important;}
.home-name{font-size:30px!important;line-height:1.08!important;font-weight:900!important;letter-spacing:-.8px!important;color:#f7f5f2!important;}

/* WALLET HERO */
.home-wallet-card{
  margin:14px 16px 0!important;min-height:148px!important;padding:20px!important;
  background:linear-gradient(135deg,#0d1a13 0%,#0e0f13 72%)!important;
  position:relative;overflow:hidden;
}
.home-wallet-card:after{
  content:"";position:absolute;right:-70px;bottom:-100px;width:230px;height:230px;border-radius:50%;
  border:1px solid rgba(255,143,94,.10);box-shadow:0 0 0 24px rgba(255,143,94,.025),0 0 0 48px rgba(255,143,94,.018);pointer-events:none;
}
.home-wallet-card:before{height:3px!important;background:linear-gradient(90deg,var(--v4-green),#ff6a39,transparent)!important;box-shadow:0 0 12px rgba(255,143,94,.25)!important;}
.home-wallet-label{color:#ff6a39!important;font-size:11px!important;letter-spacing:1.3px!important;}
.home-wallet-amt{font-size:34px!important;font-weight:900!important;letter-spacing:-1px!important;color:var(--v4-gold)!important;-webkit-text-fill-color:var(--v4-gold)!important;text-shadow:0 0 18px rgba(255,200,61,.10)!important;}
.home-wallet-add{position:relative;z-index:2;background:rgba(255,143,94,.06)!important;border:1px solid rgba(255,143,94,.35)!important;color:var(--v4-green)!important;border-radius:12px!important;font-weight:800!important;}

/* STAT STRIP — never white */
.home-card-float{
  margin:12px 16px 0!important;padding:15px 10px!important;min-height:86px!important;
  background:linear-gradient(180deg,#0b1610,#0e0f13)!important;color:var(--v4-text)!important;
}
.home-stat-val,.home-stat-val.red,.home-stat-val.blue{font-size:24px!important;font-weight:900!important;color:#f7f5f2!important;-webkit-text-fill-color:#f7f5f2!important;}
.home-stat-val.red{color:var(--v4-gold)!important;-webkit-text-fill-color:var(--v4-gold)!important;}
.home-stat-label{font-size:9px!important;letter-spacing:1.5px!important;color:#e5501c!important;}
.home-stat-div{height:32px!important;background:rgba(255,255,255,.10)!important;}

/* PRIMARY CTA */
.home-promo{
  margin:12px 16px 0!important;min-height:82px!important;padding:17px 18px!important;
  background:linear-gradient(135deg,#15171d 0%,#09120d 100%)!important;
  border-color:rgba(255,143,94,.28)!important;clip-path:none!important;box-shadow:inset 3px 0 0 var(--v4-green),0 14px 32px rgba(0,0,0,.28)!important;
}
.home-promo-title{font-size:17px!important;font-weight:900!important;color:#f7f5f2!important;}
.home-promo-sub{font-size:11px!important;color:#ff6a39!important;}
.home-promo-btn{background:rgba(255,143,94,.05)!important;border:1px solid rgba(255,143,94,.36)!important;color:var(--v4-green)!important;border-radius:11px!important;font-weight:800!important;}

/* PROMO IMAGE: keep it visible, but subordinate */
.banner-slider{margin:12px 16px 0!important;height:132px!important;max-height:132px!important;border-radius:18px!important;overflow:hidden!important;border:1px solid rgba(255,143,94,.12)!important;background:#060b08!important;box-shadow:0 12px 30px rgba(0,0,0,.34)!important;}
.banner-slider img,.banner-slider .banner-item{height:132px!important;max-height:132px!important;object-fit:cover!important;border-radius:18px!important;}

/* HOME CONTENT */
.home-body{padding:16px 16px 116px!important;}
.sec-title{font-size:20px!important;font-weight:900!important;color:#f2f8f4!important;}
.sec-title a{color:var(--v4-green)!important;}

/* QUICK ACTIONS — premium control panel */
.qa-grid{background:linear-gradient(180deg,#15171d,#0e0f13)!important;overflow:hidden!important;}
.qa-card{padding:14px 15px!important;border-bottom:1px solid rgba(255,143,94,.09)!important;background:transparent!important;}
.qa-card:active{background:rgba(255,143,94,.05)!important;}
.qa-card-icon{width:40px!important;height:40px!important;border-radius:12px!important;background:rgba(255,143,94,.08)!important;border:1px solid rgba(255,143,94,.20)!important;box-shadow:none!important;}
.qa-card-icon i{color:var(--v4-green)!important;}
.qa-card-title{font-size:14px!important;color:#eaf4ee!important;}
.qa-card-sub{color:#ff6a39!important;}

/* BOTTOM NAV — full-width inside viewport, with a real center action */
.bottom-nav{
  left:10px!important;right:10px!important;bottom:9px!important;width:auto!important;max-width:none!important;transform:none!important;
  min-height:62px!important;padding:7px 5px 9px!important;border-radius:22px!important;
  background:rgba(5,11,8,.96)!important;border:1px solid rgba(255,143,94,.30)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}
.nav-item{font-size:9px!important;gap:3px!important;color:#66746d!important;}
.nav-item i{font-size:19px!important;}
.nav-item.active,.nav-item.active i{color:var(--v4-green)!important;filter:none!important;}
.nav-fab{width:50px!important;height:50px!important;border-radius:15px!important;margin-top:-22px!important;background:linear-gradient(145deg,#15171d,#15171d)!important;border:1px solid var(--v4-green)!important;color:#f5fff8!important;box-shadow:0 0 0 4px rgba(255,143,94,.06),0 12px 28px rgba(0,0,0,.55)!important;}
.nav-item-center{min-width:58px!important;}

/* ALL INTERNAL HEADERS */
.header{background:linear-gradient(180deg,#0a1710,#0e0f13)!important;border-bottom:1px solid rgba(255,143,94,.18)!important;}
.header-title{color:#f7f5f2!important;font-weight:900!important;}
.header-back{background:#edf2ee!important;color:#101713!important;}

/* TOURNAMENT CARDS */
.tour-card{background:linear-gradient(145deg,#0d1a13,#0e0f13)!important;border-color:rgba(255,143,94,.20)!important;box-shadow:0 14px 34px rgba(0,0,0,.35)!important;}
.tour-card:hover,.tour-card:active{border-color:var(--v4-green)!important;transform:translateY(-2px);}
.tour-name{color:#f7f5f2!important;}
.tour-stat-val{color:#e9f4ed!important;}
.tour-stat-val.prize,.leader-prize{color:var(--v4-gold)!important;}
.tour-join-btn,.btn-red{background:linear-gradient(135deg,var(--v4-green),#ff6a39)!important;color:#041009!important;box-shadow:0 10px 24px rgba(255,143,94,.14)!important;}

/* LEADERBOARD: scoreboard feel */
.leader-podium{background:radial-gradient(circle at 50% 35%,rgba(255,200,61,.08),transparent 28%),linear-gradient(180deg,#0b1912,#0e0f13)!important;}
.leader-item{background:linear-gradient(180deg,#0d1913,#08110d)!important;border-color:rgba(255,143,94,.15)!important;}
.podium-rank-badge.rank-1{background:var(--v4-gold)!important;color:#171006!important;box-shadow:0 0 24px rgba(255,200,61,.20)!important;}

/* WALLET */
.wallet-hero{background:radial-gradient(circle at 100% 15%,rgba(255,200,61,.08),transparent 30%),linear-gradient(145deg,#15171d,#0e0f13)!important;}
.wallet-amount{color:var(--v4-gold)!important;-webkit-text-fill-color:var(--v4-gold)!important;}
.wallet-btn{background:#15171d!important;border-color:rgba(255,143,94,.20)!important;color:#eaf4ee!important;}
.wallet-btn i{color:var(--v4-green)!important;}

/* PROFILE */
.profile-hero{background:radial-gradient(circle at 50% 0,rgba(255,143,94,.12),transparent 45%),linear-gradient(180deg,#0b1912,#0e0f13)!important;}
.profile-name{color:#f7f5f2!important;font-weight:900!important;}
.profile-stats-float{background:#0a1510!important;color:#eef6f1!important;}
.info-card{background:linear-gradient(180deg,#15171d,#0e0f13)!important;}
.info-label{color:#ff6a39!important;}
.info-val{color:#eef6f1!important;}

/* FORM / MODALS */
.form-input{background:#09130e!important;color:#f7f5f2!important;border-color:rgba(255,143,94,.18)!important;}
.form-input:focus{border-color:var(--v4-green)!important;box-shadow:0 0 0 3px rgba(255,143,94,.08)!important;}
.modal{background:#09130e!important;color:#f7f5f2!important;border-color:rgba(255,143,94,.18)!important;}

/* RED ONLY MEANS DANGER — stop using it as the visual brand */
.badge-live{background:#ff3f59!important;box-shadow:0 0 12px rgba(255,63,89,.22)!important;}
.qa-badge{background:#ff3f59!important;}

@media(max-width:430px){
  .home-name{font-size:28px!important;}
  .bottom-nav{left:8px!important;right:8px!important;bottom:8px!important;}
  .banner-slider,.banner-slider img,.banner-slider .banner-item{height:124px!important;max-height:124px!important;}
}

/* ============================================================
   HBBATTLE V5 — ARENA SIGNATURE / SMARTQR-INSPIRED SYSTEM
   Reference direction: editorial onboarding, clean geometry,
   strong hierarchy, restrained neon, premium dark surfaces.
   ============================================================ */
:root{
  --v5-bg:#050A09;
  --v5-surface:#0B1512;
  --v5-surface-2:#0F211B;
  --v5-surface-3:#15171d;
  --v5-line:rgba(255,143,94,.20);
  --v5-line-strong:rgba(255,143,94,.46);
  --v5-green:#ff8f5e;
  --v5-green-2:#ff6a39;
  --v5-green-soft:rgba(255,143,94,.10);
  --v5-gold:#FFC83D;
  --v5-muted:#8C9B96;
  --v5-white:#F4FAF7;
}

html,body{background:var(--v5-bg)!important;}
body{color:var(--v5-white);}
.app{
  background:
    radial-gradient(700px 360px at 100% -5%,rgba(255,143,94,.09),transparent 55%),
    radial-gradient(500px 300px at -10% 30%,rgba(255,143,94,.05),transparent 60%),
    var(--v5-bg)!important;
}
.app::before{opacity:.018;background:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 5px);}

/* Core surfaces */
.header,.home-hero,.profile-hero,.wallet-hero,.tour-list,.qa-grid,
.modal.global-menu-modal,.auth-screen{background:var(--v5-bg)!important;color:var(--v5-white)!important;}
.header{border-bottom:1px solid var(--v5-line)!important;}
.header-title,.home-name,.profile-name,.qa-card-title,.tour-name,.txn-title{color:var(--v5-white)!important;}
.home-greeting,.home-wallet-label,.qa-card-sub,.tour-stat-lbl,.home-stat-label,.text3,.txn-date,.profile-uid{color:var(--v5-muted)!important;}

/* Home: reference-style editorial hierarchy */
.home-hero{padding:28px 24px 18px!important;border-bottom:1px solid rgba(255,143,94,.18)!important;}
.home-greeting{font-size:14px!important;letter-spacing:.02em!important;}
.home-name{font-size:30px!important;line-height:1.05!important;letter-spacing:-.04em!important;}
.home-wallet-card{
  margin:4px 16px 0!important;
  min-height:180px!important;
  padding:24px!important;
  border:1px solid var(--v5-line-strong)!important;
  border-radius:26px!important;
  background:
    radial-gradient(240px 180px at 90% 20%,rgba(255,143,94,.10),transparent 70%),
    linear-gradient(145deg,#0B1713,#07100D)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.home-wallet-card::before{height:3px!important;background:linear-gradient(90deg,var(--v5-green),transparent 70%)!important;}
.home-wallet-label{font-size:12px!important;letter-spacing:.12em!important;}
.home-wallet-amt{font-size:42px!important;line-height:1.05!important;color:var(--v5-gold)!important;-webkit-text-fill-color:var(--v5-gold)!important;text-shadow:0 0 24px rgba(255,200,61,.16)!important;}
.home-wallet-add{
  background:rgba(255,143,94,.08)!important;border:1px solid rgba(255,143,94,.45)!important;
  color:var(--v5-green)!important;border-radius:14px!important;padding:11px 17px!important;
}
.home-card-float{
  margin:14px 16px 0!important;padding:20px 12px!important;
  background:rgba(11,21,18,.92)!important;border:1px solid var(--v5-line)!important;
  border-radius:24px!important;box-shadow:0 16px 36px rgba(0,0,0,.28)!important;
}
.home-stat-val{font-size:28px!important;color:var(--v5-white)!important;}
.home-stat-val.red,.home-stat-val.blue{color:var(--v5-gold)!important;}
.home-stat-label{font-size:10px!important;letter-spacing:.14em!important;}
.home-stat-div{background:rgba(255,255,255,.10)!important;height:42px!important;}

.home-promo{
  margin:14px 16px 0!important;padding:20px!important;min-height:112px!important;
  border:1px solid rgba(255,143,94,.28)!important;border-radius:24px!important;
  clip-path:none!important;
  background:linear-gradient(135deg,#0E211A,#09120F)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.28)!important;
}
.home-promo-title{font-size:20px!important;letter-spacing:-.02em!important;}
.home-promo-sub{font-size:12px!important;color:#B5C4BF!important;line-height:1.45!important;}
.home-promo-btn{border-color:rgba(255,143,94,.42)!important;color:var(--v5-green)!important;background:rgba(255,143,94,.05)!important;border-radius:12px!important;padding:10px 14px!important;}

/* Make the promotional image/banner feel intentional rather than oversized */
.home-body{padding:18px 16px 112px!important;}
.home-body img{border-radius:22px!important;}
.sec-title{font-size:19px!important;letter-spacing:-.025em!important;color:var(--v5-white)!important;margin:24px 0 12px!important;}
.sec-title a{color:var(--v5-green)!important;}

/* Quick actions become compact feature tiles */
.qa-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
.qa-card{min-height:72px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:18px!important;background:linear-gradient(145deg,#0D1A16,#09100E)!important;padding:13px!important;box-shadow:0 8px 22px rgba(0,0,0,.20)!important;}
.qa-card:last-child{border-bottom:1px solid rgba(255,255,255,.07)!important;}
.qa-card:active{background:#15171d!important;transform:scale(.985)!important;}
.qa-card-icon{width:36px!important;height:36px!important;border-radius:12px!important;background:rgba(255,143,94,.09)!important;box-shadow:none!important;border:1px solid rgba(255,143,94,.18)!important;}
.qa-card-icon i{color:var(--v5-green)!important;}
.qa-card::after{color:#61706B!important;}

/* Tournament / leaderboard cards */
.tour-card,.leader-item,.notif-item,.approval-card,.info-card,.settings-group{
  background:linear-gradient(145deg,#0D1A16,#09110F)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.24)!important;
}
.chip{background:#0C1814!important;border:1px solid rgba(255,143,94,.18)!important;color:#AAB8B3!important;}
.chip.active{background:rgba(255,143,94,.12)!important;border-color:var(--v5-green)!important;color:var(--v5-green)!important;}

/* Navigation — centered, compact, never clipped */
.bottom-nav{
  left:50%!important;transform:translateX(-50%)!important;
  width:calc(100% - 24px)!important;max-width:406px!important;
  bottom:12px!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
  border:1px solid rgba(255,143,94,.32)!important;border-radius:24px!important;
  background:rgba(6,16,12,.94)!important;backdrop-filter:blur(20px) saturate(140%)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4)!important;
}
.nav-item{color:#71807A!important;font-size:9px!important;gap:4px!important;}
.nav-item i{font-size:20px!important;}
.nav-item.active,.nav-item.active i{color:var(--v5-green)!important;filter:none!important;}
.nav-fab{width:52px!important;height:52px!important;border-radius:16px!important;background:linear-gradient(145deg,#15171d,#0B1C15)!important;border:1px solid var(--v5-green)!important;box-shadow:0 0 0 5px rgba(255,143,94,.07),0 12px 28px rgba(0,0,0,.45)!important;color:var(--v5-green)!important;}

/* Headers and controls */
.header{padding:16px 18px!important;min-height:64px!important;}
.header-back{background:#F5F5F0!important;color:#111!important;border:0!important;width:42px!important;height:42px!important;border-radius:50%!important;}
.header-action{color:var(--v5-green)!important;}
.btn-red,.tour-join-btn{background:linear-gradient(135deg,#ff8f5e,#e5501c)!important;color:#04110A!important;box-shadow:0 10px 28px rgba(255,143,94,.18)!important;border:0!important;}
.btn-ghost{background:transparent!important;border-color:rgba(255,143,94,.35)!important;color:var(--v5-green)!important;}
.form-input{background:#0B1713!important;color:var(--v5-white)!important;border-color:rgba(255,255,255,.10)!important;}
.form-input:focus{border-color:var(--v5-green)!important;box-shadow:0 0 0 3px rgba(255,143,94,.09)!important;}

/* Profile and wallet */
.profile-hero,.wallet-hero{background:linear-gradient(145deg,#15171d,#15171d 60%,#0B1512)!important;}
.profile-hero::after,.wallet-hero::after{background:linear-gradient(90deg,transparent,var(--v5-green),transparent)!important;box-shadow:0 0 12px rgba(255,143,94,.3)!important;}
.profile-stats-float{background:#0B1713!important;border-color:rgba(255,143,94,.22)!important;box-shadow:0 18px 40px rgba(0,0,0,.38)!important;}
.info-row{border-bottom-color:rgba(255,255,255,.07)!important;}
.info-icon{background:rgba(255,143,94,.08)!important;color:var(--v5-green)!important;}
.info-label{color:#83938D!important;}
.info-val{color:var(--v5-white)!important;}

/* Onboarding redesigned after the supplied SmartQR reference */
.onboard-overlay{background:#EEF2F2!important;color:#0A201A!important;}
.onboard-skip{top:20px!important;right:20px!important;background:#fff!important;border:1px solid #E1E7E5!important;border-radius:999px!important;padding:8px 12px!important;color:#687772!important;}
.onboard-track{align-items:stretch!important;}
.onboard-slide{padding:72px 28px 20px!important;justify-content:center!important;}
.onboard-icon{width:min(300px,72vw)!important;height:min(300px,72vw)!important;border-radius:32px!important;background:linear-gradient(145deg,#f7f5f2,#f7f5f2)!important;box-shadow:0 20px 50px rgba(11,65,47,.12)!important;margin-bottom:34px!important;}
.onboard-icon img{width:78%!important;max-width:none!important;border-radius:24px!important;box-shadow:0 16px 35px rgba(0,0,0,.12)!important;}
.onboard-title{font-size:29px!important;line-height:1.08!important;letter-spacing:-.045em!important;color:#0B241D!important;margin-bottom:12px!important;}
.onboard-title::first-line{color:#0B241D!important;}
.onboard-text{font-size:15px!important;line-height:1.65!important;color:#53645F!important;max-width:320px!important;}
.onboard-footer{padding:0 24px 30px!important;background:rgba(255,255,255,.88)!important;border-top:1px solid #E2E8E6!important;backdrop-filter:blur(12px)!important;}
.onboard-dots{padding-top:18px!important;margin-bottom:18px!important;}
.onboard-dot{background:#DDE5E2!important;width:9px!important;height:5px!important;border-radius:999px!important;}
.onboard-dot.active{width:24px!important;background:#ff6a39!important;}
#onboardNextBtn{width:100%!important;height:52px!important;border-radius:16px!important;background:linear-gradient(135deg,#15171d,#e5501c)!important;color:#fff!important;box-shadow:none!important;text-transform:none!important;font-size:16px!important;}

/* First + final onboarding slides get the premium dark cover treatment */
.onboard-slide:first-child,.onboard-slide:last-child{background:radial-gradient(500px 320px at 50% 15%,rgba(255,106,57,.12),transparent 70%),#06251E!important;color:#fff!important;}
.onboard-slide:first-child .onboard-icon,.onboard-slide:last-child .onboard-icon{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,143,94,.22)!important;}
.onboard-slide:first-child .onboard-title,.onboard-slide:last-child .onboard-title{color:#F5FFFB!important;}
.onboard-slide:first-child .onboard-text,.onboard-slide:last-child .onboard-text{color:#A9BDB7!important;}
.onboard-slide:first-child + .onboard-slide,.onboard-slide:nth-child(3),.onboard-slide:nth-child(4){background:#F3F6F5!important;}

/* Desktop/mobile safety */
@media(max-width:430px){
  .home-name{font-size:28px!important;}
  .home-wallet-card{min-height:165px!important;}
  .home-wallet-amt{font-size:38px!important;}
}
@media(min-width:431px){
  .bottom-nav{bottom:18px!important;}
}

/* ============================================================
   HBBATTLE THEME FIX — REAL LIGHT / BLACK / NEON MODES
   V5 previously hard-coded the premium arena into dark colours,
   which prevented the Light selector from visibly switching.
   ============================================================ */

/* BLACK / OBSIDIAN — explicit so theme switching is deterministic */
[data-theme="dark"]{
  --v5-bg:#050A09;
  --v5-surface:#0B1512;
  --v5-surface-2:#0F211B;
  --v5-surface-3:#15171d;
  --v5-line:rgba(255,143,94,.20);
  --v5-line-strong:rgba(255,143,94,.46);
  --v5-green:#ff8f5e;
  --v5-green-2:#ff6a39;
  --v5-green-soft:rgba(255,143,94,.10);
  --v5-gold:#FFC83D;
  --v5-muted:#8C9B96;
  --v5-white:#F4FAF7;
}

/* NEON — black base with stronger green signal */
[data-theme="green"]{
  --v5-bg:#030806;
  --v5-surface:#07120D;
  --v5-surface-2:#15171d;
  --v5-surface-3:#15171d;
  --v5-line:rgba(255,143,94,.24);
  --v5-line-strong:rgba(255,143,94,.58);
  --v5-green:#ff8f5e;
  --v5-green-2:#ff6a39;
  --v5-green-soft:rgba(255,143,94,.13);
  --v5-gold:#FFD24A;
  --v5-muted:#ff6a39;
  --v5-white:#F4FFF8;
}

/* TRUE WHITE / LIGHT MODE */
[data-theme="light"]{
  --v5-bg:#f5f4f2;
  --v5-surface:#FFFFFF;
  --v5-surface-2:#F1F5F3;
  --v5-surface-3:#E8F0EC;
  --v5-line:rgba(8,72,48,.14);
  --v5-line-strong:rgba(229,80,28,.28);
  --v5-green:#e5501c;
  --v5-green-2:#e5501c;
  --v5-green-soft:rgba(229,80,28,.09);
  --v5-gold:#C98B00;
  --v5-muted:#6c7480;
  --v5-white:#15171d;
  --red:#E6394F;
  --blue:#e5501c;
  --success:#e5501c;
  --gold:#C98B00;
  --off-white:#f5f4f2;
  --surface:#FFFFFF;
  --border:#e6e4e1;
  --text:#15171d;
  --text2:#5b6470;
  --text3:#74827B;
  --shadow:0 8px 28px rgba(18,32,25,.08);
  --shadow-lg:0 18px 45px rgba(18,32,25,.12);
}

[data-theme="light"] html,
[data-theme="light"] body,
html[data-theme="light"],
html[data-theme="light"] body{
  background:#f5f4f2!important;
  color:#15171d!important;
}

html[data-theme="light"] .app{
  background:
    radial-gradient(650px 300px at 100% -5%,rgba(229,80,28,.07),transparent 55%),
    #f5f4f2!important;
  color:#15171d!important;
}

/* Light mode: all V5 hard-coded dark shells become white/light surfaces. */
html[data-theme="light"] .header,
html[data-theme="light"] .home-hero,
html[data-theme="light"] .profile-hero,
html[data-theme="light"] .wallet-hero,
html[data-theme="light"] .tour-list,
html[data-theme="light"] .qa-grid,
html[data-theme="light"] .auth-screen,
html[data-theme="light"] .modal.global-menu-modal{
  background:#FFFFFF!important;
  color:#15171d!important;
}

html[data-theme="light"] .header{
  border-bottom:1px solid #e6e4e1!important;
  box-shadow:0 4px 18px rgba(18,32,25,.06)!important;
}
html[data-theme="light"] .header-title,
html[data-theme="light"] .home-name,
html[data-theme="light"] .profile-name,
html[data-theme="light"] .qa-card-title,
html[data-theme="light"] .tour-name,
html[data-theme="light"] .txn-title,
html[data-theme="light"] .sec-title{
  color:#15171d!important;
}
html[data-theme="light"] .home-greeting,
html[data-theme="light"] .home-wallet-label,
html[data-theme="light"] .qa-card-sub,
html[data-theme="light"] .tour-stat-lbl,
html[data-theme="light"] .home-stat-label,
html[data-theme="light"] .text3,
html[data-theme="light"] .txn-date,
html[data-theme="light"] .profile-uid,
html[data-theme="light"] .info-label{
  color:#6c7480!important;
}

html[data-theme="light"] .home-wallet-card{
  background:linear-gradient(145deg,#FFFFFF,#f7f5f2)!important;
  border-color:rgba(229,80,28,.30)!important;
  box-shadow:0 16px 38px rgba(18,32,25,.10)!important;
}
html[data-theme="light"] .home-wallet-amt,
html[data-theme="light"] .wallet-amount{
  color:#B87A00!important;
  -webkit-text-fill-color:#B87A00!important;
  text-shadow:none!important;
}
html[data-theme="light"] .home-wallet-add{
  background:#fce9df!important;
  border-color:#ff8f5e!important;
  color:#e5501c!important;
}
html[data-theme="light"] .home-card-float,
html[data-theme="light"] .profile-stats-float{
  background:#FFFFFF!important;
  color:#15171d!important;
  border-color:#e6e4e1!important;
  box-shadow:0 12px 30px rgba(18,32,25,.08)!important;
}
html[data-theme="light"] .home-stat-val,
html[data-theme="light"] .home-stat-val.red,
html[data-theme="light"] .home-stat-val.blue{
  color:#15171d!important;
  -webkit-text-fill-color:#15171d!important;
}
html[data-theme="light"] .home-stat-val.red{color:#B87A00!important;-webkit-text-fill-color:#B87A00!important;}
html[data-theme="light"] .home-stat-div{background:#e6e4e1!important;}

html[data-theme="light"] .home-promo{
  background:linear-gradient(135deg,#FFFFFF,#F0F8F4)!important;
  border-color:rgba(229,80,28,.24)!important;
  box-shadow:0 12px 30px rgba(18,32,25,.08)!important;
}
html[data-theme="light"] .home-promo-title{color:#15171d!important;}
html[data-theme="light"] .home-promo-sub{color:#6c7480!important;}
html[data-theme="light"] .home-promo-btn{background:#F0FAF5!important;color:#e5501c!important;border-color:#ff8f5e!important;}

html[data-theme="light"] .tour-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .leader-item,
html[data-theme="light"] .notif-item,
html[data-theme="light"] .approval-card,
html[data-theme="light"] .settings-group,
html[data-theme="light"] .qa-grid{
  background:#FFFFFF!important;
  color:#15171d!important;
  border-color:#e6e4e1!important;
  box-shadow:0 10px 28px rgba(18,32,25,.07)!important;
}
html[data-theme="light"] .tour-stat-val,
html[data-theme="light"] .info-val{
  color:#15171d!important;
}
html[data-theme="light"] .tour-stat-val.prize,
html[data-theme="light"] .leader-prize{color:#B87A00!important;}
html[data-theme="light"] .tour-join-btn,
html[data-theme="light"] .btn-red{
  background:linear-gradient(135deg,#e5501c,#e5501c)!important;
  color:#FFFFFF!important;
}

html[data-theme="light"] .leader-podium{
  background:radial-gradient(circle at 50% 35%,rgba(201,139,0,.08),transparent 28%),linear-gradient(180deg,#F0F7F3,#FFFFFF)!important;
  color:#15171d!important;
}
html[data-theme="light"] .wallet-hero{
  background:radial-gradient(circle at 100% 15%,rgba(201,139,0,.07),transparent 30%),linear-gradient(145deg,#FFFFFF,#EFF7F3)!important;
}
html[data-theme="light"] .wallet-btn{
  background:#FFFFFF!important;
  border-color:#e6e4e1!important;
  color:#15171d!important;
}
html[data-theme="light"] .wallet-btn i{color:#e5501c!important;}
html[data-theme="light"] .profile-hero{
  background:radial-gradient(circle at 50% 0,rgba(229,80,28,.08),transparent 45%),linear-gradient(180deg,#FFFFFF,#F0F7F3)!important;
}
html[data-theme="light"] .form-input,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#FFFFFF!important;
  color:#15171d!important;
  border-color:#e6e4e1!important;
}
html[data-theme="light"] .form-input:focus{border-color:#e5501c!important;box-shadow:0 0 0 3px rgba(229,80,28,.08)!important;}
html[data-theme="light"] .modal{background:#FFFFFF!important;color:#15171d!important;border-color:#e6e4e1!important;}

/* Navigation works in both modes and stays readable. */
html[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(229,80,28,.22)!important;
  box-shadow:0 14px 36px rgba(18,32,25,.16)!important;
}
html[data-theme="light"] .nav-item{color:#74827B!important;}
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .nav-item.active i{color:#e5501c!important;}
html[data-theme="light"] .nav-fab{
  background:linear-gradient(145deg,#FFFFFF,#fce9df)!important;
  color:#e5501c!important;
  border-color:#e5501c!important;
  box-shadow:0 0 0 4px rgba(229,80,28,.07),0 10px 24px rgba(18,32,25,.15)!important;
}

/* Theme selector itself: the active option is always obvious. */
html[data-theme="light"] .theme-option{background:#FFFFFF!important;color:#6c7480!important;border-color:#e6e4e1!important;}
html[data-theme="light"] .theme-option.active{background:#fce9df!important;color:#e5501c!important;border-color:#e5501c!important;}
html[data-theme="dark"] .theme-option.active,
html[data-theme="green"] .theme-option.active{background:rgba(255,143,94,.10)!important;color:#ff8f5e!important;border-color:#ff8f5e!important;}

/* Keep the onboarding/intro panels theme-aware too. */
html[data-theme="light"] .onboarding-screen,
html[data-theme="light"] .onboarding-card,
html[data-theme="light"] .tutorial-card{
  background:#FFFFFF!important;color:#15171d!important;
}

/* ================================================================
   HBBATTLE V7 — MOBILE THEME / LAYOUT HOTFIX
   Fixes light-mode contrast and mobile quick-action overflow.
   ================================================================ */

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] .app{
  background:#F7FAF8!important;
  color:#15171d!important;
}

/* Wallet light mode: the hero is light, so every hero label/value must be dark. */
html[data-theme="light"] .wallet-hero{
  color:#15171d!important;
  background:radial-gradient(circle at 100% 15%,rgba(201,139,0,.07),transparent 30%),linear-gradient(145deg,#FFFFFF,#EFF7F3)!important;
}
html[data-theme="light"] .wallet-label{color:#6c7480!important;}
html[data-theme="light"] .wallet-amount{color:#B87A00!important;-webkit-text-fill-color:#B87A00!important;text-shadow:none!important;}
html[data-theme="light"] .wallet-sub{color:#6c7480!important;}
html[data-theme="light"] .wallet-hero .header-back{background:#F3F5F3!important;color:#15171d!important;}

/* Quick actions: never leave dark V5 tiles behind in light mode. */
html[data-theme="light"] .qa-card{
  background:linear-gradient(145deg,#FFFFFF,#F4F8F6)!important;
  color:#15171d!important;
  border:1px solid #e6e4e1!important;
  box-shadow:0 8px 22px rgba(18,32,25,.08)!important;
}
html[data-theme="light"] .qa-card-title{color:#15171d!important;}
html[data-theme="light"] .qa-card-sub{color:#6c7480!important;}
html[data-theme="light"] .qa-card::after{color:#737b87!important;}
html[data-theme="light"] .qa-card:active{background:#EDF8F2!important;}

/* Home stats: force readable text in light mode. */
html[data-theme="light"] .home-card-float .home-stat-val,
html[data-theme="light"] .home-card-float .home-stat-val.red,
html[data-theme="light"] .home-card-float .home-stat-val.blue{
  opacity:1!important;
  filter:none!important;
  color:#15171d!important;
  -webkit-text-fill-color:#15171d!important;
}
html[data-theme="light"] .home-card-float .home-stat-val.red{color:#B87A00!important;-webkit-text-fill-color:#B87A00!important;}
html[data-theme="light"] .home-card-float .home-stat-label{color:#6c7480!important;opacity:1!important;}

/* Light navigation: all five controls stay visible, including the center wallet icon. */
html[data-theme="light"] .bottom-nav{color:#15171d!important;}
html[data-theme="light"] .nav-fab,
html[data-theme="light"] .nav-fab i{color:#e5501c!important;}

/* The expanded quick-action grid must respect the actual mobile viewport. */
.qa-grid,
#qaExtraCards{min-width:0!important;max-width:100%!important;}
.qa-card{min-width:0!important;max-width:100%!important;overflow:hidden!important;}
.qa-card > div:last-of-type{min-width:0!important;}
.qa-card-title,.qa-card-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media(max-width:430px){
  .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;}
  .qa-card{width:100%!important;}
  .qa-card-title{font-size:13px!important;}
  .qa-card-sub{font-size:11px!important;}
}

/* Keep theme transitions smooth without changing functionality. */
html[data-theme="light"] .home-body,
html[data-theme="light"] .wallet-body,
html[data-theme="light"] .profile-body{background:#F7FAF8!important;}

/* ================================================================
   HBBATTLE V8 — PREMIUM EDITORIAL ARENA
   Cleaner hierarchy, calmer surfaces, tighter mobile geometry.
   No functionality changes.
   ================================================================ */
:root{
  --v8-green:#ff8f5e;
  --v8-green-strong:#ff6a39;
  --v8-gold:#F5B82E;
  --v8-ink:#0e0f13;
  --v8-panel:#0B1712;
  --v8-panel-2:#15171d;
  --v8-line:rgba(255,143,94,.16);
  --v8-muted:#ff6a39;
}

/* Shared rhythm */
#dashboardScreen{padding-bottom:0!important;}
#dashboardScreen .home-body{max-width:760px;margin:0 auto;}
.home-hero{padding:24px 20px 18px!important;background:linear-gradient(180deg,#08120E 0%,#0e0f13 100%)!important;border-bottom:1px solid rgba(255,143,94,.12)!important;}
.home-greeting{font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#ff6a39!important;}
.home-name{font-size:27px!important;letter-spacing:-.035em!important;line-height:1.05!important;}
.home-hero > div{max-width:760px;margin:0 auto;}

/* Wallet hero: one strong focal card, not a generic green box. */
.home-wallet-card{margin:14px 20px 0!important;max-width:760px;margin-left:auto!important;margin-right:auto!important;min-height:148px!important;padding:20px 20px 18px!important;border-radius:24px!important;background:radial-gradient(circle at 92% 20%,rgba(245,184,46,.10),transparent 28%),linear-gradient(145deg,#15171d,#08120E)!important;border:1px solid rgba(255,143,94,.20)!important;box-shadow:0 18px 42px rgba(0,0,0,.30)!important;}
.home-wallet-card::before{height:2px!important;background:linear-gradient(90deg,var(--v8-green),rgba(255,143,94,0))!important;box-shadow:none!important;}
.home-wallet-label{font-size:10px!important;letter-spacing:.14em!important;color:#ff6a39!important;}
.home-wallet-amt{font-size:34px!important;letter-spacing:-.04em!important;color:var(--v8-gold)!important;-webkit-text-fill-color:var(--v8-gold)!important;text-shadow:none!important;margin-top:4px!important;}
.home-wallet-add{background:rgba(255,143,94,.09)!important;color:var(--v8-green)!important;border:1px solid rgba(255,143,94,.32)!important;border-radius:12px!important;padding:8px 13px!important;font-size:12px!important;}

/* Stats become a compact dashboard strip. */
.home-card-float{margin:12px 20px 0!important;max-width:760px;margin-left:auto!important;margin-right:auto!important;padding:14px 10px!important;border-radius:20px!important;background:#09140F!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 10px 28px rgba(0,0,0,.18)!important;}
.home-stat-val{font-size:25px!important;line-height:1!important;}
.home-stat-label{font-size:9px!important;letter-spacing:.13em!important;color:#ff6a39!important;}
.home-stat-div{height:30px!important;background:rgba(255,255,255,.08)!important;}

/* Promo: editorial, not a large ad-like block. */
.home-promo{margin:14px 20px 0!important;max-width:760px;margin-left:auto!important;margin-right:auto!important;min-height:92px!important;padding:18px 18px!important;border-radius:20px!important;clip-path:none!important;background:linear-gradient(135deg,#15171d,#0A1711)!important;border:1px solid rgba(255,143,94,.16)!important;box-shadow:none!important;}
.home-promo-title{font-size:18px!important;letter-spacing:-.025em!important;}
.home-promo-sub{font-size:11px!important;color:#ff6a39!important;margin-top:5px!important;}
.home-promo-btn{background:var(--v8-green)!important;color:#0e0f13!important;border:0!important;border-radius:11px!important;padding:9px 13px!important;font-size:11px!important;}

/* Banner stays useful but feels like a product module. */
.banner-slider{margin:14px 20px 0!important;max-width:760px;margin-left:auto!important;margin-right:auto!important;border-radius:20px!important;overflow:hidden!important;box-shadow:0 12px 30px rgba(0,0,0,.22)!important;}
.banner-slider img,.banner-slider .banner-item{border-radius:20px!important;}

/* Section headings */
.home-body{padding:20px 20px 118px!important;}
.sec-title{font-size:18px!important;font-weight:800!important;letter-spacing:-.025em!important;margin:0 0 12px!important;}
.sec-title a{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--v8-green)!important;}

/* Quick actions: true two-column control grid, including expanded cards. */
.qa-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;background:transparent!important;border:0!important;overflow:visible!important;}
#qaExtraCards{display:contents!important;}
.qa-card{min-height:74px!important;width:100%!important;box-sizing:border-box!important;padding:13px!important;display:flex!important;align-items:center!important;gap:11px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:17px!important;background:linear-gradient(145deg,#0D1A15,#09110E)!important;box-shadow:0 7px 18px rgba(0,0,0,.16)!important;}
.qa-card-icon{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important;background:rgba(255,143,94,.08)!important;border:1px solid rgba(255,143,94,.18)!important;}
.qa-card-icon i{color:var(--v8-green)!important;font-size:14px!important;}
.qa-card-title{font-size:12px!important;line-height:1.2!important;color:#ECF5F0!important;white-space:normal!important;}
.qa-card-sub{font-size:10px!important;line-height:1.25!important;color:#73827B!important;white-space:normal!important;margin-top:3px!important;}
.qa-card:active{transform:translateY(1px)!important;background:#15171d!important;}

/* Navigation: quieter, thinner and always centered inside viewport. */
.bottom-nav{left:12px!important;right:12px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:auto!important;transform:none!important;height:64px!important;min-height:64px!important;padding:6px 7px!important;border-radius:24px!important;background:rgba(7,15,11,.94)!important;border:1px solid rgba(255,143,94,.20)!important;box-shadow:0 18px 42px rgba(0,0,0,.46)!important;}
.nav-item{font-size:9px!important;color:#718079!important;gap:2px!important;}
.nav-item i{font-size:18px!important;}
.nav-item.active,.nav-item.active i{color:var(--v8-green)!important;}
.nav-fab{width:52px!important;height:52px!important;margin-top:-20px!important;border-radius:16px!important;background:linear-gradient(145deg,#15171d,#0A1711)!important;border:1px solid var(--v8-green)!important;color:#f7f5f2!important;box-shadow:0 0 0 4px rgba(255,143,94,.05),0 12px 26px rgba(0,0,0,.38)!important;}

/* Wallet / profile / leaderboard share the same premium hierarchy. */
.wallet-hero{background:radial-gradient(circle at 92% 18%,rgba(245,184,46,.11),transparent 28%),linear-gradient(145deg,#15171d,#0e0f13)!important;}
.wallet-amount{font-size:58px!important;letter-spacing:-.05em!important;color:var(--v8-gold)!important;-webkit-text-fill-color:var(--v8-gold)!important;}
.wallet-label{letter-spacing:.12em!important;color:#ff6a39!important;}
.wallet-sub{color:#819089!important;}
.wallet-btn{border-radius:16px!important;background:#0D1A14!important;border-color:rgba(255,143,94,.18)!important;}
.leader-podium{background:radial-gradient(circle at 50% 20%,rgba(245,184,46,.09),transparent 26%),linear-gradient(180deg,#0C1A13,#0e0f13)!important;}
.profile-hero{background:radial-gradient(circle at 50% 0,rgba(255,143,94,.10),transparent 44%),linear-gradient(180deg,#0C1A13,#0e0f13)!important;}

/* Light mode — intentionally airy like the reference image, without losing HB identity. */
html[data-theme="light"] body,html[data-theme="light"] .app{background:#F5F8F6!important;color:#15171d!important;}
html[data-theme="light"] .home-hero{background:linear-gradient(180deg,#FFFFFF,#F3F8F5)!important;border-bottom:1px solid #DDE8E2!important;}
html[data-theme="light"] .home-greeting{color:#7A8982!important;}
html[data-theme="light"] .home-name{color:#15171d!important;}
html[data-theme="light"] .home-wallet-card{background:radial-gradient(circle at 92% 18%,rgba(245,184,46,.08),transparent 28%),linear-gradient(145deg,#FFFFFF,#F0F7F3)!important;border-color:#D8E5DF!important;box-shadow:0 14px 34px rgba(18,32,25,.08)!important;}
html[data-theme="light"] .home-wallet-label{color:#737b87!important;}
html[data-theme="light"] .home-wallet-amt{color:#B97B00!important;-webkit-text-fill-color:#B97B00!important;}
html[data-theme="light"] .home-card-float{background:#FFFFFF!important;border-color:#DCE7E1!important;box-shadow:0 10px 26px rgba(18,32,25,.06)!important;}
html[data-theme="light"] .home-stat-val{color:#15171d!important;-webkit-text-fill-color:#15171d!important;}
html[data-theme="light"] .home-stat-val.red{color:#B97B00!important;-webkit-text-fill-color:#B97B00!important;}
html[data-theme="light"] .home-stat-label{color:#737b87!important;}
html[data-theme="light"] .home-promo{background:linear-gradient(135deg,#fce9df,#FFFFFF)!important;border-color:#f7f5f2!important;}
html[data-theme="light"] .home-promo-title{color:#15171d!important;}
html[data-theme="light"] .home-promo-sub{color:#6c7480!important;}
html[data-theme="light"] .home-promo-btn{background:#ff6a39!important;color:#FFFFFF!important;}
html[data-theme="light"] .qa-card{background:linear-gradient(145deg,#FFFFFF,#F5F9F7)!important;border-color:#DCE7E1!important;box-shadow:0 7px 18px rgba(18,32,25,.06)!important;}
html[data-theme="light"] .qa-card-title{color:#15171d!important;}
html[data-theme="light"] .qa-card-sub{color:#737b87!important;}
html[data-theme="light"] .qa-card-icon{background:#EDF8F2!important;border-color:#f7f5f2!important;}
html[data-theme="light"] .bottom-nav{background:rgba(255,255,255,.95)!important;border-color:#f7f5f2!important;box-shadow:0 16px 36px rgba(18,32,25,.13)!important;}
html[data-theme="light"] .nav-item{color:#737b87!important;}
html[data-theme="light"] .nav-item.active,html[data-theme="light"] .nav-item.active i{color:#e5501c!important;}
html[data-theme="light"] .nav-fab{background:linear-gradient(145deg,#FFFFFF,#ECF8F1)!important;color:#e5501c!important;border-color:#e5501c!important;}
html[data-theme="light"] .wallet-hero{background:radial-gradient(circle at 92% 18%,rgba(245,184,46,.08),transparent 28%),linear-gradient(145deg,#FFFFFF,#EFF7F3)!important;}
html[data-theme="light"] .wallet-amount{color:#B97B00!important;-webkit-text-fill-color:#B97B00!important;}
html[data-theme="light"] .wallet-label,html[data-theme="light"] .wallet-sub{color:#737b87!important;}

@media(max-width:430px){
  .home-wallet-card,.home-card-float,.home-promo,.banner-slider{margin-left:14px!important;margin-right:14px!important;}
  .home-body{padding-left:14px!important;padding-right:14px!important;}
  .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .qa-card{min-height:70px!important;padding:11px!important;gap:9px!important;}
  .qa-card-icon{width:36px!important;height:36px!important;min-width:36px!important;}
  .qa-card-title{font-size:11.5px!important;}
  .qa-card-sub{font-size:9.5px!important;}
  .bottom-nav{left:8px!important;right:8px!important;}
}


/* ===== v8 BUG FIX PATCH: layout + visibility, design unchanged ===== */
/* Stats card has 5 children (stat/divider/stat/divider/stat); use five tracks,
   otherwise the third stat wraps onto a second row. */
.home-card-float{
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr)!important;
  gap:0!important;
  align-items:center!important;
}
.home-stat-div{width:1px!important;margin:0 auto!important;}

/* The shared nav is floating, so reserve enough scroll space on every nav screen. */
#dashboardScreen,#tournamentScreen,#myMatchesScreen,#walletScreen,#leaderboardScreen,#profileScreen{
  padding-bottom:96px!important;
}

/* Light leaderboard podium previously kept white podium names from dark mode. */
html[data-theme="light"] .leader-podium .podium-name{color:#15171d!important;}
html[data-theme="light"] .leader-podium .podium-prize{color:#B87A00!important;}
html[data-theme="light"] .leader-podium [style*="color:var(--text3)"]{color:#6c7480!important;}
html[data-theme="light"] .leader-name{color:#15171d!important;opacity:1!important;}
html[data-theme="light"] .leader-rank{color:#e5501c!important;}

/* Keep fixed nav above content without covering the last rows. */
@media(max-width:430px){
  #leaderList,#walletTxns{padding-bottom:112px!important;}
}

/* ===== v9 WHITE PREMIUM MOTION PATCH =====
   Keeps the existing layout, but adds depth, colour behind hero sections,
   subtle motion and a more premium profile/leaderboard hierarchy. */
@keyframes hbFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes hbGlow{0%,100%{opacity:.38;transform:scale(.96)}50%{opacity:.78;transform:scale(1.08)}}
@keyframes hbShimmer{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(180%) skewX(-18deg)}}
@keyframes hbPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,80,28,.18)}50%{box-shadow:0 0 0 10px rgba(229,80,28,0)}}

html[data-theme="light"] .wallet-hero{position:relative;isolation:isolate;overflow:hidden;background:
 radial-gradient(circle at 18% 14%,rgba(229,80,28,.12),transparent 27%),
 radial-gradient(circle at 88% 18%,rgba(216,157,18,.15),transparent 29%),
 linear-gradient(145deg,#FFFFFF 0%,#F1FAF5 54%,#FBFCF8 100%)!important;}
html[data-theme="light"] .wallet-hero:before{content:"";position:absolute;inset:auto -25% 5% 40%;height:190px;border-radius:50%;background:radial-gradient(ellipse,rgba(229,80,28,.12),transparent 65%);filter:blur(14px);z-index:-1;animation:hbGlow 5s ease-in-out infinite;}
.wallet-ambient{position:absolute;border-radius:999px;pointer-events:none;filter:blur(2px);z-index:0;}
.wallet-ambient.ambient-one{width:150px;height:150px;right:-45px;top:95px;background:radial-gradient(circle,rgba(229,80,28,.10),transparent 70%);animation:hbGlow 6s ease-in-out infinite;}
.wallet-ambient.ambient-two{width:110px;height:110px;left:-35px;bottom:45px;background:radial-gradient(circle,rgba(216,157,18,.09),transparent 68%);animation:hbGlow 7s ease-in-out infinite reverse;}
.wallet-visual{width:190px;height:190px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;}
.wallet-visual:after{content:"";position:absolute;width:74%;height:22px;bottom:18px;border-radius:50%;background:rgba(11,32,25,.16);filter:blur(12px);z-index:-1;}
.wallet-float-img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(12,27,20,.24));animation:hbFloat 5.5s ease-in-out infinite;}
html[data-theme="light"] .wallet-label{font-weight:800;color:#e5501c!important;}
html[data-theme="light"] .wallet-amount{background:linear-gradient(135deg,#e5501c,#e5501c 60%,#B87A00);-webkit-background-clip:text!important;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important;}
html[data-theme="light"] .wallet-actions{position:relative;z-index:2;}
html[data-theme="light"] .wallet-btn{background:rgba(255,255,255,.84)!important;border:1px solid rgba(229,80,28,.18)!important;box-shadow:0 9px 22px rgba(16,43,31,.07)!important;transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important;}
html[data-theme="light"] .wallet-btn:active{transform:scale(.97);box-shadow:0 4px 10px rgba(16,43,31,.08)!important;}
.wallet-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px;}
.wallet-stat-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#FFFFFF,#F7FBF9)!important;border:1px solid #E0EBE5;border-radius:18px;padding:15px 10px;text-align:center;box-shadow:0 12px 26px rgba(18,32,25,.055);}
.wallet-stat-card:before{content:"";position:absolute;width:40px;height:40px;border-radius:50%;right:-16px;top:-18px;background:rgba(229,80,28,.07);}

html[data-theme="light"] .profile-hero-premium{position:relative;overflow:hidden;background:
 radial-gradient(circle at 50% -10%,rgba(229,80,28,.17),transparent 45%),
 radial-gradient(circle at 92% 24%,rgba(216,157,18,.08),transparent 26%),
 linear-gradient(180deg,#FFFFFF,#F1F9F5)!important;min-height:240px;}
html[data-theme="light"] .profile-hero-premium:before{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(229,80,28,.10);border-radius:50%;left:50%;top:-150px;transform:translateX(-50%);}
html[data-theme="light"] .profile-hero-premium .avatar-ring{box-shadow:0 12px 34px rgba(229,80,28,.17),0 0 0 6px rgba(255,255,255,.78);animation:hbPulse 3.8s ease-in-out infinite;}
html[data-theme="light"] #profileRankBadge{background:linear-gradient(135deg,#ff6a39,#e5501c)!important;color:#fff!important;box-shadow:0 8px 20px rgba(229,80,28,.18);}
html[data-theme="light"] .profile-stats-float{margin-top:-24px!important;position:relative;z-index:3;border:1px solid #DCE9E2!important;border-radius:22px!important;box-shadow:0 14px 30px rgba(18,32,25,.09)!important;}
html[data-theme="light"] .profile-body .info-card{border:1px solid #E0EBE5!important;border-radius:20px!important;box-shadow:0 10px 26px rgba(18,32,25,.055)!important;}
.ai-assistant-premium{position:relative;overflow:hidden;background:linear-gradient(120deg,#ff6a39,#e5501c 55%,#e5501c)!important;border-radius:18px!important;box-shadow:0 14px 30px rgba(229,80,28,.20)!important;}
.ai-assistant-premium:after{content:"";position:absolute;inset:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:hbShimmer 4.5s ease-in-out infinite;}
.profile-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
html[data-theme="light"] .profile-action-btn{min-height:76px!important;border-radius:18px!important;background:linear-gradient(145deg,#FFFFFF,#F7FBF9)!important;border:1px solid #f7f5f2!important;color:#e5501c!important;box-shadow:0 8px 18px rgba(18,32,25,.045)!important;transition:transform .2s ease,box-shadow .2s ease!important;}
html[data-theme="light"] .profile-action-btn:active{transform:scale(.98);box-shadow:0 4px 10px rgba(18,32,25,.06)!important;}
html[data-theme="light"] .profile-action-btn i{color:#ff6a39!important;}

html[data-theme="light"] .leader-podium{position:relative;overflow:hidden;background:
 radial-gradient(circle at 50% 25%,rgba(216,157,18,.13),transparent 31%),
 radial-gradient(circle at 10% 65%,rgba(229,80,28,.08),transparent 25%),
 linear-gradient(180deg,#FFFFFF,#F2F8F5)!important;}
html[data-theme="light"] .leader-podium:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;left:50%;top:30px;transform:translateX(-50%);background:radial-gradient(circle,rgba(216,157,18,.08),transparent 66%);animation:hbGlow 6s ease-in-out infinite;pointer-events:none;}
html[data-theme="light"] .podium-avatar{position:relative;background:#F4FAF7!important;box-shadow:0 12px 24px rgba(18,32,25,.08)!important;}
html[data-theme="light"] .podium-item:first-child .podium-avatar{box-shadow:0 0 0 2px rgba(216,157,18,.55),0 12px 28px rgba(216,157,18,.15)!important;animation:hbPulse 3.4s ease-in-out infinite;}
html[data-theme="light"] .leader-item{background:linear-gradient(145deg,#FFFFFF,#F8FBF9)!important;border:1px solid #E0EBE5!important;border-radius:18px!important;box-shadow:0 9px 20px rgba(18,32,25,.045)!important;}
html[data-theme="light"] #myRankChip{background:linear-gradient(135deg,#FFF7F7,#FFFFFF)!important;border-color:#E0A2AA!important;box-shadow:0 10px 24px rgba(196,55,70,.07);}

@media(max-width:430px){.wallet-visual{width:150px;height:150px}.wallet-amount{font-size:52px!important}.profile-actions-grid{gap:10px}.wallet-stat-card{padding:13px 7px}}

/* ================================================================
   HBBATTLE V10 — PREMIUM WHITE FIX + WALLET AMBIENT EFFECTS
   Final mobile polish: fixes washed-out light screens and gives the
   wallet pouch its own premium green animated environment.
   ================================================================ */

@keyframes hbWalletGlowMove {
  0%,100% { transform:translate3d(-6px,0,0) scale(1); opacity:.62; }
  50% { transform:translate3d(10px,-8px,0) scale(1.12); opacity:1; }
}
@keyframes hbWalletFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-7px) rotate(-1deg); }
}
@keyframes hbWalletShine {
  0% { transform:translateX(-160%) rotate(18deg); opacity:0; }
  20% { opacity:.7; }
  55%,100% { transform:translateX(240%) rotate(18deg); opacity:0; }
}
@keyframes hbPulseRing {
  0%,100% { transform:scale(.92); opacity:.18; }
  50% { transform:scale(1.08); opacity:.45; }
}
@keyframes hbSoftRise {
  0%,100% { transform:translateY(0); opacity:.45; }
  50% { transform:translateY(-10px); opacity:.85; }
}

html[data-theme="light"] .home-wallet-card,
html[data-theme="light"] .wallet-hero{
  isolation:isolate;
}

/* HOME WALLET — premium green background behind the pouch */
html[data-theme="light"] .home-wallet-card{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 79% 45%, rgba(229,80,28,.25) 0 15%, transparent 39%),
    radial-gradient(circle at 93% 9%, rgba(255,199,61,.17), transparent 31%),
    linear-gradient(135deg,#ffffff 0%,#f1faf5 56%,#f7f5f2 100%)!important;
  border:1px solid rgba(229,80,28,.28)!important;
  box-shadow:0 18px 42px rgba(229,80,28,.12), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
html[data-theme="light"] .home-wallet-card::after{
  content:""!important;
  position:absolute!important;
  width:180px!important;height:180px!important;
  right:-42px!important;top:-28px!important;
  z-index:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(229,80,28,.26) 0,rgba(229,80,28,.12) 33%,rgba(229,80,28,0) 70%)!important;
  filter:blur(8px)!important;
  animation:hbWalletGlowMove 5s ease-in-out infinite!important;
  pointer-events:none!important;
}
html[data-theme="light"] .home-wallet-card::before{
  height:3px!important;
  background:linear-gradient(90deg,#e5501c,#ff6a39 54%,#e6b53c 100%)!important;
  box-shadow:0 0 18px rgba(229,80,28,.28)!important;
}
html[data-theme="light"] .home-wallet-card > *{position:relative;z-index:2;}
html[data-theme="light"] .home-wallet-card > div:last-child > div:first-child{
  position:relative!important;
  border-radius:50%!important;
}
html[data-theme="light"] .home-wallet-card > div:last-child > div:first-child::before{
  content:"";position:absolute;inset:-18px;border-radius:50%;
  border:1px solid rgba(229,80,28,.18);box-shadow:0 0 0 10px rgba(229,80,28,.045),0 0 32px rgba(229,80,28,.18);
  animation:hbPulseRing 3.4s ease-in-out infinite;
}
html[data-theme="light"] .home-wallet-card img{
  position:relative!important;z-index:2!important;
  filter:drop-shadow(0 16px 18px rgba(8,64,37,.28)) drop-shadow(0 0 20px rgba(229,80,28,.16))!important;
  animation:hbWalletFloat 4.2s ease-in-out infinite!important;
}
html[data-theme="light"] .home-wallet-card .home-wallet-add{
  box-shadow:0 8px 18px rgba(229,80,28,.12)!important;
}

/* FULL WALLET PAGE — layered green ambient effects behind the pouch */
html[data-theme="light"] .wallet-hero{
  position:relative!important;
  overflow:hidden!important;
  min-height:440px!important;
  background:
    radial-gradient(circle at 77% 34%,rgba(229,80,28,.25),transparent 24%),
    radial-gradient(circle at 95% 4%,rgba(255,194,43,.15),transparent 24%),
    linear-gradient(145deg,#ffffff 0%,#f1faf5 55%,#f7f5f2 100%)!important;
}
html[data-theme="light"] .wallet-hero::before{
  content:""!important;position:absolute!important;width:260px!important;height:260px!important;
  right:-76px!important;top:38px!important;border-radius:50%!important;z-index:0!important;
  background:radial-gradient(circle,rgba(229,80,28,.25),rgba(229,80,28,.08) 43%,transparent 70%)!important;
  filter:blur(4px)!important;animation:hbWalletGlowMove 6s ease-in-out infinite!important;
}
html[data-theme="light"] .wallet-hero::after{
  content:""!important;position:absolute!important;width:55px!important;height:150%!important;top:-25%!important;left:-80px!important;
  z-index:1!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent)!important;
  filter:blur(10px)!important;animation:hbWalletShine 7s ease-in-out infinite!important;
}
html[data-theme="light"] .wallet-hero > div:not(.wallet-hero-pattern):not(.wallet-ambient){position:relative;z-index:3;}
html[data-theme="light"] .wallet-visual{
  position:relative!important;isolation:isolate!important;
}
html[data-theme="light"] .wallet-visual::before,
html[data-theme="light"] .wallet-visual::after{
  content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none;
}
html[data-theme="light"] .wallet-visual::before{
  inset:-36px;background:radial-gradient(circle,rgba(229,80,28,.30),rgba(229,80,28,.08) 47%,transparent 71%);
  animation:hbWalletGlowMove 4.8s ease-in-out infinite;
}
html[data-theme="light"] .wallet-visual::after{
  inset:-12px;border:1px solid rgba(229,80,28,.20);box-shadow:0 0 0 14px rgba(229,80,28,.045),0 0 42px rgba(229,80,28,.17);
  animation:hbPulseRing 3.5s ease-in-out infinite;
}
html[data-theme="light"] .wallet-float-img{
  animation:hbWalletFloat 4.2s ease-in-out infinite!important;
  filter:drop-shadow(0 18px 24px rgba(8,64,37,.28)) drop-shadow(0 0 28px rgba(229,80,28,.18))!important;
}
html[data-theme="light"] .wallet-ambient{display:block!important;position:absolute!important;border-radius:50%!important;pointer-events:none!important;filter:blur(28px)!important;z-index:0!important;}
html[data-theme="light"] .wallet-ambient.ambient-one{width:150px!important;height:150px!important;right:18px!important;top:112px!important;background:rgba(229,80,28,.13)!important;animation:hbWalletGlowMove 5.5s ease-in-out infinite!important;}
html[data-theme="light"] .wallet-ambient.ambient-two{width:100px!important;height:100px!important;left:-25px!important;bottom:18px!important;background:rgba(255,194,43,.10)!important;animation:hbSoftRise 4.5s ease-in-out infinite!important;}
html[data-theme="light"] .wallet-btn{
  background:linear-gradient(145deg,#ffffff,#f4f9f6)!important;
  border:1px solid rgba(229,80,28,.18)!important;
  box-shadow:0 9px 20px rgba(10,70,42,.07)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
html[data-theme="light"] .wallet-btn:active{transform:scale(.97)!important;box-shadow:0 5px 12px rgba(10,70,42,.08)!important;}

/* LOGIN — remove the washed-out/invisible appearance in white theme */
html[data-theme="light"] .auth-screen{
  background:
    radial-gradient(circle at 86% 8%,rgba(229,80,28,.10),transparent 25%),
    radial-gradient(circle at 8% 92%,rgba(255,194,43,.07),transparent 28%),
    #f7faf8!important;
}
html[data-theme="light"] .auth-content{color:#15171d!important;}
html[data-theme="light"] .auth-subtitle,
html[data-theme="light"] .form-label{color:#5b6470!important;opacity:1!important;}
html[data-theme="light"] .form-input{background:#fff!important;color:#15171d!important;border:1px solid #e6e4e1!important;border-radius:16px!important;padding:17px 16px!important;}
html[data-theme="light"] .input-icon{right:15px!important;bottom:18px!important;color:#5b6470!important;}
html[data-theme="light"] .auth-link{color:#5b6470!important;}
html[data-theme="light"] .auth-link span{color:#e5501c!important;font-weight:800!important;}
html[data-theme="light"] #loginScreen img,
html[data-theme="light"] #signupScreen img{filter:drop-shadow(0 12px 24px rgba(229,80,28,.20))!important;}

/* LEADERBOARD — strong contrast + remove empty red season line */
#lbSeasonBadge:empty{display:none!important;}
html[data-theme="light"] .podium-name{color:#15171d!important;opacity:1!important;font-weight:800!important;}
html[data-theme="light"] .podium-prize{color:#b87a00!important;opacity:1!important;font-weight:800!important;}
html[data-theme="light"] .podium-item{color:#15171d!important;}
html[data-theme="light"] .leader-rank{color:#5b6470!important;opacity:1!important;}
html[data-theme="light"] .leader-name{color:#15171d!important;opacity:1!important;font-weight:800!important;}
html[data-theme="light"] .leader-prize{color:#e5501c!important;opacity:1!important;font-weight:800!important;}
html[data-theme="light"] .leader-item{background:linear-gradient(145deg,#ffffff,#f5f9f7)!important;}
html[data-theme="light"] .leader-podium{
  background:
    radial-gradient(circle at 50% 28%,rgba(255,194,43,.14),transparent 23%),
    radial-gradient(circle at 50% 78%,rgba(229,80,28,.08),transparent 40%),
    linear-gradient(180deg,#f8fbf9,#ffffff)!important;
}

/* Better touch feedback across the mobile app */
html[data-theme="light"] .info-card:active,
html[data-theme="light"] .leader-item:active,
html[data-theme="light"] .qa-card:active,
html[data-theme="light"] .home-card-float:active{transform:scale(.985)!important;}

@media (prefers-reduced-motion:reduce){
  html[data-theme="light"] .home-wallet-card img,
  html[data-theme="light"] .wallet-float-img,
  html[data-theme="light"] .wallet-hero::before,
  html[data-theme="light"] .wallet-hero::after,
  html[data-theme="light"] .wallet-visual::before,
  html[data-theme="light"] .wallet-visual::after{animation:none!important;}
}

/* =====================================================================
   HBBATTLE V11 — WHITE THEME VISIBILITY + PAYMENT + LEADERBOARD REPAIR
   These rules intentionally come LAST so the old dark HUD rules cannot
   override the user's white theme.
   ===================================================================== */
html[data-theme="light"] body{background:#eef3f0!important;color:#1b1e26!important;}
html[data-theme="light"] .app{background:#f7f9f8!important;background-image:none!important;}

/* --- Auth: every label, typed value, placeholder and icon must be visible --- */
html[data-theme="light"] .auth-screen{background:linear-gradient(180deg,#ffffff 0%,#f2f8f4 100%)!important;color:#1b1e26!important;}
html[data-theme="light"] .auth-content,
html[data-theme="light"] .auth-logo,
html[data-theme="light"] .auth-title{color:#1b1e26!important;text-shadow:none!important;opacity:1!important;}
html[data-theme="light"] .auth-subtitle{color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] .auth-screen .form-label{color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] .auth-screen .form-input,
html[data-theme="light"] .modal .form-input,
html[data-theme="light"] input.form-input,
html[data-theme="light"] textarea.form-input{
  background:#ffffff!important;color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;
  caret-color:#e5501c!important;border:1.5px solid #f7f5f2!important;border-radius:14px!important;
  padding:15px 16px!important;box-shadow:0 4px 14px rgba(15,55,34,.04)!important;opacity:1!important;
}
html[data-theme="light"] .auth-screen .form-input::placeholder,
html[data-theme="light"] .modal .form-input::placeholder{color:#ff6a39!important;opacity:1!important;-webkit-text-fill-color:#ff6a39!important;}
html[data-theme="light"] .auth-screen .form-input:focus,
html[data-theme="light"] .modal .form-input:focus{border-color:#ff6a39!important;box-shadow:0 0 0 4px rgba(229,80,28,.10)!important;}
html[data-theme="light"] .auth-screen .input-icon{color:#e5501c!important;opacity:1!important;z-index:5!important;}
html[data-theme="light"] .auth-link{color:#5c6470!important;opacity:1!important;}
html[data-theme="light"] .auth-link span{color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] .auth-screen .btn-red{background:linear-gradient(135deg,#ff6a39,#e5501c)!important;color:#fff!important;box-shadow:0 12px 24px rgba(229,80,28,.18)!important;}

/* --- Payment / wallet overlays: never inherit the old dark HUD panel --- */
html[data-theme="light"] .overlay{background:rgba(18,32,25,.45)!important;}
html[data-theme="light"] .modal{background:#ffffff!important;color:#1b1e26!important;border:1px solid #e0e9e4!important;box-shadow:0 -14px 40px rgba(15,40,28,.16)!important;}
html[data-theme="light"] .modal .modal-title{color:#1b1e26!important;}
html[data-theme="light"] .modal .form-label{color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] .modal p{color:#5c6470!important;}
html[data-theme="light"] .modal select.form-input{background:#fff!important;color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;}
html[data-theme="light"] .modal select.form-input option{background:#fff!important;color:#1b1e26!important;}
html[data-theme="light"] #depDropZone{background:#f7faf8!important;border-color:#f7f5f2!important;color:#1b1e26!important;}
html[data-theme="light"] #depDropZone div,
html[data-theme="light"] #depDropZone i{color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] .modal [style*="var(--off-white)"]{color:#1b1e26!important;}
html[data-theme="light"] .amount-chips .chip{background:#f3f8f5!important;color:#e5501c!important;border:1px solid #f7f5f2!important;}
html[data-theme="light"] #depModeShotBtn,
html[data-theme="light"] #depModeManualBtn{border:1px solid #f7f5f2!important;}

/* --- Quick Actions: reliable View All / Show Less, readable in white mode --- */
html[data-theme="light"] #qaToggleLink{display:inline-flex!important;align-items:center;color:#e5501c!important;font-weight:800!important;opacity:1!important;visibility:visible!important;text-decoration:none!important;cursor:pointer!important;}
html[data-theme="light"] #qaToggleLink:active{transform:scale(.96);}
#qaExtraCards.qa-expanded{display:contents!important;}
#qaExtraCards:not(.qa-expanded){display:none!important;}

/* --- Leaderboard: restore white cards and strong black text --- */
html[data-theme="light"] #leaderboardScreen,
html[data-theme="light"] #leaderboardScreen .screen-body{background:#f7f9f8!important;color:#1b1e26!important;}
html[data-theme="light"] #leaderboardScreen .header,
html[data-theme="light"] #leaderboardScreen .leader-podium{background:#fff!important;color:#1b1e26!important;}
html[data-theme="light"] #leaderboardScreen .header-title{color:#1b1e26!important;}
html[data-theme="light"] #leaderboardScreen .podium-name,
html[data-theme="light"] #leaderboardScreen .leader-name{color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;opacity:1!important;text-shadow:none!important;}
html[data-theme="light"] #leaderboardScreen .podium-prize{color:#b57600!important;-webkit-text-fill-color:#b57600!important;opacity:1!important;}
html[data-theme="light"] #leaderboardScreen .leader-prize{color:#e5501c!important;-webkit-text-fill-color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] #leaderboardScreen .leader-rank,
html[data-theme="light"] #leaderboardScreen .podium-kills,
html[data-theme="light"] #leaderboardScreen .leader-item [style*="color:var(--text3)"]{color:#e5501c!important;-webkit-text-fill-color:#e5501c!important;opacity:1!important;}
html[data-theme="light"] #leaderboardScreen .leader-item{background:#ffffff!important;color:#1b1e26!important;border:1px solid #dbe6df!important;box-shadow:0 8px 20px rgba(17,45,31,.06)!important;}
html[data-theme="light"] #leaderboardScreen .podium-avatar{background:#eef7f1!important;}
html[data-theme="light"] #leaderboardScreen .empty{color:#5c6470!important;}
html[data-theme="light"] #myRankChip{background:#fffafa!important;color:#1b1e26!important;border:1px solid #e2a5ad!important;}

/* General white-page readability for cards that were forced dark by old premium CSS */
html[data-theme="light"] .info-card,
html[data-theme="light"] .settings-group,
html[data-theme="light"] .notif-item,
html[data-theme="light"] .approval-card{background:#fff!important;color:#1b1e26!important;border-color:#dce7e0!important;}
html[data-theme="light"] .info-label{color:#e5501c!important;}
html[data-theme="light"] .info-val{color:#1b1e26!important;}


/* ===== css/v12-fixes.css ===== */
/* HBBATTLE V12 FINAL VISIBILITY + FUNCTION FIX */
:root:not([data-theme]), html[data-theme="light"]{
  --hb-bg:#f4f7f5;--hb-card:#fff;--hb-text:#1b1e26;--hb-muted:#e5501c;--hb-line:#d5e0da;--hb-green:#e5501c;
}
:root:not([data-theme]) body,html[data-theme="light"] body{background:var(--hb-bg)!important;color:var(--hb-text)!important;}
:root:not([data-theme]) .app,html[data-theme="light"] .app{background:var(--hb-bg)!important;color:var(--hb-text)!important;}

/* LOGIN + SIGNUP: typed email/password must NEVER become invisible */
:root:not([data-theme]) .auth-screen,html[data-theme="light"] .auth-screen{background:linear-gradient(180deg,#fff 0%,#f2f8f4 100%)!important;color:var(--hb-text)!important;}
:root:not([data-theme]) .auth-screen *,html[data-theme="light"] .auth-screen *{text-shadow:none;}
:root:not([data-theme]) .auth-screen .form-label,html[data-theme="light"] .auth-screen .form-label{color:#15171d!important;opacity:1!important;visibility:visible!important;}
:root:not([data-theme]) .auth-screen input.form-input,html[data-theme="light"] .auth-screen input.form-input,
:root:not([data-theme]) .auth-screen textarea.form-input,html[data-theme="light"] .auth-screen textarea.form-input{
  display:block!important;background:#fff!important;color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;
  opacity:1!important;caret-color:#e5501c!important;border:2px solid #f7f5f2!important;
  box-shadow:0 5px 16px rgba(16,55,34,.06)!important;position:relative!important;z-index:2!important;
}
:root:not([data-theme]) .auth-screen input.form-input::placeholder,html[data-theme="light"] .auth-screen input.form-input::placeholder{color:#737b87!important;-webkit-text-fill-color:#737b87!important;opacity:1!important;}
:root:not([data-theme]) .auth-screen .input-icon,html[data-theme="light"] .auth-screen .input-icon{color:#e5501c!important;opacity:1!important;visibility:visible!important;z-index:10!important;position:absolute!important;cursor:pointer!important;}
:root:not([data-theme]) .auth-screen .auth-subtitle,html[data-theme="light"] .auth-screen .auth-subtitle,
:root:not([data-theme]) .auth-screen .auth-link,html[data-theme="light"] .auth-screen .auth-link{color:#5c6470!important;opacity:1!important;}
:root:not([data-theme]) .auth-screen .auth-link span,html[data-theme="light"] .auth-screen .auth-link span{color:#e5501c!important;font-weight:800!important;}

/* PAYMENT / ADD MONEY / WITHDRAW: all text and fields visible in white theme */
:root:not([data-theme]) .overlay,html[data-theme="light"] .overlay{background:rgba(13,32,23,.48)!important;}
:root:not([data-theme]) .modal,html[data-theme="light"] .modal{background:#fff!important;color:#1b1e26!important;border:1px solid #dbe6df!important;box-shadow:0 -16px 44px rgba(15,40,28,.18)!important;}
:root:not([data-theme]) .modal *,html[data-theme="light"] .modal *{text-shadow:none!important;}
:root:not([data-theme]) .modal .modal-title,html[data-theme="light"] .modal .modal-title{color:#1b1e26!important;opacity:1!important;}
:root:not([data-theme]) .modal .form-label,html[data-theme="light"] .modal .form-label{color:#e5501c!important;opacity:1!important;}
:root:not([data-theme]) .modal input.form-input,html[data-theme="light"] .modal input.form-input,
:root:not([data-theme]) .modal textarea.form-input,html[data-theme="light"] .modal textarea.form-input,
:root:not([data-theme]) .modal select.form-input,html[data-theme="light"] .modal select.form-input{
  background:#fff!important;color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;opacity:1!important;
  border:2px solid #f7f5f2!important;box-shadow:none!important;
}
:root:not([data-theme]) .modal input.form-input::placeholder,html[data-theme="light"] .modal input.form-input::placeholder{color:#737b87!important;opacity:1!important;-webkit-text-fill-color:#737b87!important;}
:root:not([data-theme]) .modal p,html[data-theme="light"] .modal p{color:#5c6470!important;opacity:1!important;}
:root:not([data-theme]) #bankOptionsContainer,html[data-theme="light"] #bankOptionsContainer,
:root:not([data-theme]) #bankDetailsBox,html[data-theme="light"] #bankDetailsBox,
:root:not([data-theme]) #depDropZone,html[data-theme="light"] #depDropZone{color:#1b1e26!important;background:#f7faf8!important;}
:root:not([data-theme]) #bankDetailsText,html[data-theme="light"] #bankDetailsText{color:#1b1e26!important;opacity:1!important;}
:root:not([data-theme]) #depDropZone *,html[data-theme="light"] #depDropZone *{color:#5c6470!important;opacity:1!important;}
:root:not([data-theme]) .modal [style*="color:var(--text)"],html[data-theme="light"] .modal [style*="color:var(--text)"]{color:#1b1e26!important;}
:root:not([data-theme]) .modal [style*="color:var(--text2)"],html[data-theme="light"] .modal [style*="color:var(--text2)"]{color:#5c6470!important;}
:root:not([data-theme]) .modal [style*="color:var(--text3)"],html[data-theme="light"] .modal [style*="color:var(--text3)"]{color:#e5501c!important;}

/* Quick Actions View All / Show Less - reliable grid behaviour */
#qaExtraCards{display:none;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#qaExtraCards.qa-expanded{display:grid!important;}
#qaExtraCards .qa-card{width:auto!important;}
#qaToggleLink{display:inline-flex!important;align-items:center;justify-content:center;min-width:72px;min-height:32px;color:#e5501c!important;font-weight:800!important;visibility:visible!important;opacity:1!important;cursor:pointer!important;}

/* LEADERBOARD - remove washed-out white text and restore hierarchy */
:root:not([data-theme]) #leaderboardScreen,html[data-theme="light"] #leaderboardScreen{background:#f6f9f7!important;color:#1b1e26!important;}
:root:not([data-theme]) #leaderboardScreen .header,html[data-theme="light"] #leaderboardScreen .header{background:#fff!important;color:#1b1e26!important;}
:root:not([data-theme]) #leaderboardScreen .leader-podium,html[data-theme="light"] #leaderboardScreen .leader-podium{background:linear-gradient(180deg,#fff,#f4f8f5)!important;color:#1b1e26!important;}
:root:not([data-theme]) #leaderboardScreen .podium-name,html[data-theme="light"] #leaderboardScreen .podium-name,
:root:not([data-theme]) #leaderboardScreen .leader-name,html[data-theme="light"] #leaderboardScreen .leader-name{color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;opacity:1!important;filter:none!important;text-shadow:none!important;}
:root:not([data-theme]) #leaderboardScreen .podium-prize,html[data-theme="light"] #leaderboardScreen .podium-prize{color:#b57600!important;-webkit-text-fill-color:#b57600!important;opacity:1!important;}
:root:not([data-theme]) #leaderboardScreen .leader-prize,html[data-theme="light"] #leaderboardScreen .leader-prize{color:#e5501c!important;-webkit-text-fill-color:#e5501c!important;opacity:1!important;}
:root:not([data-theme]) #leaderboardScreen .leader-rank,html[data-theme="light"] #leaderboardScreen .leader-rank,
:root:not([data-theme]) #leaderboardScreen .podium-kills,html[data-theme="light"] #leaderboardScreen .podium-kills{color:#e5501c!important;-webkit-text-fill-color:#e5501c!important;opacity:1!important;}
:root:not([data-theme]) #leaderboardScreen .leader-item,html[data-theme="light"] #leaderboardScreen .leader-item{background:#fff!important;color:#1b1e26!important;border:1px solid #dbe6df!important;box-shadow:0 8px 20px rgba(17,45,31,.06)!important;}
:root:not([data-theme]) #myRankChip,html[data-theme="light"] #myRankChip{background:#fff!important;color:#1b1e26!important;border:2px solid #e1a0aa!important;}

/* Stop old dark premium rules leaking into all white cards */
:root:not([data-theme]) .info-card,html[data-theme="light"] .info-card,
:root:not([data-theme]) .settings-group,html[data-theme="light"] .settings-group,
:root:not([data-theme]) .wallet-btn,html[data-theme="light"] .wallet-btn{color:#1b1e26!important;}

/* V13 SAFE WHITE-THEME REPAIR: keep text readable everywhere without changing layout */
html[data-theme="light"], :root:not([data-theme]) { --text:#1b1e26!important; --text2:#5c6470!important; --text3:#737b87!important; --border:#d5e0da!important; --off-white:#f5f8f6!important; --card:#ffffff!important; }
html[data-theme="light"] .screen, :root:not([data-theme]) .screen{color:#1b1e26!important;}
html[data-theme="light"] .form-input, :root:not([data-theme]) .form-input{background:#fff!important;color:#1b1e26!important;-webkit-text-fill-color:#1b1e26!important;border-color:#f7f5f2!important;opacity:1!important;}
html[data-theme="light"] .form-input::placeholder, :root:not([data-theme]) .form-input::placeholder{color:#737b87!important;-webkit-text-fill-color:#737b87!important;opacity:1!important;}
html[data-theme="light"] label, html[data-theme="light"] .form-label, :root:not([data-theme]) label, :root:not([data-theme]) .form-label{color:#15171d!important;}
html[data-theme="light"] .modal [style*="color:var(--text"], :root:not([data-theme]) .modal [style*="color:var(--text"], html[data-theme="light"] .modal .sec-title, :root:not([data-theme]) .modal .sec-title{color:#1b1e26!important;}
html[data-theme="light"] .modal [style*="var(--text2)"], :root:not([data-theme]) .modal [style*="var(--text2)"]{color:#5c6470!important;}
html[data-theme="light"] .modal [style*="var(--text3)"], :root:not([data-theme]) .modal [style*="var(--text3)"]{color:#737b87!important;}

/* Payment method cards/details */
html[data-theme="light"] #bankOptionsContainer > *, :root:not([data-theme]) #bankOptionsContainer > *{background:#fff!important;color:#1b1e26!important;border-color:#d5e0da!important;opacity:1!important;}
html[data-theme="light"] #bankOptionsContainer *, :root:not([data-theme]) #bankOptionsContainer *{color:inherit!important;}
html[data-theme="light"] #bankDetailsBox, :root:not([data-theme]) #bankDetailsBox{background:linear-gradient(135deg,#effaf4,#ffffff)!important;color:#1b1e26!important;border-left-color:#e5501c!important;}
html[data-theme="light"] #depDropZone, :root:not([data-theme]) #depDropZone{background:#f8fbf9!important;border-color:#ff6a39!important;}

/* Leaderboard force readable hierarchy */
html[data-theme="light"] #leaderboardScreen *, :root:not([data-theme]) #leaderboardScreen *{text-shadow:none!important;}
html[data-theme="light"] #leaderboardScreen .leader-name, :root:not([data-theme]) #leaderboardScreen .leader-name,
html[data-theme="light"] #leaderboardScreen .podium-name, :root:not([data-theme]) #leaderboardScreen .podium-name{visibility:visible!important;opacity:1!important;color:#1b1e26!important;}

/* Wallet background FX only behind wallet content, never over controls */
html[data-theme="light"] #walletScreen, :root:not([data-theme]) #walletScreen{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7fbf8 0%,#eef8f2 42%,#f7f8f7 100%)!important;}
html[data-theme="light"] #walletScreen::before, :root:not([data-theme]) #walletScreen::before{content:"";position:absolute;width:330px;height:330px;left:-120px;top:35px;border-radius:50%;background:radial-gradient(circle,rgba(229,80,28,.20) 0%,rgba(229,80,28,.08) 38%,transparent 70%);filter:blur(12px);pointer-events:none;animation:hbWalletGlow 7s ease-in-out infinite;z-index:0;}
html[data-theme="light"] #walletScreen::after, :root:not([data-theme]) #walletScreen::after{content:"";position:absolute;width:220px;height:220px;right:-100px;top:150px;border-radius:50%;background:radial-gradient(circle,rgba(188,145,40,.13),transparent 68%);filter:blur(14px);pointer-events:none;z-index:0;}
html[data-theme="light"] #walletScreen > *, :root:not([data-theme]) #walletScreen > *{position:relative;z-index:1;}
@keyframes hbWalletGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(45px,25px) scale(1.12)}}

/* Bottom nav/content safety */
html[data-theme="light"] .screen, :root:not([data-theme]) .screen{padding-bottom:104px!important;}


/* ===== css/white-premium-effects.css ===== */

/* ============================================================
   HB BATTLE V16 — PEARL WHITE / EMERALD / GOLD EFFECTS
   Light theme redesign for Wallet + Dashboard.
   Keeps all functionality and JS untouched.
   ============================================================ */
[data-theme="light"]{
  --red:#D63A4A;
  --red-dark:#B62A3A;
  --blue:#e5501c;
  --blue-glow:rgba(229,80,28,.22);
  --blue-soft:rgba(229,80,28,.08);
  --gold:#C89221;
  --gold-glow:rgba(200,146,33,.26);
  --gold-soft:rgba(200,146,33,.10);
  --white:#FFFFFF;
  --off-white:#f7f5f2;
  --surface:#FFFFFF;
  --border:#DDE7E1;
  --text:#18241F;
  --text2:#5E6D67;
  --text3:#7B8983;
  --shadow:0 8px 24px rgba(17,55,40,.08);
  --shadow-lg:0 18px 50px rgba(17,55,40,.14);
}
[data-theme="light"] body{
  background:
    radial-gradient(circle at 85% 0%, rgba(190,157,58,.09), transparent 28%),
    radial-gradient(circle at 0% 20%, rgba(229,80,28,.07), transparent 26%),
    #F4F7F3 !important;
}
[data-theme="light"] .app{
  background:
    linear-gradient(rgba(229,80,28,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229,80,28,.028) 1px, transparent 1px),
    #f7f5f2 !important;
  background-size:42px 42px;
}

/* Dashboard header: clean white with soft ambient light */
[data-theme="light"] .home-hero{
  background:
    radial-gradient(circle at 82% 15%, rgba(207,162,52,.15), transparent 22%),
    radial-gradient(circle at 8% 0%, rgba(229,80,28,.12), transparent 25%),
    linear-gradient(135deg,#FFFFFF 0%,#F8FAF7 100%) !important;
  color:var(--text) !important;
  border-bottom:1px solid rgba(229,80,28,.13);
}
[data-theme="light"] .home-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,transparent 0 17px,rgba(229,80,28,.025) 18px 19px);
  opacity:.9;
}
[data-theme="light"] .home-hero > *{position:relative;z-index:1}
[data-theme="light"] .home-greeting,
[data-theme="light"] .home-name{color:var(--text)!important}
[data-theme="light"] #dashAvatar{
  background:#fff!important;border-color:rgba(229,80,28,.25)!important;
  box-shadow:0 8px 20px rgba(229,80,28,.10);color:var(--blue)!important;
}

/* Dashboard wallet card: premium emerald + gold effect */
[data-theme="light"] .home-wallet-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 85% 22%, rgba(255,211,99,.28), transparent 26%),
    radial-gradient(circle at 12% 100%, rgba(255,106,57,.18), transparent 32%),
    linear-gradient(130deg,#15171d 0%,#15171d 48%,#15171d 100%) !important;
  border:1px solid rgba(216,171,58,.38)!important;
  box-shadow:0 18px 42px rgba(5,69,48,.22), inset 0 1px 0 rgba(255,255,255,.16)!important;
}
[data-theme="light"] .home-wallet-card::before{
  content:"";position:absolute;inset:-60% -20%;z-index:-1;
  background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(255,255,255,.055) 16px 18px);
  transform:rotate(-4deg);
  animation:hbDiagonalDrift 16s linear infinite;
}
[data-theme="light"] .home-wallet-card::after{
  content:"";position:absolute;top:-20%;left:-55%;width:35%;height:150%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transform:skewX(-18deg);animation:hbWalletSweep 6s ease-in-out infinite;
}
[data-theme="light"] .home-wallet-label{color:rgba(244,255,250,.70)!important}
[data-theme="light"] .home-wallet-amt{color:#fff!important;text-shadow:0 5px 18px rgba(0,0,0,.18)}
[data-theme="light"] .home-wallet-add{
  background:rgba(255,255,255,.11)!important;color:#fff!important;
  border:1px solid rgba(231,191,80,.62)!important;
  backdrop-filter:blur(10px);border-radius:12px!important;
}
[data-theme="light"] .home-wallet-card img{filter:drop-shadow(0 16px 22px rgba(0,0,0,.36))!important}

/* Dashboard floating cards */
[data-theme="light"] .home-card-float,
[data-theme="light"] .home-promo,
[data-theme="light"] .home-stat,
[data-theme="light"] .home-body,
[data-theme="light"] .info-card,
[data-theme="light"] .txn-item{
  color:var(--text);
}
[data-theme="light"] .home-card-float{
  background:rgba(255,255,255,.90)!important;border:1px solid #E0E8E3!important;
  box-shadow:0 14px 34px rgba(18,67,48,.09)!important;
}
[data-theme="light"] .home-stat-val{color:#15171d!important}
[data-theme="light"] .home-stat-val.red{color:var(--gold)!important}
[data-theme="light"] .home-promo{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FFFFFF,#EEF7F1)!important;
  border:1px solid rgba(229,80,28,.22)!important;
  box-shadow:0 14px 34px rgba(10,83,58,.08)!important;
  clip-path:none!important;
}
[data-theme="light"] .home-promo::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  right:-70px;top:-90px;background:radial-gradient(circle,rgba(214,168,75,.22),transparent 68%);
}
[data-theme="light"] .home-promo-btn{
  background:linear-gradient(135deg,#e5501c,#e5501c)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(229,80,28,.22);
}

/* Wallet hero */
[data-theme="light"] .wallet-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% 20%, rgba(224,179,68,.33), transparent 24%),
    radial-gradient(circle at 10% 85%, rgba(255,106,57,.18), transparent 32%),
    linear-gradient(135deg,#15171d 0%,#e5501c 52%,#e5501c 100%) !important;
  color:#fff!important;
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,#ff6a39,#D9A43D) 1;
}
[data-theme="light"] .wallet-hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 0 44%,rgba(255,255,255,.06) 44.2% 44.5%,transparent 44.8%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.07) 19px 21px);
  opacity:.85;pointer-events:none;
}
[data-theme="light"] .wallet-hero > *{position:relative;z-index:2}
[data-theme="light"] .wallet-label{color:rgba(245,255,250,.70)!important}
[data-theme="light"] .wallet-amount{color:#fff!important;text-shadow:0 7px 22px rgba(0,0,0,.20)}
[data-theme="light"] .wallet-sub{color:rgba(245,255,250,.72)!important}
[data-theme="light"] .wallet-visual{
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.30));
  animation:hbWalletFloat 4.5s ease-in-out infinite;
}
[data-theme="light"] .wallet-ambient{display:block!important}
[data-theme="light"] .wallet-ambient.ambient-one{
  background:rgba(226,179,56,.20)!important;filter:blur(45px)!important;
}
[data-theme="light"] .wallet-ambient.ambient-two{
  background:rgba(255,106,57,.20)!important;filter:blur(55px)!important;
}
[data-theme="light"] .wallet-btn{
  background:rgba(255,255,255,.09)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}
[data-theme="light"] .wallet-btn i{color:#F1BF4D!important}
[data-theme="light"] .wallet-btn:active{transform:scale(.97)}

/* Wallet white body */
[data-theme="light"] .wallet-body{
  background:
    linear-gradient(rgba(229,80,28,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(229,80,28,.025) 1px,transparent 1px),
    #f7f5f2!important;
  background-size:42px 42px;
}
[data-theme="light"] .wallet-stat-card,
[data-theme="light"] .txn-item,
[data-theme="light"] .home-body .empty{
  background:rgba(255,255,255,.88)!important;
  border:1px solid #E1E9E4!important;
  box-shadow:0 10px 24px rgba(17,62,45,.07)!important;
}
[data-theme="light"] .wallet-stat-card{border-radius:18px!important}
[data-theme="light"] .wallet-body .sec-title,
[data-theme="light"] .wallet-body .txn-title{color:#192720!important}
[data-theme="light"] .wallet-body .txn-date{color:#75817B!important}

/* Bottom navigation stays premium white */
[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.94)!important;color:#56635E!important;
  border-top:1px solid rgba(229,80,28,.15)!important;
  box-shadow:0 -10px 28px rgba(16,65,46,.10)!important;
  backdrop-filter:blur(18px);
}
[data-theme="light"] .nav-item.active{color:#e5501c!important}
[data-theme="light"] .nav-item.active::before{
  background:linear-gradient(135deg,rgba(229,80,28,.10),rgba(214,168,75,.12))!important;
  border:1px solid rgba(229,80,28,.38)!important;
  box-shadow:0 6px 18px rgba(229,80,28,.16)!important;
}
@keyframes hbWalletSweep{
  0%,35%{left:-55%;opacity:0} 45%{opacity:1} 65%{left:125%;opacity:0} 100%{left:125%;opacity:0}
}
@keyframes hbDiagonalDrift{from{background-position:0 0}to{background-position:180px 0}}
@keyframes hbWalletFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Accessibility: disable motion when requested */
@media (prefers-reduced-motion:reduce){
  [data-theme="light"] .home-wallet-card::before,
  [data-theme="light"] .home-wallet-card::after,
  [data-theme="light"] .wallet-visual{animation:none!important}
}

/* ============================================================
   V17 FINAL LIGHT THEME OVERRIDE
   This block is intentionally last and overrides the older V14/V15
   inline cyber rules when the user selects Light theme.
   ============================================================ */
html[data-theme="light"], html[data-theme="light"] body{
  background:#f7f5f2!important;
  color:#1b2822!important;
}
html[data-theme="light"] body{
  background:
    radial-gradient(700px 430px at 100% 0%,rgba(216,164,61,.10),transparent 58%),
    radial-gradient(620px 430px at 0% 8%,rgba(229,80,28,.08),transparent 62%),
    #f7f5f2!important;
}
html[data-theme="light"] .app{
  background:
    linear-gradient(rgba(229,80,28,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(229,80,28,.018) 1px,transparent 1px),
    #f7f5f2!important;
  background-size:44px 44px!important;
}

/* DARK GREEN WALLET BACKGROUND — toned down (v18: less green, more balanced) */
html[data-theme="light"] .wallet-hero{
  background:
    radial-gradient(420px 360px at 105% 15%,rgba(220,171,47,.16),transparent 60%),
    radial-gradient(420px 360px at -5% 100%,rgba(229,80,28,.12),transparent 60%),
    linear-gradient(135deg,#15171d 0%,#15171d 60%,#e5501c 100%)!important;
  color:#fff!important;
  border-bottom:3px solid transparent!important;
  border-image:linear-gradient(90deg,#ff6a39,#e0aa39) 1!important;
}
html[data-theme="light"] .wallet-hero::before{
  content:""!important; position:absolute!important; inset:0!important;
  background:
    repeating-linear-gradient(135deg,transparent 0 24px,rgba(255,255,255,.035) 25px 27px)!important;
  opacity:.6!important;
  animation:hbDiagonalDrift 24s linear infinite!important;
}
html[data-theme="light"] .wallet-hero .back-btn,
html[data-theme="light"] .wallet-hero .icon-btn{
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
html[data-theme="light"] .wallet-label{color:rgba(255,255,255,.70)!important}
html[data-theme="light"] .wallet-amount{color:#fff!important;font-size:clamp(40px,10vw,56px)!important}
html[data-theme="light"] .wallet-sub{color:rgba(255,255,255,.72)!important}
html[data-theme="light"] .wallet-visual,
html[data-theme="light"] .wallet-float-img{
  animation:hbWalletFloat 4.5s ease-in-out infinite!important;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.35))!important;
}
html[data-theme="light"] .wallet-btn{
  background:rgba(255,255,255,.055)!important;
  color:#f9fffb!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(8px)!important;
}
html[data-theme="light"] .wallet-btn i{color:#e8b343!important}
html[data-theme="light"] .wallet-btn:hover{background:rgba(255,255,255,.11)!important}

/* ---------- Big Pakistan flag flying behind the balance, clean cloth-wave ---------- */
.wallet-flag-badge{
  position:absolute; top:8px; right:0; bottom:8px; z-index:0;
  width:52%; max-width:280px;
  perspective:700px; pointer-events:none;
}
.wallet-flag-pole{
  position:absolute; right:6px; top:-4px; bottom:-4px; width:4px;
  border-radius:3px;
  background:linear-gradient(180deg,#f0e2b6,#c3a05a 55%,#8a6a2e);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.wallet-flag-cloth{
  position:absolute; right:10px; top:6%; width:100%; height:78%;
  border-radius:3px; overflow:hidden;
  box-shadow:0 14px 26px rgba(0,0,0,.35);
  transform-style:preserve-3d;
  transform-origin:100% 50%;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
  animation:hbFlagWave 4s ease-in-out infinite;
  will-change:transform;
}
.wallet-flag-cloth svg{ width:100%; height:100%; display:block; }
.wallet-flag-shade{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(100deg,
    rgba(0,0,0,.14) 0 8%,
    rgba(255,255,255,.08) 8% 16%,
    rgba(0,0,0,.08) 16% 24%,
    transparent 24% 34%);
  mix-blend-mode:multiply;
  animation:hbFlagShade 4s ease-in-out infinite;
}
.wallet-flag-shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.20) 42%,transparent 58%);
  animation:hbFlagShine 4s ease-in-out infinite;
}
@keyframes hbFlagWave{
  0%,100%{ transform:rotateY(0deg) skewY(0deg) scaleX(1); }
  25%{ transform:rotateY(4deg) skewY(-1deg) scaleX(.99); }
  50%{ transform:rotateY(-3deg) skewY(0.6deg) scaleX(1.01); }
  75%{ transform:rotateY(3deg) skewY(1deg) scaleX(.99); }
}
@keyframes hbFlagShade{
  0%,100%{ background-position:0 0; }
  50%{ background-position:26px 0; }
}
@keyframes hbFlagShine{
  0%,100%{ transform:translateX(-45%); opacity:0; }
  45%{ opacity:.5; }
  55%{ transform:translateX(45%); opacity:0; }
}
@media(max-width:400px){
  .wallet-flag-badge{ width:58%; max-width:210px; }
}
@media (prefers-reduced-motion: reduce){
  .wallet-flag-cloth, .wallet-flag-shade, .wallet-flag-shine{ animation:none!important; }
}

/* WHITE WALLET BODY: keep all text readable */
html[data-theme="light"] .wallet-body{
  background:#f7f5f2!important;
  color:#1b2822!important;
}
html[data-theme="light"] .wallet-body .sec-title,
html[data-theme="light"] .wallet-body .txn-title,
html[data-theme="light"] .wallet-body p,
html[data-theme="light"] .wallet-body span{color:#1b2822!important}
html[data-theme="light"] .wallet-stat-card,
html[data-theme="light"] .txn-item,
html[data-theme="light"] .wallet-body .empty{
  background:#fff!important;
  color:#1b2822!important;
  border:1px solid #dfe7e2!important;
  box-shadow:0 12px 28px rgba(8,61,43,.08)!important;
}

/* DASHBOARD: same premium language, lighter green touch */
html[data-theme="light"] .home-hero{
  background:
    radial-gradient(circle at 92% 5%,rgba(222,171,58,.16),transparent 28%),
    linear-gradient(135deg,#ffffff,#eef6f0)!important;
}
html[data-theme="light"] .home-wallet-card{
  background:
    radial-gradient(circle at 88% 18%,rgba(225,177,62,.20),transparent 25%),
    radial-gradient(circle at 5% 110%,rgba(255,106,57,.14),transparent 35%),
    linear-gradient(135deg,#15171d 0%,#15171d 60%,#e5501c 100%)!important;
}
html[data-theme="light"] .home-wallet-label,
html[data-theme="light"] .home-wallet-amt,
html[data-theme="light"] .home-wallet-card .home-wallet-add{color:#fff!important}
html[data-theme="light"] .home-wallet-card .home-wallet-add{
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(229,180,70,.55)!important;
}
html[data-theme="light"] .home-card-float,
html[data-theme="light"] .home-promo,
html[data-theme="light"] .home-stat,
html[data-theme="light"] .info-card,
html[data-theme="light"] .home-body,
html[data-theme="light"] .txn-item{
  color:#1b2822!important;
}

/* Strong reset for old black/neon inline theme rules in light mode */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control{
  background:#fff!important;color:#1b1e26!important;
  -webkit-text-fill-color:#1b1e26!important;
  border:1px solid #cfdcd5!important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{color:#ff6a39!important}
html[data-theme="light"] .bottom-nav,
html[data-theme="light"] .bottom-navigation,
html[data-theme="light"] .navbar-bottom{
  background:rgba(255,255,255,.96)!important;
  color:#53625b!important;
  border-color:#dce6e0!important;
}
html[data-theme="light"] .nav-item{color:#68756f!important}
html[data-theme="light"] .nav-item.active{color:#e5501c!important}

/* ---------- Fix: input & placeholder text was too faint / hard to read in Black & Neon themes ---------- */
html:not([data-theme="light"]) .form-input,
html:not([data-theme="light"]) input,
html:not([data-theme="light"]) textarea,
html:not([data-theme="light"]) select{
  color:#f7f5f2!important;
  -webkit-text-fill-color:#f7f5f2!important;
}
html:not([data-theme="light"]) .form-input::placeholder,
html:not([data-theme="light"]) input::placeholder,
html:not([data-theme="light"]) textarea::placeholder{
  color:rgba(242,247,244,0.55)!important;
  -webkit-text-fill-color:rgba(242,247,244,0.55)!important;
  opacity:1!important;
}

/* ---------- Fix: leaderboard rank/name/prize text guaranteed visible in Black & Neon themes ---------- */
html:not([data-theme="light"]) .leader-name{ color:#f7f5f2!important; -webkit-text-fill-color:#f7f5f2!important; }
html:not([data-theme="light"]) .leader-rank{ color:#ff6a39!important; -webkit-text-fill-color:#ff6a39!important; }
html:not([data-theme="light"]) .leader-prize{ color:#ffc83d!important; -webkit-text-fill-color:#ffc83d!important; opacity:1!important; text-shadow:none!important; }

/* ---------- Wallet page: force Pakistan-green hero background in every theme ---------- */
.wallet-hero,
html[data-theme="light"] .wallet-hero,
[data-theme="dark"] .wallet-hero,
[data-theme="green"] .wallet-hero{
  background:
    radial-gradient(circle at 92% 12%, rgba(255,201,74,.10), transparent 30%),
    linear-gradient(135deg,#15171d 0%,#15171d 42%,#e5501c 75%,#e5501c 100%) !important;
}


/* ===== css/v14-visual-enhance.css ===== */
/* ============================================================
   HB Battle — v14 Visual Enhancement Layer
   Adds richer color depth, motion and micro-interactions on
   top of the existing Victory Sunset theme. Loads last so it
   can safely layer over styles.css / premium.css / v12-fixes /
   white-premium-effects without fighting existing !important
   rules — everything here targets things they don't touch.
   ============================================================ */

:root{
  --v14-glow-red:   0 0 0 rgba(255,46,67,0);
  --v14-glow-gold:  0 0 0 rgba(255,182,39,0);
  --v14-ease:       cubic-bezier(.22,1,.36,1);
  --v14-ease-snap:  cubic-bezier(.34,1.56,.64,1);
}

/* -------- Global feel: smoother, snappier, never janky -------- */
*{ -webkit-tap-highlight-color: transparent; }
a, button, .btn, .btn-red, .tour-join-btn, .btn-ghost, .tour-card, .info-card,
.leader-item, .home-promo, .nav-fab, .card{
  transition: transform .28s var(--v14-ease),
              box-shadow .28s var(--v14-ease),
              background .28s var(--v14-ease),
              filter .28s var(--v14-ease),
              opacity .28s var(--v14-ease);
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* -------- Primary CTAs: breathing glow + press feedback -------- */
.btn-red, .tour-join-btn{
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
  animation: v14-cta-breathe 3.2s ease-in-out infinite;
}
@keyframes v14-cta-breathe{
  0%, 100%{ box-shadow: 0 10px 28px rgba(37,217,120,.18), 0 0 0 rgba(255,197,49,0); }
  50%{ box-shadow: 0 12px 34px rgba(37,217,120,.30), 0 0 22px rgba(255,197,49,.16); }
}
.btn-red:active, .tour-join-btn:active, .btn-ghost:active, .nav-fab:active, .btn:active{
  transform: scale(.94);
  transition-duration: .12s;
}

/* -------- Public/marketing site: same care, lighter palette -------- */
.btn{
  will-change: transform, box-shadow;
}
.btn:not(.alt){
  animation: v14-btn-breathe 3.4s ease-in-out infinite;
}
@keyframes v14-btn-breathe{
  0%, 100%{ box-shadow: 0 6px 16px rgba(20,108,67,.15); }
  50%{ box-shadow: 0 10px 26px rgba(20,108,67,.30); }
}
@media (hover:hover){
  .card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15,81,50,.14);
    border-color: rgba(20,108,67,.35);
  }
}
/* ripple on tap — driven by JS adding .v14-ripple span */
.v14-ripple-host{ position:relative; overflow:hidden; }
.v14-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: v14-ripple-anim .55s var(--v14-ease) forwards;
}
@keyframes v14-ripple-anim{
  to{ transform: scale(3.2); opacity:0; }
}

/* -------- Cards: lift + gold-edge glow on hover/focus -------- */
.tour-card, .info-card, .leader-item, .stat-card{
  will-change: transform, box-shadow;
}
@media (hover:hover){
  .tour-card:hover, .info-card:hover, .leader-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(255,182,39,.22);
  }
}

/* -------- Scroll-reveal: one deliberate entrance, staggered -------- */
.v14-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--v14-ease), transform .6s var(--v14-ease);
}
.v14-reveal.v14-in{
  opacity: 1;
  transform: translateY(0);
}

/* -------- Numbers: count-up target state (JS animates the text) -------- */
.v14-count{ font-variant-numeric: tabular-nums; }

/* -------- Shimmer for loading / skeleton surfaces -------- */
.v14-shimmer{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.03) 100%);
  background-size: 200% 100%;
  animation: v14-shimmer-move 1.6s linear infinite;
}
@keyframes v14-shimmer-move{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* -------- Wallet / prize gold accents get a subtle sheen -------- */
.wallet-balance, .prize-amount, .home-wallet-add{
  background-image: linear-gradient(100deg, currentColor 40%, #FFE9A8 50%, currentColor 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* -------- Bottom nav: active tab pop -------- */
.bottom-nav .nav-item.active, .bottom-nav .active{
  animation: v14-nav-pop .35s var(--v14-ease-snap);
}
@keyframes v14-nav-pop{
  0%{ transform: scale(.85); }
  60%{ transform: scale(1.12); }
  100%{ transform: scale(1); }
}

/* -------- Toasts / badges: gentle entrance -------- */
.toast, .badge-pop{
  animation: v14-toast-in .35s var(--v14-ease-snap);
}
@keyframes v14-toast-in{
  from{ opacity:0; transform: translateY(10px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* -------- Page/section load: soft fade so nothing pops in harshly -------- */
.app, .content{
  animation: v14-page-fade .45s var(--v14-ease) both;
}
@keyframes v14-page-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* -------- Home hero banner: slow ambient gradient drift -------- */
.home-promo{
  background-size: 160% 160% !important;
  animation: v14-gradient-drift 10s ease-in-out infinite;
}
@keyframes v14-gradient-drift{
  0%, 100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}


/* ===== css/leaderboard-premium.css ===== */
/* ============================================================
   HB Battle — Leaderboard premium pass.
   Loaded LAST in app.html so it wins cleanly over the older,
   conflicting leaderboard overrides accumulated in premium.css /
   v12-fixes.css (several rounds had flattened the podium to a
   plain white block). This file is the single source of truth
   for #leaderboardScreen#leaderboardScreen visuals from here on.
   ============================================================ */

/* ---------- Trophy stage: rich dark podium in every theme ---------- */
html body #leaderboardScreen#leaderboardScreen .leader-podium{
  position:relative;overflow:hidden;
  background:
    radial-gradient(420px 240px at 50% 0%,rgba(255,200,61,.16),transparent 65%),
    linear-gradient(165deg,#171a22,#0d0f14 70%)!important;
  padding:38px 18px 28px!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
html body #leaderboardScreen#leaderboardScreen .leader-podium::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 34px);
  opacity:.5;
}

/* ---------- Podium avatars: ranked rings + glow ---------- */
html body #leaderboardScreen#leaderboardScreen .podium-avatar{
  width:64px;height:64px;background:#1c2029!important;
  border:2px solid rgba(255,255,255,.14)!important;
  box-shadow:0 14px 26px -10px rgba(0,0,0,.6)!important;
  color:rgba(255,255,255,.8)!important;
  font-size:24px;
}
html body #leaderboardScreen#leaderboardScreen .podium-item.first .podium-avatar{
  width:82px;height:82px!important;
  border-color:#FFD24A!important;
  background:radial-gradient(circle at 35% 30%,rgba(255,210,74,.35),#1c2029 70%)!important;
  box-shadow:0 0 0 5px rgba(255,210,74,.14),0 18px 34px -12px rgba(0,0,0,.65)!important;
  animation:lbFirstPulse 2.6s ease-in-out infinite;
}
html body #leaderboardScreen#leaderboardScreen .podium-item:nth-child(1) .podium-avatar{border-color:rgba(192,192,192,.75)!important}
html body #leaderboardScreen#leaderboardScreen .podium-item:nth-child(3) .podium-avatar{border-color:rgba(205,127,50,.75)!important}
@keyframes lbFirstPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(255,210,74,.14),0 18px 34px -12px rgba(0,0,0,.65)}
  50%{box-shadow:0 0 0 9px rgba(255,210,74,.22),0 18px 34px -12px rgba(0,0,0,.65)}
}

/* ---------- Podium text: always readable on the dark stage ---------- */
html body #leaderboardScreen#leaderboardScreen .podium-name{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;font-weight:800!important;text-shadow:0 2px 6px rgba(0,0,0,.4)}
html body #leaderboardScreen#leaderboardScreen .podium-prize{color:#FFD24A!important;-webkit-text-fill-color:#FFD24A!important;opacity:1!important;font-size:14px!important;text-shadow:0 2px 8px rgba(255,210,74,.25)}
html body #leaderboardScreen#leaderboardScreen .leader-podium [style*="color:var(--text3)"]{color:rgba(255,255,255,.55)!important;-webkit-text-fill-color:rgba(255,255,255,.55)!important;}

/* ---------- Rank badges: stronger medal glow ---------- */
html body #leaderboardScreen#leaderboardScreen .podium-rank-badge.rank-1{background:linear-gradient(135deg,#FFE281,#E5A421)!important;color:#3a2600!important;box-shadow:0 0 22px rgba(255,210,74,.45)!important;}
html body #leaderboardScreen#leaderboardScreen .podium-rank-badge.rank-2{background:linear-gradient(135deg,#E9EDF2,#AEB6C2)!important;color:#22262e!important;}
html body #leaderboardScreen#leaderboardScreen .podium-rank-badge.rank-3{background:linear-gradient(135deg,#E3A165,#A85A26)!important;color:#2c1804!important;}

/* ---------- Rank 4+ rows: depth, avatar ring, rank chip ---------- */
html body #leaderboardScreen#leaderboardScreen .leader-item{
  position:relative;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.35)!important;
  padding:12px 14px!important;
  transition:transform .15s ease, box-shadow .15s ease;
}
html body #leaderboardScreen#leaderboardScreen .leader-item:active{transform:scale(.985)}
html body #leaderboardScreen#leaderboardScreen .leader-rank{
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(229,80,28,.10);color:var(--ember,#E5501C)!important;-webkit-text-fill-color:var(--ember,#E5501C)!important;
  font-size:13px!important;
}
html body #leaderboardScreen#leaderboardScreen .leader-avatar{
  width:44px;height:44px;
  background:linear-gradient(160deg,rgba(229,80,28,.16),rgba(229,80,28,.05))!important;
  border:1px solid rgba(229,80,28,.22);
  color:var(--ember,#E5501C)!important;-webkit-text-fill-color:var(--ember,#E5501C)!important;
}
html body #leaderboardScreen#leaderboardScreen .leader-prize{color:#B87A00!important;-webkit-text-fill-color:#B87A00!important;font-weight:800!important}

/* ---------- Filter chips: gradient active state ---------- */
html body #leaderboardScreen#leaderboardScreen .chip.active{
  background:linear-gradient(135deg,#FF6A39,#E5501C)!important;
  border-color:transparent!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  box-shadow:0 8px 18px -8px rgba(229,80,28,.5)!important;
}

/* ---------- My rank chip: elevated card instead of a flat outline ---------- */
html body #leaderboardScreen#leaderboardScreen #myRankChip{
  background:linear-gradient(135deg,rgba(229,80,28,.10),rgba(229,80,28,.03))!important;
  box-shadow:0 12px 26px -16px rgba(229,80,28,.45);
}

/* ---------- Dark app-theme: keep list rows consistent with the stage ---------- */
html[data-theme="dark"] body #leaderboardScreen#leaderboardScreen .leader-item{
  background:var(--panel2,#20242F)!important;border-color:var(--line,rgba(255,255,255,.08))!important;
}


/* ===== css/premium-polish.css ===== */
/* ============================================================
   HB Battle — Premium Polish & Animations
   Purely additive/visual layer. Loaded after all existing CSS.
   Targets: splash screen, login/signup screens, home quick-actions
   grid, and wallet stats/transactions. No JS logic is touched —
   these are pure CSS animations on existing markup/classes.
   ============================================================ */

/* ---------- Shared easing ---------- */
:root{
  --pp-ease: cubic-bezier(.22,1,.36,1);
  --pp-ease-back: cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   1) SPLASH SCREEN — logo pop-in + steadier glow
   ============================================================ */
#splashScreen .splash-logo{
  animation: pp-logoPop .7s var(--pp-ease-back) both;
}
@keyframes pp-logoPop{
  0%{opacity:0;transform:scale(.72) translateY(10px);}
  60%{opacity:1;transform:scale(1.04) translateY(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
#splashScreen .splash-glow{
  animation: pp-glowPulse 3.2s ease-in-out infinite;
}
@keyframes pp-glowPulse{
  0%,100%{opacity:.55;filter:blur(0px);}
  50%{opacity:1;filter:blur(2px);}
}
/* Stagger the floating icons a touch more distinctly */
#splashScreen .splash-icon:nth-child(1){animation-duration:6s;}
#splashScreen .splash-icon:nth-child(2){animation-duration:7s;}
#splashScreen .splash-icon:nth-child(3){animation-duration:5.4s;}
#splashScreen .splash-icon:nth-child(4){animation-duration:6.6s;}
#splashScreen .splash-icon:nth-child(5){animation-duration:7.4s;}

/* ============================================================
   2) LOGIN / SIGNUP / RESET SCREENS
   ============================================================ */

/* Float the background icons — base CSS defined the icons but
   never gave them an animation, so they sat static. */
.auth-float-icon{
  animation: pp-float 6s ease-in-out infinite;
}
.auth-float-icon:nth-of-type(1){animation-delay:0s; animation-duration:6.2s;}
.auth-float-icon:nth-of-type(2){animation-delay:.8s; animation-duration:7s;}
.auth-float-icon:nth-of-type(3){animation-delay:1.6s; animation-duration:5.6s;}
.auth-float-icon:nth-of-type(4){animation-delay:.4s; animation-duration:6.8s;}
@keyframes pp-float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-14px) rotate(4deg);}
}

/* Slow ambient drift on the auth background glows */
.auth-bg,.auth-bg2{
  animation: pp-drift 10s ease-in-out infinite alternate;
}
.auth-bg2{ animation-delay: -4s; }
@keyframes pp-drift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-3%,3%) scale(1.06);}
}

/* Logo entrance */
.auth-content > img{
  animation: pp-logoPop .6s var(--pp-ease-back) both;
}

/* Staggered entrance for the form itself: subtitle, each field,
   the forgot-password row, the button, and the fine-print links. */
.auth-content > .auth-subtitle,
.auth-content > .form-group,
.auth-content > button,
.auth-content > .auth-link,
.auth-content > div{
  animation: pp-riseIn .55s var(--pp-ease) both;
}
.auth-content > .auth-subtitle{ animation-delay:.08s; }
.auth-content > .form-group:nth-of-type(1){ animation-delay:.14s; }
.auth-content > .form-group:nth-of-type(2){ animation-delay:.20s; }
.auth-content > .form-group:nth-of-type(3){ animation-delay:.26s; }
.auth-content > .form-group:nth-of-type(4){ animation-delay:.32s; }
.auth-content > .form-group:nth-of-type(5){ animation-delay:.38s; }
.auth-content > button{ animation-delay:.44s; }
.auth-content > .auth-link{ animation-delay:.50s; }
@keyframes pp-riseIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Input focus — smooth glowing lift instead of an instant snap */
.form-input{
  transition: box-shadow .25s var(--pp-ease), border-color .25s var(--pp-ease), transform .2s var(--pp-ease);
}
.form-input:focus{
  transform: translateY(-1px);
}

/* Button shine sweep on the primary CTA */
.btn.btn-glow{
  position: relative;
  overflow: hidden;
  transition: transform .18s var(--pp-ease), box-shadow .3s var(--pp-ease);
}
.btn.btn-glow::after{
  content:"";
  position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  animation: pp-shine 2.8s ease-in-out infinite;
}
@keyframes pp-shine{
  0%{ left:-60%; }
  40%{ left:120%; }
  100%{ left:120%; }
}
.btn.btn-glow:active{ transform: scale(.97); }

/* ============================================================
   3) SCREEN TRANSITIONS — smoother swap between any two screens
   ============================================================ */
.screen.active{
  animation: pp-screenIn .38s var(--pp-ease) both;
}
@keyframes pp-screenIn{
  from{ opacity:0; transform: translateY(10px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ============================================================
   4) WALLET — Quick Stats + Recent Transactions
   ============================================================ */
.wallet-stat-card{
  animation: pp-riseIn .5s var(--pp-ease) both;
  transition: transform .2s var(--pp-ease), box-shadow .25s var(--pp-ease);
}
.wallet-stat-card:nth-child(1){ animation-delay:.05s; }
.wallet-stat-card:nth-child(2){ animation-delay:.12s; }
.wallet-stat-card:nth-child(3){ animation-delay:.19s; }
.wallet-stat-card:active{ transform: scale(.96); }

#walletTxns .txn-item{
  animation: pp-riseIn .45s var(--pp-ease) both;
  transition: transform .18s var(--pp-ease), background .2s ease;
}
#walletTxns .txn-item:nth-child(1){ animation-delay:.06s; }
#walletTxns .txn-item:nth-child(2){ animation-delay:.12s; }
#walletTxns .txn-item:nth-child(3){ animation-delay:.18s; }
#walletTxns .txn-item:nth-child(4){ animation-delay:.24s; }
#walletTxns .txn-item:nth-child(5){ animation-delay:.30s; }
#walletTxns .txn-item:nth-child(n+6){ animation-delay:.34s; }
#walletTxns .txn-item:active{ transform: scale(.98); }

/* ============================================================
   5) HOME — Quick Actions grid, made to feel premium
   ============================================================ */
.qa-grid{
  gap: 12px !important;
}
.qa-card{
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0)) , var(--panel, #1A1D26) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .22s var(--pp-ease), box-shadow .25s var(--pp-ease);
  animation: pp-cardIn .5s var(--pp-ease-back) both;
  will-change: transform;
}
@keyframes pp-cardIn{
  from{ opacity:0; transform: translateY(16px) scale(.94); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
/* Stagger every card in document order, capped so long lists
   don't end up with a multi-second delay */
.qa-card:nth-child(1){ animation-delay: .02s; }
.qa-card:nth-child(2){ animation-delay: .06s; }
.qa-card:nth-child(3){ animation-delay: .10s; }
.qa-card:nth-child(4){ animation-delay: .14s; }
.qa-card:nth-child(5){ animation-delay: .18s; }
.qa-card:nth-child(6){ animation-delay: .22s; }
.qa-card:nth-child(7){ animation-delay: .26s; }
.qa-card:nth-child(8){ animation-delay: .30s; }
.qa-card:nth-child(n+9){ animation-delay: .34s; }

.qa-card:active{
  transform: scale(.95);
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
@media (hover:hover){
  .qa-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,.26);
  }
}

/* Icon badges glow using each card's own --qa-accent/--qa-glow
   custom properties (already set inline per card) */
.qa-card-icon{
  border-radius: 12px !important;
  box-shadow: 0 0 0 0 var(--qa-glow, transparent);
  transition: box-shadow .3s var(--pp-ease);
}
.qa-card:active .qa-card-icon,
.qa-card:hover .qa-card-icon{
  box-shadow: 0 0 16px 2px var(--qa-glow, transparent);
}

/* LIVE / NEW badges — soft attention pulse instead of sitting flat */
.qa-badge{
  animation: pp-badgePulse 1.8s ease-in-out infinite;
}
@keyframes pp-badgePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.12); }
}

/* Respect reduced-motion preference across every animation above */
@media (prefers-reduced-motion: reduce){
  #splashScreen .splash-logo,
  #splashScreen .splash-glow,
  .auth-float-icon,
  .auth-bg,.auth-bg2,
  .auth-content > *,
  .btn.btn-glow::after,
  .screen.active,
  .wallet-stat-card,
  #walletTxns .txn-item,
  .qa-card,
  .qa-badge{
    animation: none !important;
  }
}


/* ===== css/dashboard-elevate.css ===== */
/* ===================================================================
   Dashboard — Elevate Pass (v1)
   Single source of truth for #dashboardScreen visuals. Loaded LAST so
   it wins over the premium.css / premium-polish.css / v14 overrides
   that turned the quick-actions list into a generic glowing card grid.
   Everything below targets #dashboardScreen only — no other screen
   is touched.
   =================================================================== */

/* ---------- Wallet: the one hero moment on this screen ---------- */
#dashboardScreen .home-wallet-card{
  background: linear-gradient(135deg, #15171d 0%, #1c1f28 55%, #3a2412 100%) !important;
  border: 1px solid rgba(255,182,39,0.25) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35) !important;
  padding: 20px !important;
}
#dashboardScreen .home-wallet-card::before{
  height: 100% !important;
  width: 3px !important;
  left: 0; right: auto;
  background: linear-gradient(180deg, var(--gold), var(--red)) !important;
  opacity: .8;
}
#dashboardScreen .home-wallet-label{
  color: rgba(255,255,255,0.55) !important;
}
#dashboardScreen .home-wallet-amt{
  color: #fff !important;
  font-size: 34px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
#dashboardScreen .home-wallet-add{
  background: var(--gold) !important;
  color: #15171d !important;
}

/* ---------- Stat strip: quiet, numbers do the talking ---------- */
#dashboardScreen .home-card-float{
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}

/* ---------- Quick actions: back to a roster list, not card soup ---------- */
#dashboardScreen .qa-grid{
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
#dashboardScreen .qa-card{
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 14px !important;
  border-left: 3px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
#dashboardScreen .qa-card:last-child{ border-bottom: none !important; }
#dashboardScreen .qa-card:active{
  background: var(--off-white) !important;
  border-left-color: var(--qa-accent, var(--gold));
  transform: none !important;
}
@media (hover:hover){
  #dashboardScreen .qa-card:hover{
    background: var(--off-white) !important;
    border-left-color: var(--qa-accent, var(--gold));
    transform: none !important;
  }
}

/* Icon: flat glyph in brand tone, not a glowing filled circle */
#dashboardScreen .qa-card-icon{
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px solid var(--qa-accent, var(--gold));
}
#dashboardScreen .qa-card-icon i{
  color: var(--qa-accent, var(--gold)) !important;
  font-size: 15px;
}
#dashboardScreen .qa-card:hover .qa-card-icon,
#dashboardScreen .qa-card:active .qa-card-icon{
  box-shadow: none !important;
}

/* One orchestrated entrance for the whole list, not per-card stagger */
#dashboardScreen .qa-grid{
  animation: dash-listIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dash-listIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  #dashboardScreen .qa-grid{ animation: none !important; }
}

/* ---------- Promo band: keep it, just quiet the border-radius fight ---------- */
#dashboardScreen .home-promo{
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* ===== css/dashboard-elevate-v2.css ===== */
/* ===================================================================
   Dashboard — Elevate Pass v2 (High-Class Refresh)
   Loaded LAST, after dashboard-elevate.css. Only touches
   #dashboardScreen. Pushes the roster-list direction further:
   foil wallet hero, sleek stat pills, richer promo, refined roster.
   =================================================================== */

/* ---------- Top header: quieter, more premium ---------- */
#dashboardScreen .home-hero{
  padding-bottom: 16px !important;
}
#dashboardScreen .home-greeting{
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  opacity: .75;
}
#dashboardScreen .home-name{
  font-size: 23px !important;
  letter-spacing: -.3px !important;
}
#dashboardScreen [onclick="showScreen('profileScreen')"]{
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--gold-soft) !important;
  border: 1.5px solid var(--gold) !important;
  transition: transform .15s ease;
}
#dashboardScreen [onclick="showScreen('profileScreen')"]:active{
  transform: scale(.94);
}

/* ---------- Wallet: foil-card treatment ---------- */
#dashboardScreen .home-wallet-card{
  background:
    linear-gradient(115deg, rgba(255,182,39,0.10) 0%, transparent 30%),
    linear-gradient(135deg, #14161c 0%, #1b1e27 55%, #33210f 100%) !important;
  border: 1px solid rgba(255,182,39,0.28) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  padding: 22px 20px !important;
  position: relative;
}
#dashboardScreen .home-wallet-card::before{
  height: 100% !important;
  width: 3px !important;
  left: 0; right: auto;
  background: linear-gradient(180deg, var(--gold), var(--red)) !important;
  opacity: .85;
}
/* faint diagonal sheen sweeping across the card */
#dashboardScreen .home-wallet-card::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.05) 48%, transparent 60%);
  pointer-events: none;
}
#dashboardScreen .home-wallet-label{
  color: rgba(255,255,255,0.5) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.2px !important;
}
#dashboardScreen .home-wallet-amt{
  color: #fff !important;
  font-size: 32px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  margin-top: 4px !important;
}
#dashboardScreen .home-wallet-add{
  background: linear-gradient(135deg, var(--gold), #E89A0C) !important;
  color: #15171d !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(255,182,39,0.35);
  border-radius: 9px !important;
}
/* Wallet image badge — glowing gold ring behind the pocket photo,
   with a slow float + pulse so it feels alive, not static. */
#dashboardScreen .wallet-icon-badge{
  width: 84px !important;
  height: 84px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: dash-walletFloat 3.2s ease-in-out infinite;
}
#dashboardScreen .wallet-icon-badge::before{
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,39,0.35), transparent 70%);
  animation: dash-walletGlow 2.6s ease-in-out infinite;
  z-index: 0;
}
#dashboardScreen .wallet-icon-badge img{
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,0.45))
    drop-shadow(0 0 10px rgba(255,182,39,0.35)) !important;
}
@keyframes dash-walletFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes dash-walletGlow{
  0%, 100%{ opacity: .5; transform: scale(.92); }
  50%{ opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  #dashboardScreen .wallet-icon-badge,
  #dashboardScreen .wallet-icon-badge::before{ animation: none !important; }
}

/* ---------- Stat strip: sleek pill card ---------- */
#dashboardScreen .home-card-float{
  box-shadow: 0 8px 24px rgba(23,26,33,0.05) !important;
  border: 1px solid var(--border) !important;
  padding: 14px 12px !important;
}
#dashboardScreen .home-stat-val{
  font-size: 20px !important;
  font-variant-numeric: tabular-nums;
}
#dashboardScreen .home-stat-label{
  font-size: 9px !important;
  letter-spacing: 1.1px !important;
  opacity: .7;
}
#dashboardScreen .home-stat-div{
  background: linear-gradient(180deg, transparent, var(--border), transparent) !important;
}

/* ---------- Promo band: richer gradient + shine sweep ---------- */
#dashboardScreen .home-promo{
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,182,39,0.16);
}
#dashboardScreen .home-promo::after{
  content: '';
  position: absolute; top: -50%; left: -20%;
  width: 40%; height: 200%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: rotate(8deg);
  animation: dash-promoSheen 5s ease-in-out infinite;
}
@keyframes dash-promoSheen{
  0%   { left: -30%; }
  55%  { left: 120%; }
  100% { left: 120%; }
}
#dashboardScreen .home-promo-btn{
  background: var(--gold) !important;
  color: #15171d !important;
  border: none !important;
  font-weight: 800 !important;
  border-radius: 9px !important;
  box-shadow: 0 4px 12px rgba(255,182,39,0.3);
}
@media (prefers-reduced-motion: reduce){
  #dashboardScreen .home-promo::after{ animation: none !important; }
}

/* ---------- Section title: quiet accent mark ---------- */
#dashboardScreen .sec-title{
  font-size: 15.5px !important;
  letter-spacing: .1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#dashboardScreen .sec-title::before{
  content: '';
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--red));
  display: inline-block;
}
#dashboardScreen .sec-title a{
  font-size: 10.5px !important;
  letter-spacing: .6px;
}

/* ---------- Quick actions roster: refined icon + spacing ---------- */
#dashboardScreen .qa-grid{
  box-shadow: 0 8px 24px rgba(23,26,33,0.05) !important;
}

/* FIX: v12-fixes.css turns #qaExtraCards into a 2-column grid when
   expanded (loads after premium.css, wins the !important fight).
   That breaks the single-column roster list this redesign relies on
   — titles wrap, rows lose alignment. Force it back to flowing
   naturally inside the list, every time it's expanded. */
#dashboardScreen #qaExtraCards,
#dashboardScreen #qaExtraCards.qa-expanded{
  display: contents !important;
}
#dashboardScreen #qaExtraCards .qa-card{
  width: 100% !important;
}
/* FIX: premium-polish.css gives every .qa-card a "fade + rise" entrance
   animation (animation-fill-mode: both, so it starts at opacity:0).
   Combined with #qaExtraCards flipping between display:none and
   display:contents when "View All" is toggled, some WebViews interrupt
   that animation mid-flight and leave the card stuck invisible forever
   (this is what made the "History" row look like a blank gap). Extra
   cards don't need an entrance animation anyway — force them fully
   visible immediately, every time. */
#dashboardScreen #qaExtraCards .qa-card{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
#dashboardScreen .qa-card{
  padding: 13px 14px !important;
}
#dashboardScreen .qa-card-icon{
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--qa-accent, var(--gold)) 22%, var(--surface) 78%) !important;
  border: 1.5px solid var(--qa-accent, var(--gold)) !important;
}
#dashboardScreen .qa-card-icon i{
  color: var(--qa-accent, var(--gold)) !important;
  font-size: 16px !important;
  filter: saturate(1.15);
}
#dashboardScreen .qa-card-title{
  font-size: 13px !important;
  letter-spacing: 0;
}
#dashboardScreen .qa-card-sub{
  font-size: 10.5px !important;
  opacity: .85;
}
#dashboardScreen .qa-card::after{
  font-size: 11px !important;
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}
#dashboardScreen .qa-card:active::after{
  transform: translateX(2px);
  opacity: .9;
}
@media (hover:hover){
  #dashboardScreen .qa-card:hover::after{
    transform: translateX(2px);
    opacity: .9;
  }
}

/* Fallback for browsers without color-mix support: keep v1 outline look */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  #dashboardScreen .qa-card-icon{
    background: transparent !important;
    border: 1.5px solid var(--qa-accent, var(--gold)) !important;
  }
}


/* ===== css/wallet-elevate.css ===== */
/* ============================================================
   Wallet — Elevate Pass v2 (theme-aware)
   HB Battle already has a Light / Dark / Green theme switch
   ([data-theme]). This file gives the wallet hero a distinct,
   high-class look PER theme instead of forcing one look on top
   of all three (which is what broke theme-switching earlier).
   Scoped to #walletScreen only. Loaded last.
   ============================================================ */

/* ================= SHARED STRUCTURE (all themes) ================= */
#walletScreen .header-back{
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
#walletScreen .wallet-visual{
  position: relative;
  animation: wal-float 3.2s ease-in-out infinite;
}
#walletScreen .wallet-float-img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)) !important;
}
@keyframes wal-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
@keyframes wal-glow{
  0%, 100%{ opacity: .45; transform: scale(.92); }
  50%{ opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  #walletScreen .wallet-visual{ animation: none !important; }
  #walletScreen .wallet-visual::before{ animation: none !important; }
}
#walletScreen .wallet-btn{
  border-radius: 12px !important;
  padding: 13px !important;
}
#walletScreen .wallet-btn:active{ transform: scale(.97); }
#walletScreen .wallet-stats-grid{ gap: 10px !important; }
#walletScreen .wallet-stat-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 20px rgba(23,26,33,0.05) !important;
  border-radius: var(--radius) !important;
}
#walletScreen .wallet-stat-card::before{ display: none; }
#walletScreen .sec-title{ display: flex; align-items: center; gap: 8px; }

/* ================= LIGHT / DEFAULT THEME — warm ember ================= */
:root:not([data-theme]) #walletScreen .wallet-hero,
html[data-theme="light"] #walletScreen .wallet-hero{
  background:
    radial-gradient(480px 320px at 88% 15%, rgba(255,143,60,0.28), transparent 60%),
    linear-gradient(160deg, #15171d 0%, #1c1108 100%) !important;
  padding: 24px 20px 26px !important;
}
:root:not([data-theme]) #walletScreen .wallet-label,
html[data-theme="light"] #walletScreen .wallet-label{
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 1.4px !important;
}
:root:not([data-theme]) #walletScreen .wallet-amount,
html[data-theme="light"] #walletScreen .wallet-amount{
  background: linear-gradient(120deg, #ff8f3c, var(--gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 40px !important;
}
:root:not([data-theme]) #walletScreen .wallet-sub,
html[data-theme="light"] #walletScreen .wallet-sub{
  color: rgba(255,255,255,0.45) !important;
}
:root:not([data-theme]) #walletScreen .wallet-visual::before,
html[data-theme="light"] #walletScreen .wallet-visual::before{
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,143,60,0.32), transparent 70%);
  animation: wal-glow 2.6s ease-in-out infinite;
  z-index: -1;
}
:root:not([data-theme]) #walletScreen .wallet-btn,
html[data-theme="light"] #walletScreen .wallet-btn{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,143,60,0.25) !important;
  color: #fff !important;
}
:root:not([data-theme]) #walletScreen .wallet-btn i,
html[data-theme="light"] #walletScreen .wallet-btn i{ color: #ff8f3c !important; }
@media (hover:hover){
  :root:not([data-theme]) #walletScreen .wallet-btn:hover,
  html[data-theme="light"] #walletScreen .wallet-btn:hover{
    background: rgba(255,143,60,0.10) !important;
    border-color: #ff8f3c !important;
  }
}
:root:not([data-theme]) #walletScreen .sec-title::before,
html[data-theme="light"] #walletScreen .sec-title::before{
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, #ff8f3c, var(--gold));
  display: inline-block;
}

/* ================= DARK THEME — midnight gold spotlight ================= */
html[data-theme="dark"] #walletScreen .wallet-hero{
  background:
    linear-gradient(115deg, rgba(255,182,39,0.08) 0%, transparent 32%),
    linear-gradient(160deg, #14161c 0%, #1b1e27 55%, #2b1c10 100%) !important;
  padding: 24px 20px 26px !important;
  border-bottom: 1px solid rgba(255,182,39,0.18);
}
html[data-theme="dark"] #walletScreen .wallet-label{
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 1.4px !important;
}
html[data-theme="dark"] #walletScreen .wallet-amount{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  font-size: 40px !important;
  text-shadow: 0 4px 24px rgba(255,182,39,0.18) !important;
}
html[data-theme="dark"] #walletScreen .wallet-sub{
  color: rgba(255,255,255,0.45) !important;
}
html[data-theme="dark"] #walletScreen .wallet-visual::before{
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,182,39,0.30), transparent 70%);
  animation: wal-glow 2.6s ease-in-out infinite;
  z-index: -1;
}
html[data-theme="dark"] #walletScreen .wallet-btn{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,182,39,0.20) !important;
  color: #fff !important;
}
html[data-theme="dark"] #walletScreen .wallet-btn i{ color: var(--gold) !important; }
@media (hover:hover){
  html[data-theme="dark"] #walletScreen .wallet-btn:hover{
    background: rgba(255,182,39,0.08) !important;
    border-color: var(--gold) !important;
  }
}
html[data-theme="dark"] #walletScreen .sec-title::before{
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--red));
  display: inline-block;
}

/* ================= GREEN THEME — emerald + gold ================= */
html[data-theme="green"] #walletScreen .wallet-hero{
  background:
    radial-gradient(460px 300px at 85% 10%, rgba(34,193,126,0.24), transparent 62%),
    linear-gradient(160deg, #0a1510 0%, #0f2018 55%, #142b1f 100%) !important;
  padding: 24px 20px 26px !important;
  border-bottom: 1px solid rgba(34,193,126,0.22);
}
html[data-theme="green"] #walletScreen .wallet-label{
  color: rgba(230,255,240,0.55) !important;
  letter-spacing: 1.4px !important;
}
html[data-theme="green"] #walletScreen .wallet-amount{
  background: linear-gradient(120deg, #4ee0a0, #FFC94A) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 40px !important;
}
html[data-theme="green"] #walletScreen .wallet-sub{
  color: rgba(230,255,240,0.45) !important;
}
html[data-theme="green"] #walletScreen .wallet-visual::before{
  content: '';
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,193,126,0.34), transparent 70%);
  animation: wal-glow 2.6s ease-in-out infinite;
  z-index: -1;
}
html[data-theme="green"] #walletScreen .wallet-btn{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(34,193,126,0.28) !important;
  color: #eef4f0 !important;
}
html[data-theme="green"] #walletScreen .wallet-btn i{ color: #4ee0a0 !important; }
@media (hover:hover){
  html[data-theme="green"] #walletScreen .wallet-btn:hover{
    background: rgba(34,193,126,0.10) !important;
    border-color: #4ee0a0 !important;
  }
}
html[data-theme="green"] #walletScreen .sec-title::before{
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, #4ee0a0, #FFC94A);
  display: inline-block;
}

/* ================= Bonus Wallet card: theme-neutral glass swap ================= */
#walletScreen .wallet-body > div[onclick*="bonusWalletScreen"]{
  background: linear-gradient(135deg, var(--gold-soft), var(--surface)) !important;
  border: 1.5px solid rgba(255,182,39,0.35) !important;
}
#walletScreen .wallet-body > div[onclick*="bonusWalletScreen"] > div:first-child{
  background: var(--gold) !important;
  color: #15171d !important;
}
#walletScreen .wallet-body > div[onclick*="bonusWalletScreen"] > div:nth-child(2) > div:first-child{
  color: var(--text) !important;
}
#walletScreen .wallet-body > div[onclick*="bonusWalletScreen"] > div:nth-child(2) > div:last-child,
#walletScreen .wallet-body > div[onclick*="bonusWalletScreen"] i{
  color: var(--gold) !important;
}


/* ===== css/app-highclass.css ===== */
/* ============================================================
   HB Battle App — HIGH CLASS v18.2 in-app glow layer.
   Loads LAST on app.html. Adds: gold scrollbar & selection,
   glowing header rule, bottom-nav gold active state,
   pulsing center FAB ring, card elevation. Safe overrides.
   ============================================================ */
:root{--hc-gold:#e3b34c;--hc-green:#22c17e}

/* gold scrollbar + selection inside app */
.app ::-webkit-scrollbar, ::-webkit-scrollbar{width:9px;height:9px}
.app ::-webkit-scrollbar-track, ::-webkit-scrollbar-track{background:rgba(15,32,24,.9)}
.app ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--hc-green),#0f5132);border-radius:99px;border:2px solid rgba(15,32,24,.9)}
.app ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--hc-gold),#0f5132)}
::selection{background:rgba(227,179,76,.9);color:#0a1510}

/* header: animated gold base line */
.header{position:relative;overflow:hidden}
.header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--hc-gold),var(--hc-green),transparent);
  background-size:200% 100%;animation:hcAppLine 6s linear infinite}
@keyframes hcAppLine{to{background-position:200% 0}}

/* bottom nav: gold active item + glow */
.bottom-nav .nav-item.active{color:var(--hc-gold) !important}
.bottom-nav .nav-item.active i, .bottom-nav .nav-item.active svg{color:var(--hc-gold) !important;
  filter:drop-shadow(0 0 6px rgba(227,179,76,.65))}
.bottom-nav .nav-item{transition:color .25s ease, transform .2s ease}
.bottom-nav .nav-item:active{transform:scale(.9)}

/* center FAB: pulsing gold ring */
.nav-fab{position:relative}
.nav-fab::before{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid rgba(227,179,76,.55);animation:hcFabPulse 2.2s ease-out infinite;pointer-events:none}
@keyframes hcFabPulse{0%{transform:scale(.85);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* cards / panels: subtle gold-green lift on touch */
.tour-card,.info-card,.stat-card,.leader-item,.wallet-card,.panel{will-change:transform,box-shadow;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
.tour-card:active,.info-card:active,.wallet-card:active{transform:scale(.985)}

/* toast: gold border accent */
#toast{box-shadow:0 14px 40px -12px rgba(0,0,0,.6) !important}

@media (prefers-reduced-motion:reduce){
  .header::after,.nav-fab::before{animation:none !important}
}


/* ===== css/lava.css ===== */
/* ============================================================
   HB Battle — LAVA EDITION (V20)
   Fiery ember-gold accents, lava buttons, gradient borders,
   scroll progress bar, ripple, typing caret. Loads LAST.
   ============================================================ */
:root{
  --lv-ember:#ff6b2c;
  --lv-fire:#ff8a3d;
  --lv-gold:#e3b34c;
  --lv-green:#22c17e;
  --lv-ease:cubic-bezier(.22,1,.36,1);
}

/* ---- 1. LAVA BUTTONS: fiery gradient + animated glow ring ---- */
.btn{
  background:linear-gradient(135deg,#ff8a3d 0%,#e3b34c 55%,#ff6b2c 100%) !important;
  color:#1c0e02 !important;
  font-weight:800 !important;
  border-radius:13px !important;
  box-shadow:0 10px 30px -10px rgba(255,107,44,.55), inset 0 1px 0 rgba(255,255,255,.5) !important;
  position:relative;isolation:isolate;
  transition:transform .3s var(--lv-ease), box-shadow .3s var(--lv-ease), filter .25s ease;
}
.btn:hover{
  filter:brightness(1.1) saturate(1.15);
  transform:translateY(-2px);
  box-shadow:0 16px 44px -10px rgba(255,107,44,.8), 0 0 30px -6px rgba(227,179,76,.6), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
/* rotating lava ring behind button on hover */
.btn::before{
  content:'';position:absolute;inset:-3px;border-radius:16px;z-index:-1;
  background:conic-gradient(from 0deg,#ff6b2c,#e3b34c,#22c17e,#ff6b2c);
  filter:blur(10px);opacity:0;transition:opacity .35s ease;
  animation:lvSpin 3.2s linear infinite;
}
.btn:hover::before{opacity:.85}
@keyframes lvSpin{to{transform:rotate(360deg)}}
/* secondary buttons: ember outline */
.btn.alt{
  background:rgba(255,138,61,.08) !important;
  color:#ffb37e !important;
  border:1px solid rgba(255,138,61,.55) !important;
  box-shadow:none !important;
}
.btn.alt:hover{background:rgba(255,138,61,.16) !important;box-shadow:0 0 24px -6px rgba(255,107,44,.5) !important}
.btn.alt::before{display:none}

/* ---- 2. LAVA RIPPLE on click ---- */
.lv-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(255,220,150,.85),rgba(255,138,61,.35) 45%,transparent 70%);
  transform:scale(0);animation:lvRip .6s var(--lv-ease) forwards}
@keyframes lvRip{to{transform:scale(3.4);opacity:0}}

/* ---- 3. SCROLL PROGRESS BAR (top of page) ---- */
#lvProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:linear-gradient(90deg,#22c17e,#e3b34c,#ff6b2c);
  box-shadow:0 0 12px rgba(255,107,44,.8);border-radius:0 3px 3px 0}

/* ---- 4. LAVA gradient borders on hero match card ---- */
@property --lvA{syntax:'<angle>';initial-value:0deg;inherits:false}
.match-card{
  border:1.5px solid transparent !important;
  background:
    linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)) padding-box,
    conic-gradient(from var(--lvA),#22c17e,#e3b34c,#ff6b2c,#e3b34c,#22c17e) border-box !important;
  animation:lvBorder 5s linear infinite;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 50px -14px rgba(255,107,44,.4) !important;
}
@keyframes lvBorder{to{--lvA:360deg}}

/* ---- 5. LAVA accents on headings & strip ---- */
.content h1::after{background:linear-gradient(90deg,#22c17e,#e3b34c,#ff6b2c)}
.content h2::before{background:linear-gradient(180deg,#22c17e,#ff6b2c)}
.hero .eyebrow{color:#ffb37e !important}
.trust-strip .wrap > div strong{color:#ffb37e}
footer::before{background:linear-gradient(90deg,transparent,#ff6b2c,#e3b34c,transparent)}

/* ---- 6. LAVA card hover: ember glow ---- */
@media (hover:hover){
  .card:hover{border-color:rgba(255,138,61,.5) !important;
    box-shadow:0 26px 56px -24px rgba(0,0,0,.7), 0 0 34px -10px rgba(255,107,44,.35)}
}

/* ---- 7. TYPING caret for hero eyebrow ---- */
.hero .eyebrow.typing::after{content:'\258F';color:#ff8a3d;margin-left:4px;
  animation:lvCaret .8s steps(1) infinite}
@keyframes lvCaret{50%{opacity:0}}

/* ---- 8. Live clock chip in ticker ---- */
.ultra-ticker .ux-clock{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  padding:0 14px;height:100%;font-family:Sora,Arial,sans-serif;font-size:.72rem;font-weight:700;
  color:#e3b34c;border-left:1px solid rgba(227,179,76,.25);white-space:nowrap;z-index:2}

/* ---- 9. Links get ember underline on hover ---- */
.card a:hover,.content a:hover{color:#ff8a3d}

@media (prefers-reduced-motion:reduce){
  .btn::before,.match-card{animation:none !important}
  .lv-ripple{animation-duration:.2s}
}


/* ===== css/platinum.css ===== */
/* ============================================================
   HB Battle — PLATINUM EDITION (V21)
   Real UX features: FAQ accordion, guide search, toast system,
   copy-email button, refined details. Loads LAST.
   ============================================================ */
:root{--pt-gold:#e3b34c;--pt-ember:#ff8a3d;--pt-green:#22c17e;--pt-ease:cubic-bezier(.22,1,.36,1)}

/* ---- 1. FAQ ACCORDION ---- */
.pt-acc{border:1px solid rgba(34,193,126,.22);border-radius:14px;margin-bottom:12px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  transition:border-color .3s ease, box-shadow .3s ease}
.pt-acc.open{border-color:rgba(227,179,76,.5);box-shadow:0 12px 34px -16px rgba(0,0,0,.6)}
.pt-acc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 20px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:Sora,Arial,sans-serif;font-weight:700;font-size:1rem;color:#fff}
.pt-acc-q:hover{color:#e3b34c}
.pt-acc-q .pt-ico{flex:0 0 auto;width:26px;height:26px;border-radius:50%;position:relative;
  border:1px solid rgba(227,179,76,.5);transition:transform .35s var(--pt-ease), background .3s ease}
.pt-acc-q .pt-ico::before,.pt-acc-q .pt-ico::after{content:'';position:absolute;left:50%;top:50%;
  background:#e3b34c;transition:transform .35s var(--pt-ease), background .3s}
.pt-acc-q .pt-ico::before{width:11px;height:2px;transform:translate(-50%,-50%)}
.pt-acc-q .pt-ico::after{width:2px;height:11px;transform:translate(-50%,-50%)}
.pt-acc.open .pt-ico{transform:rotate(90deg);background:rgba(227,179,76,.15)}
.pt-acc.open .pt-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.pt-acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--pt-ease)}
.pt-acc.open .pt-acc-a{grid-template-rows:1fr}
.pt-acc-a > div{overflow:hidden}
.pt-acc-a p{margin:0;padding:0 20px 18px;color:#b9ccc2;font-size:.96rem}

/* ---- 2. GUIDE SEARCH ---- */
.pt-search{position:relative;margin:0 0 22px}
.pt-search input{width:100%;padding:14px 18px 14px 46px;border-radius:13px;
  background:rgba(8,18,13,.7);border:1px solid rgba(34,193,126,.3);color:#fff;
  font-family:Inter,Arial,sans-serif;font-size:.95rem;outline:none;
  transition:border-color .3s ease, box-shadow .3s ease}
.pt-search input::placeholder{color:#5f7a6d}
.pt-search input:focus{border-color:var(--pt-gold);box-shadow:0 0 0 3px rgba(227,179,76,.15), 0 0 24px -8px rgba(227,179,76,.4)}
.pt-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#5f7a6d;pointer-events:none}
.pt-count{font-size:.8rem;color:#8fab9d;margin:-12px 0 18px;display:block}
mark.pt-mark{background:rgba(227,179,76,.35);color:#fff;border-radius:3px;padding:0 2px}
.pt-none{display:none;padding:18px;border:1px dashed rgba(227,179,76,.4);border-radius:12px;
  color:#8fab9d;text-align:center;margin-bottom:14px}

/* ---- 3. TOAST SYSTEM ---- */
#ptToasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99999;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(92%,420px)}
.pt-toast{display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:12px;
  background:rgba(10,22,16,.95);backdrop-filter:blur(12px);
  border:1px solid rgba(227,179,76,.45);color:#fff;font-size:.9rem;font-weight:600;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.7), 0 0 26px -10px rgba(227,179,76,.35);
  animation:ptToastIn .45s var(--pt-ease);max-width:100%}
.pt-toast.out{animation:ptToastOut .4s var(--pt-ease) forwards}
.pt-toast i{width:8px;height:8px;border-radius:50%;background:var(--pt-green);flex:0 0 auto;
  box-shadow:0 0 10px var(--pt-green)}
.pt-toast.warn i{background:var(--pt-ember);box-shadow:0 0 10px var(--pt-ember)}
@keyframes ptToastIn{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes ptToastOut{to{opacity:0;transform:translateY(12px) scale(.94)}}

/* ---- 4. COPY EMAIL BUTTON ---- */
.pt-copy{display:inline-flex;align-items:center;gap:7px;margin-left:10px;padding:7px 14px;
  border-radius:99px;border:1px solid rgba(227,179,76,.5);background:rgba(227,179,76,.08);
  color:#e3b34c;font-size:.78rem;font-weight:700;cursor:pointer;font-family:Inter,Arial,sans-serif;
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease;vertical-align:middle}
.pt-copy:hover{background:rgba(227,179,76,.2);box-shadow:0 0 18px -4px rgba(227,179,76,.5)}
.pt-copy:active{transform:scale(.93)}

/* ---- 5. PLATINUM DETAILS ---- */
/* refined content rhythm */
.content h1 + p, .content h2 + p{margin-top:4px}
/* smooth anchor jump offset for sticky header */
section[id], [id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){
  .pt-acc-a{transition:none}
  .pt-toast{animation-duration:.15s}
}


/* ===== css/ultra-max.css ===== */
/* ============================================================
   HB BATTLE — ULTRA MAX POLISH
   Final elevate layer. Loads after every other stylesheet.
   Goal: richer Victory Sunset palette, disciplined typography,
   one consistent elevation/shadow system, calmer motion.
   Does not remove any existing feature — only refines tokens
   and component finish so the whole app reads as one product
   instead of stacked passes.
   ============================================================ */

:root{
  /* Richer, deeper Victory Sunset core — same identity, more depth */
  --vm-red:        #FF3B4E;
  --vm-red-deep:   #C4152A;
  --vm-orange:     #FF7A3D;
  --vm-gold:       #FFC84A;
  --vm-gold-deep:  #E8A317;
  --vm-ink:        #12141B;

  /* Signature gradients — reused everywhere for cohesion */
  --vm-grad-primary: linear-gradient(135deg, var(--vm-red) 0%, var(--vm-orange) 55%, var(--vm-gold) 120%);
  --vm-grad-gold:    linear-gradient(135deg, #FFE9AE 0%, var(--vm-gold) 45%, var(--vm-gold-deep) 100%);
  --vm-grad-victory: linear-gradient(125deg, #14161d 0%, #1c1f2b 45%, #3a2410 85%, var(--vm-gold-deep) 140%);

  /* One elevation system — replaces mismatched ad-hoc shadows */
  --vm-e1: 0 1px 2px rgba(18,20,27,.06), 0 2px 8px rgba(18,20,27,.05);
  --vm-e2: 0 4px 14px rgba(18,20,27,.09), 0 1px 3px rgba(18,20,27,.06);
  --vm-e3: 0 14px 34px rgba(18,20,27,.14), 0 3px 10px rgba(18,20,27,.08);
  --vm-glow-gold: 0 6px 22px rgba(255,200,74,.35);
  --vm-glow-red:  0 6px 22px rgba(255,59,78,.30);

  --vm-radius-sm: 10px;
  --vm-radius:    16px;
  --vm-radius-lg: 22px;

  --vm-ease: cubic-bezier(.22,.9,.32,1);
}

[data-theme="dark"]{
  --vm-e1: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --vm-e2: 0 6px 18px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
  --vm-e3: 0 18px 40px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);
}

/* ---------- Typography discipline ---------- */
body, .app, .content, .hero{
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .header-title, .sec-title, .modal-title, .hero h1{
  font-family: var(--font-display, 'Sora', sans-serif);
  letter-spacing: -0.01em;
  font-weight: 700;
}
.hero h1{ font-weight: 800; letter-spacing: -0.02em; }
.sec-title{ font-weight: 700; opacity: .92; }

/* ---------- Buttons: one confident premium treatment ---------- */
.btn, .btn.alt, .btn-red, .btn-glow{
  border-radius: var(--vm-radius-sm);
  transition: transform .18s var(--vm-ease), box-shadow .18s var(--vm-ease), filter .18s var(--vm-ease);
  will-change: transform;
}
.btn-red, .btn.btn-red{
  background: var(--vm-grad-primary);
  border: none;
  box-shadow: var(--vm-glow-red), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-red:active, .btn.btn-red:active{ transform: translateY(1px) scale(.99); filter: brightness(.96); }
.btn-red:hover, .btn.btn-red:hover{ transform: translateY(-1px); box-shadow: var(--vm-e3), var(--vm-glow-red); }

.btn.alt{
  background: transparent;
  border: 1.5px solid var(--vm-gold-deep);
  color: var(--vm-gold-deep);
}
[data-theme="dark"] .btn.alt{ color: var(--vm-gold); border-color: var(--vm-gold); }

/* ---------- Cards: single consistent elevation, no mismatched shadows ---------- */
.qa-card, .chip, .modal, .content, .card, .settings-group, .info-card{
  border-radius: var(--vm-radius);
  box-shadow: var(--vm-e1);
  transition: box-shadow .2s var(--vm-ease), transform .2s var(--vm-ease);
}
.qa-card:hover, .card:hover{
  box-shadow: var(--vm-e2);
  transform: translateY(-2px);
}
.qa-card-icon{
  background: var(--vm-grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Header / nav polish ---------- */
.header{
  backdrop-filter: saturate(140%) blur(6px);
}
.header-title{ font-weight: 700; }

/* ---------- Forms: calmer, consistent focus state ---------- */
.form-input, .input-wrap input{
  border-radius: var(--vm-radius-sm);
  transition: border-color .15s var(--vm-ease), box-shadow .15s var(--vm-ease);
}
.form-input:focus{
  border-color: var(--vm-gold-deep);
  box-shadow: 0 0 0 3px rgba(232,163,23,.18);
  outline: none;
}

/* ---------- Toggle switches ---------- */
.toggle-switch input:checked + .toggle-slider,
.toggle-slider.active{
  background: var(--vm-grad-primary) !important;
}

/* ---------- Public site: hero + grid + cards ---------- */
.hero{
  background: var(--vm-grad-victory);
  color: #F4EFE6;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 80% 0%, rgba(255,200,74,.16), transparent 60%);
  pointer-events:none;
}
.hero .eyebrow{
  color: var(--vm-gold);
  font-weight: 700;
}
.hero p{ color: rgba(244,239,230,.82); }

.btn{
  background: var(--vm-grad-primary);
  color: #fff;
  border: none;
  box-shadow: var(--vm-glow-red);
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--vm-e3), var(--vm-glow-red); text-decoration:none; }
.btn.alt{ background: transparent; }

.card{
  border: 1px solid rgba(255,200,74,.14);
  background: rgba(255,255,255,.02);
  box-shadow: var(--vm-e1);
}
[data-theme="dark"] .card, .card{
  background: #171a22;
  color: #EDEAE2;
}

.content{
  box-shadow: var(--vm-e1);
}

.guide-list li{
  border-bottom: 1px solid rgba(255,200,74,.14);
  transition: transform .15s var(--vm-ease);
}
.guide-list a{
  color: var(--vm-gold-deep);
}

/* One orchestrated entrance for the hero only — not scattered per element */
.hero h1, .hero p, .hero .btn{
  animation: vm-rise .7s var(--vm-ease) both;
}
.hero p{ animation-delay: .08s; }
.hero .btn{ animation-delay: .16s; }
@keyframes vm-rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero p, .hero .btn{ animation: none; }
}

/* ---------- Scrollbar (light touch, matches palette) ---------- */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--vm-gold-deep); border-radius: 8px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ---------- International phone field (intl-tel-input) ----------
   Matches the app's underline-style form-input instead of the
   library's default boxed look, in light + dark mode. */
.iti{ width:100%; }
.iti .form-input{ padding-left:52px; }
.iti__flag-container{
  bottom: 12px;
  padding: 0;
}
.iti__selected-flag{
  background: transparent !important;
  padding: 0 6px 0 0;
}
.iti__selected-dial-code{
  color: var(--text2);
  font-weight: 600;
}
.iti__country-list{
  border-radius: var(--vm-radius-sm);
  box-shadow: var(--vm-e3);
  border: 1px solid var(--border);
}
[data-theme="dark"] .iti__country-list{
  background: var(--surface);
  color: var(--text);
}
[data-theme="dark"] .iti__country-list .iti__country:hover{
  background: rgba(255,200,74,.10);
}
.iti__country-list .iti__country.iti__highlight{
  background: rgba(255,200,74,.16);
}

/* ---------- Accessible focus ring, kept visible everywhere ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible{
  outline: 2px solid var(--vm-gold-deep);
  outline-offset: 2px;
}


/* ===== css/hb-ultimate-v16.css ===== */
/* HB Battle Ultimate V16 — visual-only premium layer. */
:root{
  --hb-ink:#08110d;--hb-ink2:#0d1b15;--hb-green:#16a36b;--hb-green2:#25d391;
  --hb-gold:#f5b942;--hb-white:#fff;--hb-muted:#718078;
  --hb-shadow:0 22px 70px rgba(5,20,13,.12);--hb-radius:22px;
}
*{scrollbar-width:thin;scrollbar-color:rgba(22,163,107,.55) transparent}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#fbfdfc 0,#f5f8f6 100%);color:#102019}
::selection{background:rgba(37,211,145,.24);color:#06120d}
.site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(8,30,20,.07)!important;box-shadow:0 8px 30px rgba(5,25,15,.05);position:sticky;top:0;z-index:1000}
.site-header .nav{min-height:72px}
.brand{font-weight:800;letter-spacing:-.03em}
.brand img{border-radius:12px;box-shadow:0 8px 22px rgba(22,163,107,.18)}
.links a{transition:transform .2s ease,background .2s ease,color .2s ease}
.links a:hover{transform:translateY(-1px)}
.links .cta{box-shadow:0 10px 25px rgba(22,163,107,.2)!important}
.hero{background:radial-gradient(circle at 15% 15%,rgba(37,211,145,.16),transparent 34%),radial-gradient(circle at 90% 20%,rgba(245,185,66,.12),transparent 28%),linear-gradient(135deg,#07130e 0,#0c2118 55%,#07110d 100%)!important;min-height:680px}
.hero:after{content:"";position:absolute;inset:auto -10% -45% -10%;height:55%;background:radial-gradient(ellipse,rgba(37,211,145,.16),transparent 65%);pointer-events:none}
.hero-copy h1{letter-spacing:-.055em;line-height:.98;text-wrap:balance}
.hero-copy p{max-width:680px;line-height:1.75;color:rgba(255,255,255,.72)}
.eyebrow,.kicker{letter-spacing:.16em;font-weight:800}
.btn{border-radius:14px!important;box-shadow:0 12px 30px rgba(22,163,107,.18);transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(22,163,107,.24)}
.btn.alt{backdrop-filter:blur(10px);background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.15)!important}
.game-chips a{border-radius:999px!important;transition:all .2s ease}
.game-chips a:hover{transform:translateY(-2px);background:rgba(37,211,145,.13)}
.match-card{border:1px solid rgba(255,255,255,.12)!important;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04))!important;box-shadow:0 30px 80px rgba(0,0,0,.28)!important;backdrop-filter:blur(18px);transform:rotate(1deg)}
.trust-strip{background:#fff!important;border-bottom:1px solid #e7eee9}
.card,.step,.faq-item,.guide-list li,.note{border:1px solid rgba(10,40,25,.08)!important;box-shadow:0 14px 45px rgba(10,35,23,.07)!important;border-radius:20px!important;background:rgba(255,255,255,.9)!important}
.card,.step{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover,.step:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(10,35,23,.12)!important;border-color:rgba(22,163,107,.18)!important}
.cta-band{background:linear-gradient(135deg,#092017,#0e3827)!important;border-top:1px solid rgba(255,255,255,.06)}
.site-footer{background:#07110d!important}

/* App shell */
body:has(#splashScreen),body:has(#dashboardScreen){background:#f5f7f6}
.screen{animation:hbFade .25s ease both}
@keyframes hbFade{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
.home-hero{background:radial-gradient(circle at 10% 10%,rgba(37,211,145,.15),transparent 30%),linear-gradient(145deg,#07120e,#0c2118)!important;border-radius:0 0 30px 30px!important;padding:28px 18px 32px!important;box-shadow:0 18px 55px rgba(0,0,0,.16)!important}
.home-greeting{color:rgba(255,255,255,.55)!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}
.home-name{color:#fff!important;letter-spacing:-.035em}
#dashAvatar{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.home-wallet-card{background:linear-gradient(135deg,#18a86f,#087b4d)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:22px!important;box-shadow:0 18px 45px rgba(5,90,55,.27)!important;margin-top:22px!important;transition:transform .2s ease}
.home-wallet-card:active{transform:scale(.985)}
.home-wallet-label{color:rgba(255,255,255,.7)!important}
.home-wallet-amt{color:#fff!important;letter-spacing:-.04em}
.home-card-float{background:rgba(255,255,255,.96)!important;border:1px solid rgba(8,40,24,.08)!important;border-radius:20px!important;box-shadow:0 15px 40px rgba(0,0,0,.1)!important}
.home-stat-val{color:#102019!important}
.home-promo{border-radius:20px!important;background:linear-gradient(135deg,#12291e,#183c2b)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 16px 40px rgba(0,0,0,.12)!important}
.qa-grid{gap:11px!important}
.qa-card{border:1px solid rgba(9,35,22,.08)!important;background:rgba(255,255,255,.94)!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(8,30,19,.07)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.qa-card:active{transform:scale(.97)!important}
.qa-card:hover{border-color:rgba(22,163,107,.18)!important;box-shadow:0 16px 35px rgba(8,30,19,.1)!important}
.qa-card-icon{border-radius:14px!important}
.sec-title{font-weight:800!important;letter-spacing:-.02em}
.bottom-nav{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(10,35,23,.09)!important;box-shadow:0 -12px 35px rgba(8,30,19,.08)!important}
.nav-fab{background:linear-gradient(135deg,#18a86f,#0a7f4f)!important;box-shadow:0 14px 28px rgba(10,130,80,.3)!important;border:4px solid #f5f7f6!important}
.nav-item{transition:transform .2s ease,color .2s ease}
.nav-item:active{transform:scale(.9)}
.modal{backdrop-filter:blur(8px)}
.modal-content,.modal-box{border-radius:24px!important;border:1px solid rgba(8,35,22,.08)!important;box-shadow:0 35px 90px rgba(0,0,0,.2)!important}
.form-input,select,textarea{border-radius:14px!important;border:1px solid #dfe8e3!important;transition:border-color .18s ease,box-shadow .18s ease}
.form-input:focus,select:focus,textarea:focus{border-color:#19a86e!important;box-shadow:0 0 0 4px rgba(25,168,110,.11)!important;outline:none!important}
.btn-red,.btn-primary{border-radius:14px!important}
.toast{border-radius:14px!important;box-shadow:0 18px 45px rgba(0,0,0,.18)!important}

/* Mobile */
@media(max-width:700px){
 .site-header .nav{min-height:64px}.hero{min-height:650px}.hero-copy h1{font-size:clamp(40px,12vw,60px)}
 .hero-showcase{margin-top:28px}.trust-strip{gap:18px!important}.content{padding-left:18px!important;padding-right:18px!important}
 .home-hero{padding-top:22px!important}.home-wallet-card{margin-left:0!important;margin-right:0!important}
 .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.qa-card{min-height:78px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* ===== css/dashboard-mobile-v23-fix.css ===== */
/* HB Battle Dashboard V23 — mobile polish / overlap fix */
@media (max-width:700px){
  #dashboardScreen{padding-bottom:112px!important;overflow-x:hidden!important}
  #dashboardScreen .home-hero{margin:0 0 10px!important;padding:22px 20px 18px!important;border-radius:0 0 28px 28px!important;box-shadow:0 8px 30px rgba(17,24,39,.06)!important}
  #dashboardScreen .home-greeting{text-transform:uppercase!important;letter-spacing:1.4px!important;font-size:13px!important;font-weight:800!important;color:#8a9695!important}
  #dashboardScreen .home-name{font-size:31px!important;line-height:1.02!important;font-weight:900!important;letter-spacing:-1px!important;max-width:250px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #dashboardScreen .home-wallet-card{min-height:166px!important;margin:14px 0 12px!important;padding:24px 20px!important;border-radius:28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;box-shadow:0 18px 35px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.10)!important}
  #dashboardScreen .home-wallet-label{font-size:13px!important;letter-spacing:1.5px!important;font-weight:800!important}
  #dashboardScreen .home-wallet-amt{font-size:40px!important;line-height:1!important;font-weight:900!important;letter-spacing:-1.5px!important}
  #dashboardScreen .wallet-icon-badge{width:94px!important;height:94px!important}
  #dashboardScreen .home-wallet-add{font-size:14px!important;padding:9px 18px!important;border-radius:13px!important;font-weight:800!important}
  #dashboardScreen .home-card-float{margin:0 0 14px!important;padding:10px 8px!important;border-radius:25px!important;min-height:76px!important;box-shadow:0 10px 24px rgba(0,0,0,.07)!important}
  #dashboardScreen .home-stat{min-width:0!important;flex:1!important}
  #dashboardScreen .home-stat-val{font-size:25px!important;line-height:1!important;font-weight:900!important}
  #dashboardScreen .home-stat-label{text-transform:uppercase!important;letter-spacing:1px!important;font-size:10px!important;font-weight:800!important}
  #dashboardScreen .home-promo{margin:0 0 16px!important;padding:22px 20px!important;border-radius:26px!important;min-height:132px!important;box-shadow:0 12px 28px rgba(0,0,0,.07)!important}
  #dashboardScreen .home-promo-title{font-size:27px!important;line-height:1.05!important;font-weight:900!important;letter-spacing:-.8px!important}
  #dashboardScreen .home-promo-sub{font-size:13px!important;line-height:1.45!important;max-width:210px!important;margin-top:8px!important}
  #dashboardScreen .home-promo-btn{padding:11px 15px!important;border-radius:13px!important;font-weight:800!important;white-space:nowrap!important}
  #dashboardScreen .banner-slider{margin:0 0 18px!important;border-radius:24px!important;overflow:hidden!important;position:relative!important}
  #dashboardScreen .banner-track img,#dashboardScreen .banner-track picture{display:block!important;width:100%!important;height:auto!important;max-height:205px!important;object-fit:cover!important}
  #dashboardScreen .banner-dots{bottom:8px!important}
  #sharedBottomNav{z-index:9999!important;bottom:max(8px,env(safe-area-inset-bottom))!important;left:14px!important;right:14px!important;width:auto!important;border-radius:28px!important;box-shadow:0 16px 40px rgba(0,0,0,.18)!important}
  #sharedBottomNav .nav-item{min-width:0!important}
}
@media (min-width:701px){#dashboardScreen{padding-bottom:110px!important}}


/* ===== css/hb-v25-final.css ===== */
/* HB Battle V25 — final visual + mobile safety layer */
:root{--hb-safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
/* Never let the floating CTA sit on top of footer content. */
.mega-cta-bar{bottom:calc(12px + var(--hb-safe-bottom))!important}
.mega-cta-bar.hb-hide-final{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate(-50%,140%)!important}
@media(max-width:899px){
  .mega-cta-bar{max-width:calc(100% - 20px)!important}
  .mega-cta-bar span{max-width:42vw;overflow:hidden;text-overflow:ellipsis}
  .mega-cta-bar a{min-height:38px}
  footer{padding-bottom:calc(30px + var(--hb-safe-bottom))!important}
}
/* Marketing pages: polished dark cards instead of accidental white blocks. */
.marketing-home .step,.marketing-home .content,.marketing-home .note,.marketing-home .faq-item,.marketing-home .guide-list a{
  background:linear-gradient(145deg,rgba(13,31,22,.97),rgba(7,17,12,.97))!important;
  color:#edf6f1!important;
  border-color:rgba(45,219,146,.14)!important;
}
.marketing-home .step p,.marketing-home .content p,.marketing-home .content li,.marketing-home .faq-item p{color:#b7c8c0!important}
.marketing-home .step strong,.marketing-home .content strong,.marketing-home .faq-item strong{color:#fff!important}
/* Keep hero visuals below text and prevent accidental rectangular overflow. */
.marketing-home .hero,.marketing-home .hero-visual-v20{overflow:hidden!important}
@media(max-width:520px){
  .marketing-home .hero{padding-bottom:76px!important}
  .marketing-home .hero-visual-v20.v21-visual{min-height:390px!important}
}


/* ===== css/cookie-consent.css ===== */
/* HB Battle Cookie Consent — mobile/desktop stability fix 2026-09-30 */
.hb-cookie-overlay{
  position:fixed!important; inset:0!important; z-index:2147483000!important;
  background:rgba(0,0,0,.62)!important; backdrop-filter:blur(5px);
  display:flex!important; align-items:center!important; justify-content:center!important;
  box-sizing:border-box!important; padding:12px!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  overflow:hidden!important;
}
.hb-cookie-overlay *, .hb-cookie-overlay *::before, .hb-cookie-overlay *::after{box-sizing:border-box!important;}
.hb-cookie-card{
  position:relative!important; width:min(680px,100%)!important; max-width:680px!important;
  max-height:calc(100dvh - 24px)!important; overflow-y:auto!important; overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  margin:0!important; padding:22px!important;
  background:#fff!important; color:#172018!important;
  border:1px solid rgba(16,24,18,.12)!important; border-radius:20px!important;
  box-shadow:0 24px 80px rgba(0,0,0,.32)!important;
  text-align:left!important;
}
.hb-cookie-card h2{
  display:block!important; margin:5px 46px 10px 0!important; padding:0!important;
  font:700 26px/1.18 Sora,Inter,system-ui,sans-serif!important;
  letter-spacing:0!important; color:#172018!important;
}
.hb-cookie-card p{
  display:block!important; margin:0 0 14px!important; padding:0!important;
  font:400 15px/1.55 Inter,system-ui,sans-serif!important;
  letter-spacing:0!important; color:#344039!important;
}
.hb-cookie-card a{color:#146b3a!important;text-decoration:underline!important;}
.hb-cookie-kicker{
  display:block!important; margin:0 0 8px!important; padding:0!important;
  font:800 12px/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:.12em!important; text-transform:uppercase!important; color:#d89100!important;
}
.hb-cookie-x{
  position:absolute!important; right:10px!important; top:8px!important;
  width:42px!important; height:42px!important; padding:0!important; margin:0!important;
  border:0!important; background:transparent!important; color:#172018!important;
  font:600 34px/42px Arial,sans-serif!important; cursor:pointer!important;
}
.hb-cookie-options{display:grid!important;gap:9px!important;margin:14px 0 16px!important;padding:0!important;}
.hb-cookie-options label{
  display:flex!important; gap:11px!important; align-items:flex-start!important;
  width:100%!important; margin:0!important; padding:12px!important;
  border:1px solid #dfe5df!important; border-radius:13px!important;
  background:#fff!important; cursor:pointer!important;
}
.hb-cookie-options input{
  flex:0 0 auto!important; width:18px!important; height:18px!important;
  min-width:18px!important; margin:3px 0 0!important; padding:0!important;
  accent-color:#167442!important;
}
.hb-cookie-options span{display:block!important;min-width:0!important;}
.hb-cookie-options b{
  display:block!important; margin:0!important; padding:0!important;
  font:700 17px/1.3 Inter,system-ui,sans-serif!important; color:#172018!important;
}
.hb-cookie-options small{
  display:block!important; margin:3px 0 0!important; padding:0!important;
  font:400 13px/1.5 Inter,system-ui,sans-serif!important; color:#667068!important;
}
.hb-cookie-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0!important;padding:0!important;}
.hb-cookie-btn{
  min-height:42px!important; margin:0!important; padding:10px 14px!important;
  border-radius:10px!important; font:700 14px/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:0!important; cursor:pointer!important;
}
.hb-cookie-btn.primary{background:#146b3a!important;color:#fff!important;border:1px solid #146b3a!important;}
.hb-cookie-btn.secondary{background:#fff!important;color:#17301f!important;border:1px solid #cbd5cc!important;}
.hb-cookie-note{font-size:11px!important;line-height:1.45!important;color:#657067!important;margin:13px 0 0!important;}
.hb-cookie-note button,.hb-privacy-choice-link button{
  border:0!important;background:none!important;text-decoration:underline!important;cursor:pointer!important;
  padding:0!important;margin:0!important;color:inherit!important;font:inherit!important;
}
.hb-privacy-choice-link{margin-top:10px!important;font-size:12px!important;opacity:.8!important;}
.hb-privacy-choice-link button:hover{opacity:1!important;}
@media (max-width:560px){
  .hb-cookie-overlay{padding:8px!important;align-items:center!important;}
  .hb-cookie-card{
    width:100%!important; max-width:none!important; max-height:calc(100dvh - 16px)!important;
    padding:18px!important; border-radius:16px!important;
  }
  .hb-cookie-card h2{font-size:23px!important;line-height:1.18!important;margin-right:42px!important;}
  .hb-cookie-card p{font-size:14px!important;line-height:1.5!important;}
  .hb-cookie-kicker{font-size:11px!important;}
  .hb-cookie-options b{font-size:16px!important;}
  .hb-cookie-options small{font-size:12px!important;line-height:1.45!important;}
  .hb-cookie-actions>*{flex:1 1 100%!important;width:100%!important;}
}
@supports not (height:100dvh){
  .hb-cookie-card{max-height:calc(100vh - 24px)!important;}
  @media (max-width:560px){.hb-cookie-card{max-height:calc(100vh - 16px)!important;}}
}


/* ===== css/seo-engine-v1.css ===== */

.hb-seo-related{margin:32px 0 10px;padding:1px;border:1px solid rgba(130,180,155,.25);border-radius:18px;background:rgba(255,255,255,.035)}
.hb-seo-related__inner{padding:18px 20px}.hb-seo-related strong{display:block;margin-bottom:10px}.hb-seo-related nav{display:flex;flex-wrap:wrap;gap:9px}.hb-seo-related a{display:inline-flex;padding:9px 12px;border-radius:999px;text-decoration:none;border:1px solid rgba(130,180,155,.25)}
@media(max-width:640px){.hb-seo-related__inner{padding:15px}.hb-seo-related nav{gap:7px}.hb-seo-related a{font-size:.9rem}}


/* ===== css/hb-final-readability-v2.css ===== */
/* HB Battle final readability + mobile marketing layout layer (2026-10-02) */
:root{--hb-final-ink:#172820;--hb-final-muted:#405249;--hb-final-paper:#f5f8f6;--hb-final-green:#087f55;--hb-final-gold:#d6a93f}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{overflow-x:hidden;overflow-wrap:break-word}
/* Ensure every element inside light cards inherits dark readable text, even when old CSS uses !important. */
.card,.card *, .faq-item,.faq-item *, .step,.step *, .note,.note *, .guide-card,.guide-card *, .article-card,.article-card *, .popular-guide-card,.popular-guide-card *, .content-card,.content-card *, .guide-list li,.guide-list li *{
  color:var(--hb-final-ink)!important;opacity:1!important;text-shadow:none!important
}
.card,.faq-item,.step,.note,.guide-card,.article-card,.popular-guide-card,.content-card,.guide-list li{
  background:var(--hb-final-paper)!important;border:1px solid rgba(23,40,32,.14)!important;border-radius:22px!important;box-shadow:0 8px 24px rgba(0,0,0,.09)!important
}
.card{padding:clamp(20px,4vw,32px)}
.card h2,.card h3,.faq-item summary,.step h2,.step h3{font-weight:750;line-height:1.35;letter-spacing:-.02em}
.card p,.faq-item p,.faq-a,.step p,.note p,.content p{font-size:clamp(16px,2.2vw,19px);line-height:1.75;color:var(--hb-final-muted)!important}
.card a,.faq-item a,.step a,.note a,.content a{color:var(--hb-final-green)!important;font-weight:700;text-underline-offset:3px}
.faq-item{margin:14px 0;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:20px 22px;cursor:pointer;list-style-position:inside;font-size:clamp(16px,2.1vw,19px)}
.faq-item summary::marker{color:var(--hb-final-gold)}
.faq-item[open] summary{border-bottom:1px solid rgba(23,40,32,.12)}
.faq-a{padding:18px 22px 22px}
.faq-a p{margin:0}
/* Marketing section rhythm: less dead space and a consistent reading width. */
.sec{padding-block:clamp(44px,7vw,84px)}
.sec-head{gap:18px;align-items:flex-end}
.sec h2{line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.sec p{max-width:68ch}
.grid{align-items:stretch}
.grid>.card{height:100%;box-sizing:border-box}
.site-footer .col a{display:block;width:fit-content;max-width:100%;line-height:1.6;overflow-wrap:anywhere;margin:0 0 10px}
.site-footer .footer-bottom{line-height:1.75}
.site-footer .legal-note{max-width:78ch}
/* Sticky app CTA must not cover FAQs, legal links, or the last paragraph. */
body{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
.mega-cta-bar{left:12px!important;right:12px!important;width:auto!important;max-width:620px!important;margin-inline:auto!important;box-sizing:border-box;z-index:40!important}
.mega-cta-bar a,.mega-cta-bar button{min-height:46px;line-height:1.25}
@media(max-width:600px){
 .wrap{width:auto;max-width:100%;margin-inline:auto;padding-inline:20px}
 .sec{padding-block:42px}
 .sec-head{align-items:flex-start;flex-direction:column}
 .grid{grid-template-columns:minmax(0,1fr)!important;gap:16px}
 .card{padding:22px!important;border-radius:22px!important}
 .faq-item summary{padding:18px 18px;min-height:64px}
 .faq-a{padding:16px 18px 20px}
 .site-footer .footer-grid{gap:28px}
 .site-footer .col a{font-size:16px;line-height:1.65}
 .mega-cta-bar{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;padding:8px!important;gap:8px!important}
 .mega-cta-bar a,.mega-cta-bar button{font-size:14px!important;padding:12px 14px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ===== css/hb-responsive-desktop-fix.css ===== */
/* HB Battle — Responsive Desktop/Tablet Final Fix — 2026-10-03 */
html,body{min-width:0!important;width:100%!important;}
body{overflow-x:hidden!important;}

/* Phones stay phone-sized; desktop becomes a real web app instead of a 430px card. */
@media (min-width:768px){
  body{align-items:stretch!important;background:#06110c!important;}
  body:has(#splashScreen),body:has(#dashboardScreen){background:#06110c!important;}

  .app{
    width:100%!important;
    max-width:1440px!important;
    min-height:100vh!important;
    margin:0 auto!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    box-shadow:0 0 80px rgba(0,0,0,.32)!important;
  }

  .screen{
    width:100%!important;
    min-height:100vh!important;
    box-sizing:border-box!important;
  }

  /* Give the main app screens comfortable reading width without creating the
     narrow centered-phone problem seen on desktop. */
  .screen > .content,
  .screen .content,
  .screen > main{
    width:calc(100% - 48px)!important;
    max-width:1240px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* Dashboard: use the available desktop width and a proper action grid. */
  #dashboardScreen .home-body{
    width:calc(100% - 48px)!important;
    max-width:1240px!important;
    margin:0 auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #dashboardScreen .home-hero{
    padding-left:clamp(24px,4vw,56px)!important;
    padding-right:clamp(24px,4vw,56px)!important;
  }
  #dashboardScreen .home-wallet-card,
  #dashboardScreen .home-card-float,
  #dashboardScreen .home-promo{
    margin-left:auto!important;
    margin-right:auto!important;
    width:calc(100% - 48px)!important;
    max-width:1240px!important;
    box-sizing:border-box!important;
  }

  #dashboardScreen .qa-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    border-radius:0!important;
  }
  #dashboardScreen .qa-card{
    min-height:92px!important;
    border:1px solid var(--border)!important;
    border-radius:18px!important;
    background:var(--surface)!important;
    box-shadow:var(--shadow)!important;
    border-left:1px solid var(--border)!important;
    padding:16px!important;
  }

  /* Bottom navigation spans the desktop app instead of remaining a 430px bar. */
  .bottom-nav{
    left:50%!important;
    right:auto!important;
    width:calc(100% - 48px)!important;
    max-width:1240px!important;
    transform:translateX(-50%)!important;
    border-radius:20px!important;
    bottom:14px!important;
    padding-bottom:12px!important;
  }

  /* AI screen also follows the desktop viewport instead of being locked to 430px. */
  #aiAssistantScreen{
    width:100%!important;
    max-width:none!important;
    left:0!important;
    right:0!important;
    margin:0!important;
  }
  #aiAssistantScreen .hbai{
    width:100%!important;
    max-width:none!important;
  }

  /* Desktop modals should be centered, not appear as an oversized phone bottom-sheet. */
  .overlay{align-items:center!important;}
  .modal{max-width:760px!important;border-radius:24px!important;margin:24px!important;}
}

@media (min-width:1200px){
  .app{max-width:1600px!important;}
  .screen > .content,.screen .content,.screen > main,
  #dashboardScreen .home-body{max-width:1320px!important;}
  #dashboardScreen .home-wallet-card,
  #dashboardScreen .home-card-float,
  #dashboardScreen .home-promo{max-width:1320px!important;}
  .bottom-nav{max-width:1320px!important;}
}

@media (min-width:768px) and (max-width:1023px){
  #dashboardScreen .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Preserve the compact phone layout. */
@media (max-width:767px){
  .app{width:100%!important;max-width:430px!important;margin:0 auto!important;}
  #aiAssistantScreen{max-width:430px!important;margin:0 auto!important;}
  .bottom-nav{max-width:406px!important;}
}


/* ===== css/app-ui-polish.css ===== */
/* ============================================================
   HB Battle App — UI Polish Layer (organic + cleaner interface)
   Loads last. Safe visual upgrades only.
   ============================================================ */

:root {
  --app-radius: 16px;
  --app-radius-sm: 12px;
  --app-shadow: 0 8px 28px rgba(0,0,0,.28);
  --app-green: #32c48d;
  --app-gold: #e3b34c;
  --app-line: rgba(255,255,255,.08);
}

/* Smoother base */
.app, body.app-body, #appRoot {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cards & panels cleaner */
.tour-card, .info-card, .stat-card, .wallet-card, .panel,
.leader-item, .match-card, .tour-row, .list-card {
  border-radius: var(--app-radius) !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: var(--app-shadow) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.tour-card:hover, .info-card:hover, .wallet-card:hover, .panel:hover {
  border-color: rgba(50,196,141,.28) !important;
}

/* Buttons more premium */
.btn-primary, .btn-main, .primary-btn, button.primary,
.join-btn, .cta-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 6px 20px rgba(50,196,141,.22) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}

.btn-primary:active, .btn-main:active, .primary-btn:active,
.join-btn:active, .cta-btn:active {
  transform: scale(.97) !important;
}

/* Header cleaner */
.header, .app-header, .top-bar {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--app-line) !important;
}

/* Bottom navigation */
.bottom-nav {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-top: 1px solid var(--app-line) !important;
  box-shadow: 0 -8px 28px rgba(0,0,0,.25) !important;
}

.bottom-nav .nav-item {
  border-radius: 12px !important;
  transition: color .2s ease, background .2s ease, transform .15s ease !important;
}

.bottom-nav .nav-item:active {
  transform: scale(.92) !important;
}

/* Inputs cleaner */
input, select, textarea, .input, .form-control {
  border-radius: var(--app-radius-sm) !important;
  border: 1px solid var(--app-line) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

input:focus, select:focus, textarea:focus, .input:focus, .form-control:focus {
  border-color: rgba(50,196,141,.55) !important;
  box-shadow: 0 0 0 3px rgba(50,196,141,.15) !important;
  outline: none !important;
}

/* Tabs / chips */
.tab, .chip, .filter-chip, .tag {
  border-radius: 999px !important;
  transition: background .2s ease, color .2s ease, transform .15s ease !important;
}

/* Modal / sheet polish */
.modal, .sheet, .bottom-sheet, .dialog {
  border-radius: 20px 20px 0 0 !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,.4) !important;
}

/* Lists spacing */
.list-item, .row-item, .menu-item {
  border-radius: var(--app-radius-sm) !important;
  transition: background .15s ease !important;
}

/* Safe area for modern phones */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.app, #appRoot {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Scrollbar already styled in highclass — keep consistent */
/* Slightly better focus visibility */
:focus-visible {
  outline: 2px solid rgba(50,196,141,.55) !important;
  outline-offset: 2px !important;
}

/* Empty states */
.empty-state, .no-data, .empty {
  opacity: .9;
  text-align: center;
  padding: 32px 16px !important;
}

/* Mobile density */
@media (max-width: 480px) {
  .tour-card, .info-card, .stat-card, .wallet-card, .panel {
    border-radius: 14px !important;
  }
  .btn-primary, .btn-main, .primary-btn, .join-btn, .cta-btn {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* Extra high-end app touches */
.header, .app-header {
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}
.bottom-nav .nav-item.active {
  color: #e3b34c !important;
}
.tour-card, .wallet-card, .stat-card {
  background: linear-gradient(165deg, rgba(26,29,38,.95), rgba(18,20,26,.98)) !important;
}


/* ===== css/hb-final-qa-v21.css ===== */
/* HB Battle — FINAL QA / readability patch v21
   Fixes low-contrast guide cards, broken related-resource wrapping,
   mobile overflow, and stale/overriding legacy card styles. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;overflow-wrap:anywhere}

/* GUIDE / RELATED CARDS — dark theme */
body.marketing-page .related .guide-list,
body.marketing-page .guide-list{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
body.marketing-page .related .guide-list li,
body.marketing-page .guide-list li{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body.marketing-page .related .guide-list li a,
body.marketing-page .guide-list li a{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  width:100%!important;
  min-height:74px!important;
  box-sizing:border-box!important;
  padding:18px 20px!important;
  border:1px solid rgba(53,217,149,.22)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#122b21,#0b1e16)!important;
  color:#f1f7f4!important;
  opacity:1!important;
  text-shadow:none!important;
  font-size:clamp(15px,2.2vw,18px)!important;
  font-weight:700!important;
  line-height:1.5!important;
  text-decoration:none!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  box-shadow:0 10px 28px rgba(0,0,0,.20)!important;
}
body.marketing-page .related .guide-list li a::after,
body.marketing-page .guide-list li a::after{
  content:'→'!important;
  display:block!important;
  flex:0 0 auto!important;
  color:#42dfa2!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
  margin-left:auto!important;
}
body.marketing-page .related .guide-list li a:hover,
body.marketing-page .related .guide-list li a:focus-visible,
body.marketing-page .guide-list li a:hover,
body.marketing-page .guide-list li a:focus-visible{
  color:#ffffff!important;
  background:linear-gradient(145deg,#173b2c,#0d271c)!important;
  border-color:rgba(66,223,162,.55)!important;
  transform:translateY(-2px)!important;
  outline:3px solid rgba(232,189,97,.28)!important;
  outline-offset:2px!important;
}

/* SEO-generated related links — never allow them to run together */
body.marketing-page .hb-seo-related{
  width:100%!important;
  max-width:860px!important;
  box-sizing:border-box!important;
  margin:34px auto 12px!important;
  padding:0!important;
  border:1px solid rgba(53,217,149,.18)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(14,32,24,.96),rgba(8,21,15,.98))!important;
  color:#eef7f2!important;
  box-shadow:0 14px 38px rgba(0,0,0,.20)!important;
}
body.marketing-page .hb-seo-related__inner{padding:20px!important}
body.marketing-page .hb-seo-related strong{
  display:block!important;
  margin:0 0 14px!important;
  color:#f3f8f5!important;
  font-size:18px!important;
  line-height:1.35!important;
}
body.marketing-page .hb-seo-related nav{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
}
body.marketing-page .hb-seo-related nav a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding:9px 13px!important;
  border:1px solid rgba(53,217,149,.25)!important;
  border-radius:999px!important;
  background:rgba(53,217,149,.06)!important;
  color:#42dfa2!important;
  opacity:1!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.35!important;
  text-decoration:none!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
body.marketing-page .hb-seo-related nav a:hover,
body.marketing-page .hb-seo-related nav a:focus-visible{
  color:#07130e!important;
  background:#42dfa2!important;
  border-color:#42dfa2!important;
}

/* Mobile safety */
@media(max-width:600px){
  body.marketing-page .related .guide-list{gap:12px!important}
  body.marketing-page .related .guide-list li a,
  body.marketing-page .guide-list li a{
    min-height:68px!important;
    padding:16px 17px!important;
    border-radius:16px!important;
    font-size:16px!important;
    line-height:1.48!important;
  }
  body.marketing-page .related .guide-list li a::after,
  body.marketing-page .guide-list li a::after{font-size:20px!important}
  body.marketing-page .hb-seo-related{margin-top:28px!important;border-radius:17px!important}
  body.marketing-page .hb-seo-related__inner{padding:16px!important}
  body.marketing-page .hb-seo-related nav{gap:8px!important}
  body.marketing-page .hb-seo-related nav a{font-size:13.5px!important;padding:8px 11px!important}
}

/* Light theme remains readable if the user switches theme. */
html[data-theme="light"] body.marketing-page .related .guide-list li a,
html[data-theme="light"] body.marketing-page .guide-list li a{
  background:#f4f8f6!important;
  border-color:rgba(20,60,43,.16)!important;
  color:#14251d!important;
  box-shadow:0 8px 24px rgba(10,40,25,.10)!important;
}
html[data-theme="light"] body.marketing-page .related .guide-list li a::after{color:#087f55!important}
html[data-theme="light"] body.marketing-page .hb-seo-related{
  background:#f5f8f6!important;
  border-color:rgba(20,60,43,.14)!important;
  color:#14251d!important;
}
html[data-theme="light"] body.marketing-page .hb-seo-related strong{color:#14251d!important}
html[data-theme="light"] body.marketing-page .hb-seo-related nav a{background:#eaf5ef!important;color:#087f55!important;border-color:rgba(8,127,85,.18)!important}

@media(prefers-reduced-motion:reduce){
  body.marketing-page .related .guide-list li a{transition:none!important}
}


/* ===== css/hb-app-elite-v23.css ===== */
/* HB Battle ELITE v23 — App / wallet / auth visual + readability QA layer */
:root{--v23-green:#25e58a;--v23-green2:#0eaf62;--v23-gold:#f0c76a;--v23-bg:#07120e;--v23-panel:#0d2117;--v23-panel2:#112a1d;--v23-line:rgba(151,255,202,.15);--v23-text:#f5fbf7;--v23-muted:#a6b9ae}
html,body{background:var(--v23-bg)!important;color:var(--v23-text)!important}
body{overflow-x:hidden!important}
body,#app{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.screen{background:linear-gradient(180deg,#07140f,#081b13)!important;color:var(--v23-text)!important}
.screen h1,.screen h2,.screen h3,.screen h4,.screen h5,.screen h6,.screen p,.screen span,.screen label,.screen div{max-width:100%}
/* universal readable text: prevents low-contrast inherited text */
.screen .text-muted,.screen .subtitle,.screen .sub,.screen .empty,.screen .helper,.screen .form-hint{color:var(--v23-muted)!important}
.screen a{color:var(--v23-green)!important}
.header{background:rgba(5,18,12,.9)!important;border-bottom:1px solid var(--v23-line)!important;backdrop-filter:blur(18px)}
.header::after{background:linear-gradient(90deg,transparent,var(--v23-green),var(--v23-gold),transparent)!important}
.auth-screen{background:radial-gradient(600px 380px at 50% 0,rgba(37,229,138,.10),transparent 70%),linear-gradient(180deg,#06120d,#091c14)!important}
.auth-screen .form-input,.auth-screen input,.auth-screen select,.auth-screen textarea{background:#0e2118!important;color:#f5fbf7!important;border:1px solid var(--v23-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.auth-screen input::placeholder,.auth-screen textarea::placeholder{color:#83988e!important;opacity:1!important}
.auth-screen .btn-red,.auth-screen #loginBtn,.auth-screen #signupBtn{background:linear-gradient(135deg,var(--v23-green),var(--v23-green2))!important;color:#032014!important;border:0!important;box-shadow:0 14px 35px rgba(37,229,138,.18)!important}
.auth-screen .auth-link span{color:var(--v23-green)!important}
.auth-screen .input-icon{color:#a7bdb1!important}
#dashboardScreen,.screen[id$="Screen"]{color:var(--v23-text)!important}
.home-wallet-card,.wallet-card,.wallet-stat-card,.qa-card,.tour-card,.info-card,.transaction-card,.profile-card,.stats-card,.leaderboard-card,.panel,.menu-card{
 background:linear-gradient(145deg,rgba(16,43,29,.96),rgba(8,25,17,.96))!important;color:var(--v23-text)!important;border:1px solid var(--v23-line)!important;border-radius:22px!important;box-shadow:0 18px 50px rgba(0,0,0,.24)!important
}
.home-wallet-card{background:radial-gradient(500px 180px at 100% 0,rgba(37,229,138,.18),transparent 65%),linear-gradient(135deg,#0d3521,#092216)!important;border-color:rgba(37,229,138,.26)!important}
.home-wallet-label,.wallet-label,.sec-title,.qa-card-title,.tour-card h3,.info-title,.profile-name{color:#f5fbf7!important}
.home-wallet-amt,.wallet-amount,.balance,.stat-value{color:#fff!important;text-shadow:0 8px 30px rgba(37,229,138,.10)!important}
.home-wallet-add,.wallet-btn{background:rgba(255,255,255,.07)!important;color:#f5fbf7!important;border:1px solid rgba(255,255,255,.12)!important}
.wallet-btn:hover,.home-wallet-add:hover{border-color:rgba(37,229,138,.35)!important;background:rgba(37,229,138,.10)!important}
.qa-card-sub,.wallet-sub,.info-label,.info-val,.empty p{color:var(--v23-muted)!important}
.qa-card-icon{box-shadow:0 10px 28px var(--qa-glow,rgba(37,229,138,.16))!important}
.wallet-hero{background:radial-gradient(500px 300px at 90% 10%,rgba(37,229,138,.20),transparent 65%),linear-gradient(135deg,#06351f,#0a1c13)!important;border-bottom:1px solid rgba(37,229,138,.22)!important}
.wallet-hero .wallet-label,.wallet-hero .wallet-sub{color:rgba(245,251,247,.72)!important}
.wallet-hero .wallet-amount{color:#fff!important}
.wallet-body{background:transparent!important}
.wallet-stat-card div{color:#f5fbf7!important}
.wallet-stat-card div[style*="text3"]{color:var(--v23-muted)!important}
#walletTxns .empty{color:var(--v23-muted)!important}
.bottom-nav,.bottom-navigation,.navbar-bottom{background:rgba(5,18,12,.94)!important;border:1px solid var(--v23-line)!important;box-shadow:0 -18px 40px rgba(0,0,0,.28)!important;backdrop-filter:blur(20px)}
.bottom-nav .nav-item{color:#8fa79b!important}
.bottom-nav .nav-item.active,.bottom-nav .nav-item.active i{color:var(--v23-green)!important}
.nav-fab{background:linear-gradient(135deg,var(--v23-green),var(--v23-green2))!important;color:#032014!important;box-shadow:0 12px 32px rgba(37,229,138,.25)!important}
.modal,.modal-content,.dialog,.popup{color:var(--v23-text)!important}
.modal-content{background:linear-gradient(145deg,#10291c,#081b12)!important;border:1px solid var(--v23-line)!important;box-shadow:0 30px 90px rgba(0,0,0,.5)!important}
.modal-content input,.modal-content select,.modal-content textarea{background:#0b1d14!important;color:#fff!important;border-color:var(--v23-line)!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--v23-green)!important;outline-offset:3px!important}
@media(max-width:700px){
 .screen{min-height:100dvh!important}
 .home-wallet-card,.wallet-card,.qa-card,.tour-card,.info-card,.profile-card,.stats-card{border-radius:18px!important}
 .wallet-hero{padding:22px 16px 24px!important}
 .wallet-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .wallet-btn{min-height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* ===== css/hb-app-step4.css ===== */
/* HB Battle Step 4 — App Elite UI */
:root{--app-bg:#07110d;--app-surface:#0d1b15;--app-surface2:#10251b;--app-border:rgba(132,255,190,.14);--app-green:#20e884;--app-green2:#0fbf69;--app-gold:#f5c451;--app-text:#f5fff9;--app-muted:#a7bdb2;--app-shadow:0 18px 50px rgba(0,0,0,.28)}
#dashboardScreen,#walletScreen,#historyScreen,#profileScreen,#settingsScreen,#tournamentScreen,#myMatchesScreen,#leaderboardScreen,#notificationsScreen,#articlesScreen,#challengesScreen,#sessionsScreen,#marketplaceScreen,#resultsScreen,#vipScreen,#rewardCenterUserScreen{background:radial-gradient(900px 420px at 50% -10%,rgba(32,232,132,.08),transparent 65%),var(--app-bg)!important;color:var(--app-text)!important}
#dashboardScreen .home-hero{background:linear-gradient(145deg,#0b1d15,#09150f 70%);border-bottom:1px solid var(--app-border);padding:20px 16px 18px!important}
#dashboardScreen .home-greeting{color:var(--app-muted)!important;font-weight:600}.home-name{color:var(--app-text)!important;font-weight:900!important;letter-spacing:-.4px}
.home-wallet-card{margin:14px 16px!important;border:1px solid rgba(32,232,132,.22)!important;background:linear-gradient(135deg,#123d29 0%,#0d2519 52%,#0a1811 100%)!important;box-shadow:var(--app-shadow),inset 0 1px rgba(255,255,255,.08)!important;border-radius:24px!important;min-height:145px!important}
.home-wallet-label,.home-stat-label{color:#b9d1c4!important}.home-wallet-amt,.home-stat-val{color:#fff!important;text-shadow:0 1px 12px rgba(32,232,132,.12)}
.home-wallet-add{background:var(--app-green)!important;color:#032012!important;border:0!important;border-radius:999px!important;font-weight:900!important;box-shadow:0 8px 22px rgba(32,232,132,.2)}
.home-card-float{margin:-1px 16px 14px!important;background:#0c1913!important;border:1px solid var(--app-border)!important;border-radius:20px!important;box-shadow:0 12px 35px rgba(0,0,0,.2)}
.home-promo{margin:14px 16px!important;border:1px solid rgba(245,196,81,.2)!important;background:linear-gradient(135deg,#17351f,#152719)!important;border-radius:22px!important;box-shadow:var(--app-shadow)!important}.home-promo-title{color:#fff!important;font-weight:900!important}.home-promo-sub{color:#b9cfc3!important}.home-promo-btn{background:var(--app-green)!important;color:#042314!important;font-weight:900!important;border-radius:999px!important}
.home-body{padding:4px 16px 110px!important}.sec-title{color:#f6fff9!important;font-weight:900!important;letter-spacing:.1px}.sec-title a{color:var(--app-green)!important}
.qa-grid{gap:11px!important}.qa-card{background:linear-gradient(145deg,#10221a,#0b1712)!important;border:1px solid var(--app-border)!important;border-radius:18px!important;box-shadow:0 8px 25px rgba(0,0,0,.18)!important;min-height:76px!important}.qa-card:active{transform:scale(.98)}.qa-card-title{color:#f4fff8!important;font-weight:850!important}.qa-card-sub{color:#9db6aa!important}.qa-card-icon{box-shadow:0 8px 20px var(--qa-glow)!important}
.wallet-hero{background:radial-gradient(500px 240px at 80% 10%,rgba(32,232,132,.2),transparent 65%),linear-gradient(145deg,#123b27,#07150e 76%)!important;border-bottom:1px solid rgba(32,232,132,.2)!important;min-height:315px!important}.wallet-label{color:#b8d3c4!important}.wallet-amount{color:#fff!important;font-size:clamp(32px,9vw,52px)!important;font-weight:950!important;letter-spacing:-1.8px;text-shadow:0 6px 25px rgba(0,0,0,.35)}.wallet-sub{color:#b5cfc1!important}.wallet-actions{gap:9px!important}.wallet-btn{background:rgba(255,255,255,.075)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:15px!important;min-height:48px!important;box-shadow:0 8px 20px rgba(0,0,0,.18)!important}.wallet-btn:first-child{background:var(--app-green)!important;color:#042414!important;border-color:transparent!important;font-weight:900!important}
.wallet-body{background:var(--app-bg)!important;padding:18px 16px 110px!important}.wallet-stat-card{background:#0d1c15!important;border:1px solid var(--app-border)!important;border-radius:17px!important;box-shadow:0 8px 24px rgba(0,0,0,.18)!important}.wallet-stat-card div{color:#fff!important}.wallet-stat-card div:last-child{color:#a5bdb0!important}.wallet-body .empty,.empty p{color:#a5bdb0!important}
#historyScreen input,#historyScreen select,#historyScreen button{color:#f4fff8!important;background:#0d1b15!important;border-color:var(--app-border)!important}.header{background:rgba(7,17,13,.92)!important;border-bottom:1px solid var(--app-border)!important;backdrop-filter:blur(18px)}.header-title{color:#fff!important;font-weight:900!important}.header-back{color:#fff!important}
.screen .card,.screen .profile-card,.screen .stats-card,.screen .tournament-card,.screen .notification-card,.screen .article-card{background:linear-gradient(145deg,#10221a,#0b1712)!important;border-color:var(--app-border)!important;color:#f4fff8!important;box-shadow:0 10px 28px rgba(0,0,0,.18)!important}.screen .card *,.screen .profile-card *,.screen .stats-card *,.screen .tournament-card *,.screen .notification-card *,.screen .article-card *{max-width:100%}
.screen label,.screen p,.screen small{color:#b2c8bc}.screen h1,.screen h2,.screen h3,.screen h4,.screen strong{color:#f7fff9}.screen input,.screen textarea,.screen select{color:#f4fff8!important;background:#0c1a14!important;border:1px solid var(--app-border)!important}.screen input::placeholder,.screen textarea::placeholder{color:#70887c!important}
.bottom-nav,.bottom-navigation,.navbar-bottom{background:rgba(7,17,13,.94)!important;border-top:1px solid var(--app-border)!important;box-shadow:0 -15px 40px rgba(0,0,0,.25)!important;backdrop-filter:blur(20px)}.bottom-nav *,.bottom-navigation *,.navbar-bottom *{color:#91aa9d}.bottom-nav .active,.bottom-navigation .active,.navbar-bottom .active,.bottom-nav .active *,.bottom-navigation .active *,.navbar-bottom .active *{color:var(--app-green)!important}
@media(max-width:600px){.home-wallet-card{margin-left:12px!important;margin-right:12px!important}.home-body{padding-left:12px!important;padding-right:12px!important}.qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.qa-card{min-width:0!important}.wallet-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}.wallet-btn{font-size:12px!important}.wallet-hero{padding:18px 14px 22px!important}.wallet-body{padding-left:12px!important;padding-right:12px!important}.wallet-stats-grid{gap:8px!important}}
@media(min-width:900px){#dashboardScreen .home-body,#walletScreen .wallet-body{max-width:1100px;margin:auto}.home-wallet-card{max-width:1100px;margin-left:auto!important;margin-right:auto!important}.home-card-float{max-width:1040px;margin-left:auto!important;margin-right:auto!important}.home-promo{max-width:1100px;margin-left:auto!important;margin-right:auto!important}}


/* ===== css/hb-step5-final-qa.css ===== */
/* HB Battle Step 5 — Final QA / visibility / responsive safety layer */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
button{cursor:pointer}
.screen,.screen.active,#dashboardScreen,#walletScreen,#historyScreen,#profileScreen,#settingsScreen{min-width:0}
.screen *,.screen *::before,.screen *::after{min-width:0}
/* Never let inherited white/transparent text disappear on premium app surfaces. */
#dashboardScreen,#walletScreen,#historyScreen,#profileScreen,#settingsScreen,#tournamentScreen,#myMatchesScreen,#leaderboardScreen,#notificationsScreen,#articlesScreen,#challengesScreen,#sessionsScreen,#marketplaceScreen,#resultsScreen,#vipScreen,#rewardCenterUserScreen{color:#f4fff8}
#dashboardScreen p,#dashboardScreen span,#dashboardScreen small,#walletScreen p,#walletScreen span,#walletScreen small,#historyScreen p,#historyScreen span,#profileScreen p,#profileScreen span,#settingsScreen p,#settingsScreen span{max-width:100%}
/* Wallet: force critical values/labels to remain visible in every theme. */
#walletScreen .wallet-label,#walletScreen .wallet-sub,#walletScreen .sec-title,#walletScreen .wallet-stat-card,#walletScreen .wallet-stat-card *{opacity:1!important}
#walletScreen .wallet-label{color:#b9d4c6!important}
#walletScreen .wallet-sub{color:#a9c5b6!important}
#walletScreen .wallet-amount{opacity:1!important;-webkit-text-fill-color:currentColor}
#walletScreen .wallet-btn{visibility:visible!important;opacity:1!important}
/* Keep intentional dividers/section lines visible; prevent accidental 0px/transparent rendering. */
.screen .divider,.screen .section-divider,.screen .list-divider{height:1px;min-height:1px;background:rgba(132,255,190,.16);display:block}
/* Tables and long guide content must not create a horizontal page jump. */
.screen table{width:100%;max-width:100%;border-collapse:collapse}
.screen .table-wrap,.screen .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.screen pre,.screen code{max-width:100%;overflow:auto}
/* Form controls stay readable even when older theme rules are loaded before Step 5. */
.screen input,.screen textarea,.screen select{min-height:44px;outline-offset:2px}
.screen input:focus,.screen textarea:focus,.screen select:focus{border-color:#20e884!important;box-shadow:0 0 0 3px rgba(32,232,132,.12)!important}
@media(max-width:600px){
  .screen{width:100%;max-width:100%;overflow-x:hidden}
  .screen .card,.screen .profile-card,.screen .stats-card,.screen .tournament-card,.screen .notification-card,.screen .article-card{max-width:100%;overflow:hidden}
  .screen h1,.screen h2,.screen h3,.screen h4,.screen p,.screen span,.screen a{overflow-wrap:anywhere}
  #walletScreen .wallet-amount{font-size:clamp(28px,9vw,42px)!important;letter-spacing:-1px!important}
}


/* ===== css/hb-final-v28.css ===== */
/* HB Battle v28 — Final Experience Layer
   Visual/accessibility polish only. Existing business logic is preserved. */
:root{
  --hb-v28-bg:#07110d;
  --hb-v28-surface:rgba(15,31,24,.82);
  --hb-v28-surface-2:rgba(20,42,32,.78);
  --hb-v28-border:rgba(145,255,192,.16);
  --hb-v28-border-strong:rgba(145,255,192,.30);
  --hb-v28-text:#f3fff8;
  --hb-v28-muted:#a9c2b4;
  --hb-v28-green:#34f58a;
  --hb-v28-green-2:#10c66a;
  --hb-v28-gold:#ffd76a;
  --hb-v28-radius:20px;
  --hb-v28-shadow:0 18px 55px rgba(0,0,0,.28);
}
html{scroll-behavior:smooth}
body{background:var(--hb-v28-bg);color:var(--hb-v28-text)}
button,a,input,select,textarea{font:inherit}
a{transition:color .2s ease,opacity .2s ease,transform .2s ease}
img,video,canvas,svg{max-width:100%}

/* Universal readability guard: never let a dark surface inherit near-black text. */
:is(.card,.panel,.modal,.sheet,.drawer,.wallet-card,.stat-card,.qa-card,.feature-card,.guide-card,.resource-card,.tournament-card,.match-card,.settings-card,.profile-card,.auth-card,.app-card){
  color:var(--hb-v28-text);
}
:is(.card,.panel,.modal,.sheet,.drawer,.wallet-card,.stat-card,.qa-card,.feature-card,.guide-card,.resource-card,.tournament-card,.match-card,.settings-card,.profile-card,.auth-card,.app-card) :is(h1,h2,h3,h4,h5,h6,strong,.title,.heading,.name){color:var(--hb-v28-text)}
:is(.card,.panel,.modal,.sheet,.drawer,.wallet-card,.stat-card,.qa-card,.feature-card,.guide-card,.resource-card,.tournament-card,.match-card,.settings-card,.profile-card,.auth-card,.app-card) :is(p,.muted,.subtitle,.description,.meta,.hint,.small){color:var(--hb-v28-muted)}

/* Premium surface treatment */
:is(.card,.panel,.wallet-card,.stat-card,.feature-card,.guide-card,.resource-card,.tournament-card,.match-card,.settings-card,.profile-card,.auth-card,.app-card){
  border-color:var(--hb-v28-border);
  box-shadow:var(--hb-v28-shadow);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
:is(.card,.panel,.wallet-card,.stat-card,.feature-card,.guide-card,.resource-card,.tournament-card,.match-card,.settings-card,.profile-card,.auth-card,.app-card):hover{
  border-color:var(--hb-v28-border-strong);
}

/* Wallet: explicit contrast and hierarchy */
:is(.wallet,.wallet-page,.wallet-screen) :is(.balance,.wallet-balance,.amount,.balance-value){
  color:#fff!important;text-shadow:0 2px 18px rgba(52,245,138,.16)
}
:is(.wallet,.wallet-page,.wallet-screen) :is(.label,.caption,.meta){color:var(--hb-v28-muted)!important}
:is(.wallet,.wallet-page,.wallet-screen) :is(input,select,textarea){
  color:#fff!important;background:rgba(5,16,11,.78)!important;border:1px solid var(--hb-v28-border)!important;
}
:is(.wallet,.wallet-page,.wallet-screen) :is(input,select,textarea)::placeholder{color:#7f9d8e!important}

/* Buttons */
:is(.btn,.button,button,[role="button"]){min-height:42px}
:is(.btn-primary,.btn-green,.btn-success,.primary-btn,.cta-btn){
  box-shadow:0 10px 28px rgba(16,198,106,.18)
}

/* Forms and focus accessibility */
:is(input,select,textarea):focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--hb-v28-green)!important;
  outline-offset:3px!important;
}

/* Prevent accidental layout lines/overflow while keeping intentional dividers. */
*{box-sizing:border-box}
body{overflow-x:hidden}
:is(.container,.wrap,.page,.section,.content,.main,.app-shell){max-width:100%}
pre,code{max-width:100%;overflow:auto}
table{max-width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Guide/resource hierarchy */
:is(.guide-card,.resource-card) :is(a.title,a.heading,.guide-title,.resource-title){color:var(--hb-v28-text)!important}
:is(.guide-card,.resource-card) .arrow{color:var(--hb-v28-green)!important;transition:transform .2s ease}
:is(.guide-card,.resource-card):hover .arrow{transform:translateX(4px)}

/* Mobile polish */
@media (max-width:720px){
  :is(.card,.panel,.wallet-card,.stat-card,.feature-card,.guide-card,.resource-card,.tournament-card,.match-card,.settings-card,.profile-card,.auth-card,.app-card){border-radius:16px}
  h1{line-height:1.08}
  h2{line-height:1.15}
  :is(.btn,.button,button,[role="button"]){min-height:44px}
  :is(.grid,.cards,.card-grid,.stats-grid){grid-template-columns:minmax(0,1fr)!important}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ===== css/hb-v30-navigation.css ===== */
/* HB Battle v30 — universal mobile escape/navigation layer */
:root{--hb30-green:#24d58a;--hb30-gold:#f3c95f;--hb30-ink:#07140f}
.hb-side-back{position:fixed;left:max(8px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);z-index:1200;width:42px;height:86px;border:1px solid rgba(36,213,138,.42);border-radius:0 22px 22px 0;background:rgba(7,20,15,.90);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 26px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.04);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.hb-side-back .hb30-arrow{font-size:29px;line-height:1;font-weight:300}
.hb-side-back .hb30-label{position:absolute;left:100%;margin-left:7px;white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.06em;color:#d9fff0;background:rgba(7,20,15,.88);padding:6px 8px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .18s}
.hb-side-back:focus-visible .hb30-label,.hb-side-back:active .hb30-label{opacity:1}
.hb-side-back.show{display:flex}
.hb-modal-x{position:absolute;right:12px;top:12px;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(7,20,15,.84);color:#fff;display:grid;place-items:center;font-size:20px;line-height:1;font-weight:700;z-index:20;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.overlay .modal{position:relative}
@media(max-width:430px){.hb-side-back{left:0;width:38px;height:78px}.hb-side-back .hb30-label{display:none}.hb-modal-x{width:36px;height:36px;right:10px;top:10px}}
@media(min-width:700px){.hb-side-back{left:12px}}
@media(prefers-reduced-motion:reduce){.hb-side-back,.hb-side-back .hb30-label{transition:none!important}}


/* ===== css/hb-ai-v30-enhance.css ===== */
/* HB AI v30 — premium assistant enhancement */
#aiAssistantScreen .hbai-header{border-bottom:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(0,0,0,.16),transparent);position:relative;z-index:5}
#aiAssistantScreen .hbai-pill{position:relative;padding-left:42px}
#aiAssistantScreen .hbai-pill:before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);background:#24d58a;box-shadow:0 0 0 5px rgba(36,213,138,.13),0 0 14px rgba(36,213,138,.65)}
#aiAssistantScreen .hbai-status{display:flex;align-items:center;gap:7px;margin:-2px 18px 8px;padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(0,0,0,.18);color:var(--text);font-size:11px;font-weight:800;opacity:.9}
#aiAssistantScreen .hbai-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:22px}
#aiAssistantScreen .hbai-quick button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.18);color:var(--text);border-radius:15px;padding:12px 11px;text-align:left;font:700 12px/1.25 inherit;cursor:pointer;box-shadow:0 7px 18px rgba(0,0,0,.1);transition:transform .18s,background .18s,border-color .18s}
#aiAssistantScreen .hbai-quick button:active{transform:scale(.97);background:rgba(255,255,255,.3)}
#aiAssistantScreen .hbai-quick .qicon{display:block;font-size:18px;margin-bottom:5px}
#aiAssistantScreen .hbai-welcome{justify-content:center;padding-top:16px}
#aiAssistantScreen .hbai-sub{max-width:330px}
#aiAssistantScreen .hbai-chat{scrollbar-width:thin}
#aiAssistantScreen .hbai-msg.ai .hbai-bubble{box-shadow:0 8px 24px rgba(0,0,0,.13)}
#aiAssistantScreen .hbai-msg.user .hbai-bubble{box-shadow:0 8px 20px rgba(0,0,0,.16)}
#aiAssistantScreen .hbai-act{transition:transform .15s,background .15s}
#aiAssistantScreen .hbai-act:active{transform:scale(.92)}
#aiAssistantScreen .hbai-bar{border:1px solid rgba(255,255,255,.28);min-height:58px}
#aiAssistantScreen .hbai-voice{box-shadow:0 5px 16px rgba(37,99,235,.25)}
#aiAssistantScreen .hbai-send{box-shadow:0 6px 16px rgba(0,0,0,.22)}
@media(max-width:360px){#aiAssistantScreen .hbai-quick{gap:7px}#aiAssistantScreen .hbai-quick button{padding:10px 9px;font-size:11px}}


/* ===== css/hb-smooth-transparent-polish.css ===== */
/* HB Battle — high-class smooth & transparent polish */
:root {
  --hb-glass-bg: rgba(18, 22, 31, .58);
  --hb-glass-border: rgba(255, 255, 255, .12);
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg {
  max-width: 100%;
}
img {
  height: auto;
}
button, a, input, select, textarea {
  touch-action: manipulation;
}
:where(.glass, .glass-card, .frosted, .appbar, .header, .nav-panel,
       .modal, .dialog, .dropdown, .theme-menu, .cookie-banner) {
  border-color: var(--hb-glass-border);
}
:where(.glass, .glass-card, .frosted) {
  background-color: var(--hb-glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}
/* Keep the premium transparent aesthetic while lowering GPU cost on phones. */
@media (max-width: 768px) {
  body {
    overflow-x: clip;
  }
  .glass, .glass-card, .frosted, .modal, .dialog, .dropdown,
  .theme-menu, .cookie-banner, .appbar {
    -webkit-backdrop-filter: blur(7px) saturate(115%);
    backdrop-filter: blur(7px) saturate(115%);
  }
  .hero-grid, .particles, .particle, .sparkles, .floating-orb,
  .ambient-glow, .animated-bg, .background-animation {
    pointer-events: none;
  }
  .hero-grid, .particles, .particle, .sparkles, .floating-orb {
    animation-duration: 18s !important;
  }
  .menu-toggle, .button, .ab-open, .ab-x, nav a {
    min-height: 42px;
  }
  .hero img, .showcase img {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ===== css/qa-card-nowrap-fix.css ===== */
/* Quick Actions grid — keep every card title on a single line.
   Loaded last on purpose so it wins over the older premium.css /
   dashboard-elevate*.css layers that set white-space:normal. */
#dashboardScreen .qa-card > div:last-of-type{
  min-width:0!important;
}
#dashboardScreen .qa-card-title{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:11.5px!important;
  letter-spacing:-0.15px!important;
}
#dashboardScreen .qa-card-sub{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:380px){
  #dashboardScreen .qa-card-title{ font-size:10.6px!important; }
  #dashboardScreen .qa-card-sub{ font-size:9.2px!important; }
}


/* ===== css/hb-polish-v11.css ===== */
/* ============================================================
   HB Battle app — V11 polish layer (additive, loads LAST)
   Small, targeted fixes only. Nothing in older CSS was edited.
   ============================================================ */

/* 1) Home "Quick Actions": collapse works again.
   dashboard-elevate-v2.css forced #qaExtraCards to display:contents
   with !important, so the 12 extra cards were always open and the
   "View All" link did nothing. Collapsed by default now; the link
   (and toggleQuickActions) adds .qa-expanded to open them. */
#dashboardScreen #qaExtraCards:not(.qa-expanded){ display:none !important; }
#dashboardScreen #qaExtraCards.qa-expanded{ display:contents !important; }
#dashboardScreen .qa-grid{ margin-bottom:24px !important; }

/* 2) Profile: stats strip stays on one row (Matches | Wins | Win rate) */
.profile-stats-float{
  display:grid !important;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  justify-items:center;
  column-gap:6px;
}
.profile-stats-float .home-stat{ width:100%; text-align:center; }

/* 3) Profile: tidy 2-column button grid (no staggered rows) */
.profile-actions-grid{ display:grid !important; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch; }
.profile-actions-grid .profile-action-btn{
  grid-column:auto !important;
  margin-top:0 !important;
  min-height:58px !important;
  height:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.profile-actions-grid .profile-action-btn:last-child{ grid-column:1 / -1 !important; }

/* 4) Light theme: readable small text on white cards */
html[data-theme="light"] #dashboardScreen .qa-card-sub{ color:#5b6470 !important; }

/* 5) Refer & Earn: light surfaces on the light theme
   (the page was built dark-only, so light mode showed heavy black blocks) */
html[data-theme="light"] #inviteFriendsScreen .refer-hero{
  background:linear-gradient(180deg,#fff3ec,#ffffff);
  border:1px solid #f3e2d8;
}
html[data-theme="light"] #inviteFriendsScreen .refer-hero-title{ color:#15171d; }
html[data-theme="light"] #inviteFriendsScreen .refer-hero-sub{ color:#5b6470; }
html[data-theme="light"] #inviteFriendsScreen .refer-hero-sub b{ color:#c2410c; }
html[data-theme="light"] #inviteFriendsScreen .refer-stat-card,
html[data-theme="light"] #inviteFriendsScreen .refer-step{
  background:#ffffff; border:1px solid #efe6df; color:#15171d;
  box-shadow:0 2px 10px rgba(21,23,29,.04);
}
html[data-theme="light"] #inviteFriendsScreen .refer-stat-val{ color:#15171d; }
html[data-theme="light"] #inviteFriendsScreen .refer-stat-val.gold{ color:#c2410c; }
html[data-theme="light"] #inviteFriendsScreen .refer-stat-lbl{ color:#6b7480; }
html[data-theme="light"] #inviteFriendsScreen .refer-step-num{ background:#fff0e8; color:#c2410c; }

/* ============================================================
   6) Home "Quick Actions" — redesigned as a friendly 2-column
   tile grid (was a long, boxy list of rows). Works in all themes
   because it only uses the theme variables --surface/--border/
   --text/--text3.
   ============================================================ */
#dashboardScreen .sec-title{
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:10px; text-align:left !important;
}
#dashboardScreen .sec-title a{ margin-left:auto !important; }

#dashboardScreen .qa-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; overflow:visible !important;
}
#dashboardScreen .qa-card,
#dashboardScreen #qaExtraCards .qa-card{
  display:flex !important; flex-direction:column !important;
  align-items:flex-start !important; justify-content:flex-start !important;
  gap:14px !important;
  width:auto !important; min-width:0 !important; margin:0 !important;
  padding:16px 14px 15px !important;
  position:relative; overflow:hidden;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:20px !important;
  box-shadow:0 6px 18px rgba(20,24,30,.07) !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
#dashboardScreen .qa-card:active{ transform:scale(.97) !important; background:var(--surface) !important; }
#dashboardScreen .qa-card:last-child{ border-bottom:1px solid var(--border) !important; }
#dashboardScreen .qa-card::after{ display:none !important; }
#dashboardScreen .qa-card > div:last-of-type{ width:100% !important; min-width:0 !important; }

#dashboardScreen .qa-card .qa-card-icon{
  width:46px !important; height:46px !important; border-radius:14px !important;
  border:0 !important; box-shadow:none !important;
  background:color-mix(in srgb, var(--qa-accent, #f59e0b) 16%, var(--surface) 84%) !important;
}
#dashboardScreen .qa-card .qa-card-icon i{ font-size:19px !important; }
#dashboardScreen .qa-card .qa-card-title{
  font-size:14.5px !important; font-weight:700 !important; letter-spacing:0 !important;
  color:var(--text) !important;
}
#dashboardScreen .qa-card .qa-card-sub{
  font-size:11.5px !important; margin-top:2px !important; opacity:1 !important;
  color:var(--text3) !important;
}
html[data-theme="light"] #dashboardScreen .qa-card .qa-card-sub{ color:#5b6470 !important; }
#dashboardScreen .qa-card .qa-badge{ top:12px !important; right:12px !important; }

@media (max-width:360px){
  #dashboardScreen .qa-card,
  #dashboardScreen #qaExtraCards .qa-card{ padding:14px 12px !important; }
  #dashboardScreen .qa-card .qa-card-title{ font-size:13.5px !important; }
}

/* keep the last row clear of the floating bottom bar */
#dashboardScreen .home-body{ padding-bottom:130px !important; }
html[data-theme="light"] #dashboardScreen .qa-card .qa-card-icon i{ filter:saturate(1.25) brightness(.84) !important; }

/* ============================================================
   7) "High class" pass — calmer, more premium surfaces
   ============================================================ */

/* --- Login / Sign up: centred brand block, quieter logo glow --- */
#loginScreen .auth-content > img,
#signupScreen .auth-content > img{
  display:block !important;
  width:92px !important; height:92px !important;
  margin:6vh auto 14px !important;
  border-radius:24px !important;
  filter:none !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) !important;
}
#loginScreen .auth-subtitle,
#signupScreen .auth-subtitle{
  text-align:center !important; font-size:14px !important; margin-bottom:26px !important;
}
#loginScreen .auth-subtitle::before,
#signupScreen .auth-subtitle::before{
  display:block; margin-bottom:6px;
  font-family:var(--font-display, inherit); font-size:26px; font-weight:800; letter-spacing:-.01em;
  color:var(--text);
}
#loginScreen .auth-subtitle::before{ content:"Welcome back"; }
#signupScreen .auth-subtitle::before{ content:"Join HB Battle"; }

/* --- Profile: quiet surface buttons instead of loud orange blocks --- */
.profile-actions-grid .profile-action-btn{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  box-shadow:0 4px 14px rgba(20,24,30,.06) !important;
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.04em;
  text-shadow:none !important;
}
.profile-actions-grid .profile-action-btn i{ color:#ea580c !important; font-size:15px; }
.profile-actions-grid .profile-action-btn:active{ transform:scale(.97); }
#profileScreen button[onclick="confirmLogout()"]{
  background:transparent !important;
  color:#dc2626 !important;
  border:1px solid rgba(220,38,38,.35) !important;
  box-shadow:none !important; text-shadow:none !important;
  font-weight:700 !important;
}
#profileScreen button[onclick="confirmLogout()"] i{ color:#dc2626 !important; }
html[data-theme="dark"] #profileScreen button[onclick="confirmLogout()"],
html[data-theme="green"] #profileScreen button[onclick="confirmLogout()"]{
  color:#f87171 !important; border-color:rgba(248,113,113,.4) !important;
}
html[data-theme="dark"] #profileScreen button[onclick="confirmLogout()"] i,
html[data-theme="green"] #profileScreen button[onclick="confirmLogout()"] i{ color:#f87171 !important; }

/* ============================================================
   8) Shared components — chips, empty states, headers
   (used on Tournaments, Leaderboard, Matches, History, ID Bazar...)
   ============================================================ */

/* Filter chips: light pills, one clear active state */
html body .chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:34px; padding:7px 16px !important;
  border-radius:999px !important;
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 1px 2px rgba(20,24,30,.04);
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease;
}
html[data-theme="dark"] body .chip,
html[data-theme="green"] body .chip{
  background:rgba(255,255,255,.04) !important;
  color:#d5dcd8 !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:none;
}
html body .chip.active,
html body #leaderboardScreen#leaderboardScreen .chip.active{
  background:linear-gradient(135deg,#ff7a45,#e5501c) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 6px 16px rgba(229,80,28,.30) !important;
}
html body .chip:active{ transform:scale(.96); }

/* Empty / loading states: centred icon bubble + calm text */
.empty{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:56px 24px !important;
}
.empty > i{
  width:76px; height:76px; border-radius:26px;
  display:grid !important; place-items:center;
  font-size:30px !important; opacity:1 !important;
  color:var(--text3) !important;
  background:color-mix(in srgb, var(--text) 6%, transparent) !important;
  margin:0 !important;
}
.empty > p{ margin:0 !important; font-size:14px; line-height:1.5; color:var(--text3) !important; max-width:260px; }

/* Screen headers: long titles never wrap onto two lines */
.header .header-title{
  min-width:0; flex:1 1 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* History filters */
#historyScreen input[type="date"],
#historyScreen select{
  border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
  padding:10px 12px; font:inherit; font-size:13px; min-height:40px;
}

/* ============================================================
   9) Tournament cards — fixes + premium finish
   - name was invisible on the light theme (dark text on dark banner)
   - Prize | Entry | Slots wrapped onto two rows
   - cut-corner banner replaced with clean rounded card
   ============================================================ */
html[data-theme] body .tour-card{
  border-radius:22px !important; overflow:hidden !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  box-shadow:0 10px 28px rgba(20,24,30,.08) !important;
  margin-bottom:16px !important; clip-path:none !important;
}
html[data-theme] body .tour-card-banner{
  clip-path:none !important; border-radius:0 !important;
  background:linear-gradient(135deg,#171a21 0%,#12281f 100%) !important;
  padding:14px 16px !important; gap:12px;
}
html[data-theme] body .tour-name{ color:#fff !important; font-size:15.5px; line-height:1.25; }
html[data-theme] body .tour-card-banner > div:last-child{ white-space:nowrap; flex:none; }
html[data-theme] body .tour-stats{
  display:grid !important;
  grid-template-columns:1fr 1px 1fr 1px 1fr !important;
  align-items:center; gap:0 !important; padding:8px 0 14px;
}
html[data-theme] body .tour-stat-item{ text-align:center; min-width:0; }
html[data-theme] body .tour-divider{ width:1px !important; height:32px; background:var(--border) !important; }
html[data-theme] body .tour-slots-track{
  height:6px !important; border-radius:99px;
  background:color-mix(in srgb, var(--text) 10%, transparent) !important;
}
html[data-theme] body .tour-slots-fill{ background:linear-gradient(90deg,#ff9a5c,#e5501c) !important; border-radius:99px; }
html[data-theme] body .tour-join-btn{ border-radius:12px !important; min-width:84px; font-weight:700; }

/* ============================================================
   10) Notifications + Transaction History fixes
   - notification titles were white on white in the light theme
   - history rows were flat, cramped and clipped at the right edge
   ============================================================ */
html[data-theme] body .notif-item{
  border-radius:18px !important; padding:14px 16px !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
  box-shadow:0 4px 14px rgba(20,24,30,.05) !important; margin-bottom:10px !important;
}
html[data-theme] body .notif-item.unread{ border-left:3px solid #e5501c !important; }
html[data-theme] body .notif-title{ color:var(--text) !important; font-weight:700 !important; font-size:14px !important; }
html[data-theme] body .notif-msg{ color:var(--text2, #5b6470) !important; font-size:12.5px !important; line-height:1.5; }
html[data-theme="light"] body .notif-msg{ color:#5b6470 !important; }
html[data-theme] body .notif-time{ color:var(--text3) !important; font-size:11px !important; }

#historyScreen .header select{
  flex:none; width:82px; max-width:82px; padding:6px 8px; min-height:34px; font-size:12.5px;
}
#historyScreen .txn-item{
  display:flex !important; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 10px !important; padding:12px 14px !important;
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-radius:16px !important; box-shadow:0 4px 14px rgba(20,24,30,.05) !important;
}
#historyScreen .txn-amount{ white-space:nowrap; font-weight:800; }

#historyScreen .header .header-title{ white-space:normal !important; line-height:1.15; font-size:15px; }
/* money colours: credit = green, debit = red (was orange for both) */
html[data-theme] body .txn-amount.credit{ color:#16a34a !important; }
html[data-theme] body .txn-amount.debit{ color:#dc2626 !important; }
html[data-theme="dark"] body .txn-amount.credit,
html[data-theme="green"] body .txn-amount.credit{ color:#34d399 !important; }
html[data-theme="dark"] body .txn-amount.debit,
html[data-theme="green"] body .txn-amount.debit{ color:#f87171 !important; }

/* ============================================================
   11) ID Bazar tabs/filters — same calm pill style as chips
   (every button looked "active" because .btn gradients won)
   ============================================================ */
html[data-theme] body .mp-tab,
html[data-theme] body .mp-filter{
  background:var(--surface) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-radius:999px !important;
  box-shadow:0 1px 2px rgba(20,24,30,.04) !important; text-shadow:none !important;
  font-weight:600 !important; letter-spacing:.01em; text-transform:none !important;
  padding:8px 16px !important; min-height:36px; white-space:nowrap; flex-shrink:0;
}
html[data-theme="dark"] body .mp-tab,
html[data-theme="green"] body .mp-tab,
html[data-theme="dark"] body .mp-filter,
html[data-theme="green"] body .mp-filter{
  background:rgba(255,255,255,.04) !important; color:#d5dcd8 !important;
  border-color:rgba(255,255,255,.12) !important; box-shadow:none !important;
}
html[data-theme] body .mp-tab.active,
html[data-theme] body .mp-filter.active{
  background:linear-gradient(135deg,#ff7a45,#e5501c) !important; color:#fff !important;
  border-color:transparent !important; box-shadow:0 6px 16px rgba(229,80,28,.30) !important;
}
html[data-theme] body .mp-tab::before, html[data-theme] body .mp-tab::after,
html[data-theme] body .mp-filter::before, html[data-theme] body .mp-filter::after{ display:none !important; }

/* ============================================================
   12) Bottom navigation — floating pill with a proper round
   wallet button (was a boxy tile with a beige halo)
   ============================================================ */
html[data-theme] body #sharedBottomNav{
  overflow:visible !important;
  border-radius:28px !important;
  box-shadow:0 16px 36px rgba(20,24,30,.16) !important;
}
html[data-theme="dark"] body #sharedBottomNav,
html[data-theme="green"] body #sharedBottomNav{ box-shadow:0 16px 36px rgba(0,0,0,.55) !important; }
#sharedBottomNav .nav-item{ gap:3px; }
#sharedBottomNav .nav-item i{ font-size:19px !important; }
#sharedBottomNav .nav-item span{ font-size:10px !important; font-weight:700 !important; letter-spacing:.07em; }
#sharedBottomNav .nav-item-center{
  background:none !important; box-shadow:none !important; border:0 !important;
  overflow:visible !important; position:relative;
}
#sharedBottomNav .nav-item-center::before,
#sharedBottomNav .nav-item-center::after,
#sharedBottomNav .nav-fab::before,
#sharedBottomNav .nav-fab::after{ display:none !important; }
html[data-theme] body #sharedBottomNav .nav-fab{
  width:58px !important; height:58px !important; border-radius:50% !important;
  display:grid !important; place-items:center;
  margin:-30px auto 0 !important;
  background:linear-gradient(135deg,#ff8a5c,#e5501c) !important;
  border:4px solid var(--surface) !important;
  box-shadow:0 12px 24px rgba(229,80,28,.42) !important;
  transition:transform .15s ease;
}
html[data-theme] body #sharedBottomNav .nav-fab i{ color:#fff !important; font-size:22px !important; filter:none !important; }
#sharedBottomNav .nav-fab:active{ transform:scale(.93); }

/* ============================================================
   13) Squad Wars points + earned Badge icons were invisible:
   the JS used --victory-gradient (a dark background gradient) as
   a text gradient. Give them a real gold colour instead.
   ============================================================ */
#squadWarsListContainer [style*="victory-gradient"]{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:#c2410c !important;
}
html[data-theme="dark"] #squadWarsListContainer [style*="victory-gradient"],
html[data-theme="green"] #squadWarsListContainer [style*="victory-gradient"]{ color:#fbbf24 !important; }
#achievementBadgesGridContainer i[style*="victory-gradient"]{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:#f59e0b !important;
  filter:drop-shadow(0 4px 8px rgba(245,158,11,.35));
}

/* ============================================================
   14) Section titles everywhere: left-aligned with the link on
   the right (were centred between the accent bar and the link)
   ============================================================ */
html[data-theme] body .sec-title{
  display:flex !important; align-items:center !important;
  justify-content:flex-start !important; text-align:left !important; gap:10px;
}
html[data-theme] body .sec-title a{ margin-left:auto !important; }

/* Wallet: transactions list as a proper rounded card */
#walletScreen #walletTxns{
  border-radius:20px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  margin:0 0 16px; box-shadow:0 4px 14px rgba(20,24,30,.05);
  min-height:0 !important; height:auto !important; padding:0 !important;
}
#walletScreen #walletTxns .empty{ padding:28px 24px !important; min-height:0 !important; height:auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#walletScreen #walletTxns .txn-item{ border-radius:0 !important; box-shadow:none !important; margin:0 !important; border:0 !important; border-bottom:1px solid var(--border) !important; background:transparent !important; }
#walletScreen #walletTxns .txn-item:last-child{ border-bottom:0 !important; }

/* ============================================================
   15) Splash screen — clean deep background instead of the muddy
   grey/gold wash, softer logo glow, gradient loader
   ============================================================ */
html[data-theme] body #splashScreen{
  background:
    radial-gradient(520px 420px at 50% 42%, rgba(229,80,28,.24), transparent 70%),
    radial-gradient(420px 320px at 85% 95%, rgba(242,184,75,.10), transparent 70%),
    linear-gradient(180deg,#0b0f14 0%,#08120f 100%) !important;
}
html[data-theme] body #splashScreen::after{ display:none !important; }
#splashScreen .splash-glow{ opacity:.55; filter:blur(6px); }
#splashScreen .splash-icon{ color:rgba(255,255,255,.055) !important; }
#splashScreen .splash-logo img{
  border-radius:30px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.09) !important;
  filter:none !important;
}
#splashScreen .splash-tagline{ color:rgba(255,255,255,.55) !important; letter-spacing:.32em; font-size:12px; }
#splashScreen .splash-loader{ width:96px; height:3px; background:rgba(255,255,255,.10); }
#splashScreen .splash-loader-bar{ background:linear-gradient(90deg,#ff8a5c,#f2b84b) !important; }

/* ============================================================
   16) Logout sheet — Cancel is neutral, Logout is the red action
   ============================================================ */
#logoutOverlay button[onclick*="closeOverlay"]{
  background:var(--surface) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; box-shadow:none !important;
  text-shadow:none !important; font-weight:700 !important;
}
#logoutOverlay button[onclick="logout()"]{
  background:linear-gradient(135deg,#ef4444,#c81e1e) !important; color:#fff !important;
  border:0 !important; box-shadow:0 8px 20px rgba(220,38,38,.30) !important;
  font-weight:700 !important;
}
#logoutOverlay button[onclick*="closeOverlay"],
#logoutOverlay button[onclick="logout()"]{ font-size:14px !important; letter-spacing:.04em; text-transform:uppercase; min-height:48px; border-radius:14px !important; }


/* ===== css/dashboard-mega-v14.css ===== */
/* ============================================================
   HB Battle App — Dashboard V14 "MEGA MOTION" (loads last)
   Theme-safe: adds motion, glow and depth without touching any
   background/text colour, so Light, Dark-Ember and Neon-Green
   all keep working exactly as before. Targets the home screen,
   quick-action grid and bottom nav.
   ============================================================ */

/* ---------- Screen entrance: fade + rise whenever a screen becomes active ---------- */
.screen{ will-change:opacity,transform; }
.screen.active{
  animation:dm-screen-in .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes dm-screen-in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ---------- Wallet card: periodic gold sheen sweep + soft float ---------- */
.home-wallet-card{
  position:relative; overflow:hidden;
  animation:dm-float 5s ease-in-out infinite;
}
.home-wallet-card::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  background-size:220% 100%; background-position:150% 0;
  animation:dm-sheen 5.5s ease-in-out infinite;
}
@keyframes dm-sheen{ 0%,60%{background-position:150% 0} 85%,100%{background-position:-50% 0} }
@keyframes dm-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.wallet-icon-badge{ animation:dm-badge-float 3.4s ease-in-out infinite; }
@keyframes dm-badge-float{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-4px) rotate(-2deg)} }
.home-wallet-add{
  position:relative;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease !important;
}
.home-wallet-add:active{ transform:scale(.9) !important; }
.home-wallet-add::after{
  content:''; position:absolute; inset:-4px; border-radius:inherit; z-index:-1;
  box-shadow:0 0 0 0 rgba(227,179,76,.35);
  animation:dm-add-pulse 2.4s ease-in-out infinite;
}
@keyframes dm-add-pulse{ 0%{box-shadow:0 0 0 0 rgba(227,179,76,.4)} 70%{box-shadow:0 0 0 8px rgba(227,179,76,0)} 100%{box-shadow:0 0 0 0 rgba(227,179,76,0)} }

/* ---------- Stat strip: gentle pop-in for each number, count-up ready ---------- */
.home-card-float{ animation:dm-fade-up .5s cubic-bezier(.16,1,.3,1) .08s both; }
.home-stat-val{
  display:inline-block; transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.home-stat.dm-bump .home-stat-val{ animation:dm-num-bump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes dm-num-bump{ 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }

/* ---------- Promo banner: animated gradient sheen + button micro-interaction ---------- */
.home-promo{
  position:relative; overflow:hidden;
  animation:dm-fade-up .5s cubic-bezier(.16,1,.3,1) .14s both;
}
.home-promo::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 62%);
  background-size:240% 100%; background-position:160% 0;
  animation:dm-sheen 6.5s ease-in-out .6s infinite;
}
.home-promo-btn{
  position:relative; transition:transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.home-promo:active .home-promo-btn{ transform:scale(.94) translateX(2px) !important; }
.home-promo-btn i{ transition:transform .3s ease; }
.home-promo:hover .home-promo-btn i{ transform:translateX(3px); }

@keyframes dm-fade-up{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ---------- Quick actions: staggered entrance + lift using each card's own accent glow ---------- */
.qa-grid .qa-card{
  opacity:0; animation:dm-fade-up .45s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease !important;
}
.qa-grid .qa-card:nth-child(1){animation-delay:.06s}
.qa-grid .qa-card:nth-child(2){animation-delay:.11s}
.qa-grid .qa-card:nth-child(3){animation-delay:.16s}
.qa-grid .qa-card:nth-child(4){animation-delay:.21s}
.qa-grid .qa-card:nth-child(5){animation-delay:.26s}
.qa-grid .qa-card:nth-child(6){animation-delay:.31s}
.qa-grid .qa-card:nth-child(n+7){animation-delay:.36s}
.qa-grid .qa-card:active{
  transform:scale(.96) !important;
  box-shadow:0 0 0 2px var(--qa-glow,rgba(227,179,76,.3)) inset !important;
}
@media (hover:hover){
  .qa-grid .qa-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 14px 26px -14px var(--qa-glow,rgba(227,179,76,.4)) !important;
  }
  .qa-grid .qa-card:hover .qa-card-icon{ transform:scale(1.1) rotate(-4deg); }
}
.qa-card-icon{ transition:transform .3s cubic-bezier(.34,1.56,.64,1) !important; }

/* ---------- Bottom nav: active glow + tap bounce (colour untouched, only motion) ---------- */
.bottom-nav .nav-item{ position:relative; transition:transform .2s cubic-bezier(.34,1.56,.64,1) !important; }
.bottom-nav .nav-item:active{ transform:scale(.88) !important; }
.bottom-nav .nav-item.active i,
.bottom-nav .nav-item.active svg{
  animation:dm-nav-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dm-nav-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.24)} 100%{transform:scale(1)} }
.bottom-nav .nav-item.active::after{
  content:''; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:currentColor;
  animation:dm-dot-in .25s ease both;
}
@keyframes dm-dot-in{ from{opacity:0;transform:translate(-50%,4px)} to{opacity:1;transform:translate(-50%,0)} }

/* ---------- Notification bell: subtle attention ring when a badge is visible ---------- */
#notifBellBadge:not([style*="display: none"]) ~ * ,
#notifBellBadge{ }
#notifBellBadge{ animation:dm-badge-in .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes dm-badge-in{ from{transform:scale(0)} to{transform:scale(1)} }

@media (prefers-reduced-motion:reduce){
  .screen.active,
  .home-wallet-card, .home-wallet-card::before, .wallet-icon-badge, .home-wallet-add::after,
  .home-card-float, .home-promo, .home-promo::before,
  .qa-grid .qa-card, .bottom-nav .nav-item.active i, .bottom-nav .nav-item.active svg,
  .bottom-nav .nav-item.active::after, #notifBellBadge{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}


/* ===== css/app-mega-v15-allscreens.css ===== */
/* ============================================================
   HB Battle App — V15 "ALL SCREENS" mega motion (loads last)
   Targets the shared components used across every screen —
   .card, .chip, .stat-card, .btn, and the .overlay/.modal
   system — so Wallet, Tournaments, Profile, Leaderboard,
   Sessions, Squad Wars and every other screen gets the same
   premium motion without per-screen rewrites. Theme-safe: no
   background or text colours are touched, only motion/depth.
   ============================================================ */

/* ---------- 1. Overlay + modal: backdrop fade + bouncier slide-up ----------
   The base app already toggles .overlay via display:none -> .active{display:flex},
   and .modal already has its own `animation:slideUp .3s ease`. Rather than
   fight that with a transition-based opacity/visibility system (which breaks
   across a display:none switch), we redefine the animation-name on the same
   selectors so it plays the moment .active makes the element visible. */
.overlay.active{ animation:am-backdrop-fade .25s ease; }
@keyframes am-backdrop-fade{ from{opacity:0} to{opacity:1} }
.overlay .modal{
  animation:am-modal-in .4s cubic-bezier(.22,1.4,.36,1) !important;
}
@keyframes am-modal-in{
  from{ transform:translateY(70px) scale(.97); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
.modal-handle{ transition:transform .2s ease; }
.overlay.active .modal-handle{ animation:am-handle-tap .5s cubic-bezier(.34,1.56,.64,1) .15s both; }
@keyframes am-handle-tap{ 0%{transform:scaleX(.7)} 60%{transform:scaleX(1.15)} 100%{transform:scaleX(1)} }

/* ---------- 2. Cards: lift + shadow on hover/press, everywhere ---------- */
.card{
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease !important;
}
.card:active{ transform:scale(.98) !important; }
@media (hover:hover){
  .card:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 30px -18px rgba(0,0,0,.35) !important; }
}

/* ---------- 3. Stat cards: pop-in when their screen becomes active ---------- */
.stat-card{
  opacity:0; animation:am-fade-up .42s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .22s cubic-bezier(.16,1,.3,1) !important;
}
.stat-card:nth-child(1){animation-delay:.04s}
.stat-card:nth-child(2){animation-delay:.09s}
.stat-card:nth-child(3){animation-delay:.14s}
.stat-card:nth-child(4){animation-delay:.19s}
.stat-card:nth-child(n+5){animation-delay:.24s}
.stat-card:active{ transform:scale(.95) !important; }
@keyframes am-fade-up{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ---------- 4. Chips: smooth select transition + tap feedback ---------- */
.chip{
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .22s ease,color .22s ease,border-color .22s ease !important;
}
.chip:active{ transform:scale(.92) !important; }
.chip.active,.chip[aria-selected="true"]{ animation:am-chip-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes am-chip-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* ---------- 5. Buttons: universal press feedback across every screen ---------- */
.btn{
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,filter .2s ease !important;
}
.btn:active{ transform:scale(.95) !important; filter:brightness(.96); }
.btn-glow{ position:relative; }
.btn-glow::after{
  content:''; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.18);
  animation:am-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes am-glow-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.16)}
  70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ---------- 6. Profile hero + info cards: gentle entrance ---------- */
.profile-hero,.profile-hero-premium,.info-card{
  animation:am-fade-up .45s cubic-bezier(.16,1,.3,1) both;
}

/* ---------- 7. Toasts / badges: pop instead of just appearing ---------- */
.qa-badge:not(.hidden){ animation:am-badge-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes am-badge-pop{ from{transform:scale(0)} to{transform:scale(1)} }

@media (prefers-reduced-motion:reduce){
  .overlay.active,.overlay .modal,.modal-handle,.overlay.active .modal-handle,
  .card,.stat-card,.chip,.chip.active,.btn,.btn-glow::after,
  .profile-hero,.profile-hero-premium,.info-card,.qa-badge{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important;
  }
}


/* ===== css/screens-polish-v19.css ===== */
/* ============================================================
   HB Battle App — V19 Screen Polish: Wallet, Tournaments, Profile
   (loads after app-mega-v15-allscreens.css)
   Same rule as dashboard-mega-v14.css: motion and depth only,
   no background or text colours touched, so Light, Dark-Ember
   and Neon-Green themes all keep working unchanged.
   ============================================================ */

/* ================= WALLET ================= */
#walletScreen .wallet-hero{
  animation:sp-fade-up .45s cubic-bezier(.16,1,.3,1) both;
}
#walletScreen .wallet-ambient{
  animation:sp-ambient-drift 7s ease-in-out infinite;
}
@keyframes sp-ambient-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-3%,3%) scale(1.08); }
}
#walletScreen .wallet-btn{
  opacity:0; animation:sp-fade-up .4s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
#walletScreen .wallet-btn:nth-child(1){animation-delay:.08s}
#walletScreen .wallet-btn:nth-child(2){animation-delay:.13s}
#walletScreen .wallet-btn:nth-child(3){animation-delay:.18s}
#walletScreen .wallet-btn:nth-child(4){animation-delay:.23s}
#walletScreen .wallet-btn:active{ transform:scale(.93) !important; }

#walletScreen .wallet-stat-card{
  opacity:0; animation:sp-fade-up .42s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .2s cubic-bezier(.16,1,.3,1) !important;
}
#walletScreen .wallet-stat-card:nth-child(1){animation-delay:.1s}
#walletScreen .wallet-stat-card:nth-child(2){animation-delay:.16s}
#walletScreen .wallet-stat-card:nth-child(3){animation-delay:.22s}
#walletScreen .wallet-stat-card:active{ transform:scale(.96) !important; }

#walletTxns > *{
  animation:sp-fade-up .35s cubic-bezier(.16,1,.3,1) both;
  transition:transform .2s ease !important;
}
#walletTxns > *:active{ transform:scale(.98) !important; }

/* Bonus Wallet card (no class on it — targeted by its onclick) */
#walletScreen [onclick="showScreen('bonusWalletScreen')"]{
  position:relative; overflow:hidden;
  animation:sp-fade-up .45s cubic-bezier(.16,1,.3,1) .3s both;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
#walletScreen [onclick="showScreen('bonusWalletScreen')"]::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  background-size:220% 100%; background-position:150% 0;
  animation:sp-sheen 6s ease-in-out 1s infinite;
}
#walletScreen [onclick="showScreen('bonusWalletScreen')"]:active{ transform:scale(.97) !important; }
@keyframes sp-sheen{ 0%,65%{background-position:150% 0} 90%,100%{background-position:-50% 0} }

/* ================= TOURNAMENTS ================= */
#tournamentScreen .chip{
  opacity:0; animation:sp-fade-side .35s cubic-bezier(.16,1,.3,1) forwards;
}
#tournamentScreen .chip:nth-child(1){animation-delay:.04s}
#tournamentScreen .chip:nth-child(2){animation-delay:.08s}
#tournamentScreen .chip:nth-child(3){animation-delay:.12s}
#tournamentScreen .chip:nth-child(4){animation-delay:.16s}
#tournamentScreen .chip:nth-child(5){animation-delay:.2s}
#tournamentScreen .chip:nth-child(n+6){animation-delay:.24s}
@keyframes sp-fade-side{ from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }

#tournamentScreen .empty i{
  display:inline-block; animation:sp-float 3s ease-in-out infinite;
}
@keyframes sp-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

#tournamentScreen .card{
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease !important;
}
#tournamentScreen .card:active{ transform:scale(.97) !important; }

/* ================= PROFILE ================= */
#profileScreen .profile-hero-premium{
  animation:sp-fade-up .45s cubic-bezier(.16,1,.3,1) both;
}
#profileScreen .avatar-ring{
  position:relative;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1) !important;
}
#profileScreen .avatar-ring::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 0 var(--red-glow, rgba(255,77,94,.4));
  animation:sp-ring-pulse 2.6s ease-in-out infinite;
}
#profileScreen .avatar-ring:active{ transform:scale(.94) !important; }
@keyframes sp-ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,94,.35)}
  70%{box-shadow:0 0 0 10px rgba(255,77,94,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,94,0)}
}

#profileScreen .profile-stats-float{
  animation:sp-fade-up .42s cubic-bezier(.16,1,.3,1) .1s both;
}
#profileScreen .info-row{
  opacity:0; animation:sp-fade-up .38s cubic-bezier(.16,1,.3,1) forwards;
}
#profileScreen .info-row:nth-child(1){animation-delay:.14s}
#profileScreen .info-row:nth-child(2){animation-delay:.18s}
#profileScreen .info-row:nth-child(3){animation-delay:.22s}
#profileScreen .info-row:nth-child(4){animation-delay:.26s}
#profileScreen .info-icon{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
#profileScreen .info-row:hover .info-icon{ transform:scale(1.1) rotate(-4deg); }

#profileScreen .profile-action-btn{
  opacity:0; animation:sp-fade-up .36s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
#profileScreen .profile-actions-grid .profile-action-btn:nth-child(1){animation-delay:.3s}
#profileScreen .profile-actions-grid .profile-action-btn:nth-child(2){animation-delay:.34s}
#profileScreen .profile-actions-grid .profile-action-btn:nth-child(3){animation-delay:.38s}
#profileScreen .profile-actions-grid .profile-action-btn:nth-child(4){animation-delay:.42s}
#profileScreen .profile-actions-grid .profile-action-btn:nth-child(5){animation-delay:.46s}
#profileScreen .profile-actions-grid .profile-action-btn:nth-child(n+6){animation-delay:.5s}
#profileScreen .profile-action-btn:active{ transform:scale(.96) !important; }

@keyframes sp-fade-up{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

@media (prefers-reduced-motion:reduce){
  #walletScreen .wallet-hero, #walletScreen .wallet-ambient, #walletScreen .wallet-btn,
  #walletScreen .wallet-stat-card, #walletTxns > *, #walletScreen [onclick="showScreen('bonusWalletScreen')"],
  #walletScreen [onclick="showScreen('bonusWalletScreen')"]::before,
  #tournamentScreen .chip, #tournamentScreen .empty i,
  #profileScreen .profile-hero-premium, #profileScreen .avatar-ring::after,
  #profileScreen .profile-stats-float, #profileScreen .info-row, #profileScreen .profile-action-btn{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}


/* ===== css/high-class-final.css ===== */
/* ============================================================================
   HB BATTLE — "HIGH CLASS" PREMIUM THEME
   Loaded LAST, on purpose — every rule below is meant to be the final word
   on how these components look.

   A NOTE ON HOW THIS FILE IS BUILT (learned the hard way this session):
   - Every color token below is defined separately inside :root, [data-theme="dark"]
     and [data-theme="green"]. Never a bare :root value left to "just work" for
     dark/green too — that exact mistake (an unscoped :root clobbering
     theme-specific colors because :root and [data-theme="x"] have identical
     CSS specificity) was the root cause of at least two "theme looks broken"
     bugs found earlier in this project. Being explicit for all three themes
     here means this file can never reintroduce that bug.
   - Components are styled using var(--surface)/var(--text)/var(--border)/etc,
     which the base styles.css already defines correctly per theme — so most
     of this file "just" has to be a better-designed skin on top of tokens
     that already switch correctly, rather than reinventing theme-switching.
   ============================================================================ */

:root{
  /* Light — warm ivory & deep gold, editorial/luxury feel */
  --hc-bg-1: #FBF7EF;
  --hc-bg-2: #F3EBDB;
  --hc-accent: #B8862E;         /* deep antique gold */
  --hc-accent-2: #8C5E1A;
  --hc-accent-soft: rgba(184,134,46,0.12);
  --hc-ink: #201B12;
  --hc-card-border: rgba(32,27,18,0.08);
  --hc-shadow: 0 10px 30px rgba(60,44,10,0.10), 0 2px 8px rgba(60,44,10,0.06);
  --hc-header-fade: linear-gradient(180deg, rgba(251,247,239,0.98), rgba(251,247,239,0.85));
}
[data-theme="dark"]{
  /* Black — obsidian & warm brass gold */
  --hc-bg-1: #0B0D10;
  --hc-bg-2: #14171C;
  --hc-accent: #E7B75C;
  --hc-accent-2: #B98A34;
  --hc-accent-soft: rgba(231,183,92,0.14);
  --hc-ink: #F3EFE6;
  --hc-card-border: rgba(231,183,92,0.14);
  --hc-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
  --hc-header-fade: linear-gradient(180deg, rgba(11,13,16,0.98), rgba(11,13,16,0.85));
}
[data-theme="green"]{
  /* Neon — deep emerald & bright gold, still premium, more electric */
  --hc-bg-1: #061510;
  --hc-bg-2: #0C221A;
  --hc-accent: #F2C14E;
  --hc-accent-2: #17B978;
  --hc-accent-soft: rgba(23,185,120,0.18);
  --hc-ink: #EAF6EF;
  --hc-card-border: rgba(23,185,120,0.22);
  --hc-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 22px rgba(23,185,120,0.10);
  --hc-header-fade: linear-gradient(180deg, rgba(6,21,16,0.98), rgba(6,21,16,0.85));
}

/* ---------- App background — subtle depth instead of a flat fill ---------- */
body{
  background: radial-gradient(circle at 15% -10%, var(--hc-accent-soft), transparent 40%),
              linear-gradient(180deg, var(--hc-bg-1) 0%, var(--hc-bg-2) 100%) !important;
}

/* ---------- Screen headers — every screen uses these 3 classes ---------- */
.header{
  background: var(--hc-header-fade) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hc-card-border) !important;
  position: sticky; top: 0; z-index: 50;
}
.header-title{
  font-family: var(--font-display, inherit);
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  color: var(--hc-ink) !important;
}
.header-back{
  background: var(--hc-accent-soft) !important;
  color: var(--hc-accent) !important;
  border-radius: 12px !important;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hc-card-border) !important;
}
.header-action{ color: var(--hc-accent) !important; }

/* ---------- Quick action / dashboard cards ---------- */
.qa-card{
  background: var(--surface) !important;
  border: 1px solid var(--hc-card-border) !important;
  box-shadow: var(--hc-shadow) !important;
  border-radius: 18px !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.qa-card:active{ transform: scale(0.98); }
.qa-card-icon{
  background: var(--hc-accent-soft) !important;
  color: var(--hc-accent) !important;
  border-radius: 14px !important;
}
.qa-card-title{ color: var(--hc-ink) !important; font-weight: 700 !important; }
.qa-card-sub{ color: var(--text2) !important; }

/* ---------- Wallet hero card on Home ---------- */
.home-hero{ padding-bottom: 4px; }
.home-wallet-card{
  background: linear-gradient(135deg, var(--hc-bg-2) 0%, var(--hc-bg-1) 100%) !important;
  border: 1px solid var(--hc-accent-soft) !important;
  box-shadow: var(--hc-shadow) !important;
  border-radius: 22px !important;
  position: relative;
  overflow: hidden;
}
.home-wallet-card::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 40%, var(--hc-accent-soft) 50%, transparent 60%);
  pointer-events:none;
}
.home-wallet-label{ color: var(--text2) !important; letter-spacing: 0.5px; }
.home-wallet-amt{
  color: var(--hc-accent) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 12px var(--hc-accent-soft);
}
.home-wallet-add{
  background: var(--hc-accent) !important;
  color: var(--hc-bg-1) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
.home-stat{
  background: var(--hc-accent-soft) !important;
  border-radius: 14px !important;
}
.home-stat-val{ color: var(--hc-accent) !important; font-weight: 800 !important; }
.home-name, .home-greeting{ color: var(--hc-ink) !important; }

/* ---------- Buttons ---------- */
.btn{
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}
.btn-primary, .btn-red{
  background: linear-gradient(135deg, var(--hc-accent) 0%, var(--hc-accent-2) 100%) !important;
  color: var(--hc-bg-1) !important;
  border: none !important;
  box-shadow: 0 8px 20px var(--hc-accent-soft) !important;
}
.btn-ghost{
  background: transparent !important;
  border: 1.5px solid var(--hc-accent) !important;
  color: var(--hc-accent) !important;
}
.btn-glow{ box-shadow: 0 0 24px var(--hc-accent-soft) !important; }

/* ---------- Forms — used on nearly every screen ---------- */
.form-label{ color: var(--text2) !important; font-weight: 600 !important; font-size: 12px; letter-spacing: 0.3px; }
.form-input{
  background: var(--surface) !important;
  border: 1.5px solid var(--hc-card-border) !important;
  color: var(--hc-ink) !important;
  border-radius: 12px !important;
}
.form-input:focus{
  border-color: var(--hc-accent) !important;
  box-shadow: 0 0 0 3px var(--hc-accent-soft) !important;
  outline: none;
}

/* ---------- Chips / filters ---------- */
.chip{
  background: var(--surface) !important;
  border: 1px solid var(--hc-card-border) !important;
  color: var(--text2) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.chip.active{
  background: var(--hc-accent) !important;
  color: var(--hc-bg-1) !important;
  border-color: var(--hc-accent) !important;
}

/* ---------- Settings rows / global menu ---------- */
.settings-group{
  background: var(--surface) !important;
  border: 1px solid var(--hc-card-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--hc-shadow) !important;
}
.settings-icon, .global-menu-icon{
  background: var(--hc-accent-soft) !important;
  color: var(--hc-accent) !important;
  border-radius: 12px !important;
}
.settings-label, .global-menu-item{ color: var(--hc-ink) !important; }
.settings-arrow{ color: var(--text3) !important; }

/* ---------- Modals / overlays ---------- */
.modal{
  background: var(--surface) !important;
  border-top: 1px solid var(--hc-card-border) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.25) !important;
}
.modal-handle{ background: var(--hc-card-border) !important; }
.modal-title{ color: var(--hc-ink) !important; font-weight: 800 !important; }

/* ---------- Toggle switches ---------- */
.toggle-slider{ background: var(--hc-card-border) !important; }
.toggle-switch input:checked + .toggle-slider{ background: var(--hc-accent) !important; }

/* ---------- Bottom nav + center FAB ---------- */
#sharedBottomNav{
  background: var(--surface) !important;
  border: 1px solid var(--hc-card-border) !important;
  box-shadow: var(--hc-shadow) !important;
}
#sharedBottomNav .nav-item{ color: var(--text3) !important; }
#sharedBottomNav .nav-item.active{ color: var(--hc-accent) !important; }
/* hb-polish-v11.css pins the fab's color with "html[data-theme] body
   #sharedBottomNav .nav-fab" — matching that exact selector prefix
   (rather than the plainer "#sharedBottomNav .nav-fab") is what makes
   this rule actually win instead of silently losing the specificity
   tie-break. */
html[data-theme] body #sharedBottomNav .nav-fab{
  background: linear-gradient(135deg, var(--hc-accent) 0%, var(--hc-accent-2) 100%) !important;
  box-shadow: 0 8px 22px var(--hc-accent-soft), 0 0 0 4px var(--surface) !important;
  color: var(--hc-bg-1) !important;
}

/* ---------- Empty states ---------- */
.empty{ color: var(--text3) !important; }


/* ===== css/hb-neon-fix.css ===== */
/* ============================================================================
   HB BATTLE — Neon Fix + Full Colour Enhancement
   Root cause of "Neon looks like Black": high-class-final.css uses
   --hc-accent as the ONE accent colour for every theme, and in Light,
   Dark AND Green that accent was some shade of gold — so buttons, the
   active nav icon, stat values and the wallet balance all rendered gold
   in every theme. Green never actually showed green anywhere prominent.
   This file makes Green's accent genuinely neon-green (gold demoted to
   a secondary trim), gives Dark its own distinct brass-gold identity,
   and boosts overall saturation/glow so all three themes read as
   colourful rather than muted. Loaded absolute last.
   ============================================================================ */

/* ---------- LIGHT — richer, more saturated emerald + gold ---------- */
:root{
  --hc-accent:      #0FA968;
  --hc-accent-2:    #D8A63D;
  --hc-accent-soft: rgba(15,169,104,.16);
  --hc-glow:        rgba(15,169,104,.4);
}

/* ---------- DARK ("Black") — its own brass-gold identity, no green ---------- */
[data-theme="dark"]{
  --hc-accent:      #E7B75C;
  --hc-accent-2:    #C9852E;
  --hc-accent-soft: rgba(231,183,92,.18);
  --hc-glow:        rgba(231,183,92,.45);
}

/* ---------- GREEN ("Neon") — the actual fix: green is now the accent ---------- */
[data-theme="green"]{
  --hc-bg-1:        #050F0A;
  --hc-bg-2:        #081E14;
  --hc-accent:      #22E67A;         /* was gold — now genuinely neon green */
  --hc-accent-2:    #F2C14E;         /* gold demoted to a secondary trim */
  --hc-accent-soft: rgba(34,230,122,.20);
  --hc-card-border: rgba(34,230,122,.28);
  --hc-ink:         #EAFFF3;
  --hc-glow:         rgba(34,230,122,.55);
}

/* Neon glow: makes the green theme visibly electric, not just re-tinted */
[data-theme="green"] .btn-primary,[data-theme="green"] .btn-red,
[data-theme="green"] html[data-theme] body #sharedBottomNav .nav-fab{
  box-shadow:0 0 0 1px var(--hc-accent),0 0 22px var(--hc-glow),0 8px 20px rgba(0,0,0,.4)!important;
}
[data-theme="green"] #sharedBottomNav .nav-item.active{text-shadow:0 0 12px var(--hc-glow)}
[data-theme="green"] .home-wallet-amt{text-shadow:0 0 16px var(--hc-glow)}
[data-theme="green"] .chip.active{box-shadow:0 0 14px var(--hc-glow)!important}
[data-theme="green"] .qa-card{border-color:var(--hc-card-border)!important}
[data-theme="green"] .qa-card:hover,[data-theme="green"] .qa-card:active{box-shadow:0 0 0 1px var(--hc-card-border),var(--hc-shadow)!important}
[data-theme="green"] .home-wallet-card{border-color:var(--hc-accent-soft)!important;box-shadow:var(--hc-shadow),0 0 30px rgba(34,230,122,.12)!important}
[data-theme="green"] body{
  background:
    radial-gradient(circle at 15% -10%,var(--hc-accent-soft),transparent 42%),
    radial-gradient(circle at 100% 20%,rgba(242,193,78,.08),transparent 45%),
    linear-gradient(180deg,var(--hc-bg-1) 0%,var(--hc-bg-2) 100%)!important;
}

/* ---------- Colour variety: stop everything being monochrome accent ---------- */
.home-stat:nth-of-type(2) .home-stat-val,.stat-card:nth-of-type(2) .stat-value{color:var(--hc-accent-2)!important}
.podium-prize,.mc-prize{color:var(--hc-accent)!important}
.badge.win,.status-badge.win,.status-win{background:var(--hc-accent-soft)!important;color:var(--hc-accent)!important}
.badge.loss,.status-badge.loss,.status-loss{background:rgba(217,45,45,.12)!important;color:#D92D2D!important}
.badge.pending,.status-badge.pending,.status-pending{background:rgba(242,193,78,.16)!important;color:var(--hc-accent-2)!important}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ===== css/hb-design-plus.css ===== */
/* ============================================================================
   HB BATTLE — Design Enhancement Pass
   Beyond colour: real depth, tactile feedback, typography rhythm and
   consistent finishing touches across screens. Loaded absolute last.
   ============================================================================ */

/* ---------- Typography rhythm ---------- */
.header-title{font-size:17px!important}
.screen h3{
  font-size:13px!important;font-weight:800!important;letter-spacing:.04em!important;
  text-transform:uppercase!important;color:var(--text3)!important;
  margin:22px 4px 10px!important;
}
.screen h3:first-child{margin-top:4px!important}

/* ---------- Card depth system: ambient + key shadow, soft top sheen ---------- */
.card,.qa-card,.settings-group,.modal,.tour-card,.info-card,.leaderboard-card,
.transaction-card,.payment-card,.withdraw-card,.menu-card,.stats-card,
.wallet-card,.profile-card,.tournament-card{
  position:relative;
}
.card::before,.qa-card::before,.settings-group::before,.tour-card::before,
.tournament-card::before,.leaderboard-card::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--hc-accent-soft,rgba(15,169,104,.25)),transparent);
  pointer-events:none;opacity:.9;
}

/* ---------- Buttons: tactile press, not just colour ---------- */
.btn,.btn-primary,.btn-red,.primary-btn,.join-btn,.submit-btn,.tour-join-btn{
  transform:translateY(0);
  transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease,filter .12s ease!important;
}
.btn:active,.btn-primary:active,.btn-red:active,.primary-btn:active,
.join-btn:active,.submit-btn:active,.tour-join-btn:active{
  transform:translateY(1px) scale(.98)!important;filter:brightness(.96);
}
.btn:disabled,.btn-red:disabled,button:disabled{
  opacity:.5!important;filter:grayscale(.3);box-shadow:none!important;transform:none!important;
}
.btn-ghost{transition:background .15s ease,color .15s ease!important}
.btn-ghost:active{background:var(--hc-accent-soft,var(--red-soft))!important}

/* ---------- Avatar: crisper ring + inner border ---------- */
.avatar-ring{position:relative}
.avatar-placeholder{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)!important;
}

/* ---------- Chips / filter row: a touch more presence ---------- */
.chip{padding:7px 15px!important;font-size:12.5px!important}
.chip:active{transform:scale(.96)}

/* ---------- Badges: pill with subtle inner glow ---------- */
.badge,.status-badge,.qa-badge{
  border-radius:999px!important;font-weight:700!important;letter-spacing:.01em!important;
  padding:3px 9px!important;
}

/* ---------- Empty states: give them presence instead of feeling broken ---------- */
.empty{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;padding:44px 20px!important;text-align:center!important;
  gap:10px!important;
}
.empty i{
  font-size:34px!important;
  background:var(--hc-accent-soft,var(--red-soft));
  width:66px;height:66px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.empty p{font-size:13.5px!important;font-weight:600!important;max-width:220px}

/* ---------- List / settings rows: clear hover + active affordance ---------- */
.settings-group>*{transition:background .15s ease!important}
.settings-group>*:active{background:var(--off-white)!important}

/* ---------- Modal: nicer handle + entrance ---------- */
.modal-handle{width:40px!important;height:4px!important;border-radius:4px!important;margin:10px auto 6px!important}
.modal{animation:hcModalUp .28s cubic-bezier(.16,1,.3,1) both}
@keyframes hcModalUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.overlay{animation:hcFade .2s ease both}
@keyframes hcFade{from{opacity:0}to{opacity:1}}

/* ---------- Grid / list stagger on screen entry ---------- */
.qa-grid .qa-card,.grid .card{animation:hcRise .4s cubic-bezier(.2,.8,.2,1) both}
.qa-grid .qa-card:nth-child(2),.grid .card:nth-child(2){animation-delay:.04s}
.qa-grid .qa-card:nth-child(3),.grid .card:nth-child(3){animation-delay:.08s}
.qa-grid .qa-card:nth-child(4),.grid .card:nth-child(4){animation-delay:.12s}
@keyframes hcRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Toggle switches: smoother slide ---------- */
.toggle-slider{transition:background .2s ease!important}
.toggle-slider::before{transition:transform .2s cubic-bezier(.4,0,.2,1)!important}

/* ---------- Focus visibility (accessibility + polish) ---------- */
button:focus-visible,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--hc-accent,var(--red))!important;outline-offset:2px!important;
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ===== css/hb-ultimate-v16.css ===== */
/* HB Battle Ultimate V16 — visual-only premium layer. */
:root{
  --hb-ink:#08110d;--hb-ink2:#0d1b15;--hb-green:#16a36b;--hb-green2:#25d391;
  --hb-gold:#f5b942;--hb-white:#fff;--hb-muted:#718078;
  --hb-shadow:0 22px 70px rgba(5,20,13,.12);--hb-radius:22px;
}
*{scrollbar-width:thin;scrollbar-color:rgba(22,163,107,.55) transparent}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#fbfdfc 0,#f5f8f6 100%);color:#102019}
::selection{background:rgba(37,211,145,.24);color:#06120d}
.site-header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(255,255,255,.82)!important;border-bottom:1px solid rgba(8,30,20,.07)!important;box-shadow:0 8px 30px rgba(5,25,15,.05);position:sticky;top:0;z-index:1000}
.site-header .nav{min-height:72px}
.brand{font-weight:800;letter-spacing:-.03em}
.brand img{border-radius:12px;box-shadow:0 8px 22px rgba(22,163,107,.18)}
.links a{transition:transform .2s ease,background .2s ease,color .2s ease}
.links a:hover{transform:translateY(-1px)}
.links .cta{box-shadow:0 10px 25px rgba(22,163,107,.2)!important}
.hero{background:radial-gradient(circle at 15% 15%,rgba(37,211,145,.16),transparent 34%),radial-gradient(circle at 90% 20%,rgba(245,185,66,.12),transparent 28%),linear-gradient(135deg,#07130e 0,#0c2118 55%,#07110d 100%)!important;min-height:680px}
.hero:after{content:"";position:absolute;inset:auto -10% -45% -10%;height:55%;background:radial-gradient(ellipse,rgba(37,211,145,.16),transparent 65%);pointer-events:none}
.hero-copy h1{letter-spacing:-.055em;line-height:.98;text-wrap:balance}
.hero-copy p{max-width:680px;line-height:1.75;color:rgba(255,255,255,.72)}
.eyebrow,.kicker{letter-spacing:.16em;font-weight:800}
.btn{border-radius:14px!important;box-shadow:0 12px 30px rgba(22,163,107,.18);transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(22,163,107,.24)}
.btn.alt{backdrop-filter:blur(10px);background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.15)!important}
.game-chips a{border-radius:999px!important;transition:all .2s ease}
.game-chips a:hover{transform:translateY(-2px);background:rgba(37,211,145,.13)}
.match-card{border:1px solid rgba(255,255,255,.12)!important;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04))!important;box-shadow:0 30px 80px rgba(0,0,0,.28)!important;backdrop-filter:blur(18px);transform:rotate(1deg)}
.trust-strip{background:#fff!important;border-bottom:1px solid #e7eee9}
.card,.step,.faq-item,.guide-list li,.note{border:1px solid rgba(10,40,25,.08)!important;box-shadow:0 14px 45px rgba(10,35,23,.07)!important;border-radius:20px!important;background:rgba(255,255,255,.9)!important}
.card,.step{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover,.step:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(10,35,23,.12)!important;border-color:rgba(22,163,107,.18)!important}
.cta-band{background:linear-gradient(135deg,#092017,#0e3827)!important;border-top:1px solid rgba(255,255,255,.06)}
.site-footer{background:#07110d!important}

/* App shell */
body:has(#splashScreen),body:has(#dashboardScreen){background:#f5f7f6}
.screen{animation:hbFade .25s ease both}
@keyframes hbFade{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
.home-hero{background:radial-gradient(circle at 10% 10%,rgba(37,211,145,.15),transparent 30%),linear-gradient(145deg,#07120e,#0c2118)!important;border-radius:0 0 30px 30px!important;padding:28px 18px 32px!important;box-shadow:0 18px 55px rgba(0,0,0,.16)!important}
.home-greeting{color:rgba(255,255,255,.55)!important;font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}
.home-name{color:#fff!important;letter-spacing:-.035em}
#dashAvatar{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.home-wallet-card{background:linear-gradient(135deg,#18a86f,#087b4d)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:22px!important;box-shadow:0 18px 45px rgba(5,90,55,.27)!important;margin-top:22px!important;transition:transform .2s ease}
.home-wallet-card:active{transform:scale(.985)}
.home-wallet-label{color:rgba(255,255,255,.7)!important}
.home-wallet-amt{color:#fff!important;letter-spacing:-.04em}
.home-card-float{background:rgba(255,255,255,.96)!important;border:1px solid rgba(8,40,24,.08)!important;border-radius:20px!important;box-shadow:0 15px 40px rgba(0,0,0,.1)!important}
.home-stat-val{color:#102019!important}
.home-promo{border-radius:20px!important;background:linear-gradient(135deg,#12291e,#183c2b)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 16px 40px rgba(0,0,0,.12)!important}
.qa-grid{gap:11px!important}
.qa-card{border:1px solid rgba(9,35,22,.08)!important;background:rgba(255,255,255,.94)!important;border-radius:18px!important;box-shadow:0 10px 28px rgba(8,30,19,.07)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.qa-card:active{transform:scale(.97)!important}
.qa-card:hover{border-color:rgba(22,163,107,.18)!important;box-shadow:0 16px 35px rgba(8,30,19,.1)!important}
.qa-card-icon{border-radius:14px!important}
.sec-title{font-weight:800!important;letter-spacing:-.02em}
.bottom-nav{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(10,35,23,.09)!important;box-shadow:0 -12px 35px rgba(8,30,19,.08)!important}
.nav-fab{background:linear-gradient(135deg,#18a86f,#0a7f4f)!important;box-shadow:0 14px 28px rgba(10,130,80,.3)!important;border:4px solid #f5f7f6!important}
.nav-item{transition:transform .2s ease,color .2s ease}
.nav-item:active{transform:scale(.9)}
.modal{backdrop-filter:blur(8px)}
.modal-content,.modal-box{border-radius:24px!important;border:1px solid rgba(8,35,22,.08)!important;box-shadow:0 35px 90px rgba(0,0,0,.2)!important}
.form-input,select,textarea{border-radius:14px!important;border:1px solid #dfe8e3!important;transition:border-color .18s ease,box-shadow .18s ease}
.form-input:focus,select:focus,textarea:focus{border-color:#19a86e!important;box-shadow:0 0 0 4px rgba(25,168,110,.11)!important;outline:none!important}
.btn-red,.btn-primary{border-radius:14px!important}
.toast{border-radius:14px!important;box-shadow:0 18px 45px rgba(0,0,0,.18)!important}

/* Mobile */
@media(max-width:700px){
 .site-header .nav{min-height:64px}.hero{min-height:650px}.hero-copy h1{font-size:clamp(40px,12vw,60px)}
 .hero-showcase{margin-top:28px}.trust-strip{gap:18px!important}.content{padding-left:18px!important;padding-right:18px!important}
 .home-hero{padding-top:22px!important}.home-wallet-card{margin-left:0!important;margin-right:0!important}
 .qa-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.qa-card{min-height:78px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* ===== css/hb-v16-finish.css ===== */
/* ============================================================================
   HB BATTLE — V16 Finish Pass
   V16 added great depth/motion but reset a few surfaces to plain green
   (losing the gold trim) and didn't touch wallet-hero/profile-hero/podium/
   drawer/avatar at all (those were still on old orange/amber glow). This
   file restores one consistent emerald + gold identity everywhere V16
   didn't reach, and is safe to lift straight into app.html/index.html
   since it only adds finishing touches. Loaded absolute last.
   ============================================================================ */

/* ---------- Restore the gold trim V16's flat wallet card lost ---------- */
.home-wallet-card{
  background:linear-gradient(135deg,#18a86f,#0a2a1c 130%)!important;
  border:1px solid rgba(245,185,66,.4)!important;position:relative;overflow:hidden;
}
.home-wallet-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#f5b942,#fff2cf,#f5b942);
}
.home-wallet-add{background:linear-gradient(135deg,#f5b942,#c9922c)!important;color:#20160a!important;font-weight:700!important}

/* ---------- Wallet / profile hero: same family as home-hero ---------- */
.wallet-hero,.profile-hero,.profile-hero-premium{
  background:radial-gradient(circle at 10% 10%,rgba(37,211,145,.15),transparent 30%),
             linear-gradient(145deg,#07120e,#0c2118)!important;
}
.avatar-ring,.drawer-avatar{
  box-shadow:0 0 0 4px rgba(245,185,66,.24),0 14px 30px rgba(0,0,0,.3)!important;
  background:linear-gradient(135deg,#f5b942,#fff2cf,#f5b942)!important;
}
.profile-name,.drawer-name{color:#fff!important;font-weight:800!important}
.profile-uid,.drawer-email{color:rgba(255,255,255,.65)!important}
.profile-stats-float{
  background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:18px!important;box-shadow:0 14px 30px rgba(0,0,0,.28)!important;
}

/* ---------- Podium: real gold / silver / bronze ---------- */
.podium-avatar{border:3px solid #e7eee9!important;box-shadow:0 10px 24px rgba(8,30,19,.1)!important}
.podium-item.first .podium-avatar{
  border-color:#f5b942!important;
  box-shadow:0 0 0 4px rgba(245,185,66,.24),0 16px 32px rgba(245,185,66,.3)!important;
}
.podium-rank-badge{color:#fff!important;font-weight:800!important;box-shadow:0 4px 10px rgba(0,0,0,.25)!important}
.podium-rank-badge.rank-1{background:linear-gradient(135deg,#f7d78a,#f5b942)!important}
.podium-rank-badge.rank-2{background:linear-gradient(135deg,#dae1e6,#9aa6b1)!important}
.podium-rank-badge.rank-3{background:linear-gradient(135deg,#e5ac77,#b27847)!important}
.podium-prize{color:#0a7f4f!important;font-weight:800!important}

/* ---------- Drawer / menu ---------- */
.drawer-profile{background:linear-gradient(150deg,#07120e,#0c2118 140%)!important}
.global-menu-icon{background:rgba(37,211,145,.12)!important;color:#0a7f4f!important;border-radius:12px!important}

/* ---------- Numbers get the display treatment ---------- */
.home-wallet-amt,.mc-prize,.podium-prize,.info-val,.home-stat-val{
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

/* ---------- Small consistency pass V16 left out ---------- */
.chip.active{background:#16a36b!important;border-color:#16a36b!important;box-shadow:0 6px 14px rgba(22,163,107,.32)!important}
.badge,.status-badge{border-radius:999px!important;font-weight:700!important}
.empty i{background:rgba(22,163,107,.1)!important;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Guides & News article cards: force dark card so text stays readable ---- */
html body a.card.article{
  background:linear-gradient(165deg,#15261e,#0f1c16)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#fff!important;text-decoration:none!important;overflow:hidden!important;padding:0!important;
}
html body a.card.article .art-body{background:transparent!important}
html body a.card.article h3{color:#fff!important}
html body a.card.article p{color:#b9ccc2!important}
html body a.card.article .art-date{color:#8fa79b!important}
html body a.card.article .art-cat{background:rgba(34,193,126,.16)!important;color:#22c17e!important}
html body a.card.article .art-cover-ph{background:rgba(34,193,126,.10)!important;color:#22c17e!important}

/* ---- Articles section: prominent on home ---- */
.articles-feature{padding-top:36px!important}
.articles-feature h2{font-size:clamp(1.7rem,5vw,2.4rem)!important}
.new-pill{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:#f5b942;color:#1a1200;font-size:.66rem;font-weight:800;letter-spacing:.06em;vertical-align:middle}
.articles-cta{background:#22c17e!important;color:#04150d!important;font-weight:700!important;padding:11px 20px!important;border-radius:999px!important;text-decoration:none!important;white-space:nowrap}


/* ===== css/hb-stability-v1.css ===== */
/* HB Battle Stability + Human Marketing Layer v1
   Loaded last so the visual system has one predictable finishing layer. */
html, body { max-width:100%; overflow-x:hidden; }
img, video, canvas, svg { max-width:100%; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }

:root {
  --hb-brand: #13a96b;
  --hb-brand-strong: #0b8f59;
  --hb-brand-soft: rgba(19,169,107,.12);
  --hb-gold: #d6a63d;
  --hb-ink: #14221b;
  --hb-muted: #64746c;
  --hb-surface: #ffffff;
  --hb-border: rgba(20,34,27,.10);
}
[data-theme="dark"] {
  --hb-brand: #e7b75c;
  --hb-brand-strong: #c98a2e;
  --hb-brand-soft: rgba(231,183,92,.13);
}
[data-theme="green"] {
  --hb-brand: #22e67a;
  --hb-brand-strong: #16bd60;
  --hb-brand-soft: rgba(34,230,122,.14);
}

/* Public/marketing pages: readable, editorial rather than template-like. */
.site-header, .marketing-home .hero, .marketing-home .content {
  isolation:isolate;
}
.marketing-home .content p,
.marketing-home .content li,
.marketing-home .note,
.marketing-home .faq-item p {
  line-height:1.75;
}
.marketing-home .hero h1,
.marketing-home .hero h2,
.marketing-home .content h2,
.marketing-home .content h3 {
  text-wrap:balance;
}
.marketing-home a:focus-visible,
.marketing-home button:focus-visible,
body:focus-visible {
  outline:3px solid var(--hb-brand);
  outline-offset:3px;
}

/* Consistent card language across public pages. */
.marketing-home .step,
.marketing-home .note,
.marketing-home .faq-item,
.marketing-home .guide-list a {
  border-radius:18px;
  box-shadow:0 8px 28px rgba(10,30,20,.06);
}

/* App: stable touch targets and safe-area spacing. */
@media (max-width: 700px) {
  button, .btn, .nav-item, .nav-fab, .header-action, .header-back {
    min-height:42px;
  }
  .bottom-nav {
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .auth-content {
    padding-left:max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right:max(18px, env(safe-area-inset-right, 0px)) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}
/* V30 editorial article layer */
.article-meta-line{margin-top:12px;opacity:.78;font-size:13px;line-height:1.6}
.article-detail{max-width:820px;margin-inline:auto}
.article-summary{margin:0 0 24px;padding:16px 18px;border-left:3px solid var(--accent,#f5a400);background:rgba(255,255,255,.035);border-radius:10px;font-size:17px;line-height:1.7}
.article-author-box,.article-sources{margin-top:28px;padding:18px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.025);line-height:1.7}
.article-author-box p,.article-sources p{margin:.4rem 0 0}
.art-author{margin-top:5px;font-size:12px;opacity:.68}
@media(max-width:640px){.article-detail{padding-inline:16px}.article-summary{font-size:15px}.article-meta-line{font-size:12px}}
/* V31 editorial polish */
.article-detail-cover{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:0 0 22px;box-shadow:var(--shadow,0 12px 40px rgba(0,0,0,.12));}
.article-detail h2{margin-top:30px;line-height:1.25;}
.article-detail h3{margin-top:24px;line-height:1.3;}
.article-detail p,.article-detail li{line-height:1.82;}
.article-detail blockquote{margin:24px 0;padding:16px 20px;border-left:4px solid var(--red,#ef4444);background:var(--off-white,#f7f7f7);border-radius:0 12px 12px 0;}
.article-author-box,.article-sources{margin-top:28px;padding:18px;border:1px solid var(--border,#ddd);border-radius:16px;background:var(--surface,#fff);}
@media(max-width:640px){.article-detail-cover{max-height:320px;border-radius:14px}.article-detail{padding-left:16px;padding-right:16px}.article-detail p,.article-detail li{font-size:15px;line-height:1.75}}


/* ===== css/ai-hb.css ===== */
/* ============================================================
   HBbattle AI — screen styles (user-supplied design, V1)
   Everything is scoped to #aiAssistantScreen so it can never leak
   into other screens, and the screen is pinned to the viewport so
   older global rules (.screen padding / min-height / animations)
   cannot push it around.
   ============================================================ */
#aiAssistantScreen{
  position:fixed!important;top:0;bottom:0;left:0;right:0;margin:0 auto!important;
  width:100%;max-width:430px;height:100vh;height:100dvh;min-height:0!important;
  padding:0!important;overflow:hidden!important;z-index:900;
  animation:none!important;transform:none!important;will-change:auto!important;
  background:#222!important;color:inherit;
}
#aiAssistantScreen:not(.active){display:none!important}
#aiAssistantScreen.active{display:block!important}
#aiAssistantScreen *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

#aiAssistantScreen .hbai{
  --bg1:#8bb8f5;--bg2:#c9a8c8;--text:#4a2e1f;--pill:#ffeaa0;
  --bubble-user:#2a1d14;--bubble-bot:rgba(255,255,255,.93);
  width:100%;height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);transition:background .4s;
}
#aiAssistantScreen .hbai.theme-default{--bg1:#8bb8f5;--bg2:#c9a8c8;--text:#4a2e1f;--pill:#ffeaa0}
#aiAssistantScreen .hbai.theme-dark{--bg1:#0f172a;--bg2:#1e293b;--text:#f1f5f9;--pill:#38bdf8}
#aiAssistantScreen .hbai.theme-neon{--bg1:#0f0f0f;--bg2:#1a2e1a;--text:#a3ff12;--pill:#a3ff12}
#aiAssistantScreen .hbai.theme-sunset{--bg1:#ff7e5f;--bg2:#feb47b;--text:#4a1a1a;--pill:#ffffff}

/* ---------- drawer ---------- */
#aiAssistantScreen .hbai-drawer{position:absolute;top:0;left:-88%;width:82%;max-width:340px;height:100%;background:#111;color:#ffeaa0;z-index:60;transition:left .3s ease;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
#aiAssistantScreen .hbai-drawer.open{left:0}
#aiAssistantScreen .hbai-back-row{display:flex;align-items:center;gap:8px;color:#ffeaa0;font-weight:800;font-size:14px;padding:4px 2px 14px;cursor:pointer;opacity:.9}
#aiAssistantScreen .hbai-new{background:var(--pill);color:#111;border:none;padding:12px;border-radius:12px;font-weight:900;font-size:14px;margin-bottom:16px;cursor:pointer;font-family:inherit}
#aiAssistantScreen .hbai-label{font-size:11px;opacity:.6;margin:4px 0 6px;letter-spacing:.06em;color:#ffeaa0}
#aiAssistantScreen .hbai-themes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
#aiAssistantScreen .hbai-theme{padding:10px;border-radius:10px;border:2px solid rgba(255,255,255,.2);font-size:12px;font-weight:700;cursor:pointer;text-align:center;color:#111}
#aiAssistantScreen .hbai-theme.active{border-color:var(--pill);box-shadow:0 0 10px var(--pill)}
#aiAssistantScreen .hbai-hist{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);padding:10px 12px;border-radius:10px;margin-bottom:6px;font-size:12px;cursor:pointer;color:#ffeaa0}
#aiAssistantScreen .hbai-hist.active{background:rgba(255,234,160,.18)}
#aiAssistantScreen .hbai-hist span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#aiAssistantScreen .hbai-hist b{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-weight:700;opacity:.7}
#aiAssistantScreen .hbai-hist-empty{font-size:12px;opacity:.55;padding:6px 2px;color:#ffeaa0}
#aiAssistantScreen .hbai-drawer-foot{margin-top:auto;padding-top:12px}
#aiAssistantScreen .hbai-hist.center{justify-content:center;text-align:center}
#aiAssistantScreen .hbai-hist.danger{color:#ff8a8a}

/* ---------- overlay + plus menu ---------- */
#aiAssistantScreen .hbai-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none}
#aiAssistantScreen .hbai-overlay.show{display:block}
#aiAssistantScreen .hbai-plus-menu{position:absolute;bottom:calc(86px + env(safe-area-inset-bottom));left:12px;background:#111;border-radius:18px;padding:8px;z-index:55;display:none;flex-direction:column;gap:2px;min-width:200px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
#aiAssistantScreen .hbai-plus-menu.show{display:flex}
#aiAssistantScreen .hbai-plus-opt{padding:12px 14px;color:#fff;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center;border-radius:12px;cursor:pointer}
#aiAssistantScreen .hbai-plus-opt:active{background:rgba(255,255,255,.1)}
#aiAssistantScreen .hbai-plus-opt.on{color:#111;background:var(--pill)}

/* ---------- header ---------- */
#aiAssistantScreen .hbai-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 8px;flex:none}
#aiAssistantScreen .hbai-header .hbai-edit{justify-self:end}
#aiAssistantScreen .hbai-hleft{display:flex;align-items:center}
#aiAssistantScreen .hbai-iconbtn{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;border-radius:50%;color:var(--text)}
#aiAssistantScreen .hbai-iconbtn svg{width:22px;height:22px;stroke:var(--text);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#aiAssistantScreen .hbai-dots{display:flex;gap:5px;padding:10px;cursor:pointer}
#aiAssistantScreen .hbai-dots b{width:8px;height:8px;background:var(--text);border-radius:50%;display:block}
#aiAssistantScreen .hbai-pill{background:var(--pill);padding:12px 30px;border-radius:999px;font-weight:900;font-size:17px;color:#111;box-shadow:0 12px 24px rgba(0,0,0,.25);transition:.3s;white-space:nowrap}
#aiAssistantScreen .hbai-edit{width:34px;height:34px;cursor:pointer}
#aiAssistantScreen .hbai-edit svg{width:100%;height:100%;stroke:var(--text);stroke-width:2;fill:none}

/* ---------- main / welcome / chat ---------- */
#aiAssistantScreen .hbai-main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#aiAssistantScreen .hbai-welcome{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 24px 40px;text-align:left}
#aiAssistantScreen .hbai-hb{font-size:clamp(46px,17vw,68px);font-weight:900;letter-spacing:-2px;color:var(--text);line-height:.92;text-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 0 rgba(0,0,0,.25),0 3px 0 rgba(0,0,0,.2),0 4px 0 rgba(0,0,0,.15),0 6px 12px rgba(0,0,0,.4);filter:drop-shadow(0 8px 16px rgba(0,0,0,.2))}
#aiAssistantScreen .hbai-sub{margin-top:12px;font-size:18px;font-weight:700;color:var(--text);opacity:.85}
#aiAssistantScreen .hbai-chat{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px 14px 18px;display:none;flex-direction:column;gap:12px}
#aiAssistantScreen .hbai-chat.show{display:flex}

#aiAssistantScreen .hbai-msg{display:flex;flex-direction:column;max-width:88%}
#aiAssistantScreen .hbai-msg.user{align-self:flex-end;align-items:flex-end}
#aiAssistantScreen .hbai-msg.ai{align-self:flex-start;align-items:flex-start}
#aiAssistantScreen .hbai-bubble{padding:12px 16px;border-radius:22px;font-size:14.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%}
#aiAssistantScreen .hbai-msg.user .hbai-bubble{background:var(--bubble-user);color:#fff8e0;border-bottom-right-radius:6px;white-space:pre-wrap}
#aiAssistantScreen .hbai-msg.ai .hbai-bubble{background:var(--bubble-bot);color:#111;border-bottom-left-radius:6px}
#aiAssistantScreen .hbai-bubble img.hbai-pic{display:block;max-width:100%;max-height:340px;border-radius:14px;margin-top:8px;cursor:pointer;object-fit:cover}
#aiAssistantScreen .hbai-bubble img.hbai-pic:first-child{margin-top:0}
#aiAssistantScreen .hbai-filechip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.14);font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiAssistantScreen .hbai-actions{display:flex;gap:4px;margin:4px 0 0 6px}
#aiAssistantScreen .hbai-act{border:none;background:rgba(0,0,0,.14);color:var(--text);width:30px;height:28px;border-radius:9px;cursor:pointer;font-size:12px;display:grid;place-items:center}

/* markdown inside bot bubbles */
#aiAssistantScreen .hbai-bubble p{margin:0 0 8px}
#aiAssistantScreen .hbai-bubble p:last-child{margin-bottom:0}
#aiAssistantScreen .hbai-bubble h2,#aiAssistantScreen .hbai-bubble h3,#aiAssistantScreen .hbai-bubble h4{margin:10px 0 6px;font-size:15px;font-weight:800;color:#111;line-height:1.3}
#aiAssistantScreen .hbai-bubble ul,#aiAssistantScreen .hbai-bubble ol{margin:4px 0 8px 18px;padding:0}
#aiAssistantScreen .hbai-bubble li{margin:2px 0;color:#111}
#aiAssistantScreen .hbai-bubble code{background:rgba(0,0,0,.08);padding:1px 5px;border-radius:6px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#aiAssistantScreen .hbai-bubble a{color:#1d4ed8;font-weight:700;text-decoration:underline}
#aiAssistantScreen .hbai-code{position:relative;margin:8px 0}
#aiAssistantScreen .hbai-code pre{margin:0;background:#17120d;color:#f5e9c8;padding:12px;padding-top:30px;border-radius:12px;overflow-x:auto;font-size:12.5px;line-height:1.5}
#aiAssistantScreen .hbai-code pre code{background:none;padding:0;color:inherit}
#aiAssistantScreen .hbai-code button{position:absolute;top:6px;right:6px;border:none;background:rgba(255,255,255,.14);color:#f5e9c8;border-radius:8px;padding:3px 9px;font-size:11px;font-weight:700;cursor:pointer}

/* typing */
#aiAssistantScreen .hbai-typing{align-self:flex-start;background:var(--bubble-bot);color:#111;border-radius:22px;border-bottom-left-radius:6px;padding:12px 16px;font-size:13px;display:flex;align-items:center;gap:8px}
#aiAssistantScreen .hbai-typing i{width:7px;height:7px;border-radius:50%;background:#111;opacity:.35;animation:hbaiDot 1s infinite ease-in-out}
#aiAssistantScreen .hbai-typing i:nth-child(2){animation-delay:.15s}
#aiAssistantScreen .hbai-typing i:nth-child(3){animation-delay:.3s}
@keyframes hbaiDot{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-4px);opacity:1}}

/* ---------- footer / composer ---------- */
#aiAssistantScreen .hbai-footer{flex:none;padding:8px 14px calc(14px + env(safe-area-inset-bottom))}
#aiAssistantScreen .hbai-attach{display:none;align-items:center;gap:10px;background:rgba(255,255,255,.92);color:#111;border-radius:16px;padding:8px 10px;margin-bottom:8px;font-size:12.5px;font-weight:600}
#aiAssistantScreen .hbai-attach.show{display:flex}
#aiAssistantScreen .hbai-attach img{width:40px;height:40px;border-radius:9px;object-fit:cover}
#aiAssistantScreen .hbai-attach .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aiAssistantScreen .hbai-attach .rm{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.1);cursor:pointer}
#aiAssistantScreen .hbai-mode{display:none;margin-bottom:8px;padding:7px 12px;border-radius:12px;background:rgba(0,0,0,.35);color:#fff;font-size:12px;font-weight:700}
#aiAssistantScreen .hbai-mode.show{display:block}
#aiAssistantScreen .hbai-bar{background:var(--pill);border-radius:999px;padding:7px 8px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 28px rgba(0,0,0,.28)}
#aiAssistantScreen .hbai-plus{width:42px;height:42px;border-radius:50%;border:2.5px solid #111;display:grid;place-items:center;font-size:24px;font-weight:900;flex-shrink:0;cursor:pointer;color:#111;line-height:1}
#aiAssistantScreen .hbai-field{flex:1;border:none!important;background:transparent!important;outline:none!important;box-shadow:none!important;font-size:16px;font-weight:600;color:#111!important;min-width:0;padding:0!important;margin:0!important;height:auto!important;font-family:inherit}
#aiAssistantScreen .hbai-field::placeholder{color:rgba(17,17,17,.55)}
#aiAssistantScreen .hbai-voice{background:linear-gradient(180deg,#5a96ff 0%,#2563eb 100%);color:#fff;border:none;border-radius:999px;padding:12px 16px;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap;font-family:inherit}
#aiAssistantScreen .hbai-voice.listening{background:linear-gradient(180deg,#ff6b6b,#dc2626);animation:hbaiPulse 1s infinite}
@keyframes hbaiPulse{50%{box-shadow:0 0 0 6px rgba(220,38,38,.25)}}
#aiAssistantScreen .hbai-send{background:#111;color:var(--pill);border:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}
#aiAssistantScreen .hbai-send svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
#aiAssistantScreen .hbai-send .stopsq{width:14px;height:14px;background:currentColor;border-radius:3px;display:none}
#aiAssistantScreen .hbai.busy .hbai-send svg{display:none}
#aiAssistantScreen .hbai.busy .hbai-send .stopsq{display:block}
#aiAssistantScreen .hbai-hidden{display:none!important}

@media(max-width:360px){
  #aiAssistantScreen .hbai-pill{padding:10px 20px;font-size:15px}
  #aiAssistantScreen .hbai-voice{padding:11px 11px;font-size:12px}
  #aiAssistantScreen .hbai-field{font-size:14px}
}
@media(prefers-reduced-motion:reduce){#aiAssistantScreen *{animation:none!important;transition:none!important}}

/* ---- reset: keep global app heading/paragraph/pre styles out of chat bubbles ---- */
#aiAssistantScreen .hbai-bubble h2,#aiAssistantScreen .hbai-bubble h3,#aiAssistantScreen .hbai-bubble h4{
  text-transform:none!important;letter-spacing:0!important;color:#111!important;font-family:inherit!important;
  font-size:15px!important;font-weight:800!important;line-height:1.3!important;margin:10px 0 6px!important;padding:0!important;border:0!important;background:none!important}
#aiAssistantScreen .hbai-bubble h2:first-child,#aiAssistantScreen .hbai-bubble h3:first-child,#aiAssistantScreen .hbai-bubble h4:first-child{margin-top:0!important}
#aiAssistantScreen .hbai-bubble p{margin:0 0 8px!important;padding:0!important;color:#111!important;font-size:14.5px!important;line-height:1.5!important}
#aiAssistantScreen .hbai-bubble p:last-child{margin-bottom:0!important}
#aiAssistantScreen .hbai-bubble ul,#aiAssistantScreen .hbai-bubble ol{margin:4px 0 8px 18px!important;padding:0!important}
#aiAssistantScreen .hbai-bubble li{margin:2px 0!important;color:#111!important;font-size:14.5px!important}
#aiAssistantScreen .hbai-bubble b,#aiAssistantScreen .hbai-bubble strong{color:#111!important;font-weight:800!important}
#aiAssistantScreen .hbai-bubble pre{margin:0!important}
#aiAssistantScreen .hbai-bubble .hbai-code{margin:8px 0!important}
#aiAssistantScreen .hbai-bubble .hbai-code pre{padding:30px 12px 12px!important;border-radius:12px!important;background:#17120d!important}
#aiAssistantScreen .hbai-bubble .hbai-code pre code{color:#f5e9c8!important;background:none!important;display:block;white-space:pre}
#aiAssistantScreen .hbai-bubble .hbai-code button{position:absolute!important;top:6px!important;right:6px!important;width:auto!important;height:auto!important;min-height:0!important;min-width:0!important;padding:3px 10px!important;margin:0!important;border-radius:8px!important;font-size:11px!important;line-height:1.4!important}
#aiAssistantScreen .hbai-msg.user .hbai-bubble{color:#fff8e0!important}
#aiAssistantScreen .hbai-actions .hbai-act{width:30px!important;height:28px!important;min-height:0!important;min-width:0!important;padding:0!important;margin:0!important;line-height:1}


/* ===== css/hb-home-final-fix.css ===== */
/* ============================================================
   HB Battle — Home screen final fix (2026-09-28)
   Loaded LAST. Fixes: header icons cut off on the right, wallet
   card overflow/edge artefacts, invisible Joined/Earned numbers
   (light text on white card) and the cramped "Play. Compete. Win."
   promo. Scoped to #dashboardScreen so no other screen changes.
   ============================================================ */

/* ---------- 1) Header: name + bell + ⋮ + avatar must fit ---------- */
html body #dashboardScreen .home-hero{overflow:hidden!important;box-sizing:border-box!important}
html body #dashboardScreen .home-hero > div{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;
}
html body #dashboardScreen .home-hero > div > div:first-child{flex:1 1 0!important;min-width:0!important}
html body #dashboardScreen .home-hero > div > div:last-child{
  flex:0 0 auto!important;display:flex!important;align-items:center!important;gap:10px!important;
}
html body #dashboardScreen .home-name{
  max-width:100%!important;font-size:clamp(22px,7vw,30px)!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
html body #dashboardScreen .home-hero .global-menu-btn{width:34px!important;height:34px!important;margin:0!important;flex:0 0 34px!important}
html body #dashboardScreen #dashAvatar{width:36px!important;height:36px!important;flex:0 0 36px!important;overflow:hidden!important}
html body #dashboardScreen #dashAvatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}

/* ---------- 2) Wallet card: clean layout, nothing clipped ---------- */
html body #dashboardScreen .home-wallet-card{
  position:relative!important;overflow:hidden!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  padding:22px 18px!important;min-height:150px!important;
  width:auto!important;max-width:100%!important;
}
html body #dashboardScreen .home-wallet-card::after{display:none!important}   /* stray edge glow */
html body #dashboardScreen .home-wallet-card > div:first-child{flex:1 1 auto!important;min-width:0!important}
html body #dashboardScreen .home-wallet-card > div:last-child{flex:0 0 auto!important;align-items:center!important}
html body #dashboardScreen .home-wallet-label{white-space:nowrap!important;font-size:12px!important;letter-spacing:1.2px!important}
html body #dashboardScreen .home-wallet-amt{font-size:clamp(30px,10vw,40px)!important;white-space:nowrap!important;line-height:1.05!important}
html body #dashboardScreen .wallet-icon-badge{width:84px!important;height:84px!important}
html body #dashboardScreen .home-wallet-add{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  white-space:nowrap!important;padding:8px 16px!important;font-size:13px!important;border-radius:12px!important;
}

/* ---------- 3) Stats row: numbers were light text on a white card ---------- */
html body #dashboardScreen .home-card-float{
  display:flex!important;align-items:center!important;box-sizing:border-box!important;
  background:linear-gradient(160deg,#122019,#09140F)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
}
html body #dashboardScreen .home-stat{flex:1 1 0!important;min-width:0!important;text-align:center!important}
html body #dashboardScreen .home-stat-val{
  color:#F7F5F2!important;-webkit-text-fill-color:#F7F5F2!important;
  font-size:25px!important;font-weight:900!important;line-height:1!important;opacity:1!important;
}
html body #dashboardScreen .home-stat-val.red{color:#FFC83D!important;-webkit-text-fill-color:#FFC83D!important}
html body #dashboardScreen .home-stat-label{color:#FF8F5E!important;opacity:1!important;font-size:10px!important;font-weight:800!important}
html body #dashboardScreen .home-stat-div{background:rgba(255,255,255,.10)!important;width:1px!important;align-self:stretch!important}
/* Light theme keeps the white card, with dark, readable numbers */
html[data-theme="light"] body #dashboardScreen .home-card-float{background:#fff!important;border-color:#DCE7E1!important;box-shadow:0 10px 26px rgba(18,32,25,.08)!important}
html[data-theme="light"] body #dashboardScreen .home-stat-val{color:#15171d!important;-webkit-text-fill-color:#15171d!important}
html[data-theme="light"] body #dashboardScreen .home-stat-val.red{color:#B97B00!important;-webkit-text-fill-color:#B97B00!important}
html[data-theme="light"] body #dashboardScreen .home-stat-label{color:#6c7480!important}
html[data-theme="light"] body #dashboardScreen .home-stat-div{background:#E3ECE7!important}

/* ---------- 4) Promo: title on one line, button never squeezes it ---------- */
html body #dashboardScreen .home-promo{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  box-sizing:border-box!important;padding:20px 18px!important;min-height:120px!important;overflow:hidden!important;
}
html body #dashboardScreen .home-promo > div:first-child{flex:1 1 auto!important;min-width:0!important}
html body #dashboardScreen .home-promo-title{font-size:clamp(20px,6.4vw,26px)!important;line-height:1.1!important;white-space:normal!important}
html body #dashboardScreen .home-promo-sub{max-width:none!important;font-size:13px!important;margin-top:6px!important}
html body #dashboardScreen .home-promo-btn{flex:0 0 auto!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;gap:6px!important}

/* very small phones */
@media (max-width:360px){
  html body #dashboardScreen .wallet-icon-badge{width:68px!important;height:68px!important}
  html body #dashboardScreen .home-promo-btn{padding:10px 12px!important}
}

/* ---------- 5) Leftover artefacts seen in QA render ---------- */
/* wallet card: top gold trim only — no vertical bar on the left edge */
html body #dashboardScreen .home-wallet-card::before{
  content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;
  width:auto!important;height:3px!important;border-radius:0!important;transform:none!important;rotate:none!important;animation:none!important;opacity:1!important;
  background:linear-gradient(90deg,#f5b942,#fff2cf,#f5b942)!important;box-shadow:none!important;
}
/* stats: no tinted pill behind each number */
html body #dashboardScreen .home-stat{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}


/* ===== css/hb-final-stability-v2.css ===== */

/* ============================================================
   HB BATTLE — FINAL UI STABILITY PATCH v2
   2026-09-30
   Fixes mixed-theme cascade bugs caused by legacy unscoped premium
   layers. Theme is now authoritative for the major app surfaces.
   Also fixes AI mobile bottom overlap/scroll and readability.
   ============================================================ */

/* ---------- APP THEME BASE ---------- */
html[data-theme="light"] body,
html[data-theme="light"] body.app{
  background:#f4f7f5 !important;
  color:#15171d !important;
}
html[data-theme="light"] .app{
  background:#f4f7f5 !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] body.app,
html[data-theme="green"] body,
html[data-theme="green"] body.app{
  background:#08110d !important;
}
html[data-theme="dark"] .app,
html[data-theme="green"] .app{
  background:#0c1410 !important;
}

/* ---------- HOME / QUICK ACTIONS ---------- */
html[data-theme="light"] #dashboardScreen .qa-grid{
  background:transparent !important;
}
html[data-theme="light"] #dashboardScreen .qa-card{
  background:#fff !important;
  color:#15171d !important;
  border:1px solid #dfe8e3 !important;
  box-shadow:0 10px 26px rgba(18,32,25,.08) !important;
}
html[data-theme="light"] #dashboardScreen .qa-card-title{
  color:#15171d !important;
  -webkit-text-fill-color:#15171d !important;
  opacity:1 !important;
}
html[data-theme="light"] #dashboardScreen .qa-card-sub{
  color:#68746e !important;
  -webkit-text-fill-color:#68746e !important;
  opacity:1 !important;
}
html[data-theme="light"] #dashboardScreen .qa-card::after{
  color:#87928d !important;
}
html[data-theme="dark"] #dashboardScreen .qa-card,
html[data-theme="green"] #dashboardScreen .qa-card{
  background:linear-gradient(145deg,#17221c,#0d1712) !important;
  color:#f2f6f3 !important;
  border-color:rgba(37,211,145,.14) !important;
}
html[data-theme="dark"] #dashboardScreen .qa-card-title,
html[data-theme="green"] #dashboardScreen .qa-card-title{
  color:#f2f6f3 !important;
  -webkit-text-fill-color:#f2f6f3 !important;
}
html[data-theme="dark"] #dashboardScreen .qa-card-sub,
html[data-theme="green"] #dashboardScreen .qa-card-sub{
  color:#aab8b1 !important;
  -webkit-text-fill-color:#aab8b1 !important;
}
html[data-theme="dark"] #dashboardScreen .qa-card::after,
html[data-theme="green"] #dashboardScreen .qa-card::after{color:#83948b !important}

/* ---------- TOURNAMENTS / FILTER CHIPS ---------- */
html[data-theme="light"] #tournamentScreen,
html[data-theme="light"] #myMatchesScreen,
html[data-theme="light"] #leaderboardScreen{
  background:#f7f9f8 !important;
  color:#15171d !important;
}
html[data-theme="light"] #tournamentScreen .header,
html[data-theme="light"] #myMatchesScreen .header,
html[data-theme="light"] #leaderboardScreen .header{
  background:rgba(255,255,255,.97) !important;
  color:#15171d !important;
  border-bottom:1px solid #e1e9e5 !important;
}
html[data-theme="light"] #tournamentScreen .chip,
html[data-theme="light"] #myMatchesScreen .chip,
html[data-theme="light"] #leaderboardScreen .chip{
  background:#fff !important;
  color:#5d6863 !important;
  -webkit-text-fill-color:#5d6863 !important;
  border:1px solid #dce5e0 !important;
  box-shadow:0 2px 8px rgba(15,40,28,.04) !important;
}
html[data-theme="light"] #tournamentScreen .chip.active,
html[data-theme="light"] #myMatchesScreen .chip.active,
html[data-theme="light"] #leaderboardScreen .chip.active{
  background:linear-gradient(135deg,#ff7541,#e5501c) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-color:transparent !important;
}
html[data-theme="dark"] #tournamentScreen,
html[data-theme="dark"] #myMatchesScreen,
html[data-theme="dark"] #leaderboardScreen,
html[data-theme="green"] #tournamentScreen,
html[data-theme="green"] #myMatchesScreen,
html[data-theme="green"] #leaderboardScreen{
  background:#0c1510 !important;
  color:#edf5f0 !important;
}
html[data-theme="dark"] #tournamentScreen .header,
html[data-theme="dark"] #myMatchesScreen .header,
html[data-theme="dark"] #leaderboardScreen .header,
html[data-theme="green"] #tournamentScreen .header,
html[data-theme="green"] #myMatchesScreen .header,
html[data-theme="green"] #leaderboardScreen .header{
  background:rgba(8,17,13,.97) !important;
  color:#f1f5f3 !important;
  border-color:rgba(37,211,145,.12) !important;
}
html[data-theme="dark"] #tournamentScreen .chip,
html[data-theme="dark"] #myMatchesScreen .chip,
html[data-theme="dark"] #leaderboardScreen .chip,
html[data-theme="green"] #tournamentScreen .chip,
html[data-theme="green"] #myMatchesScreen .chip,
html[data-theme="green"] #leaderboardScreen .chip{
  background:#131e18 !important;
  color:#c1cec7 !important;
  border-color:rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] #tournamentScreen .chip.active,
html[data-theme="dark"] #myMatchesScreen .chip.active,
html[data-theme="dark"] #leaderboardScreen .chip.active,
html[data-theme="green"] #tournamentScreen .chip.active,
html[data-theme="green"] #myMatchesScreen .chip.active,
html[data-theme="green"] #leaderboardScreen .chip.active{
  background:#16a36b !important;color:#fff !important;border-color:#16a36b !important;
}

/* ---------- LEADERBOARD PODIUM + LIST ---------- */
html[data-theme="light"] #leaderboardScreen #seasonTabsBar,
html[data-theme="light"] #leaderboardScreen > div[style*="border-bottom"]{
  background:#fff !important;
  color:#5d6863 !important;
}
html[data-theme="light"] #leaderboardScreen .leader-podium{
  background:linear-gradient(180deg,#fff,#f9fbfa) !important;
  border:1px solid #e0e8e4 !important;
  color:#15171d !important;
}
html[data-theme="light"] #leaderboardScreen .podium-name{
  color:#15171d !important;
  -webkit-text-fill-color:#15171d !important;
  font-weight:800 !important;
}
html[data-theme="light"] #leaderboardScreen .podium-prize{
  color:#a87500 !important;
  -webkit-text-fill-color:#a87500 !important;
}
html[data-theme="light"] #leaderboardScreen .leader-item{
  background:#fff !important;
  color:#15171d !important;
  border:1px solid #e1e9e5 !important;
  box-shadow:0 8px 20px rgba(18,32,25,.06) !important;
}
html[data-theme="light"] #leaderboardScreen .leader-name{
  color:#15171d !important;
  -webkit-text-fill-color:#15171d !important;
}
html[data-theme="light"] #leaderboardScreen .leader-rank{
  color:#e5501c !important;
}
html[data-theme="light"] #leaderboardScreen .leader-prize{
  color:#b77900 !important;
}
html[data-theme="dark"] #leaderboardScreen .leader-podium,
html[data-theme="green"] #leaderboardScreen .leader-podium{
  background:linear-gradient(180deg,#0e1b15,#09110d) !important;
  border-color:rgba(37,211,145,.12) !important;
  color:#edf5f0 !important;
}
html[data-theme="dark"] #leaderboardScreen .podium-name,
html[data-theme="green"] #leaderboardScreen .podium-name{
  color:#edf5f0 !important;-webkit-text-fill-color:#edf5f0 !important;
}
html[data-theme="dark"] #leaderboardScreen .podium-prize,
html[data-theme="green"] #leaderboardScreen .podium-prize{
  color:#f5c34f !important;-webkit-text-fill-color:#f5c34f !important;
}
html[data-theme="dark"] #leaderboardScreen .leader-item,
html[data-theme="green"] #leaderboardScreen .leader-item{
  background:#111d17 !important;color:#edf5f0 !important;border-color:rgba(37,211,145,.12) !important;
}
html[data-theme="dark"] #leaderboardScreen .leader-name,
html[data-theme="green"] #leaderboardScreen .leader-name{
  color:#edf5f0 !important;-webkit-text-fill-color:#edf5f0 !important;
}

/* ---------- WALLET TRANSACTIONS ---------- */
html[data-theme="light"] #walletScreen{
  background:#f5f8f6 !important;color:#15171d !important;
}
html[data-theme="light"] #walletScreen #walletTxns{
  background:#fff !important;border-color:#e0e8e4 !important;
}
html[data-theme="light"] #walletScreen .txn-item{
  background:#fff !important;color:#15171d !important;border-bottom-color:#e8eeeb !important;
}
html[data-theme="light"] #walletScreen .txn-title{
  color:#1c2420 !important;-webkit-text-fill-color:#1c2420 !important;
}
html[data-theme="light"] #walletScreen .txn-date{
  color:#707b76 !important;-webkit-text-fill-color:#707b76 !important;
}
html[data-theme="light"] #walletScreen .txn-amount.credit{
  color:#0a9a61 !important;-webkit-text-fill-color:#0a9a61 !important;
}
html[data-theme="light"] #walletScreen .txn-amount.debit{
  color:#d83b35 !important;-webkit-text-fill-color:#d83b35 !important;
}

/* ---------- ADD MONEY MODAL — NO INVISIBLE TEXT ---------- */
html[data-theme="light"] .overlay .modal{
  background:#fff !important;color:#171a21 !important;border-color:#e0e8e4 !important;
}
html[data-theme="light"] .overlay .modal .modal-title,
html[data-theme="light"] .overlay .modal .sec-title{
  color:#171a21 !important;-webkit-text-fill-color:#171a21 !important;
}
html[data-theme="light"] .overlay .modal .form-label{
  color:#e5501c !important;-webkit-text-fill-color:#e5501c !important;opacity:1 !important;
}
html[data-theme="light"] .overlay .modal #bankOptionsContainer [id^="bankOpt"]{
  background:#fff !important;color:#171a21 !important;
}
html[data-theme="light"] .overlay .modal #bankOptionsContainer [id^="bankOpt"] div[style*="font-weight:700"]{
  color:#171a21 !important;-webkit-text-fill-color:#171a21 !important;
}
html[data-theme="light"] .overlay .modal #bankOptionsContainer [id^="bankOpt"] div[style*="font-size:11px"]{
  color:#68746e !important;-webkit-text-fill-color:#68746e !important;
}
html[data-theme="light"] .overlay .modal #bankDetailsBox{
  color:#171a21 !important;
}
html[data-theme="light"] .overlay .modal #bankDetailsText,
html[data-theme="light"] .overlay .modal #bankDetailsText *{
  color:#343b37 !important;-webkit-text-fill-color:#343b37 !important;
}
html[data-theme="light"] .overlay .modal .amount-chips .chip{
  background:#f5f8f6 !important;color:#d65324 !important;-webkit-text-fill-color:#d65324 !important;
  border-color:#e6ece8 !important;
}
html[data-theme="light"] .overlay .modal .form-input{
  background:#fff !important;color:#1b1e26 !important;-webkit-text-fill-color:#1b1e26 !important;
  border-color:#dfe7e2 !important;
}
html[data-theme="dark"] .overlay .modal,
html[data-theme="green"] .overlay .modal{
  background:linear-gradient(160deg,#141d18,#0b120f) !important;
  color:#eef5f1 !important;border-color:rgba(37,211,145,.14) !important;
}
html[data-theme="dark"] .overlay .modal .modal-title,
html[data-theme="dark"] .overlay .modal .sec-title,
html[data-theme="green"] .overlay .modal .modal-title,
html[data-theme="green"] .overlay .modal .sec-title{
  color:#eef5f1 !important;-webkit-text-fill-color:#eef5f1 !important;
}
html[data-theme="dark"] .overlay .modal .form-label,
html[data-theme="green"] .overlay .modal .form-label{
  color:#ff9a72 !important;-webkit-text-fill-color:#ff9a72 !important;
}
html[data-theme="dark"] .overlay .modal #bankOptionsContainer [id^="bankOpt"],
html[data-theme="green"] .overlay .modal #bankOptionsContainer [id^="bankOpt"]{
  background:#111a15 !important;color:#eef5f1 !important;
}
html[data-theme="dark"] .overlay .modal #bankOptionsContainer [id^="bankOpt"] div[style*="font-weight:700"],
html[data-theme="green"] .overlay .modal #bankOptionsContainer [id^="bankOpt"] div[style*="font-weight:700"]{
  color:#eef5f1 !important;-webkit-text-fill-color:#eef5f1 !important;
}
html[data-theme="dark"] .overlay .modal #bankDetailsBox,
html[data-theme="green"] .overlay .modal #bankDetailsBox{
  color:#eef5f1 !important;
}
html[data-theme="dark"] .overlay .modal #bankDetailsText,
html[data-theme="dark"] .overlay .modal #bankDetailsText *,
html[data-theme="green"] .overlay .modal #bankDetailsText,
html[data-theme="green"] .overlay .modal #bankDetailsText *{
  color:#eef5f1 !important;-webkit-text-fill-color:#eef5f1 !important;
}

/* ---------- GLOBAL BOTTOM NAV ---------- */
html[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(18,55,40,.10) !important;
  box-shadow:0 -12px 32px rgba(18,55,40,.10) !important;
}
html[data-theme="light"] .bottom-nav .nav-item{color:#697670 !important}
html[data-theme="light"] .bottom-nav .nav-item.active,
html[data-theme="light"] .bottom-nav .nav-item.active i{color:#0a9a61 !important}
html[data-theme="dark"] .bottom-nav,
html[data-theme="green"] .bottom-nav{
  background:rgba(7,17,13,.96) !important;
  border-color:rgba(37,211,145,.22) !important;
  box-shadow:0 -12px 34px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .bottom-nav .nav-item,
html[data-theme="green"] .bottom-nav .nav-item{color:#8a9891 !important}
html[data-theme="dark"] .bottom-nav .nav-item.active,
html[data-theme="green"] .bottom-nav .nav-item.active,
html[data-theme="dark"] .bottom-nav .nav-item.active i,
html[data-theme="green"] .bottom-nav .nav-item.active i{color:#28d98b !important}



/* ===== css/hb-contrast-unified.css ===== */
/* HB Battle unified final contrast + responsive safety layer.
   Loaded last on every public HTML page to neutralize conflicting legacy overrides. */
:root{--hb-ink:#14251d;--hb-muted:#52645b;--hb-green:#087d50;--hb-gold:#e8bd61;--hb-card:#f7faf8;--hb-border:rgba(15,45,31,.14)}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}
img,video,canvas,svg{max-width:100%}
/* White/pale cards must always use readable dark text. */
.step,.faq-item,.guide-list li,.note,.card,.guide-card,.article-card,.popular-guide-card{
  background:#f4f7f5!important;color:var(--hb-ink)!important;border:1px solid var(--hb-border)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.10)!important;border-radius:22px!important
}
.step h1,.step h2,.step h3,.step h4,.step p,.step li,.faq-item summary,.faq-item p,
.guide-list li,.guide-list li a,.note,.note strong,.card h1,.card h2,.card h3,.card p,
.guide-card a,.article-card a,.popular-guide-card a{color:var(--hb-ink)!important;opacity:1!important}
.guide-list{padding-left:0;list-style:none;display:grid;gap:14px}
.guide-list li{padding:0!important;overflow:hidden}
.guide-list li a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px;min-height:76px;text-decoration:none!important;font-weight:650;line-height:1.55;overflow-wrap:anywhere}
.guide-list li a:hover,.guide-list li a:focus-visible{color:var(--hb-green)!important;background:#eaf3ee;outline-offset:3px}
.faq-item summary{cursor:pointer;font-weight:700;line-height:1.55;padding:20px 22px}
.faq-item p{line-height:1.75;padding:0 22px 20px}
.note{padding:24px!important;line-height:1.8!important}
.step{padding:24px!important}
.step p,.card p{line-height:1.75}
/* Keep fixed app CTA from covering page content or controls on small screens. */
.mega-cta-bar{max-width:calc(100vw - 24px)!important;box-sizing:border-box;z-index:50}
.mega-cta-bar a,.mega-cta-bar button{white-space:normal}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
:focus-visible{outline:3px solid #e8bd61!important;outline-offset:3px}
@media(max-width:600px){
 .guide-list li a{padding:18px 20px;min-height:68px;font-size:clamp(15px,4.2vw,18px)}
 .step{padding:20px!important}
 .note{padding:20px!important}
 .mega-cta-bar{gap:8px!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ===== css/hb-mobile-qa-v27.css ===== */
/* HB Battle — mobile QA pass v27
   Fixes from device screenshots:
   - bottom navigation no longer covers page content or modals
   - leaderboard ranks #10/#11... stay on one line
   - leaderboard rows reserve space for name + prize correctly
   - light-theme podium avatars are visible
   - home header controls stay inside the viewport
   - deposit modal gets full usable height above the nav
*/

@media (max-width:700px){
  html,body{overflow-x:hidden!important;max-width:100%!important}
  body{padding-bottom:0!important}

  /* Every app screen gets enough scroll room for the floating nav. */
  .app .screen{box-sizing:border-box!important;padding-bottom:124px!important;overflow-x:hidden!important}
  #leaderboardScreen #leaderList,
  #notificationsScreen #notifList,
  #myMatchesScreen #myMatchesList{padding-bottom:12px!important}

  /* Floating nav: stable width + safe-area clearance. */
  #sharedBottomNav{
    left:10px!important;right:10px!important;width:auto!important;max-width:none!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    height:68px!important;min-height:68px!important;padding:7px 7px 6px!important;
    border-radius:24px!important;box-sizing:border-box!important;
    z-index:9999!important;
  }
  #sharedBottomNav .nav-item,
  #sharedBottomNav .nav-item-center{min-width:0!important;overflow:visible!important}
  #sharedBottomNav .nav-item span{white-space:nowrap!important;line-height:1!important}
  #sharedBottomNav .nav-fab{width:58px!important;height:58px!important;margin-top:-25px!important;border-radius:50%!important}

  /* Never allow the bottom nav to sit above a modal. */
  .overlay.active{z-index:30000!important}
  .modal{max-height:calc(100dvh - 18px)!important;padding-bottom:max(28px,env(safe-area-inset-bottom))!important}

  /* Dashboard header: reserve a real column for the controls. */
  #dashboardScreen .home-hero > div{gap:8px!important}
  #dashboardScreen .home-hero > div > div:first-child{min-width:0!important;max-width:calc(100% - 116px)!important}
  #dashboardScreen .home-name{max-width:100%!important;font-size:clamp(22px,7vw,30px)!important}
  #dashboardScreen .home-hero > div > div:last-child{gap:9px!important;flex:0 0 auto!important}
  #dashboardScreen #dashAvatar{width:36px!important;height:36px!important;flex:0 0 36px!important}

  /* Leaderboard list: rank must never wrap (#10 was rendering as #1 / 0). */
  #leaderboardScreen .leader-item{
    display:flex!important;align-items:center!important;gap:10px!important;
    min-width:0!important;box-sizing:border-box!important;
  }
  #leaderboardScreen .leader-rank{
    flex:0 0 42px!important;width:42px!important;min-width:42px!important;
    height:30px!important;padding:0!important;white-space:nowrap!important;
    overflow:visible!important;text-align:center!important;
    font-size:14px!important;letter-spacing:-.2px!important;
  }
  #leaderboardScreen .leader-avatar{flex:0 0 44px!important;width:44px!important;height:44px!important}
  #leaderboardScreen .leader-name{min-width:0!important;flex:1 1 auto!important}
  #leaderboardScreen .leader-item > div:last-child{flex:0 0 auto!important;min-width:88px!important;max-width:38%!important}
  #leaderboardScreen .leader-prize{white-space:nowrap!important;font-size:14px!important}

  /* Podium is deliberately compact on phones; names remain readable. */
  #leaderboardScreen .leader-podium{gap:7px!important;padding:30px 10px 24px!important}
  #leaderboardScreen .podium-item{min-width:0!important}
  #leaderboardScreen .podium-name{max-width:105px!important}

  /* Light theme: don't wash the podium avatars into the background. */
  html[data-theme="light"] #leaderboardScreen .leader-podium{
    background:linear-gradient(180deg,#ffffff 0%,#f5faf7 100%)!important;
    border:1px solid #dbe8e1!important;
  }
  html[data-theme="light"] #leaderboardScreen .podium-avatar{
    background:linear-gradient(145deg,#eef8f3,#dcefe6)!important;
    border:3px solid #9ccdb6!important;
    color:#18885f!important;
    box-shadow:0 10px 24px rgba(24,136,95,.16)!important;
  }
  html[data-theme="light"] #leaderboardScreen .podium-item.first .podium-avatar{
    background:radial-gradient(circle at 35% 30%,#fff7c9,#eaf5df 70%)!important;
    border-color:#e5b83f!important;
    color:#c38a00!important;
  }
}


/* ===== css/hb-neon-marketing-match.css ===== */
/* HB Battle — Neon Mode / Marketing Green Match
   Final theme override: align the app's Neon mode with the public marketing pages.
   Scope: only html[data-theme="green"]. */
html[data-theme="green"]{
  --neon-bg:#06110c;
  --neon-bg2:#0a1913;
  --neon-panel:#0d1d16;
  --neon-panel2:#10271d;
  --neon-green:#35e39d;
  --neon-green2:#42e7a4;
  --neon-gold:#f0cc76;
  --neon-text:#f3f8f5;
  --neon-muted:#a9bdb2;
  --neon-line:rgba(194,222,207,.13);
  --neon-glow:rgba(53,227,157,.32);
}

html[data-theme="green"] body,
html[data-theme="green"] body.app{
  background:
    radial-gradient(circle at 12% -8%,rgba(53,227,157,.13),transparent 34%),
    radial-gradient(circle at 100% 12%,rgba(240,204,118,.07),transparent 30%),
    linear-gradient(180deg,var(--neon-bg) 0%,var(--neon-bg2) 100%) !important;
  color:var(--neon-text) !important;
}

html[data-theme="green"] .card,
html[data-theme="green"] .wallet-card,
html[data-theme="green"] .profile-card,
html[data-theme="green"] .stats-card,
html[data-theme="green"] .tournament-card,
html[data-theme="green"] .leaderboard-card,
html[data-theme="green"] .transaction-card,
html[data-theme="green"] .modal-content,
html[data-theme="green"] .payment-card,
html[data-theme="green"] .withdraw-card,
html[data-theme="green"] .menu-card,
html[data-theme="green"] .tour-card,
html[data-theme="green"] .info-card,
html[data-theme="green"] .qa-card{
  background:linear-gradient(145deg,var(--neon-panel2),var(--neon-panel)) !important;
  border-color:var(--neon-line) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.22) !important;
}

html[data-theme="green"] .wallet-card,
html[data-theme="green"] .home-wallet-card{
  border-color:rgba(53,227,157,.30) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.25),0 0 28px rgba(53,227,157,.10) !important;
}

html[data-theme="green"] h1,
html[data-theme="green"] h2,
html[data-theme="green"] h3,
html[data-theme="green"] h4,
html[data-theme="green"] h5,
html[data-theme="green"] h6,
html[data-theme="green"] .balance,
html[data-theme="green"] .stat-value,
html[data-theme="green"] .home-wallet-amt{
  color:var(--neon-text) !important;
}

html[data-theme="green"] .balance,
html[data-theme="green"] .home-wallet-amt,
html[data-theme="green"] .stat-value,
html[data-theme="green"] .amount{
  text-shadow:0 0 16px rgba(53,227,157,.18) !important;
}

html[data-theme="green"] p,
html[data-theme="green"] .subtitle,
html[data-theme="green"] .muted,
html[data-theme="green"] .info-label,
html[data-theme="green"] label{
  color:var(--neon-muted) !important;
}

html[data-theme="green"] a,
html[data-theme="green"] .active,
html[data-theme="green"] .nav-item.active,
html[data-theme="green"] .active-tab{
  color:var(--neon-green2) !important;
}

html[data-theme="green"] button,
html[data-theme="green"] .btn,
html[data-theme="green"] .primary-btn,
html[data-theme="green"] .join-btn,
html[data-theme="green"] .add-money-btn,
html[data-theme="green"] .submit-btn,
html[data-theme="green"] .tour-join-btn,
html[data-theme="green"] .btn-primary{
  background:linear-gradient(135deg,var(--neon-green2),#159968) !important;
  color:#041009 !important;
  border-color:rgba(66,231,164,.55) !important;
  box-shadow:0 0 0 1px rgba(66,231,164,.12),0 10px 28px rgba(53,227,157,.18) !important;
}

html[data-theme="green"] .secondary-btn,
html[data-theme="green"] .outline-btn,
html[data-theme="green"] .btn-ghost{
  background:rgba(255,255,255,.025) !important;
  color:var(--neon-text) !important;
  border:1px solid var(--neon-line) !important;
}

html[data-theme="green"] input,
html[data-theme="green"] select,
html[data-theme="green"] textarea,
html[data-theme="green"] .form-control{
  background:#091810 !important;
  color:var(--neon-text) !important;
  border-color:var(--neon-line) !important;
}
html[data-theme="green"] input:focus,
html[data-theme="green"] select:focus,
html[data-theme="green"] textarea:focus{
  border-color:var(--neon-green) !important;
  box-shadow:0 0 0 3px rgba(53,227,157,.12),0 0 18px rgba(53,227,157,.10) !important;
}
html[data-theme="green"] input::placeholder,
html[data-theme="green"] textarea::placeholder{color:#789187 !important;}

html[data-theme="green"] .bottom-nav,
html[data-theme="green"] .bottom-navigation,
html[data-theme="green"] .navbar-bottom,
html[data-theme="green"] #sharedBottomNav{
  background:rgba(7,17,13,.94) !important;
  border-color:var(--neon-line) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.42) !important;
  backdrop-filter:blur(18px);
}
html[data-theme="green"] #sharedBottomNav .nav-item.active i,
html[data-theme="green"] #sharedBottomNav .nav-item.active{
  color:var(--neon-green2) !important;
  text-shadow:0 0 14px rgba(53,227,157,.38) !important;
}
html[data-theme="green"] #sharedBottomNav .nav-fab{
  background:linear-gradient(145deg,#10271d,#0a1913) !important;
  border-color:var(--neon-green) !important;
  color:var(--neon-green2) !important;
  box-shadow:0 0 0 4px rgba(53,227,157,.07),0 0 25px rgba(53,227,157,.22),0 12px 28px rgba(0,0,0,.40) !important;
}

html[data-theme="green"] .theme-option.active{
  background:rgba(53,227,157,.10) !important;
  color:var(--neon-green2) !important;
  border-color:rgba(53,227,157,.45) !important;
}

html[data-theme="green"] .badge,
html[data-theme="green"] .status-badge,
html[data-theme="green"] .chip.active{
  background:rgba(53,227,157,.10) !important;
  color:var(--neon-green2) !important;
  border-color:rgba(53,227,157,.25) !important;
}
html[data-theme="green"] .pending,
html[data-theme="green"] .status-pending{color:var(--neon-gold) !important;}

@media(prefers-reduced-motion:reduce){html[data-theme="green"] *{transition:none !important;animation:none !important;}}


/* ===== css/hb-final-v29.css ===== */
/* HB Battle v29 — screenshot-driven mobile polish
   Fixes: payment-detail contrast, FAQ preview contrast, code-block overflow,
   profile long-value wrapping, marketing CTA contrast, fixed-nav spacing. */

/* 1) Add Money: the payment-details panel is intentionally pale, so its
      text must stay dark in every theme. */
#bankDetailsBox{
  background:linear-gradient(135deg,#fff8ee,#fff3e0)!important;
  color:#18221d!important;
  opacity:1!important;
}
#bankDetailsBox :is(div,span,strong,b,p,small){
  color:#26322c!important;
  -webkit-text-fill-color:#26322c!important;
  opacity:1!important;
}
#bankDetailsBox button{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:#e5a915!important;
  border-color:transparent!important;
}

/* 2) Public FAQ preview: never use near-white text on the white cards shown
      by the legacy marketing layer. */
.marketing-home .faq-preview details{
  background:linear-gradient(145deg,#10251a,#0a1711)!important;
  border:1px solid rgba(54,224,141,.24)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
}
.marketing-home .faq-preview details summary{
  color:#f3fff8!important;
  -webkit-text-fill-color:#f3fff8!important;
  opacity:1!important;
}
.marketing-home .faq-preview details p{
  color:#b9d0c2!important;
  -webkit-text-fill-color:#b9d0c2!important;
  opacity:1!important;
}

/* 3) Marketing secondary CTA: readable against the dark hero. */
.marketing-page .hero-actions .btn.ghost,
.marketing-page .hero-actions .btn.ghost:hover,
.marketing-page .hero-actions .btn.ghost:focus-visible{
  color:#f4fff8!important;
  -webkit-text-fill-color:#f4fff8!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(169,255,208,.38)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.25)!important;
}
.marketing-home .hm-hero .hero-actions .btn.ghost,
.marketing-home .hm-hero .hero-actions .btn.ghost:hover{
  color:#f4fff8!important;
  -webkit-text-fill-color:#f4fff8!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(169,255,208,.38)!important;
}

/* 4) Code blocks on guide/article pages: preserve full code and make the
      block horizontally scrollable instead of clipping the right side. */
pre{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:pre!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:thin;
}
pre code{
  display:block!important;
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
  white-space:pre!important;
  overflow:visible!important;
}

/* 5) Profile: long email / UID / phone values must not force the card wider. */
#profileScreen .info-row > div:last-child{
  min-width:0!important;
  max-width:100%!important;
}
#profileScreen .info-val,
#profileScreen .info-label{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
#profileScreen .profile-body{
  padding-bottom:120px!important;
}

/* 6) Fixed mobile bottom navigation: reserve enough breathing room. */
@media(max-width:720px){
  #app .screen,
  .app-shell .screen{
    padding-bottom:92px!important;
  }
  .bottom-nav{
    bottom:8px!important;
  }
}

/* 7) Never allow wide content to create a second horizontal page. */
:is(.article,.article-body,.prose,.content,.wrap,.page-content){
  min-width:0!important;
  max-width:100%!important;
}


/* ===== css/arena-dark.css ===== */
/* Shared dark surface treatment for the original HB Battle pages. */
:root,html[data-theme="dark"]{color-scheme:dark;--bg:#10120f;--card:#191c17;--ink:#f1f2eb;--muted:#adb5a3;--line:#333a2d;--brand:#c5ed70;--brand-dark:#b4d665;--brand-2:#a8c966;--brand-soft:#27321d;--tt-bg:#10120f;--tt-bg-elevated:#171c13;--tt-card:#191f15;--tt-ink:#f1f2eb;--tt-muted:#adb5a3;--tt-line:#333a2d;--tt-brand:#c5ed70;--tt-brand-soft:#27321d;--tt-header-bg:#11160ff5}
html[data-theme="dark"] body{background:#10120f!important;color:#f1f2eb!important}
html[data-theme="dark"] :is(.site-header,.site-footer,footer,.nav-toggle,.card,.mp-card,.faq-item,.faq-preview details,.prose,.content,.toc,.article-card,.guide-card,.info-card,.stat-card,.btn.alt,.btn.ghost){background-color:#191f15!important;color:#f1f2eb;border-color:#333a2d!important}
html[data-theme="dark"] :is(input,select,textarea){background-color:#141a10;color:#f1f2eb;border-color:#47533c}
html[data-theme="dark"] :is(.btn.primary,.links a.cta){background:#c5ed70!important;color:#17200e!important}
html[data-theme="dark"] :is(h1,h2,h3,h4){color:#f1f2eb}
.theme-toggle,#hbThemeToggle{display:none!important}
img{max-width:100%}main,section,article{min-width:0}a,button,input,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #c5ed70;outline-offset:4px}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}.prose,.content{overflow-wrap:anywhere}table{display:block;max-width:100%;overflow-x:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}


/* ===== css/hb-royal.css ===== */
/* HB Battle — Royal layer: one unified premium look for the app (loads last).
   Palette matches the public site: night olive + lime, gold reserved for money. */
html[data-theme="dark"]{
  --r-bg:#0e100c;--r-bg2:#141810;--r-card:#1a1e15;--r-card2:#20261a;--r-line:#2f3828;
  --r-ink:#f3f4ec;--r-mute:#a9b29c;--r-lime:#c5ed70;--r-lime2:#a8d150;--r-gold:#ffc94a;--r-ink-on-lime:#16200c;
  --font-display:'Barlow Condensed','Sora',sans-serif;--font-body:'DM Sans','Inter',system-ui,sans-serif;
  --radius-sm:12px;--radius:18px;--radius-lg:24px;
  --shadow:0 6px 22px rgba(0,0,0,.35);--shadow-lg:0 18px 50px rgba(0,0,0,.5);
  --text:var(--r-ink);--text2:var(--r-mute);--text3:#8c9680;--surface:var(--r-card);--border:var(--r-line);--off-white:var(--r-bg2);
}
html[data-theme="dark"] body{
  background:radial-gradient(900px 480px at 85% -8%,rgba(197,237,112,.10),transparent 60%),
             radial-gradient(700px 420px at -10% 8%,rgba(255,201,74,.06),transparent 55%),var(--r-bg)!important;
  background-attachment:fixed;color:var(--r-ink)!important;font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] :is(h1,h2,h3,.header-title,.wallet-amount,.drawer-name){font-family:var(--font-display)!important;letter-spacing:.01em;font-weight:700}
html[data-theme="dark"] .header-title{font-size:1.35rem;text-transform:uppercase;letter-spacing:.06em}

/* Top bars: glass instead of flat colour */
html[data-theme="dark"] .header{
  background:rgba(14,16,12,.78)!important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--r-line)!important;box-shadow:none!important;color:var(--r-ink)!important}
html[data-theme="dark"] .header-back{color:var(--r-lime)!important;transition:transform .15s}
html[data-theme="dark"] .header-back:active{transform:translateX(-3px)}

/* Cards: layered surface, subtle top light, consistent radius */
html[data-theme="dark"] :is(.card,.wallet-stat-card,.stat-card,.tour-card,.tournament-card,.mp-card,.leaderboard-item,.lb-row,.notif-item,.profile-card,.drawer-card,.global-menu-item){
  background:linear-gradient(180deg,var(--r-card2),var(--r-card))!important;
  border:1px solid var(--r-line)!important;border-radius:var(--radius)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--shadow)!important;color:var(--r-ink)!important}
html[data-theme="dark"] :is(.card,.tour-card,.tournament-card):active{transform:scale(.99)}

/* Buttons: lime primary, quiet ghost */
html[data-theme="dark"] :is(.btn-red,.btn-primary,.btn-glow){
  background:linear-gradient(180deg,#d4f58a,var(--r-lime))!important;color:var(--r-ink-on-lime)!important;
  border:0!important;border-radius:14px!important;font-weight:700;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(197,237,112,.22),inset 0 1px 0 rgba(255,255,255,.5)!important;
  transition:transform .15s,box-shadow .2s,filter .2s}
html[data-theme="dark"] :is(.btn-red,.btn-primary,.btn-glow):hover{filter:brightness(1.05);box-shadow:0 10px 30px rgba(197,237,112,.32)!important}
html[data-theme="dark"] :is(.btn-red,.btn-primary,.btn-glow,.btn-ghost,.wallet-btn):active{transform:scale(.97)}
html[data-theme="dark"] .btn-ghost{background:transparent!important;color:var(--r-ink)!important;border:1px solid var(--r-line)!important;border-radius:14px!important}
html[data-theme="dark"] .btn-ghost:hover{border-color:var(--r-lime)!important;color:var(--r-lime)!important}

/* Wallet hero: the money moment, gold on dark */
html[data-theme="dark"] .wallet-hero{
  background:linear-gradient(145deg,#1f2616 0%,#141810 55%,#251f0c 130%)!important;
  border:1px solid rgba(255,201,74,.28)!important;border-radius:var(--radius-lg)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset!important;overflow:hidden}
html[data-theme="dark"] .wallet-amount{color:var(--r-gold)!important;font-size:clamp(2.4rem,9vw,3.4rem);font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(255,201,74,.25)}
html[data-theme="dark"] .wallet-label,html[data-theme="dark"] .wallet-sub{color:var(--r-mute)!important}

/* Bottom nav: floating dock + lime FAB */
html[data-theme="dark"] .bottom-nav{
  background:rgba(20,24,16,.88)!important;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--r-line)!important;border-radius:24px!important;
  box-shadow:0 14px 40px rgba(0,0,0,.6)!important;
  left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:560px;margin-inline:auto}
html[data-theme="dark"] .nav-item{color:var(--r-mute)!important;transition:color .2s,transform .15s}
html[data-theme="dark"] .nav-item.active{color:var(--r-lime)!important}
html[data-theme="dark"] .nav-item.active i{filter:drop-shadow(0 0 8px rgba(197,237,112,.55))}
html[data-theme="dark"] .nav-item:active{transform:scale(.92)}
html[data-theme="dark"] .nav-fab{
  background:linear-gradient(180deg,#d4f58a,var(--r-lime))!important;color:var(--r-ink-on-lime)!important;
  border:4px solid var(--r-bg)!important;box-shadow:0 10px 28px rgba(197,237,112,.4)!important}

/* Inputs and modals */
html[data-theme="dark"] :is(input,select,textarea):not([type=checkbox]):not([type=radio]){
  background:var(--r-bg2)!important;color:var(--r-ink)!important;border:1px solid var(--r-line)!important;border-radius:14px!important;transition:border-color .2s,box-shadow .2s}
html[data-theme="dark"] :is(input,select,textarea):focus{border-color:var(--r-lime)!important;box-shadow:0 0 0 3px rgba(197,237,112,.18)!important;outline:0}
html[data-theme="dark"] ::placeholder{color:#7d8772}
html[data-theme="dark"] .overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-theme="dark"] .modal{background:linear-gradient(180deg,var(--r-card2),var(--r-card))!important;border:1px solid var(--r-line)!important;border-radius:var(--radius-lg)!important;color:var(--r-ink)!important}
html[data-theme="dark"] .drawer-profile{background:linear-gradient(145deg,#232c18,#141810)!important;border-bottom:1px solid var(--r-line)}
html[data-theme="dark"] .drawer-rank{color:var(--r-gold)}

/* Details: focus, scroll, selection, touch, safe area */
:where(a,button,.nav-item,.btn,.global-menu-item):focus-visible{outline:2px solid var(--r-lime,#c5ed70);outline-offset:3px;border-radius:12px}
html{scrollbar-width:thin;scrollbar-color:#3a4530 transparent}
::selection{background:rgba(197,237,112,.35);color:#fff}
*{-webkit-tap-highlight-color:transparent}
html[data-theme="dark"] .screen{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
html[data-theme="dark"] .screen.active,html[data-theme="dark"] .screen[style*="block"]{animation:hbIn .28s ease-out both}
@keyframes hbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html[data-theme="dark"] .screen{animation:none!important}*{transition:none!important}}
@media(min-width:900px){html[data-theme="dark"] .screen{max-width:760px;margin-inline:auto}}

/* ===== Screen-by-screen finish (real app classes) ===== */
html[data-theme="dark"]{--r-glow:0 0 0 1px rgba(197,237,112,.25),0 12px 34px rgba(197,237,112,.12)}

/* Splash + auth */
html[data-theme="dark"] .splash-glow{background:radial-gradient(circle,rgba(197,237,112,.28),transparent 65%)!important}
html[data-theme="dark"] .splash-tagline{color:var(--r-mute)!important;letter-spacing:.14em}
html[data-theme="dark"] .splash-loader{background:#222a19!important;border-radius:99px;overflow:hidden}
html[data-theme="dark"] .splash-loader-bar{background:linear-gradient(90deg,var(--r-lime2),#e4ffa8)!important;box-shadow:0 0 14px rgba(197,237,112,.6)}
html[data-theme="dark"] .auth-screen{background:var(--r-bg)!important}
html[data-theme="dark"] .auth-bg{background:radial-gradient(520px 360px at 80% 0,rgba(197,237,112,.20),transparent 65%)!important}
html[data-theme="dark"] .auth-bg2{background:radial-gradient(480px 340px at 0 100%,rgba(255,201,74,.12),transparent 65%)!important}
html[data-theme="dark"] .auth-float-icon{color:rgba(197,237,112,.12)!important}
html[data-theme="dark"] .auth-content{background:rgba(26,30,21,.72);border:1px solid var(--r-line);border-radius:var(--radius-lg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:24px 20px}
html[data-theme="dark"] .auth-subtitle,html[data-theme="dark"] .form-label{color:var(--r-mute)!important}
html[data-theme="dark"] .auth-link{color:var(--r-lime)!important;font-weight:600}
html[data-theme="dark"] .input-icon{color:var(--r-lime)!important;opacity:.85}
html[data-theme="dark"] .onboard-overlay{background:var(--r-bg)!important}
html[data-theme="dark"] .onboard-icon{filter:drop-shadow(0 12px 30px rgba(197,237,112,.3))}
html[data-theme="dark"] .onboard-dot{background:#2f3828!important;transition:width .25s,background .25s}
html[data-theme="dark"] .onboard-dot.active{background:var(--r-lime)!important;width:22px;border-radius:99px}

/* Home */
html[data-theme="dark"] .home-hero{background:linear-gradient(160deg,#1c2412 0%,#10130c 70%)!important;border-bottom:1px solid var(--r-line);border-radius:0 0 28px 28px}
html[data-theme="dark"] .home-greeting{color:var(--r-mute)!important}
html[data-theme="dark"] .home-name{font-family:var(--font-display);font-size:1.7rem;color:var(--r-ink)!important}
html[data-theme="dark"] .home-wallet-card{background:linear-gradient(135deg,#242d16,#15190f 60%,#2a230c 140%)!important;border:1px solid rgba(255,201,74,.3)!important;border-radius:22px!important;box-shadow:0 18px 44px rgba(0,0,0,.5)!important}
html[data-theme="dark"] .home-wallet-label{color:var(--r-mute)!important}
html[data-theme="dark"] .home-wallet-amt{color:var(--r-gold)!important;font-family:var(--font-display);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(255,201,74,.25)}
html[data-theme="dark"] .home-wallet-add{background:var(--r-lime)!important;color:var(--r-ink-on-lime)!important;border-radius:14px!important;font-weight:700;box-shadow:0 8px 22px rgba(197,237,112,.3)}
html[data-theme="dark"] .home-stat-val{font-family:var(--font-display);font-size:1.5rem;color:var(--r-ink)!important}
html[data-theme="dark"] .home-stat-val.red{color:var(--r-lime)!important}
html[data-theme="dark"] .home-stat-label{color:var(--r-mute)!important}
html[data-theme="dark"] .home-stat-div{background:var(--r-line)!important}
html[data-theme="dark"] .profile-stats-float{background:rgba(26,30,21,.9)!important;border:1px solid var(--r-line)!important;backdrop-filter:blur(12px);border-radius:20px!important}
html[data-theme="dark"] .home-promo{background:linear-gradient(120deg,#1d2713,#12150c)!important;border:1px solid rgba(197,237,112,.28)!important;border-radius:var(--radius-lg)!important;box-shadow:var(--r-glow)!important}
html[data-theme="dark"] .home-promo-title{font-family:var(--font-display);font-size:1.3rem;color:var(--r-ink)!important}
html[data-theme="dark"] .home-promo-sub{color:var(--r-mute)!important}
html[data-theme="dark"] .home-promo-btn{background:var(--r-lime)!important;color:var(--r-ink-on-lime)!important;border-radius:12px!important;font-weight:700}
html[data-theme="dark"] .banner-slider{border-radius:var(--radius-lg)!important;overflow:hidden;box-shadow:var(--shadow-lg)}
html[data-theme="dark"] .banner-dots :is(i,span,.dot){background:#3a4530!important}
html[data-theme="dark"] .banner-dots :is(.active){background:var(--r-lime)!important}
html[data-theme="dark"] .sec-title{font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em;color:var(--r-ink)!important}

/* Quick actions + lists */
html[data-theme="dark"] .qa-card{background:linear-gradient(180deg,var(--r-card2),var(--r-card))!important;border:1px solid var(--r-line)!important;border-radius:var(--radius)!important;transition:transform .15s,border-color .2s,box-shadow .2s}
html[data-theme="dark"] .qa-card:active{transform:scale(.97)}
html[data-theme="dark"] .qa-card:hover{border-color:rgba(197,237,112,.5)!important;box-shadow:var(--r-glow)!important}
html[data-theme="dark"] .qa-card-icon,html[data-theme="dark"] .qicon,html[data-theme="dark"] .global-menu-icon,html[data-theme="dark"] .settings-icon,html[data-theme="dark"] .info-icon{background:rgba(197,237,112,.12)!important;color:var(--r-lime)!important;border-radius:12px}
html[data-theme="dark"] .qa-card-title,html[data-theme="dark"] .settings-label,html[data-theme="dark"] .info-val{color:var(--r-ink)!important}
html[data-theme="dark"] :is(.qa-card-sub,.info-label,.settings-arrow){color:var(--r-mute)!important}
html[data-theme="dark"] .qa-badge{background:var(--r-gold)!important;color:#241a00!important;font-weight:700}
html[data-theme="dark"] .settings-group,html[data-theme="dark"] .info-card{background:var(--r-card)!important;border:1px solid var(--r-line)!important;border-radius:var(--radius)!important;overflow:hidden}
html[data-theme="dark"] .settings-row,html[data-theme="dark"] .info-row{border-color:var(--r-line)!important;transition:background .15s}
html[data-theme="dark"] .settings-row:active{background:rgba(197,237,112,.07)!important}
html[data-theme="dark"] .toggle-switch input:checked+.toggle-slider{background:var(--r-lime)!important}

/* Chips, search, tabs */
html[data-theme="dark"] .chip,html[data-theme="dark"] :is(.art-filter-tab,.mp-tab,.mp-filter){background:var(--r-card)!important;color:var(--r-mute)!important;border:1px solid var(--r-line)!important;border-radius:99px!important;font-weight:600;transition:all .2s}
html[data-theme="dark"] .chip.active,html[data-theme="dark"] :is(.art-filter-tab,.mp-tab,.mp-filter).active{background:var(--r-lime)!important;color:var(--r-ink-on-lime)!important;border-color:var(--r-lime)!important;box-shadow:0 6px 18px rgba(197,237,112,.25)}
html[data-theme="dark"] .search-bar{background:var(--r-bg2)!important;border-bottom:1px solid var(--r-line)!important}
html[data-theme="dark"] .amount-chips *{border-radius:12px}

/* Leaderboard podium */
html[data-theme="dark"] .leader-podium{background:linear-gradient(180deg,rgba(197,237,112,.08),transparent)!important;border-radius:var(--radius-lg)}
html[data-theme="dark"] .podium-item.rank-1 .podium-avatar,html[data-theme="dark"] .podium-item.first .podium-avatar{border-color:var(--r-gold)!important;box-shadow:0 0 0 4px rgba(255,201,74,.18),0 0 30px rgba(255,201,74,.35)}
html[data-theme="dark"] .podium-rank-badge{background:var(--r-gold)!important;color:#241a00!important;font-weight:800}
html[data-theme="dark"] .podium-name{color:var(--r-ink)!important}
html[data-theme="dark"] .podium-prize{color:var(--r-gold)!important;font-variant-numeric:tabular-nums}

/* Profile + referral + empty */
html[data-theme="dark"] .profile-hero{background:linear-gradient(160deg,#222b15,#10130c 75%)!important}
html[data-theme="dark"] .avatar-ring{border:3px solid var(--r-lime)!important;box-shadow:0 0 0 5px rgba(197,237,112,.15),0 0 34px rgba(197,237,112,.3)}
html[data-theme="dark"] .profile-name{font-family:var(--font-display);font-size:1.6rem;color:var(--r-ink)!important}
html[data-theme="dark"] .profile-uid{color:var(--r-mute)!important}
html[data-theme="dark"] :is(.refer-hero,.refer-code-card,.refer-stat-card){background:linear-gradient(180deg,var(--r-card2),var(--r-card))!important;border:1px solid var(--r-line)!important;border-radius:var(--radius)!important}
html[data-theme="dark"] .refer-code-text{font-family:var(--font-display);letter-spacing:.18em;color:var(--r-lime)!important}
html[data-theme="dark"] .refer-copy-btn,html[data-theme="dark"] .refer-share-btn{background:var(--r-lime)!important;color:var(--r-ink-on-lime)!important;border-radius:12px!important;font-weight:700}
html[data-theme="dark"] .refer-stat-val,html[data-theme="dark"] .refer-step-num{color:var(--r-gold)!important;font-family:var(--font-display)}
html[data-theme="dark"] .empty{color:var(--r-mute)!important}
html[data-theme="dark"] .empty img{filter:drop-shadow(0 14px 30px rgba(197,237,112,.15));opacity:.95}
html[data-theme="dark"] .modal-handle{background:#3a4530!important}
html[data-theme="dark"] .modal-title{font-family:var(--font-display);font-size:1.35rem;color:var(--r-ink)!important}
html[data-theme="dark"] .drawer-logout{color:#ff7a86!important}
html[data-theme="dark"] .spinner{border-color:#2f3828!important;border-top-color:var(--r-lime)!important}