/*
Theme Name: Happy Learning
Theme URI: https://superhappyheros.com
Author: Happy Universe
Description: Gamified Social Science learning platform for students Grades 7-10. English & Tamil. Mobile-first, Elementor compatible.
Version: 4.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
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;
  --bg-dark:       #0A0E1A;
  --bg-card:       #131929;
  --bg-card2:      #1A2237;
  --bg-card3:      #1F2A42;
  --border-dim:    rgba(255,255,255,0.08);
  --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;
  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:9999px;
  --trans: all 0.22s cubic-bezier(0.4,0,0.2,1);
  --shadow: 0 2px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --glow-green: 0 0 24px rgba(0,200,83,0.35),0 4px 16px rgba(0,200,83,0.2);
}

/* ============================================================
   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
   ============================================================ */
.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 24px;display:flex;align-items:center;justify-content:space-between;height:68px}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.site-logo-icon{font-size:30px;line-height:1}
.site-logo-name{font-size:19px;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-tag{font-size:10px;font-weight:700;color:var(--page-muted)}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a,.site-nav button{padding:8px 16px;border-radius:var(--r-md);font-size:13px;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;padding:10px 20px;box-shadow:0 2px 10px rgba(0,200,83,0.3)}
.site-nav .nav-cta:hover{box-shadow:var(--glow-green);transform:translateY(-1px)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--page-text);border-radius:2px;transition:var(--trans)}
.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;z-index:800;background:rgba(0,0,0,0.5)}
.mobile-nav.open{display:block}
.mobile-nav-inner{background:#fff;padding:16px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-lg)}
.mobile-nav-inner a,.mobile-nav-inner button{display:block;padding:14px 16px;border-radius:var(--r-md);font-size:14px;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:56px 0 24px;margin-top:56px}
.site-footer-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.footer-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand-logo-icon{font-size:26px}
.footer-brand-logo-name{font-size:17px;font-weight:900;color:var(--t-white)}
.footer-brand p{font-size:13px;line-height:1.7;color:var(--t-muted);max-width:260px}
.footer-col h4{font-size:11px;font-weight:900;color:var(--t-white);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:14px}
.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:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-bottom p,.footer-bottom a{font-size:12px;color:var(--t-dim)}
.footer-bottom a:hover{color:var(--g-green)}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:820px;margin:0 auto;padding:0 24px}
.section{padding:64px 0}

/* ============================================================
   PAGE TEMPLATES — Content pages (Privacy Policy etc.)
   ============================================================ */
.page-hero{background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-card) 100%);padding:56px 0 48px;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:52px;margin-bottom:16px;filter:drop-shadow(0 0 16px rgba(0,200,83,0.4))}
.page-hero h1{font-size:clamp(26px,5vw,46px);font-weight:900;color:var(--t-white);margin-bottom:8px;line-height:1.1;position:relative}
.page-hero p{font-size:15px;color:var(--t-muted);max-width:540px;margin:0 auto;position:relative}
.page-content-wrap{background:var(--page-bg);padding:48px 0}
.page-content{background:var(--page-card);border-radius:var(--r-xl);border:1px solid var(--page-border);padding:48px;box-shadow:var(--shadow);max-width:860px;margin:0 auto}

