/* Happy Lingo Pop-Art system — shared by the v2 student portal.
   High-contrast rule: vivid colours are accents/panels; text on bright fills is dark. */
:root{
 --cobalt:#183bff;--cobalt2:#2549d8;--blue:#1745c2;--sky:#24d8f2;--sky-soft:#e1fbff;
 --sun:#ffe447;--sun-soft:#fff8bd;--ink:#17172a;--muted:#4e5067;--paper:#fffdf6;--white:#fff;
 --line:#d3d2e2;--green:#087b48;--green-soft:#d9ffe8;--red:#b51255;--red-soft:#ffe0ef;
 --purple:#5b2bc7;--purple-soft:#eee4ff;--shadow:5px 6px 0 rgba(23,23,42,.13);--radius:22px;
}
body{background-color:var(--paper);background-image:radial-gradient(#c8c5d8 1px,transparent 1px);background-size:17px 17px;color:var(--ink)}
.side{background:var(--cobalt)!important;color:#fff;border-right:3px solid var(--ink);box-shadow:5px 0 0 var(--sun)}
.brand{font-family:'DM Sans',sans-serif;font-weight:1000;letter-spacing:-1.3px;font-size:26px}.brand span{color:var(--sun)!important}
.mini{background:#fff!important;color:var(--ink);border:3px solid var(--ink);border-radius:18px!important;box-shadow:4px 4px 0 var(--sun)}
.mini small{color:#45465d!important}.avatar{background:var(--sun)!important;color:var(--ink)!important;border:2px solid var(--ink)}
.nav a,.nav button{color:#fff!important;border:2px solid transparent;border-radius:13px!important;font-weight:900;transition:transform .16s,background .16s,border-color .16s}
.nav a:hover,.nav button:hover{transform:translateX(3px);background:var(--sun)!important;color:var(--ink)!important;border-color:var(--ink)}
.nav a.active,.nav button.active{background:var(--sun)!important;color:var(--ink)!important;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.sidefoot{color:#f1f2ff!important}
.top,.topbar{background:#fffdf6!important;border-bottom:3px solid var(--ink)!important}.top b,.top .level{color:var(--cobalt)!important;font-weight:1000!important;letter-spacing:-.3px}.top small,.top .status{color:#45465d!important}.back{color:#183bff!important;font-weight:900}
.wrap,.content{max-width:1500px}
.hero{background:var(--sun)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:26px!important;box-shadow:7px 7px 0 var(--ink)!important;padding:clamp(23px,4vw,38px)!important;isolation:isolate}
.hero h1{font-family:'DM Sans',sans-serif!important;font-weight:1000!important;letter-spacing:-1.5px!important;line-height:1.04!important;color:var(--ink)!important}.hero p{color:#29293b!important;font-weight:750!important;line-height:1.55!important}.hero:after{color:var(--purple)!important;opacity:.12!important}
.badge{background:var(--cobalt)!important;color:#fff!important;border:2px solid var(--ink)!important;border-radius:999px!important;font-weight:1000!important;box-shadow:3px 3px 0 var(--ink);padding:8px 12px!important}
.card{background:#fff!important;border:3px solid var(--ink)!important;border-radius:21px!important;box-shadow:5px 6px 0 var(--ink)!important;overflow:hidden;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-2px);box-shadow:7px 8px 0 var(--ink)!important}.head{background:var(--sky-soft)!important;border-bottom:2px solid var(--ink)!important;padding:18px 20px!important}.head h2{font-family:'DM Sans',sans-serif!important;font-weight:1000!important;letter-spacing:-.5px;color:var(--ink)!important}.head p{color:#41445a!important;font-weight:650!important}.body{padding:20px!important}
.btn,.cta,.game button{font-weight:950!important;border:2px solid var(--ink)!important;border-radius:12px!important;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}.btn:hover,.cta:hover,.game button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)!important}.primary,.cta{background:var(--cobalt)!important;color:#fff!important}.secondary{background:var(--sky-soft)!important;color:#142b76!important;border-color:var(--ink)!important}.sun,.game button{background:var(--sun)!important;color:var(--ink)!important}.pill{background:#e1fbff!important;color:#142b76!important;border:1.5px solid var(--ink)!important;font-weight:950!important}.pill.good{background:var(--green-soft)!important;color:#075a35!important}.pill.bad{background:var(--red-soft)!important;color:#8d1042!important}
.stat,.kpi{background:#fff!important;border:3px solid var(--ink)!important;border-radius:18px!important;box-shadow:4px 5px 0 var(--ink)!important}.stat:nth-child(4n+1){border-top:8px solid var(--sky)!important}.stat:nth-child(4n+2){border-top:8px solid #f72585!important}.stat:nth-child(4n+3){border-top:8px solid var(--sun)!important}.stat:nth-child(4n){border-top:8px solid #8247ff!important}.stat strong,.kpi b{color:var(--cobalt)!important;font-weight:1000!important}.stat span,.kpi small{color:#45465d!important}
.quick,.activityrow,.recommend,.game,.weakrow{border:2px solid var(--ink)!important;box-shadow:3px 4px 0 rgba(23,23,42,.14);border-radius:16px!important}.quick{background:#fff!important;color:var(--ink)!important}.quick small,.activityrow small,.recommend p,.game p{color:#45465d!important}.quick:hover{background:var(--sun-soft)!important;border-color:var(--ink)!important}.qi,.recicon,.gameicon,.ico{border:2px solid var(--ink);border-radius:12px!important}.recicon{background:#f72585!important;color:#fff!important}.game{background:#fff!important}.game button{margin-left:auto}.progress{background:#fff!important;border:2px solid var(--ink)!important}.progress i{background:linear-gradient(90deg,#24d8f2,#183bff,#f72585)!important}.progressmeta{color:#45465d!important}.notice,.demo{background:#fff8bd!important;color:#4b3700!important;border:2px solid #8c6a00!important}.error{background:#ffe0ef!important;color:#8d1042!important;border:2px solid #b51255!important}
input,select,textarea{color:var(--ink)!important;background:#fff!important;border:2px solid #77778d!important;border-radius:10px!important}input::placeholder,textarea::placeholder{color:#626278!important;opacity:1}
.mobile{background:var(--cobalt)!important;border:3px solid var(--ink)!important;box-shadow:0 8px 24px rgba(23,23,42,.25)!important}.mobile a,.mobile button{color:#fff!important;opacity:1!important}.mobile a.active,.mobile button.active{background:var(--sun)!important;color:var(--ink)!important;border-radius:10px!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b51255!important;outline-offset:3px!important}
@keyframes hlPopIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.hero,.card,.stat{animation:hlPopIn .35s ease both}
@media(max-width:900px){.side{display:none!important}.grid{grid-template-columns:1fr!important}.wrap,.content{padding:18px 14px 100px!important}.top,.topbar{padding:0 15px!important}.mobile{display:flex!important;left:7px!important;right:7px!important;bottom:7px!important;gap:2px!important;padding:6px 3px!important}.mobile a,.mobile button{font-size:9px!important;padding:7px 2px!important;min-width:0!important}.hero{padding:23px 19px!important}.hero h1{font-size:clamp(30px,8vw,45px)!important;overflow-wrap:anywhere}.stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.stat{min-width:0;padding:13px!important}.quickgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.head{align-items:flex-start!important}.body{padding:16px!important}}
@media(max-width:380px){.mobile a,.mobile button{font-size:8px!important}.quick{padding:11px!important}.hero h1{font-size:30px!important}}
@media(prefers-reduced-motion:reduce){.hero,.card,.stat{animation:none!important}.card,.stat,.quick,.btn,.cta,.game button,.nav a{transition:none!important}}