/* HB Battle - Light ("white") theme fix. Loaded LAST (after every sheet and inline <style>).
   Bug: in Light theme ~35 secondary screens (History, Results, Challenges, Sessions, Settings, Help,
   FAQ, VIP, Marketplace ...) stayed on the dark shell (#07110d canvas + navy header bar) while their
   titles/headings were already forced to dark ink by app-aurora.css => dark text on a dark bar:
   titles, labels and placeholders were invisible. Scoped to html[data-theme="light"] only, so the
   Dark and Neon themes are untouched. */

/* 1. Screen canvas: light instead of the leftover dark shell */
html[data-theme="light"] #app #historyScreen,
html[data-theme="light"] #app #resultsScreen,
html[data-theme="light"] #app #challengesScreen,
html[data-theme="light"] #app #sessionsScreen,
html[data-theme="light"] #app #luckyDrawScreen,
html[data-theme="light"] #app #achievementBadgesScreen,
html[data-theme="light"] #app #squadWarsScreen,
html[data-theme="light"] #app #marketplaceScreen,
html[data-theme="light"] #app #notificationsScreen,
html[data-theme="light"] #app #editProfileScreen,
html[data-theme="light"] #app #articlesScreen,
html[data-theme="light"] #app #articleDetailScreen,
html[data-theme="light"] #app #avatarGalleryScreen,
html[data-theme="light"] #app #settingsScreen,
html[data-theme="light"] #app #faqScreen,
html[data-theme="light"] #app #rulesScreen,
html[data-theme="light"] #app #privacyPolicyScreen,
html[data-theme="light"] #app #termsScreen,
html[data-theme="light"] #app #notificationSettingsScreen,
html[data-theme="light"] #app #inviteFriendsScreen,
html[data-theme="light"] #app #helpScreen,
html[data-theme="light"] #app #liveChatScreen,
html[data-theme="light"] #app #joinTournamentScreen,
html[data-theme="light"] #app #bracketScreen,
html[data-theme="light"] #app #teamTournamentScreen,
html[data-theme="light"] #app #matchStatsScreen,
html[data-theme="light"] #app #badgesScreen,
html[data-theme="light"] #app #activityLogScreen,
html[data-theme="light"] #app #bonusWalletScreen,
html[data-theme="light"] #app #receiptScreen,
html[data-theme="light"] #app #userNotificationsScreen,
html[data-theme="light"] #app #rewardCenterUserScreen,
html[data-theme="light"] #app #vipScreen{
  background:#f5f4f2!important;background-image:none!important;color:#15171d!important;
}

/* 2. Header bar on every screen: white bar, dark ink, light back button */
html[data-theme="light"] #app .screen .header{
  background:rgba(255,255,255,.97)!important;background-image:none!important;
  border-bottom:1px solid #e6e4e1!important;box-shadow:0 4px 18px rgba(18,32,25,.06)!important;
}
html[data-theme="light"] #app .screen .header .header-title,
html[data-theme="light"] #app .screen .header h1,
html[data-theme="light"] #app .screen .header h2{color:#15171d!important;-webkit-text-fill-color:#15171d!important}
html[data-theme="light"] #app .screen .header .header-back{background:#edf2ee!important;color:#15171d!important;border:1px solid #dfe5e1!important}
html[data-theme="light"] #app .screen .header .header-back i{color:#15171d!important}

