/*
Theme Name: Happy Learning
Theme URI: https://superhappyheros.com
Author: Happy Universe
Author URI: https://superhappyheros.com
Description: Gamified Social Science learning platform for students Grades 7-10. Bilingual English & Tamil. Full desktop responsive with Elementor support.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happy-learning
Tags: education, gamification, bilingual, responsive, elementor
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Noto+Sans+Tamil:wght@400;600;700;800&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --g-green:        #00C853;
  --g-green-dark:   #00952F;
  --g-green-light:  #E8FFF2;
  --g-purple:       #7C3AED;
  --g-gold:         #FFD700;
  --g-gold-dark:    #E5AC00;
  --g-blue:         #3B82F6;
  --g-red:          #EF4444;

  --s-history:      #F59E0B;
  --s-geo:          #10B981;
  --s-civics:       #8B5CF6;
  --s-economics:    #EF4444;

  /* Dark BG for app area */
  --bg-dark:        #0A0E1A;
  --bg-card:        #131929;
  --bg-card2:       #1A2237;
  --bg-card3:       #1F2A42;
  --border-glow:    rgba(0,200,83,0.2);
  --border-dim:     rgba(255,255,255,0.08);

  /* Light BG for content pages */
  --page-bg:        #F8FAFC;
  --page-card:      #FFFFFF;
  --page-border:    #E2E8F0;
  --page-text:      #1E293B;
  --page-muted:     #64748B;

  --t-white:        #F0F4FF;
  --t-muted:        #94A3B8;
  --t-dim:          #4B5563;

  --font:           'Nunito', 'Segoe UI', sans-serif;
  --font-tamil:     'Noto Sans Tamil', sans-serif;

  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 16px;
  --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 9999px;

  --glow-green:   0 0 24px rgba(0,200,83,0.35), 0 4px 16px rgba(0,200,83,0.2);
  --shadow:       0 2px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.12);
  --shadow-dark:  0 8px 32px rgba(0,0,0,0.5);
  --trans:        all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--page-text);
  line-height: 1.6;
  min-height: 100vh;
}
body.lang-tamil { font-family: var(--font-tamil), var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--g-green-dark); text-decoration: none; transition: var(--trans); }
a:hover { color: var(--g-green); }
button, input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ============================================================
   SITE HEADER  — full-width desktop nav
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 2px solid var(--page-border);
  position: sticky; top: 0; z-index: 900;
  box-shadow: var(--shadow);
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.site-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}

.site-logo-icon { font-size: 32px; line-height: 1; }

.site-logo-text { display: flex; flex-direction: column; line-height: 1.1; }

.site-logo-name {
  font-size: 20px; font-weight: 900;
  background: linear-gradient(135deg, var(--g-green-dark), var(--g-green));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-logo-tagline {
  font-size: 11px; font-weight: 700;
  color: var(--page-muted);
  letter-spacing: 0.3px;
}

/* Desktop nav */
.site-nav {
  display: flex; align-items: center; gap: var(--sp-sm);
}

.site-nav a, .site-nav button {
  padding: 8px 18px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: var(--trans);
  border: none; cursor: pointer;
  font-family: inherit;
  background: none;
  color: var(--page-muted);
}

.site-nav a:hover { color: var(--g-green-dark); background: var(--g-green-light); }

.site-nav .nav-cta {
  background: linear-gradient(135deg, var(--g-green), var(--g-green-dark));
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,200,83,0.3);
  padding: 10px 22px;
}
.site-nav .nav-cta:hover { box-shadow: var(--glow-green); transform: translateY(-1px); }

.site-nav .nav-lang {
  background: var(--page-bg);
  border: 2px solid var(--page-border);
  color: var(--page-muted);
  font-size: 13px;
}
.site-nav .nav-lang:hover { border-color: var(--g-green); color: var(--g-green-dark); }

/* Hamburger (mobile only) */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--page-text); border-radius: 2px;
  transition: var(--trans);
}

/* Mobile nav drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed; inset: 0; top: 70px; z-index: 800;
  background: rgba(0,0,0,0.5);
}
.mobile-nav-drawer.open { display: block; }
.mobile-nav-inner {
  background: #fff;
  padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: 2px solid var(--page-border);
  box-shadow: var(--shadow-lg);
}
.mobile-nav-inner a, .mobile-nav-inner button {
  display: block;
  padding: 14px var(--sp-md);
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 700;
  color: var(--page-text);
  text-decoration: none;
  border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
  transition: var(--trans); width: 100%;
}
.mobile-nav-inner a:hover { background: var(--g-green-light); color: var(--g-green-dark); }
.mobile-nav-inner .nav-cta {
  background: linear-gradient(135deg, var(--g-green), var(--g-green-dark));
  color: #fff; text-align: center; margin-top: 8px;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-dark);
  color: var(--t-muted);
  padding: var(--sp-3xl) 0 var(--sp-xl);
  margin-top: var(--sp-3xl);
}

.site-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--sp-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}

.footer-brand .footer-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-md);
}
.footer-brand .footer-logo-icon { font-size: 28px; }
.footer-brand .footer-logo-name {
  font-size: 18px; font-weight: 900;
  color: var(--t-white);
}
.footer-brand p {
  font-size: 13px; line-height: 1.7; color: var(--t-muted);
  max-width: 280px;
}

.footer-col h4 {
  font-size: 12px; font-weight: 900;
  color: var(--t-white);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: var(--sp-md);
}

.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  font-size: 13px; color: var(--t-muted);
  transition: var(--trans);
}
.footer-col ul li a:hover { color: var(--g-green); }

.footer-bottom {
  border-top: 1px solid var(--border-dim);
  padding-top: var(--sp-lg);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-sm);
}
.footer-bottom p { font-size: 12px; color: var(--t-dim); }
.footer-bottom a { color: var(--t-muted); font-size: 12px; }
.footer-bottom a:hover { color: var(--g-green); }

/* ============================================================
   CONTAINER / LAYOUT HELPERS
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
}

.section { padding: var(--sp-3xl) 0; }
.section-sm { padding: var(--sp-2xl) 0; }

/* ============================================================
   APP WRAPPER — the SPA game lives inside this
   The app is centered and max-width 480px on mobile
   On desktop it still renders as a centered card
   ============================================================ */