/* Content typography */
.entry-content h1,.page-content h1{font-size:30px;font-weight:900;color:var(--page-text);margin-bottom:8px;line-height:1.2}
.entry-content h2,.page-content h2{font-size:20px;font-weight:900;color:var(--page-text);margin-top:32px;margin-bottom:10px;padding-left:14px;border-left:4px solid var(--g-green)}
.entry-content h3,.page-content h3{font-size:17px;font-weight:800;color:var(--page-text);margin-top:24px;margin-bottom:8px}
.entry-content p,.page-content p{font-size:15px;color:var(--page-muted);line-height:1.85;margin-bottom:16px}
.entry-content ul,.entry-content ol,.page-content ul,.page-content ol{margin:12px 0 12px 24px}
.entry-content ul,.page-content ul{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 strong,.page-content strong{color:var(--page-text);font-weight:800}
.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:24px}
.info-card{background:#F0FDF4;border:1px solid rgba(0,200,83,0.25);border-radius:var(--r-lg);padding:20px;margin:16px 0}
.info-card h4{font-size:14px;font-weight:800;color:var(--g-green-dark);margin-bottom:8px}
.info-card p,.info-card li{font-size:14px;color:#166534;margin-bottom:4px}
.contact-card{background:linear-gradient(135deg,var(--bg-dark),var(--bg-card2));border:1px solid var(--border-dim);border-radius:var(--r-lg);padding:28px;margin-top:24px;text-align:center}
.contact-card h3{color:var(--t-white) !important;border:none !important;padding:0 !important;margin-top:0 !important}
.contact-card p{color:var(--t-muted) !important}
.contact-card a{color:var(--g-green) !important;font-weight:800 !important}

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */
.hero-section{background:linear-gradient(160deg,var(--bg-dark) 0%,#0D1428 60%,var(--bg-card) 100%);padding:64px 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),transparent 50%),radial-gradient(ellipse at 85% 20%,rgba(124,58,237,0.08),transparent 40%);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.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:11px;font-weight:800;color:var(--g-green);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.hero-h1{font-size:clamp(30px,5vw,52px);font-weight:900;color:var(--t-white);line-height:1.1;margin-bottom:16px}
.hero-h1 span{background:linear-gradient(135deg,var(--g-green),#00E676);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-p{font-size:16px;color:var(--t-muted);line-height:1.8;margin-bottom:32px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.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{background:var(--page-bg);padding:64px 0}
.section-head{text-align:center;margin-bottom:48px}
.section-overline{display:inline-block;font-size:11px;font-weight:900;color:var(--g-green-dark);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px}
.section-head h2{font-size:clamp(22px,4vw,38px);font-weight:900;color:var(--page-text);margin-bottom:10px}
.section-head p{font-size:15px;color:var(--page-muted);max-width:540px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{background:var(--page-card);border:1px solid var(--page-border);border-radius:var(--r-lg);padding:28px;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:34px;margin-bottom:14px}
.feature-card h3{font-size:17px;font-weight:900;color:var(--page-text);margin-bottom:8px}
.feature-card p{font-size:13px;color:var(--page-muted);line-height:1.7}
.subjects-section{background:var(--bg-dark);padding:64px 0}
.subjects-section .section-head h2{color:var(--t-white)}
.subjects-section .section-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:14px}
.ssc{border-radius:var(--r-lg);padding:28px 16px;position:relative;overflow:hidden;transition:var(--trans);cursor:pointer;border:1px solid rgba(255,255,255,0.06);text-align:center}
.ssc:hover{transform:translateY(-6px) scale(1.02)}
.ssc[data-s="history"]  {background:linear-gradient(145deg,#2D1B00,#1A1000);box-shadow:0 4px 20px rgba(245,158,11,0.12)}
.ssc[data-s="geography"]{background:linear-gradient(145deg,#001A10,#00100A);box-shadow:0 4px 20px rgba(16,185,129,0.12)}
.ssc[data-s="civics"]   {background:linear-gradient(145deg,#150C2D,#0E0720);box-shadow:0 4px 20px rgba(139,92,246,0.12)}
.ssc[data-s="economics"]{background:linear-gradient(145deg,#2D0808,#1A0404);box-shadow:0 4px 20px rgba(239,68,68,0.12)}
.ssc-icon{font-size:38px;margin-bottom:12px}
.ssc-name{font-size:15px;font-weight:900;color:var(--t-white)}
.cta-section{background:linear-gradient(135deg,var(--g-green-dark),var(--g-green));padding:64px 0;text-align:center}
.cta-section h2{font-size:clamp(24px,4vw,40px);font-weight:900;color:#fff;margin-bottom:14px}
.cta-section p{font-size:15px;color:rgba(255,255,255,0.85);margin-bottom:32px}

/* ============================================================
   BUTTONS (global)
   ============================================================ */
.hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:var(--r-md);border:none;cursor:pointer;font-size:15px;font-weight:800;font-family:inherit;transition:var(--trans);text-decoration:none;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-primary{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{box-shadow:var(--glow-green);transform:translateY(-2px)}
.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)}

/* ============================================================
   APP WRAPPER
   The SPA game. On desktop = centered card. On mobile = full screen.
   ============================================================ */
.hl-app-wrap{background:var(--bg-dark);min-height:calc(100vh - 68px);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px}
.hl-app{width:100%;max-width:480px;min-height:calc(100vh - 68px - 64px);background:var(--bg-dark);position:relative}

/* ============================================================
   SPA PAGES
   ============================================================ */
.hl-page{display:none;min-height:100%}
.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 16px;background:rgba(10,14,26,0.96);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-home-page{background:linear-gradient(160deg,rgba(0,200,83,0.04) 0%,transparent 40%,rgba(124,58,237,0.04) 100%);padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center}
.hl-logo-wrap{text-align:center;margin-bottom:16px}
.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:28px;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{width:100%;max-width:300px;margin:0 auto 20px;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 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}

/* Language card */
.hl-lang-card{width:100%;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--r-lg);padding:16px;margin-bottom:16px}
.hl-lang-label{font-size:10px;font-weight:900;color:var(--t-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.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 .lck{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 .lck{background:var(--g-green);border-color:var(--g-green);color:#000}

/* App buttons */
.hl-btns{width:100%;display:flex;flex-direction:column;gap:10px}
.hl-abtn{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-abtn::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-abtn:hover::before{left:150%}
.hl-abtn:active{transform:scale(0.97)}
.hl-abtn-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-abtn-green:hover{box-shadow:var(--glow-green);transform:translateY(-2px)}
.hl-abtn-google{background:var(--bg-card2);color:var(--t-white);border:2px solid var(--border-dim)}
.hl-abtn-google:hover{border-color:var(--g-green)}
.hl-abtn-outline{background:transparent;color:var(--g-green);border:2px solid rgba(0,200,83,0.4)}
.hl-abtn-outline:hover{background:rgba(0,200,83,0.08)}
.hl-abtn-ghost{background:transparent;color:var(--t-muted);font-size:13px;padding:10px}
.hl-abtn-purple{background:linear-gradient(135deg,var(--g-purple),#5B21B6);color:#fff;box-shadow:0 4px 16px rgba(124,58,237,0.3)}

/* Divider */
.hl-or{display:flex;align-items:center;gap:10px;color:var(--t-dim);font-size:11px;font-weight:700;margin:4px 0}
.hl-or::before,.hl-or::after{content:'';flex:1;height:1px;background:var(--border-dim)}

/* Form card */
.hl-form-wrap{width:100%;padding:16px;background:var(--bg-dark)}
.hl-form-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--r-xl);padding:28px 24px;width:100%;margin-bottom:16px}
.hl-form-head{margin-bottom:20px}
.hl-form-head h2{font-size:21px;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:14px}
.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}

/* Subjects page */
.hl-subjects-bg{background:var(--bg-dark)}
.hl-greeting{padding:20px 16px 8px}
.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:23px;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:8px 16px 16px}
.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 16px 8px;font-size:11px;font-weight:900;color:var(--t-muted);text-transform:uppercase;letter-spacing:1.5px}
.hl-subj-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px}
.hl-subj-card{border-radius:var(--r-lg);padding:16px 14px 20px;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-subj-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.hl-subj-card:hover{transform:translateY(-3px) scale(1.02)}
.hl-subj-card:active{transform:scale(0.97)}
.hl-subj-card[data-s="history"]  {background:linear-gradient(145deg,#2D1B00,#1A1000);box-shadow:0 4px 20px rgba(245,158,11,0.12)}
.hl-subj-card[data-s="history"]::before  {background:#F59E0B}
.hl-subj-card[data-s="geography"]{background:linear-gradient(145deg,#001A10,#00100A);box-shadow:0 4px 20px rgba(16,185,129,0.12)}
.hl-subj-card[data-s="geography"]::before{background:#10B981}
.hl-subj-card[data-s="civics"]   {background:linear-gradient(145deg,#150C2D,#0E0720);box-shadow:0 4px 20px rgba(139,92,246,0.12)}
.hl-subj-card[data-s="civics"]::before   {background:#8B5CF6}
.hl-subj-card[data-s="economics"]{background:linear-gradient(145deg,#2D0808,#1A0404);box-shadow:0 4px 20px rgba(239,68,68,0.12)}
.hl-subj-card[data-s="economics"]::before{background:#EF4444}
.hl-subj-icon{font-size:30px;line-height:1}
.hl-subj-name{font-size:16px;font-weight:900;color:var(--t-white);line-height:1.2;margin-bottom:3px}
.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)}

/* Lessons */
.hl-prog-section{padding:16px 16px 0;margin-bottom:16px}
.hl-prog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.hl-prog-header span{font-size:10px;font-weight:800;color:var(--t-muted);text-transform:uppercase;letter-spacing:1px}
.hl-prog-header strong{font-size:12px;font-weight:900;color:var(--g-green)}
.hl-prog-track{background:var(--bg-card2);border-radius:var(--r-pill);height:9px;overflow:hidden;border:1px solid var(--border-dim)}
.hl-prog-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 16px;display:flex;flex-direction:column;gap:9px;padding-bottom:80px}
.hl-lesson-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--r-lg);padding:16px;display:flex;align-items:center;gap:14px;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.done::before{background:var(--g-green)}
.hl-lesson-card.done{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.done .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-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--t-muted)}
.hl-lesson-status.done{color:var(--g-green)}
.hl-lesson-status .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-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{width:100%;aspect-ratio:16/9;display:block;border:none}
.hl-video-ph{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-ph .vp-icon{font-size:44px}
.hl-lesson-body{padding:16px}
.hl-lesson-h1{font-size:21px;font-weight:900;color:var(--t-white);margin-bottom:10px;line-height:1.2}
.hl-lesson-desc{font-size:13px;color:var(--t-muted);line-height:1.8;margin-bottom:16px}
.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:16px}
.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 16px 24px;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:0 4px 16px rgba(0,200,83,0.3);transition:var(--trans);width:100%}
.hl-complete-btn:hover{box-shadow:var(--glow-green);transform:translateY(-2px)}
.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:14px;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}
.hl-quiz-btn.ready:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(124,58,237,0.35)}

/* Quiz */
.hl-quiz-page{padding:16px;padding-bottom:90px;background:var(--bg-dark)}
.hl-quiz-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.hl-quiz-prog-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-q-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--r-xl);padding:20px;margin-bottom:16px}
.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:10px}
.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-q-txt{font-size:17px;font-weight:800;color:var(--t-white);line-height:1.5;margin-bottom:20px}
.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 .ol{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 .ol{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 .ol{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:16px;margin-top:14px;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:14px}

/* Result */
.hl-result-page{min-height:100%;background:var(--bg-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center}
.hl-result-trophy{font-size:72px;line-height:1;margin-bottom:16px;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:27px;font-weight:900;color:var(--t-white);margin-bottom:4px}
.hl-result-sub{font-size:13px;color:var(--t-muted);margin-bottom:32px}
.hl-result-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;margin-bottom:32px}
.hl-result-stat{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--r-lg);padding:16px 8px}
.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:16px;background:linear-gradient(145deg,var(--bg-card2),var(--bg-card));border:1px solid var(--border-dim);border-radius:var(--r-xl);padding:28px 16px;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 10px;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:19px;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 16px 16px}
.hl-profile-stat{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:var(--r-lg);padding:20px 16px;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 16px}
.hl-badges-hd{font-size:11px;font-weight:900;color:var(--t-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.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:16px;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:80px;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:32px;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 16px;color:var(--t-muted)}
.hl-empty-ico{font-size:48px;margin-bottom:16px}
.hl-empty-txt{font-size:14px;font-weight:700}

/* ============================================================
   ELEMENTOR FIXES — The main fix for "content area not found"
   We must NOT use custom page templates for Elementor pages.
   page.php with the_content() call is what Elementor needs.
   ============================================================ */
.elementor-page .page-hero{display:none}
.elementor-section-boxed>.elementor-container{max-width:1200px}
.hl-elementor-wrap{min-height:calc(100vh - 68px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@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-img-card{display:none}}
@media(max-width:768px){.container,.container-narrow{padding:0 16px}.site-header-inner{padding:0 16px}.site-nav{display:none}.nav-hamburger{display:flex}.footer-grid{grid-template-columns:1fr;gap:24px}.features-grid{grid-template-columns:1fr}.subjects-showcase{grid-template-columns:1fr 1fr}.page-content{padding:24px 16px}.hl-app-wrap{padding:0}.hl-app{border-radius:0;box-shadow:none}.footer-bottom{flex-direction:column;align-items:flex-start}}
@media(min-width:768px){.hl-app{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}}