/* 3. Form fields on those screens: white field, dark text, readable placeholder */
html[data-theme="light"] #app #historyScreen :is(input,select,textarea),
html[data-theme="light"] #app #resultsScreen :is(input,select,textarea),
html[data-theme="light"] #app #challengesScreen :is(input,select,textarea),
html[data-theme="light"] #app #sessionsScreen :is(input,select,textarea),
html[data-theme="light"] #app #luckyDrawScreen :is(input,select,textarea),
html[data-theme="light"] #app #achievementBadgesScreen :is(input,select,textarea),
html[data-theme="light"] #app #squadWarsScreen :is(input,select,textarea),
html[data-theme="light"] #app #marketplaceScreen :is(input,select,textarea),
html[data-theme="light"] #app #notificationsScreen :is(input,select,textarea),
html[data-theme="light"] #app #editProfileScreen :is(input,select,textarea),
html[data-theme="light"] #app #articlesScreen :is(input,select,textarea),
html[data-theme="light"] #app #articleDetailScreen :is(input,select,textarea),
html[data-theme="light"] #app #avatarGalleryScreen :is(input,select,textarea),
html[data-theme="light"] #app #settingsScreen :is(input,select,textarea),
html[data-theme="light"] #app #faqScreen :is(input,select,textarea),
html[data-theme="light"] #app #rulesScreen :is(input,select,textarea),
html[data-theme="light"] #app #privacyPolicyScreen :is(input,select,textarea),
html[data-theme="light"] #app #termsScreen :is(input,select,textarea),
html[data-theme="light"] #app #notificationSettingsScreen :is(input,select,textarea),
html[data-theme="light"] #app #inviteFriendsScreen :is(input,select,textarea),
html[data-theme="light"] #app #helpScreen :is(input,select,textarea),
html[data-theme="light"] #app #liveChatScreen :is(input,select,textarea),
html[data-theme="light"] #app #joinTournamentScreen :is(input,select,textarea),
html[data-theme="light"] #app #bracketScreen :is(input,select,textarea),
html[data-theme="light"] #app #teamTournamentScreen :is(input,select,textarea),
html[data-theme="light"] #app #matchStatsScreen :is(input,select,textarea),
html[data-theme="light"] #app #badgesScreen :is(input,select,textarea),
html[data-theme="light"] #app #activityLogScreen :is(input,select,textarea),
html[data-theme="light"] #app #bonusWalletScreen :is(input,select,textarea),
html[data-theme="light"] #app #receiptScreen :is(input,select,textarea),
html[data-theme="light"] #app #userNotificationsScreen :is(input,select,textarea),
html[data-theme="light"] #app #rewardCenterUserScreen :is(input,select,textarea),
html[data-theme="light"] #app #vipScreen :is(input,select,textarea){
  background:#fff!important;color:#15171d!important;border:1px solid #d7dde5!important;-webkit-text-fill-color:#15171d!important;
}
html[data-theme="light"] #app #historyScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #resultsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #challengesScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #sessionsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #luckyDrawScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #achievementBadgesScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #squadWarsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #marketplaceScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #notificationsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #editProfileScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #articlesScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #articleDetailScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #avatarGalleryScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #settingsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #faqScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #rulesScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #privacyPolicyScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #termsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #notificationSettingsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #inviteFriendsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #helpScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #liveChatScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #joinTournamentScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #bracketScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #teamTournamentScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #matchStatsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #badgesScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #activityLogScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #bonusWalletScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #receiptScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #userNotificationsScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #rewardCenterUserScreen :is(input,textarea)::placeholder,
html[data-theme="light"] #app #vipScreen :is(input,textarea)::placeholder{color:#6c7480!important;opacity:1!important;-webkit-text-fill-color:#6c7480!important}

/* 4. Wallet Quick Stats: values were white-on-white, labels too pale */
html[data-theme="light"] #walletScreen #statDeposited{color:#15171d!important}
html[data-theme="light"] #walletScreen #statWithdrawn{color:#a16207!important}
html[data-theme="light"] #walletScreen #statWinnings{color:#047857!important}
html[data-theme="light"] #walletScreen .wallet-stat-card div:last-child{color:#5b6470!important}

/* 5. Inline "About Us / Privacy Policy" style links: neon green on white was ~1.5:1 */
html[data-theme="light"] #app a[style*="--text3"]{color:#5b6470!important}

/* 6. Privacy Policy / Terms body copy: pale grey-green on white (~1.8:1) -> readable ink */
html[data-theme="light"] #app :is(#privacyPolicyScreen,#termsScreen) :is(p,li,div,span){color:#374151!important}
html[data-theme="light"] #app :is(#privacyPolicyScreen,#termsScreen) :is(h1,h2,h3,h4,strong,b){color:#15171d!important}

/* 7. Plain text links (Privacy Policy, aboutads.info ...): neon green on white was ~1.6:1 */
html[data-theme="light"] #app :is(#loginScreen,#signupScreen,#walletScreen,#privacyPolicyScreen,#termsScreen,#helpScreen,#faqScreen,#rulesScreen) a:not([class]){color:#c2410c!important}

/* 8. Gold numbers on white / light-tint cards (Match Stats, Profile stats) */
html[data-theme="light"] #app #matchStatsScreen :is(div,span)[style*="--gold"],
html[data-theme="light"] #app #matchStatsScreen :is(div,span)[style*="E8B84B" i]{color:#a16207!important}
html[data-theme="light"] #app #profileScreen .home-stat-val.red{color:#8a5a00!important}