.hl-app-section {
  background: var(--bg-dark);
  min-height: calc(100vh - 70px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-xl) var(--sp-md);
}

/* On small screens: full width, on large: centered card */
.hl-wrapper {
  width: 100%;
  max-width: 480px;
  min-height: calc(100vh - 70px - 2*var(--sp-xl));
  position: relative;
  background: var(--bg-dark);
}

/* At 768px+ give the app a card look */
@media (min-width: 768px) {
  .hl-wrapper {
    min-height: auto;
    border-radius: var(--r-xl);
    box-shadow: 0 0 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
  }
  .hl-app-section {
    padding: var(--sp-2xl) var(--sp-xl);
    align-items: flex-start;
  }
}

/* ============================================================
   PAGE TEMPLATE — for normal WP pages (privacy policy etc.)
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 100%);
  padding: var(--sp-3xl) 0 var(--sp-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0,200,83,0.08), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(124,58,237,0.06), transparent 50%);
  pointer-events: none;
}
.page-hero-icon {
  font-size: 56px; margin-bottom: var(--sp-md);
  filter: drop-shadow(0 0 16px rgba(0,200,83,0.4));
}
.page-hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900; color: var(--t-white);
  margin-bottom: var(--sp-sm); line-height: 1.1;
}
.page-hero p {
  font-size: 16px; color: var(--t-muted);
  max-width: 560px; margin: 0 auto;
}

/* Content page */
.page-content-wrap {
  background: var(--page-bg);
  padding: var(--sp-3xl) 0;
}

.page-content {
  background: var(--page-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--page-border);
  padding: var(--sp-3xl);
  box-shadow: var(--shadow);
  max-width: 860px;
  margin: 0 auto;
}

/* Privacy / Content typography */
.entry-content h1, .page-content h1 {
  font-size: 32px; font-weight: 900; color: var(--page-text);
  margin-bottom: var(--sp-sm); line-height: 1.2;
}
.entry-content h2, .page-content h2 {
  font-size: 22px; font-weight: 900; color: var(--page-text);
  margin-top: var(--sp-xl); margin-bottom: var(--sp-sm);
  padding-left: 14px;
  border-left: 4px solid var(--g-green);
}
.entry-content h3, .page-content h3 {
  font-size: 18px; font-weight: 800; color: var(--page-text);
  margin-top: var(--sp-lg); margin-bottom: var(--sp-sm);
}
.entry-content p, .page-content p {
  font-size: 15px; color: var(--page-muted);
  line-height: 1.85; margin-bottom: var(--sp-md);
}
.entry-content ul, .entry-content ol,
.page-content ul, .page-content ol {
  margin: var(--sp-md) 0 var(--sp-md) var(--sp-lg);
  list-style: disc;
}
.entry-content ol, .page-content ol { list-style: decimal; }
.entry-content li, .page-content li {
  font-size: 15px; color: var(--page-muted);
  line-height: 1.85; margin-bottom: 6px;
}
.entry-content a, .page-content a {
  color: var(--g-green-dark); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.entry-content a:hover, .page-content a:hover { color: var(--g-green); }
.entry-content strong, .page-content strong { color: var(--page-text); font-weight: 800; }

/* Effective date badge */
.policy-date {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--g-green-light);
  border: 1px solid rgba(0,200,83,0.3);
  color: var(--g-green-dark);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 13px; font-weight: 700;
  margin-bottom: var(--sp-xl);
}

/* Info card inside content */
.info-card {
  background: #F0FDF4;
  border: 1px solid rgba(0,200,83,0.25);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin: var(--sp-lg) 0;
}
.info-card h4 {
  font-size: 15px; font-weight: 800;
  color: var(--g-green-dark);
  margin-bottom: var(--sp-sm);
}
.info-card p, .info-card li {
  font-size: 14px; color: #166534;
  margin-bottom: 4px;
}

/* Contact card */
.contact-card {
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-card2));
  border: 1px solid var(--border-dim);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
  margin-top: var(--sp-xl);
  text-align: center;
}
.contact-card h3 { color: var(--t-white) !important; }
.contact-card p { color: var(--t-muted) !important; }
.contact-card a {
  color: var(--g-green) !important;
  font-weight: 800 !important;
}

/* ============================================================
   BUTTONS (Global)
   ============================================================ */
.hl-btn, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-md);
  border: none; cursor: pointer;
  font-size: 15px; font-weight: 800; font-family: inherit;
  transition: var(--trans); text-decoration: none;
  letter-spacing: 0.2px;
}
.hl-btn-primary, .wp-block-button__link {
  background: linear-gradient(135deg, var(--g-green), var(--g-green-dark));
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,200,83,0.3);
}
.hl-btn-primary:hover, .wp-block-button__link:hover {
  box-shadow: var(--glow-green); transform: translateY(-2px); color: #fff !important;
}
.hl-btn-outline {
  background: transparent; color: var(--g-green-dark) !important;
  border: 2px solid var(--g-green);
}
.hl-btn-outline:hover { background: var(--g-green-light); }