/* 9. Bonus Wallet banner: white text on bright amber (~2.3:1) -> deeper amber, white text stays */
html[data-theme="light"] #app #bonusWalletScreen div[style*="#f59e0b,#d97706"]{background:linear-gradient(135deg,#b45309,#92400e)!important;color:#fff!important}
html[data-theme="light"] #app #bonusWalletScreen div[style*="#f59e0b,#d97706"] :is(div,span){color:#fff!important}

/* ===== Round 2 (real-phone screenshots, Light theme) ===== */

/* 10. Home (dashboard): hero bar, wallet card and canvas were still dark navy/black on a light page */
html[data-theme="light"] #app #dashboardScreen{background:#f5f4f2!important;background-image:none!important}
html[data-theme="light"] #app #dashboardScreen .home-hero{
  background:#fff!important;background-image:none!important;border:1px solid #e6e4e1!important;
  box-shadow:0 6px 20px rgba(18,32,25,.07)!important}
html[data-theme="light"] #app #dashboardScreen .home-greeting{color:#5b6470!important}
html[data-theme="light"] #app #dashboardScreen .home-name{color:#15171d!important;-webkit-text-fill-color:#15171d!important}
html[data-theme="light"] #app #dashboardScreen .home-hero .fa-bell{color:#475569!important}
html[data-theme="light"] #app #dashboardScreen .home-wallet-card{
  background:linear-gradient(135deg,#fff7ed,#ffe8cf)!important;background-image:linear-gradient(135deg,#fff7ed,#ffe8cf)!important;
  border:1px solid #f0d3b3!important;box-shadow:0 8px 22px rgba(180,83,9,.12)!important}
html[data-theme="light"] #app #dashboardScreen .home-wallet-label{color:#7c5a3a!important}
html[data-theme="light"] #app #dashboardScreen .home-wallet-amt{color:#b45309!important;-webkit-text-fill-color:#b45309!important;background:none!important}
html[data-theme="light"] #app #dashboardScreen .home-wallet-amt *{color:#b45309!important;-webkit-text-fill-color:#b45309!important}
html[data-theme="light"] #app #dashboardScreen .home-stat-val.red{color:#8a5a00!important}

/* 11. Quick Actions: an odd last card in the main grid left an empty hole beside it -> let it span the row */
@media (max-width:600px){
  #dashboardScreen .qa-grid>.qa-card:nth-child(odd):not(:has(~ .qa-card)){grid-column:1 / -1!important}
}

/* 12. Bottom navigation: dark slab under a light page */
html[data-theme="light"] #app #sharedBottomNav.bottom-nav{
  background:rgba(255,255,255,.98)!important;background-image:none!important;border:1px solid #e6e4e1!important;
  box-shadow:0 -6px 24px rgba(18,32,25,.12)!important}
html[data-theme="light"] #app #sharedBottomNav .nav-item,
html[data-theme="light"] #app #sharedBottomNav .nav-item i,
html[data-theme="light"] #app #sharedBottomNav .nav-item span{color:#64748b!important}
html[data-theme="light"] #app #sharedBottomNav .nav-item.active,
html[data-theme="light"] #app #sharedBottomNav .nav-item.active i,
html[data-theme="light"] #app #sharedBottomNav .nav-item.active span{color:#047857!important}

/* 13. Floating back tab on the left edge */
html[data-theme="light"] #hbSideBack.hb-side-back{
  background:#fff!important;background-image:none!important;color:#15171d!important;
  border:1px solid #d7dde5!important;box-shadow:0 6px 18px rgba(18,32,25,.14)!important}
html[data-theme="light"] #hbSideBack.hb-side-back *{color:#15171d!important}

/* 14. Article / guide text: headings were near-white and body pale green on a light page */
html[data-theme="light"] #app #articleDetailBody :is(h1,h2,h3,h4,h5,h6,strong,b){color:#15171d!important;-webkit-text-fill-color:#15171d!important;text-shadow:none!important}
html[data-theme="light"] #app #articleDetailBody :is(p,li,span,div,td,th,em){color:#374151!important;-webkit-text-fill-color:#374151!important}
html[data-theme="light"] #app #articleDetailBody a{color:#c2410c!important}

/* 15. AI Assistant: the gradient stopped short and a black (#222) slab showed below the composer */
html[data-theme="light"] #app #aiAssistantScreen{background:#cdaac8!important}
#hbaiApp{min-height:100vh;min-height:100dvh}

/* 16. Profile: dark canvas showed as a black band between the hero and the stats strip */
html[data-theme="light"] #app #profileScreen{background:#f5f4f2!important;background-image:none!important}