/* ============================================================
   HOMEPAGE SECTIONS (non-app pages can use these)
   ============================================================ */
.hero-section {
  background: linear-gradient(160deg, var(--bg-dark) 0%, #0D1428 60%, var(--bg-card) 100%);
  padding: var(--sp-3xl) 0;
  position: relative; overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(0,200,83,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(124,58,237,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--sp-xl);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-3xl); align-items: center;
}

.hero-text {}
.hero-text .hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,200,83,0.12);
  border: 1px solid rgba(0,200,83,0.3);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 12px; font-weight: 800;
  color: var(--g-green);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: var(--sp-lg);
}
.hero-text h1 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900; color: var(--t-white);
  line-height: 1.1; margin-bottom: var(--sp-md);
}
.hero-text h1 span {
  background: linear-gradient(135deg, var(--g-green), #00E676);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-text p { font-size: 16px; color: var(--t-muted); line-height: 1.8; margin-bottom: var(--sp-xl); }
.hero-btns { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

.hero-visual { position: relative; }
.hero-img-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 2px solid rgba(0,200,83,0.25);
  box-shadow: 0 0 60px rgba(0,200,83,0.15), 0 24px 60px rgba(0,0,0,0.5);
}
.hero-img-card img { width: 100%; }

/* Features section */
.features-section {
  background: var(--page-bg);
  padding: var(--sp-3xl) 0;
}
.section-head {
  text-align: center; margin-bottom: var(--sp-2xl);
}
.section-head .overline {
  display: inline-block; font-size: 12px; font-weight: 900;
  color: var(--g-green-dark); text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 10px;
}
.section-head h2 {
  font-size: clamp(24px, 4vw, 40px); font-weight: 900;
  color: var(--page-text); margin-bottom: 10px;
}
.section-head p { font-size: 16px; color: var(--page-muted); max-width: 560px; margin: 0 auto; }

.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}
.feature-card {
  background: var(--page-card);
  border: 1px solid var(--page-border);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
  transition: var(--trans);
  position: relative; overflow: hidden;
}
.feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--g-green), var(--g-gold));
  opacity: 0; transition: var(--trans);
}
.feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.feature-card:hover::before { opacity: 1; }
.feature-card .fc-icon { font-size: 36px; margin-bottom: var(--sp-md); }
.feature-card h3 { font-size: 18px; font-weight: 900; color: var(--page-text); margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--page-muted); line-height: 1.7; }

/* Subjects showcase */
.subjects-section { background: var(--bg-dark); padding: var(--sp-3xl) 0; }
.subjects-section .section-head h2 { color: var(--t-white); }
.subjects-section .section-head .overline { color: var(--g-green); }
.subjects-section .section-head p { color: var(--t-muted); }

.subjects-showcase {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}
.subject-showcase-card {
  border-radius: var(--r-lg);
  padding: var(--sp-xl) var(--sp-md);
  position: relative; overflow: hidden;
  transition: var(--trans);
  cursor: pointer; border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.subject-showcase-card:hover { transform: translateY(-6px) scale(1.02); }
.subject-showcase-card[data-s="history"]   { background: linear-gradient(145deg,#2D1B00,#1A1000); box-shadow: 0 4px 24px rgba(245,158,11,0.15); }
.subject-showcase-card[data-s="geography"] { background: linear-gradient(145deg,#001A10,#00100A); box-shadow: 0 4px 24px rgba(16,185,129,0.15); }
.subject-showcase-card[data-s="civics"]    { background: linear-gradient(145deg,#150C2D,#0E0720); box-shadow: 0 4px 24px rgba(139,92,246,0.15); }
.subject-showcase-card[data-s="economics"] { background: linear-gradient(145deg,#2D0808,#1A0404); box-shadow: 0 4px 24px rgba(239,68,68,0.15); }
.subject-showcase-card .ssc-icon { font-size: 40px; margin-bottom: var(--sp-md); }
.subject-showcase-card .ssc-name {
  font-size: 16px; font-weight: 900; color: var(--t-white);
}

/* CTA section */
.cta-section {
  background: linear-gradient(135deg, var(--g-green-dark), var(--g-green));
  padding: var(--sp-3xl) 0; text-align: center;
}
.cta-section h2 { font-size: clamp(26px,4vw,42px); font-weight:900; color:#fff; margin-bottom:var(--sp-md); }
.cta-section p { font-size:16px; color:rgba(255,255,255,0.85); margin-bottom:var(--sp-xl); }
.cta-section .hl-btn-primary {
  background: #fff; color: var(--g-green-dark) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ============================================================
   APP PAGES INSIDE THE WRAPPER (game SPA)
   ============================================================ */
.hl-page { display: none; }
.hl-page.active { display: block; animation: pageIn 0.25s ease; }
@keyframes pageIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ------- Topbar ------- */
.hl-topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--sp-md);
  background: rgba(10,14,26,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dim);
}
.hl-topbar-title { font-size:16px; font-weight:900; color:var(--t-white); }
.hl-back-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--bg-card2); border:1px solid var(--border-dim);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--t-white); transition:var(--trans);
}
.hl-back-btn:hover { border-color:var(--g-green); }
.hl-xp-chip {
  display:flex; align-items:center; gap:4px;
  background:rgba(255,215,0,0.12);
  border:1px solid rgba(255,215,0,0.3);
  border-radius:var(--r-pill); padding:4px 12px;
  font-weight:900; font-size:13px; color:var(--g-gold);
}

/* ------- Login/Home page ------- */
.hl-login-page {
  background: linear-gradient(160deg, rgba(0,200,83,0.04) 0%, transparent 40%, rgba(124,58,237,0.04) 100%);
  padding: var(--sp-lg) var(--sp-md) var(--sp-2xl);
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.hl-logo-wrap { text-align:center; margin-bottom:var(--sp-md); }
.hl-logo-icon {
  font-size:48px; line-height:1;
  filter: drop-shadow(0 0 16px rgba(0,200,83,0.5));
  animation: floatLogo 3s ease-in-out infinite;
  margin-bottom:8px;
}
@keyframes floatLogo {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%      { transform:translateY(-8px) rotate(2deg); }
}
.hl-logo-title {
  font-size:30px; font-weight:900;
  background:linear-gradient(135deg,var(--g-green) 0%,#00E676 50%,var(--g-gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.1;
}
.hl-logo-sub { font-size:12px; font-weight:700; color:var(--t-muted); margin-top:4px; }

.hl-hero-img-card {
  width:100%; max-width:300px; margin:0 auto var(--sp-lg);
  border-radius:var(--r-lg); overflow:hidden;
  border:2px solid rgba(0,200,83,0.3);
  box-shadow:0 0 40px rgba(0,200,83,0.15), 0 16px 40px rgba(0,0,0,0.5);
  position:relative;
}
.hl-hero-img-card img { width:100%; object-fit:cover; }
.hl-level-badge {
  position:absolute; top:10px; right:10px; z-index:2;
  background:linear-gradient(135deg,var(--g-gold),var(--g-gold-dark));
  border-radius:var(--r-pill); padding:3px 10px;
  font-size:10px; font-weight:900; color:#1A1A1A;
}
.hl-lang-card {
  width:100%; background:var(--bg-card);
  border:1px solid var(--border-dim);
  border-radius:var(--r-lg); padding:var(--sp-md);
  margin-bottom:var(--sp-md);
}
.hl-lang-label { font-size:10px; font-weight:900; color:var(--t-muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:var(--sp-sm); }
.hl-lang-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hl-lang-btn {
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-radius:var(--r-md);
  border:2px solid var(--border-dim); background:var(--bg-card2);
  cursor:pointer; font-size:13px; font-weight:800;
  color:var(--t-muted); transition:var(--trans); font-family:inherit;
}
.hl-lang-btn .lcheck {
  width:18px; height:18px; border-radius:4px;
  border:2px solid var(--border-dim); background:var(--bg-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; transition:var(--trans);
}
.hl-lang-btn.active { border-color:var(--g-green); color:var(--g-green); background:rgba(0,200,83,0.08); }
.hl-lang-btn.active .lcheck { background:var(--g-green); border-color:var(--g-green); color:#000; }

.hl-login-btns { width:100%; display:flex; flex-direction:column; gap:10px; }

/* ------- Buttons inside app ------- */
.hl-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 22px;
  border-radius:var(--r-md); border:none; cursor:pointer;
  font-size:15px; font-weight:800; font-family:inherit;
  transition:var(--trans); position:relative; overflow:hidden;
}
.hl-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  transition:left 0.5s;
}
.hl-btn:hover::before { left:150%; }
.hl-btn:active { transform:scale(0.97); }

.hl-btn-green { background:linear-gradient(135deg,var(--g-green),var(--g-green-dark)); color:#fff; box-shadow:0 4px 16px rgba(0,200,83,0.3); }
.hl-btn-green:hover { box-shadow:var(--glow-green); transform:translateY(-2px); }
.hl-btn-google { background:var(--bg-card2); color:var(--t-white); border:2px solid var(--border-dim); }
.hl-btn-google:hover { border-color:var(--g-green); }
.hl-btn-outline-app { background:transparent; color:var(--g-green); border:2px solid rgba(0,200,83,0.4); }
.hl-btn-outline-app:hover { background:rgba(0,200,83,0.08); }
.hl-btn-ghost { background:transparent; color:var(--t-muted); font-size:13px; padding:10px; }
.hl-btn-purple { background:linear-gradient(135deg,var(--g-purple),#5B21B6); color:#fff; box-shadow:0 4px 16px rgba(124,58,237,0.3); }
.hl-btn-sm { padding:10px 18px; font-size:13px; }

/* ------- Form fields ------- */
.hl-form-wrap { width:100%; padding:var(--sp-md); background:var(--bg-dark); }
.hl-form-card {
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:var(--r-xl); padding:var(--sp-xl) var(--sp-lg);
  width:100%; box-shadow:var(--shadow-dark); margin-bottom:var(--sp-md);
}
.hl-form-head { margin-bottom:var(--sp-lg); }
.hl-form-head h2 { font-size:22px; font-weight:900; color:var(--t-white); margin-bottom:4px; }
.hl-form-head p { font-size:13px; color:var(--t-muted); }
.hl-field { margin-bottom:var(--sp-md); }
.hl-field label { display:block; font-size:11px; font-weight:800; color:var(--t-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.8px; }
.hl-field input, .hl-field select {
  width:100%; padding:13px 14px;
  background:var(--bg-card2); border:2px solid var(--border-dim);
  border-radius:var(--r-md); font-size:14px; font-family:inherit;
  color:var(--t-white); outline:none; transition:var(--trans);
}
.hl-field input::placeholder { color:var(--t-dim); }
.hl-field input:focus, .hl-field select:focus { border-color:var(--g-green); background:var(--bg-card3); box-shadow:0 0 0 3px rgba(0,200,83,0.1); }
.hl-field select option { background:var(--bg-card2); }
.hl-field .ferr { display:none; color:#F87171; font-size:11px; font-weight:700; margin-top:4px; }
.hl-field.has-err input, .hl-field.has-err select { border-color:#EF4444; }
.hl-field.has-err .ferr { display:block; }
.hl-divider { display:flex; align-items:center; gap:10px; color:var(--t-dim); font-size:11px; font-weight:700; margin:var(--sp-md) 0; }
.hl-divider::before,.hl-divider::after { content:''; flex:1; height:1px; background:var(--border-dim); }

/* ------- Subjects page ------- */
.hl-subjects-page { background:var(--bg-dark); }
.hl-greeting-banner { padding:var(--sp-lg) var(--sp-md) var(--sp-sm); }
.hl-greeting-hi { font-size:11px; font-weight:800; color:var(--t-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:2px; }
.hl-greeting-name { font-size:24px; font-weight:900; color:var(--t-white); line-height:1.1; }
.hl-greeting-grade {
  display:inline-block; margin-top:6px;
  background:rgba(0,200,83,0.1); border:1px solid rgba(0,200,83,0.25);
  border-radius:var(--r-pill); padding:3px 12px;
  font-size:12px; font-weight:800; color:var(--g-green);
}
.hl-stats-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:var(--sp-sm) var(--sp-md) var(--sp-md); }
.hl-stat-mini {
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:var(--r-md); padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.hl-stat-mini .sm-icon { font-size:22px; }
.hl-stat-mini .sm-val { font-size:20px; font-weight:900; color:var(--t-white); line-height:1; }
.hl-stat-mini .sm-lbl { font-size:10px; font-weight:700; color:var(--t-muted); text-transform:uppercase; }
.hl-stat-mini.gold .sm-val { color:var(--g-gold); }
.hl-stat-mini.green .sm-val { color:var(--g-green); }
.hl-section-hd { padding:0 var(--sp-md) var(--sp-sm); font-size:11px; font-weight:900; color:var(--t-muted); text-transform:uppercase; letter-spacing:1.5px; }
.hl-subjects-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 var(--sp-md); }
.hl-subject-card {
  border-radius:var(--r-lg); padding:var(--sp-md) var(--sp-md) var(--sp-lg);
  cursor:pointer; position:relative; overflow:hidden;
  aspect-ratio:1; display:flex; flex-direction:column; justify-content:space-between;
  transition:var(--trans); border:1px solid rgba(255,255,255,0.06);
}
.hl-subject-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.hl-subject-card:hover { transform:translateY(-3px) scale(1.02); }
.hl-subject-card:active { transform:scale(0.97); }
.hl-subject-card[data-subject="history"]   { background:linear-gradient(145deg,#2D1B00,#1A1000); box-shadow:0 4px 20px rgba(245,158,11,0.12); }
.hl-subject-card[data-subject="history"]::before   { background:var(--s-history); }
.hl-subject-card[data-subject="geography"] { background:linear-gradient(145deg,#001A10,#00100A); box-shadow:0 4px 20px rgba(16,185,129,0.12); }
.hl-subject-card[data-subject="geography"]::before { background:var(--s-geo); }
.hl-subject-card[data-subject="civics"]    { background:linear-gradient(145deg,#150C2D,#0E0720); box-shadow:0 4px 20px rgba(139,92,246,0.12); }
.hl-subject-card[data-subject="civics"]::before    { background:var(--s-civics); }
.hl-subject-card[data-subject="economics"] { background:linear-gradient(145deg,#2D0808,#1A0404); box-shadow:0 4px 20px rgba(239,68,68,0.12); }
.hl-subject-card[data-subject="economics"]::before { background:var(--s-economics); }
.hl-subj-icon { font-size:32px; line-height:1; }
.hl-subj-name { font-size:16px; font-weight:900; color:var(--t-white); line-height:1.2; margin-bottom:4px; }
.hl-subj-meta { font-size:11px; font-weight:700; color:rgba(255,255,255,0.4); }

/* ------- Bottom Nav ------- */
.hl-bottom-nav {
  position:sticky; bottom:0; z-index:200;
  background:rgba(10,14,26,0.97);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--border-dim);
  display:flex;
}
.hl-nav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:10px 0 8px; cursor:pointer;
  border:none; background:none;
  color:var(--t-dim); font-size:10px; font-weight:800;
  font-family:inherit; gap:3px;
  transition:var(--trans); text-transform:uppercase; letter-spacing:0.4px;
}
.hl-nav-item .ni { font-size:19px; transition:var(--trans); }
.hl-nav-item.active { color:var(--g-green); }
.hl-nav-item.active .ni { filter:drop-shadow(0 0 5px var(--g-green)); transform:scale(1.12); }

/* ------- Lesson list ------- */
.hl-progress-section { padding:var(--sp-md) var(--sp-md) 0; margin-bottom:var(--sp-md); }
.hl-progress-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.hl-progress-header span { font-size:10px; font-weight:800; color:var(--t-muted); text-transform:uppercase; letter-spacing:1px; }
.hl-progress-header strong { font-size:12px; font-weight:900; color:var(--g-green); }
.hl-progress-track { background:var(--bg-card2); border-radius:var(--r-pill); height:9px; overflow:hidden; border:1px solid var(--border-dim); }
.hl-progress-fill { height:100%; background:linear-gradient(90deg,var(--g-green),#00E676); border-radius:var(--r-pill); transition:width 0.7s cubic-bezier(0.4,0,0.2,1); box-shadow:0 0 6px rgba(0,200,83,0.4); }
.hl-lessons-list { padding:0 var(--sp-md); display:flex; flex-direction:column; gap:9px; }
.hl-lesson-card {
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:var(--r-lg); padding:var(--sp-md);
  display:flex; align-items:center; gap:var(--sp-md);
  cursor:pointer; transition:var(--trans); position:relative; overflow:hidden;
}
.hl-lesson-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--border-dim); transition:var(--trans); }
.hl-lesson-card:hover { border-color:rgba(0,200,83,0.25); transform:translateX(3px); }
.hl-lesson-card:hover::before, .hl-lesson-card.completed::before { background:var(--g-green); }
.hl-lesson-card.completed { background:rgba(0,200,83,0.04); }
.hl-lesson-num { width:42px; height:42px; border-radius:var(--r-md); background:var(--bg-card2); border:1px solid var(--border-dim); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.hl-lesson-card.completed .hl-lesson-num { background:rgba(0,200,83,0.1); border-color:rgba(0,200,83,0.25); }
.hl-lesson-info { flex:1; min-width:0; }
.hl-lesson-title { font-size:14px; font-weight:800; color:var(--t-white); line-height:1.3; margin-bottom:3px; }
.hl-lesson-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--t-muted); }
.hl-lesson-badge.done { color:var(--g-green); }
.hl-lesson-badge .dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.hl-lesson-pts { font-size:11px; font-weight:900; color:var(--g-gold); white-space:nowrap; }

/* ------- Lesson detail ------- */
.hl-lesson-detail-page { background:var(--bg-dark); }
.hl-video-tabs { display:flex; background:var(--bg-card); border-bottom:1px solid var(--border-dim); }
.hl-video-tab { flex:1; padding:12px; background:none; border:none; font-family:inherit; font-size:12px; font-weight:800; color:var(--t-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--trans); }
.hl-video-tab.active { color:var(--g-green); border-bottom-color:var(--g-green); }
.hl-video-box { background:#000; }
.hl-video-box iframe,.hl-video-box video { width:100%; aspect-ratio:16/9; display:block; border:none; }
.hl-video-placeholder { aspect-ratio:16/9; background:var(--bg-card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--t-dim); }
.hl-video-placeholder .vp-icon { font-size:44px; }
.hl-video-placeholder span { font-size:12px; font-weight:700; }
.hl-lesson-body { padding:var(--sp-md); }
.hl-lesson-h1 { font-size:22px; font-weight:900; color:var(--t-white); margin-bottom:var(--sp-sm); line-height:1.2; }
.hl-lesson-desc-text { font-size:13px; color:var(--t-muted); line-height:1.8; margin-bottom:var(--sp-md); }
.hl-xp-banner { background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.2); border-radius:var(--r-md); padding:12px 14px; display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-md); }
.hl-xp-banner .xb-icon { font-size:24px; }
.hl-xp-banner .xb-text { font-size:14px; font-weight:900; color:var(--g-gold); }
.hl-xp-banner .xb-sub { font-size:11px; font-weight:700; color:rgba(255,215,0,0.5); }
.hl-lesson-actions { padding:0 var(--sp-md) var(--sp-md); display:flex; flex-direction:column; gap:9px; }
.hl-complete-btn {
  background:linear-gradient(135deg,var(--g-green),var(--g-green-dark)); color:#fff;
  border:none; border-radius:var(--r-md); padding:16px;
  font-size:16px; font-weight:900; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--glow-green); transition:var(--trans); width:100%;
}
.hl-complete-btn.done { background:var(--bg-card2); color:var(--g-green); border:2px solid rgba(0,200,83,0.3); box-shadow:none; cursor:default; }
.hl-quiz-btn { background:var(--bg-card); color:var(--t-dim); border:2px solid var(--border-dim); border-radius:var(--r-md); padding:15px; font-size:15px; font-weight:800; font-family:inherit; cursor:not-allowed; display:flex; align-items:center; justify-content:center; gap:8px; transition:var(--trans); width:100%; }
.hl-quiz-btn.ready { background:linear-gradient(135deg,var(--g-purple),#5B21B6); color:#fff; border-color:transparent; box-shadow:0 4px 16px rgba(124,58,237,0.3); cursor:pointer; }

/* ------- Quiz ------- */
.hl-quiz-page { padding:var(--sp-md); padding-bottom:90px; background:var(--bg-dark); }
.hl-quiz-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-lg); }
.hl-quiz-progress-txt { font-size:12px; font-weight:900; color:var(--g-green); text-transform:uppercase; letter-spacing:0.5px; }
.hl-quiz-dots { display:flex; gap:4px; }
.hl-qdot { width:9px; height:9px; border-radius:50%; background:var(--bg-card2); border:1px solid var(--border-dim); transition:var(--trans); }
.hl-qdot.done { background:var(--g-green); border-color:var(--g-green); }
.hl-qdot.cur  { background:var(--g-green); border-color:var(--g-green); transform:scale(1.4); box-shadow:0 0 6px var(--g-green); }
.hl-question-card { background:var(--bg-card); border:1px solid var(--border-dim); border-radius:var(--r-xl); padding:var(--sp-lg); box-shadow:var(--shadow-dark); margin-bottom:var(--sp-md); }
.hl-q-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--r-pill); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:1px; margin-bottom:var(--sp-sm); }
.hl-q-badge.mcq   { background:rgba(0,200,83,0.1); color:var(--g-green); border:1px solid rgba(0,200,83,0.2); }
.hl-q-badge.fill  { background:rgba(59,130,246,0.1); color:var(--g-blue); border:1px solid rgba(59,130,246,0.2); }
.hl-q-badge.match { background:rgba(124,58,237,0.1); color:#A78BFA; border:1px solid rgba(124,58,237,0.2); }
.hl-question-txt { font-size:17px; font-weight:800; color:var(--t-white); line-height:1.5; margin-bottom:var(--sp-lg); }
.hl-mcq-opts { display:flex; flex-direction:column; gap:9px; }
.hl-mcq-opt { display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--bg-card2); border:2px solid var(--border-dim); border-radius:var(--r-md); cursor:pointer; transition:var(--trans); font-family:inherit; font-size:13px; font-weight:700; color:var(--t-white); text-align:left; width:100%; }
.hl-mcq-opt:hover { border-color:rgba(0,200,83,0.35); background:rgba(0,200,83,0.04); }
.hl-mcq-opt .opt-l { width:30px; height:30px; border-radius:7px; background:var(--bg-dark); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:12px; flex-shrink:0; border:1px solid var(--border-dim); transition:var(--trans); }
.hl-mcq-opt.correct { border-color:var(--g-green); background:rgba(0,200,83,0.08); color:#4ADE80; }
.hl-mcq-opt.correct .opt-l { background:var(--g-green); color:#000; border-color:var(--g-green); }
.hl-mcq-opt.wrong   { border-color:var(--g-red); background:rgba(239,68,68,0.08); color:#FCA5A5; }
.hl-mcq-opt.wrong .opt-l { background:var(--g-red); color:#fff; border-color:var(--g-red); }
.hl-fill-inp { width:100%; padding:13px 14px; background:var(--bg-card2); border:2px solid var(--border-dim); border-radius:var(--r-md); font-size:15px; font-family:inherit; color:var(--t-white); outline:none; transition:var(--trans); }
.hl-fill-inp:focus { border-color:var(--g-blue); box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.hl-fill-inp::placeholder { color:var(--t-dim); }
.hl-match-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hl-match-col { display:flex; flex-direction:column; gap:7px; }
.hl-match-item { padding:9px 11px; background:var(--bg-card2); border:2px solid var(--border-dim); border-radius:var(--r-md); font-size:12px; font-weight:700; cursor:pointer; transition:var(--trans); text-align:center; font-family:inherit; color:var(--t-white); }
.hl-match-item.selected { border-color:var(--g-purple); background:rgba(124,58,237,0.1); color:#C4B5FD; }
.hl-match-item.matched  { border-color:var(--g-green); background:rgba(0,200,83,0.08); color:#4ADE80; }
.hl-feedback { display:none; border-radius:var(--r-md); padding:var(--sp-md); margin-top:var(--sp-md); animation:pageIn 0.2s ease; border:1px solid; }
.hl-feedback.show { display:block; }
.hl-feedback.correct { background:rgba(0,200,83,0.07); border-color:rgba(0,200,83,0.25); }
.hl-feedback.wrong   { background:rgba(239,68,68,0.07); border-color:rgba(239,68,68,0.25); }
.hl-fb-head { font-size:15px; font-weight:900; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.hl-feedback.correct .hl-fb-head { color:#4ADE80; }
.hl-feedback.wrong   .hl-fb-head { color:#FCA5A5; }
.hl-fb-exp { font-size:12px; color:var(--t-muted); line-height:1.7; }
.hl-quiz-acts { display:flex; flex-direction:column; gap:8px; margin-top:var(--sp-md); }

/* ------- Result ------- */
.hl-result-page { min-height:100%; background:var(--bg-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--sp-xl) var(--sp-md); text-align:center; }
.hl-result-trophy { font-size:72px; line-height:1; margin-bottom:var(--sp-md); animation:bounceIn 0.6s ease; filter:drop-shadow(0 0 20px rgba(255,215,0,0.4)); }
@keyframes bounceIn { 0%{transform:scale(0.2) rotate(-10deg);opacity:0;} 60%{transform:scale(1.12) rotate(3deg);} 80%{transform:scale(0.96);} 100%{transform:scale(1);opacity:1;} }
.hl-result-h1 { font-size:28px; font-weight:900; color:var(--t-white); margin-bottom:4px; }
.hl-result-sub { font-size:13px; color:var(--t-muted); margin-bottom:var(--sp-xl); }
.hl-result-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; width:100%; margin-bottom:var(--sp-xl); }
.hl-result-stat { background:var(--bg-card); border:1px solid var(--border-dim); border-radius:var(--r-lg); padding:var(--sp-md) var(--sp-sm); }
.hl-result-stat .rv { font-size:24px; font-weight:900; color:var(--g-green); line-height:1; }
.hl-result-stat .rl { font-size:10px; font-weight:800; color:var(--t-muted); text-transform:uppercase; letter-spacing:0.6px; margin-top:4px; }

/* ------- Profile ------- */
.hl-profile-page { background:var(--bg-dark); padding-bottom:90px; }
.hl-profile-hero { margin:var(--sp-md); background:linear-gradient(145deg,var(--bg-card2),var(--bg-card)); border:1px solid var(--border-dim); border-radius:var(--r-xl); padding:var(--sp-xl) var(--sp-md); text-align:center; position:relative; overflow:hidden; }
.hl-profile-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--g-green),var(--g-gold),var(--g-purple)); }
.hl-avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--g-green),var(--g-green-dark)); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; color:#fff; margin:0 auto var(--sp-sm); border:3px solid rgba(0,200,83,0.3); box-shadow:0 0 16px rgba(0,200,83,0.25); }
.hl-profile-name { font-size:20px; font-weight:900; color:var(--t-white); line-height:1.1; margin-bottom:3px; }
.hl-profile-email { font-size:12px; color:var(--t-muted); margin-bottom:10px; }
.hl-grade-pill { display:inline-block; background:rgba(0,200,83,0.1); border:1px solid rgba(0,200,83,0.25); border-radius:var(--r-pill); padding:3px 14px; font-size:12px; font-weight:800; color:var(--g-green); }
.hl-profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 var(--sp-md) var(--sp-md); }
.hl-profile-stat { background:var(--bg-card); border:1px solid var(--border-dim); border-radius:var(--r-lg); padding:var(--sp-lg) var(--sp-md); text-align:center; }
.hl-ps-icon { font-size:26px; margin-bottom:5px; }
.hl-ps-val { font-size:28px; font-weight:900; color:var(--t-white); line-height:1; margin-bottom:4px; }
.hl-ps-val.gold { color:var(--g-gold); }
.hl-ps-val.green { color:var(--g-green); }
.hl-ps-label { font-size:10px; font-weight:800; color:var(--t-muted); text-transform:uppercase; letter-spacing:0.7px; }
.hl-badges-section { padding:0 var(--sp-md); }
.hl-badges-hd { font-size:11px; font-weight:900; color:var(--t-muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:var(--sp-md); }
.hl-badges-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.hl-badge-card { background:var(--bg-card); border:1px solid var(--border-dim); border-radius:var(--r-lg); padding:var(--sp-md); text-align:center; position:relative; overflow:hidden; transition:var(--trans); }
.hl-badge-card.unlocked { border-color:rgba(0,200,83,0.25); background:rgba(0,200,83,0.03); }
.hl-badge-ico { font-size:32px; margin-bottom:5px; }
.hl-badge-card:not(.unlocked) .hl-badge-ico { filter:grayscale(1); opacity:0.35; }
.hl-badge-nm { font-size:12px; font-weight:800; color:var(--t-white); margin-bottom:2px; }
.hl-badge-st { font-size:10px; font-weight:700; color:var(--t-muted); }
.hl-badge-bar { height:3px; background:var(--bg-card2); border-radius:var(--r-pill); margin-top:7px; overflow:hidden; }
.hl-badge-fill { height:100%; background:linear-gradient(90deg,var(--g-green),#00E676); border-radius:var(--r-pill); }

/* ------- Global FX ------- */
.hl-toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(16px); background:var(--bg-card); border:1px solid var(--border-dim); color:var(--t-white); padding:11px 22px; border-radius:var(--r-pill); font-size:13px; font-weight:700; z-index:9998; opacity:0; pointer-events:none; transition:all 0.3s ease; white-space:nowrap; backdrop-filter:blur(8px); }
.hl-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.hl-toast.success { background:rgba(0,200,83,0.12); border-color:rgba(0,200,83,0.35); color:#4ADE80; }
.hl-toast.error   { background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.35); color:#FCA5A5; }
.hl-toast.gold    { background:rgba(255,215,0,0.12); border-color:rgba(255,215,0,0.3); color:var(--g-gold); }
.hl-pts-popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:var(--bg-card); border:1px solid rgba(0,200,83,0.3); border-radius:var(--r-xl); padding:var(--sp-xl); text-align:center; z-index:9997; box-shadow:0 0 60px rgba(0,200,83,0.15),0 24px 64px rgba(0,0,0,0.6); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); min-width:220px; }
.hl-pts-popup.show { transform:translate(-50%,-50%) scale(1); }
.hl-pts-popup .pp-icon { font-size:48px; margin-bottom:8px; }
.hl-pts-popup .pp-pts { font-size:40px; font-weight:900; background:linear-gradient(135deg,var(--g-green),#00E676); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
.hl-pts-popup .pp-lbl { font-size:12px; font-weight:700; color:var(--t-muted); }
.hl-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9996; backdrop-filter:blur(2px); }
.hl-overlay.show { display:block; }
.hl-confetti-wrap { position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.hl-confetti-piece { position:absolute; top:-20px; border-radius:2px; animation:confettiFall 1.6s ease-out forwards; }
@keyframes confettiFall { 0%{transform:translateY(0) rotate(0deg);opacity:1;} 100%{transform:translateY(80vh) rotate(720deg);opacity:0;} }
.hl-loader { display:flex; align-items:center; justify-content:center; min-height:140px; }
.hl-spinner { width:32px; height:32px; border:3px solid var(--bg-card2); border-top-color:var(--g-green); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.hl-empty { text-align:center; padding:40px var(--sp-md); color:var(--t-muted); }
.hl-empty-ico { font-size:48px; margin-bottom:var(--sp-md); }
.hl-empty-txt { font-size:14px; font-weight:700; }

/* ============================================================
   ELEMENTOR COMPATIBILITY
   ============================================================ */
.elementor-section { width:100%; }
.elementor-widget-wrap { width:100%; }
/* Override Elementor default max-width for our container */
.elementor-section.elementor-section-boxed > .elementor-container { max-width:1200px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .subjects-showcase { grid-template-columns:1fr 1fr; }
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-btns { justify-content:center; }
  .hero-visual { display:none; }
}

/* Mobile */
@media (max-width: 768px) {
  .container, .container-narrow { padding:0 var(--sp-md); }
  .site-header-inner { padding:0 var(--sp-md); }
  .site-nav { display:none; }
  .nav-hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr; gap:var(--sp-lg); }
  .features-grid { grid-template-columns:1fr; }
  .subjects-showcase { grid-template-columns:1fr 1fr; }
  .page-content { padding:var(--sp-xl) var(--sp-md); }
  .hl-app-section { padding:0; }
  .hl-wrapper { border-radius:0; box-shadow:none; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

@media (max-width: 480px) {
  .hero-inner { padding:0 var(--sp-md); }
  .subjects-showcase { grid-template-columns:1fr 1fr; }
}