/*
  KlikSkor Visual Identity 2026
  Concept: Answer Sheet Energy — exam paper, highlighter and score cues.
  Visual-only layer: no content or application behaviour is changed here.
*/

:root{
  --ks-blue:#075aa6;
  --ks-blue-2:#0b70c5;
  --ks-navy:#092844;
  --ks-navy-2:#0d3d68;
  --ks-yellow:#ffd43b;
  --ks-yellow-2:#f4bd00;
  --ks-paper:#fffef9;
  --ks-canvas:#edf4f7;
  --ks-ink:#10283d;
  --ks-muted:#5c7081;
  --ks-line:#cbdce7;
  --ks-green:#178a61;
  --ks-red:#d94b52;
  --ks-violet:#6954c7;
  --ks-shadow:0 8px 0 rgba(9,40,68,.07),0 18px 40px rgba(9,40,68,.08);
  --ks-radius:12px;
}

*{box-sizing:border-box}
html{accent-color:var(--ks-blue);scroll-behavior:smooth}
body{
  color:var(--ks-ink)!important;
  background-color:var(--ks-canvas)!important;
  background-image:
    linear-gradient(rgba(7,90,166,.035) 1px,transparent 1px),
    radial-gradient(circle at 17px 17px,rgba(7,90,166,.08) 1.2px,transparent 1.4px)!important;
  background-size:100% 34px,34px 34px!important;
  font-family:"Avenir Next","Segoe UI Variable",Inter,"Segoe UI",Arial,sans-serif!important;
  font-size:15px!important;
  line-height:1.55!important;
}

::selection{background:var(--ks-yellow);color:var(--ks-navy)}
a{color:var(--ks-blue)}
h1,h2,h3,h4,h5,h6,
.hero h1,.brand h1,.intro h2,.level h3,.plan h3,.card h2,.setcard h2{
  color:var(--ks-ink);
  font-family:"Avenir Next","Segoe UI Variable Display",Inter,"Segoe UI",Arial,sans-serif!important;
  font-style:normal!important;
  font-weight:750!important;
  letter-spacing:-.025em!important;
}
p{font-weight:400}
strong,b{font-weight:750}

/* Brand header: highlighter stripe + answer-sheet dots */
.hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  color:#fff!important;
  background:linear-gradient(112deg,var(--ks-navy) 0%,var(--ks-blue) 66%,var(--ks-blue-2) 100%)!important;
  border:0!important;
  border-bottom:9px solid var(--ks-yellow)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hero::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:auto -35px -62px auto!important;
  width:270px!important;
  height:210px!important;
  opacity:.34!important;
  border:0!important;
  border-radius:0!important;
  background:
    radial-gradient(circle,#fff 0 7px,transparent 7.5px) 0 0/42px 42px!important;
  filter:none!important;
  transform:rotate(-7deg)!important;
}
.hero::after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  left:-5%!important;
  right:auto!important;
  top:30%!important;
  bottom:auto!important;
  width:38%!important;
  height:15px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--ks-yellow)!important;
  opacity:.16!important;
  filter:none!important;
  transform:rotate(-4deg)!important;
}
.hero .wrap,.hero .top,.hero .brand,.heroText,.hero-grid,.topbar{position:relative;z-index:1}
.hero h1,.hero h2,.hero h3,.hero p,.hero .brand{color:#fff!important}
.hero h1 span,.hero .brand-title span,.brand h1 span{color:var(--ks-yellow)!important}
.hero h1.brand-title{
  font-size:clamp(3.25rem,10vw,5.5rem)!important;
  font-weight:850!important;
  line-height:.88!important;
  letter-spacing:-.06em!important;
  text-shadow:0 4px 0 rgba(4,28,48,.26);
}
.hero .slogan{max-width:720px;font-size:clamp(.96rem,2.6vw,1.18rem)!important;font-weight:700!important;letter-spacing:.01em!important}
.hero .sub,.hero-copy{color:#dcebf5!important}
.mini-logo,.hero .mark,.brand-icon{
  border:2px solid #fff!important;
  border-radius:7px!important;
  background:var(--ks-yellow)!important;
  color:var(--ks-navy)!important;
  box-shadow:4px 4px 0 rgba(2,24,42,.25)!important;
}
.top-pill,.nav-pill,.badge{
  border:1px solid rgba(255,255,255,.48)!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.1)!important;
  color:#fff!important;
  backdrop-filter:none!important;
}
.eyebrow,.intro-kicker{
  display:inline-flex!important;
  border:0!important;
  border-radius:4px!important;
  background:var(--ks-yellow)!important;
  color:var(--ks-navy)!important;
  box-shadow:4px 4px 0 rgba(7,43,73,.16)!important;
  font-size:.67rem!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
}
.hero-stat{
  border:1px solid rgba(255,255,255,.42)!important;
  border-radius:7px!important;
  background:rgba(5,38,65,.46)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.hero-stat small{color:#d7e8f4!important}
.hero-visual{
  border:5px solid var(--ks-paper)!important;
  border-radius:8px!important;
  background:var(--ks-navy)!important;
  box-shadow:12px 12px 0 var(--ks-yellow)!important;
  transform:rotate(1deg)!important;
}
.visual-chip{
  border:0!important;
  border-radius:4px!important;
  background:var(--ks-yellow)!important;
  color:var(--ks-navy)!important;
  box-shadow:3px 3px 0 rgba(0,0,0,.2)!important;
  backdrop-filter:none!important;
}
.back{
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:6px!important;
  background:rgba(255,255,255,.1)!important;
  color:#fff!important;
  box-shadow:none!important;
  text-decoration:none!important;
}

/* Shared paper surfaces */
.card,.app-panel,.setcard,.install,.tabs,.package,.plan,.order-card,
.summary,.summary-card,.question-card,.record-card,.records,.set,.fact,.faq details,.account-box{
  border:1px solid var(--ks-line)!important;
  border-radius:var(--ks-radius)!important;
  background:var(--ks-paper)!important;
  box-shadow:var(--ks-shadow)!important;
}
.card,.app-panel,.setcard,.plan,.summary,.records,.set{position:relative}
.card::before,.app-panel::before,.summary::before,.records::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:4px;
  background:linear-gradient(90deg,var(--ks-yellow) 0 23%,var(--ks-blue) 23% 54%,transparent 54%);
}
.tag,.pill,.curriculum span,.chip,.quota{
  border:1px solid #bad3e4!important;
  border-radius:4px!important;
  background:#e9f3f9!important;
  color:var(--ks-navy-2)!important;
  font-size:.68rem!important;
  font-weight:750!important;
}

/* Buttons are tactile but not glossy */
button,.btn,.primary,.secondary,.install-btn,.cta,.action-btn,.purchase,.review-cta{
  border-radius:7px!important;
  font-family:inherit!important;
  font-weight:800!important;
  letter-spacing:.015em!important;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease!important;
}
.primary,.btn:not(.light):not(.ghost):not(.danger):not(.secondary),.install-btn,.cta-primary{
  border:1px solid var(--ks-navy)!important;
  background:var(--ks-blue)!important;
  color:#fff!important;
  box-shadow:0 4px 0 var(--ks-navy)!important;
}
.secondary,.premium-link,.guest-link,.noteBtn,.cta-yellow{
  border-color:var(--ks-yellow-2)!important;
  background:var(--ks-yellow)!important;
  color:var(--ks-navy)!important;
}
.ghost,.light{background:#edf4f8!important;color:var(--ks-navy)!important}
button:hover,.btn:hover,.cta:hover,.action-btn:hover{transform:translateY(-2px)}
button:active,.btn:active,.cta:active,.action-btn:active{transform:translateY(2px);box-shadow:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--ks-yellow)!important;
  outline-offset:3px!important;
}

/* Home: compact student tool-board */
body:has(.app-panel) main.wrap{position:relative}
.app-panel{
  padding:22px!important;
  border-top:0!important;
  border-radius:14px!important;
  background:var(--ks-paper)!important;
}
.app-panel-head{padding-bottom:12px;border-bottom:1px dashed #afc6d6}
.app-panel-head h2{font-size:1.12rem!important;font-weight:800!important}
.app-panel-head h2::after{
  content:"";
  display:block;
  width:56px;
  height:6px;
  margin-top:5px;
  background:var(--ks-yellow);
  transform:rotate(-1deg);
}
.app-panel-head small{color:var(--ks-muted)!important;font-weight:650!important}
.quick-actions{gap:22px 12px!important}
.quick-actions a,.quick-actions .account-login-link,.quick-actions .guest-link,
.quick-actions .premium-link,.quick-actions .login-link{
  min-height:96px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ks-ink)!important;
  box-shadow:none!important;
  font-size:.69rem!important;
  font-weight:700!important;
}
.app-icon{
  position:relative;
  z-index:1;
  width:58px!important;
  height:58px!important;
  border:2px solid var(--ks-blue)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--ks-blue)!important;
  box-shadow:inset 0 -7px 0 #e5f1f8,4px 4px 0 #cbdde8!important;
  font-size:1.45rem!important;
}
.quick-actions a:nth-child(3n+2) .app-icon{border-color:var(--ks-yellow-2)!important;box-shadow:inset 0 -7px 0 #fff4bd,4px 4px 0 #e7d479!important}
.quick-actions a:nth-child(3n) .app-icon{border-color:var(--ks-navy)!important;box-shadow:inset 0 -7px 0 #dce8ef,4px 4px 0 #b7cad6!important}
.quick-actions a:hover .app-icon{transform:rotate(-2deg) translateY(-2px)!important}
.app-badge{
  z-index:3!important;
  white-space:nowrap;
  top:-8px!important;
  border:2px solid #fff!important;
  border-radius:4px!important;
  background:var(--ks-red)!important;
  transform:translateX(3px) rotate(-3deg)!important;
  font-weight:850!important;
}
.quick-actions a[href="bahan-pdf.html"]{
  grid-column:1/-1!important;
  min-height:62px!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  border:2px dashed #9db8ca!important;
  border-radius:9px!important;
  background:#f8fcfe!important;
}
.quick-actions a[href="bahan-pdf.html"] .app-icon{width:44px!important;height:44px!important}
.quick-actions a[href="bahan-pdf.html"] .app-badge{left:calc(50% + 40px)!important;top:-9px!important}
.install{
  border:2px dashed #9db8ca!important;
  border-radius:10px!important;
  background:#f8fcfe!important;
  box-shadow:none!important;
}
.install-copy img{border:2px solid var(--ks-blue);border-radius:7px!important}
.install-btn{background:var(--ks-navy)!important}
.learn-panel .intro{text-align:left!important}
.learn-panel .intro h2{margin-top:9px!important}
.learn-panel .level{
  min-height:128px!important;
  justify-content:center!important;
  padding:22px!important;
}
.learn-panel .level-head,
.learn-panel .level p,
.learn-panel .level .tags,
.learn-panel .level .go{display:none!important}
.learn-panel .level-label{margin-top:0!important;font-size:.7rem!important;letter-spacing:.08em!important}
.learn-panel .level h3{margin:6px 0 0!important;font-size:1.35rem!important}
.levels{gap:15px!important}
.level{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--ks-line)!important;
  border-top:6px solid var(--ks-blue)!important;
  border-radius:10px!important;
  background:var(--ks-paper)!important;
  box-shadow:0 7px 0 rgba(7,90,166,.11)!important;
}
.level:nth-child(even){border-top-color:var(--ks-yellow-2)!important}
.level::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:82px!important;
  height:82px!important;
  top:auto!important;
  right:-27px!important;
  bottom:-27px!important;
  border:13px solid rgba(7,90,166,.09)!important;
  border-radius:50%!important;
  background:transparent!important;
  opacity:1!important;
  transform:none!important;
}
.level-icon{
  border:2px solid var(--ks-navy)!important;
  border-radius:8px!important;
  background:var(--ks-blue)!important;
  box-shadow:3px 3px 0 var(--ks-yellow)!important;
}
.level-no{color:var(--ks-blue)!important;font-weight:850!important;opacity:.16!important}
.level-label,.go{color:var(--ks-blue)!important;font-weight:800!important}
.level .arrow,.chapter .arrow{
  border:1px solid var(--ks-yellow-2)!important;
  border-radius:6px!important;
  background:var(--ks-yellow)!important;
  color:var(--ks-navy)!important;
  box-shadow:3px 3px 0 rgba(95,72,0,.18)!important;
}
.level:hover,.level:focus-visible{transform:translateY(-3px)!important;box-shadow:0 10px 0 rgba(7,90,166,.14)!important}
.reviews-home{
  border:1px solid var(--ks-line)!important;
  border-left:8px solid var(--ks-yellow)!important;
  border-radius:10px!important;
  background:var(--ks-paper)!important;
  box-shadow:var(--ks-shadow)!important;
}
.review-item{border-radius:3px!important;background:#f0f6fa!important}
.review-cta{background:var(--ks-yellow)!important;color:var(--ks-navy)!important}
.note{border:1px dashed #d3ac18!important;border-radius:7px!important;background:#fff9d5!important}

/* Tingkatan directory: chapter cards resemble indexed revision sheets */
.chapter-grid{gap:14px!important}
.chapter{
  position:relative!important;
  overflow:hidden!important;
  min-height:150px!important;
  border:1px solid var(--ks-line)!important;
  border-radius:10px!important;
  background:var(--ks-paper)!important;
  box-shadow:0 6px 0 rgba(9,40,68,.07)!important;
}
.chapter-band{width:8px!important;background:var(--accent,var(--ks-blue))!important}
.chapter-body{padding:17px!important}
.number{
  width:44px!important;
  height:44px!important;
  border:2px solid var(--accent,var(--ks-blue))!important;
  border-radius:50%!important;
  background:#fff!important;
  color:var(--accent,var(--ks-blue))!important;
  box-shadow:inset 0 0 0 4px var(--soft,#eaf3f9)!important;
}
.chapter h3{font-size:1.02rem!important;line-height:1.3!important}
.chapter .meta{gap:5px!important}
.chapter .tag{border-radius:3px!important}
.chapter:hover,.chapter:focus-visible{transform:translateY(-3px)!important;border-color:var(--accent,var(--ks-blue))!important;box-shadow:0 9px 0 color-mix(in srgb,var(--accent,var(--ks-blue)) 20%,transparent)!important}
.tabs{
  padding:6px!important;
  border:1px solid var(--ks-line)!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 5px 0 rgba(9,40,68,.06)!important;
}
.tab{border-radius:5px!important;background:#eaf2f7!important;color:var(--ks-navy)!important;box-shadow:none!important}
.tab.active{background:var(--ks-blue)!important;color:#fff!important}
.simulation{border:1px solid var(--ks-line)!important;border-left:8px solid var(--ks-yellow-2)!important;border-radius:10px!important;background:var(--ks-paper)!important;box-shadow:var(--ks-shadow)!important}
.how{border:1px dashed #d5b237!important;border-radius:10px!important;background:#fffbea!important}
.step-no{border-radius:50%!important;background:var(--ks-blue)!important;color:#fff!important}

/* Level selection: visually distinct difficulty tracks */
.level.low{--track:#178a61;border-left:7px solid var(--track)!important}
.level.medium{--track:#df8a00;border-left:7px solid var(--track)!important}
.level.kbat{--track:#6954c7;border-left:7px solid var(--track)!important}
.level.low .levelIcon,.level.medium .levelIcon,.level.kbat .levelIcon{
  border:1px solid color-mix(in srgb,var(--track) 70%,#000)!important;
  border-radius:7px!important;
  background:color-mix(in srgb,var(--track) 13%,#fff)!important;
  box-shadow:3px 3px 0 color-mix(in srgb,var(--track) 28%,transparent)!important;
}
.level.low .go,.level.medium .go,.level.kbat .go{color:var(--track)!important}
.level .meta .tag{background:#f3f7f9!important}
.notice{border:1px dashed #d3ae22!important;border-radius:8px!important;background:#fff9dc!important;color:var(--ks-ink)!important}

/* Set selection and quizzes: clear exam-like hierarchy */
.app{max-width:840px!important}
.app .hero{margin:0!important;padding:18px 20px 22px!important;border-radius:0!important}
.app>.content{padding:14px 12px 40px!important}
.nav{gap:5px!important;border:1px solid var(--ks-line)!important;border-radius:8px!important;background:#fff!important;box-shadow:0 4px 0 rgba(9,40,68,.06)!important}
.nav button{border-radius:5px!important;box-shadow:none!important}
.sets{gap:12px!important}
.setcard,.setcard:first-child,.setcard:nth-child(2),.setcard:nth-child(3),
.setcard:nth-child(4),.setcard:nth-child(5),.setcard:nth-child(6),
.setcard:nth-child(7),.setcard:nth-child(8),.setcard.extra{
  overflow:hidden!important;
  padding:16px!important;
  border:1px solid var(--ks-line)!important;
  border-left:6px solid var(--ks-blue)!important;
  border-radius:9px!important;
  background:var(--ks-paper)!important;
  box-shadow:0 5px 0 rgba(9,40,68,.07)!important;
}
.setcard:nth-child(4n+2){border-left-color:var(--ks-yellow-2)!important}
.setcard:nth-child(4n+3){border-left-color:var(--ks-green)!important}
.setcard:nth-child(4n){border-left-color:var(--ks-violet)!important}
.setcard::after{display:none!important}
.setcard:hover{transform:translateY(-2px)!important;box-shadow:0 8px 0 rgba(9,40,68,.09)!important}
.seticon,.avatar,.logo{
  border:1px solid #b9d0df!important;
  border-radius:7px!important;
  background:#e9f3f9!important;
  color:var(--ks-blue)!important;
  box-shadow:3px 3px 0 #cadde8!important;
}
.setcard h2{font-size:1.03rem!important;font-weight:750!important}
.stat{border:0!important;border-radius:4px!important;background:#edf4f8!important}
.progress{height:8px!important;border-radius:3px!important;background:#dbe7ee!important}
.bar{border-radius:3px!important;background:var(--ks-yellow)!important}
#quiz .card{
  padding:24px!important;
  border:1px solid var(--ks-line)!important;
  border-top:6px solid var(--ks-blue)!important;
  border-radius:10px!important;
  background:var(--ks-paper)!important;
  box-shadow:var(--ks-shadow)!important;
}
.quiztop{color:var(--ks-muted)!important;font-size:.76rem!important;font-weight:700!important}
.q{font-size:1.13rem!important;line-height:1.5!important;font-weight:750!important;letter-spacing:-.01em!important}
.opt{
  min-height:0!important;
  margin:9px 0!important;
  padding:13px 14px!important;
  border:1px solid #bfcfda!important;
  border-left:5px solid var(--ks-blue)!important;
  border-radius:7px!important;
  background:#fff!important;
  color:var(--ks-ink)!important;
  box-shadow:none!important;
  font-size:.89rem!important;
  font-weight:550!important;
  line-height:1.45!important;
}
.opt:hover:not(:disabled){border-color:var(--ks-blue)!important;background:#eef7fc!important;transform:translateX(2px)}
.opt.good{border-color:#69b38e!important;border-left-color:var(--ks-green)!important;background:#e9f7f0!important;color:#0c6545!important}
.opt.bad{border-color:#df9195!important;border-left-color:var(--ks-red)!important;background:#fff0f0!important;color:#9f3038!important}
.feedback,.feedbackCard{border-radius:7px!important}
.feedbackCard{border:1px solid var(--ks-line)!important;background:var(--ks-paper)!important}
.buku-silap-float,.levelBackBtn,#klikskorQuizTimer,#klikskorTimerChoice{border-radius:6px!important;box-shadow:3px 3px 0 rgba(9,40,68,.13)!important}

/* Simulations and track records */
.grid{gap:12px!important}
.set{
  overflow:hidden!important;
  border-left:7px solid var(--ks-blue)!important;
  border-radius:9px!important;
  box-shadow:0 5px 0 rgba(9,40,68,.07)!important;
}
.set:nth-child(even){border-left-color:var(--ks-yellow-2)!important}
.set .go{color:var(--ks-blue)!important}
.record{border-bottom:1px dashed #b8cad6!important}
.score{color:var(--ks-blue)!important}

/* Premium: revision-pass packages, not generic SaaS pricing cards */
.sales-card{border-top:0!important}
.sales-intro{padding-top:5px}
.plans{gap:18px!important}
.plan{
  overflow:hidden!important;
  padding:22px!important;
  border:1px solid var(--ks-line)!important;
  border-top:7px solid var(--ks-blue)!important;
  border-radius:10px!important;
  background:var(--ks-paper)!important;
  box-shadow:0 7px 0 rgba(9,40,68,.08)!important;
}
.plan.popular,.plan.master{border-color:#e2b80f!important;border-top-color:var(--ks-yellow-2)!important;background:#fffdf2!important}
.ribbon{
  border:1px solid #d6a900!important;
  border-radius:4px!important;
  background:var(--ks-yellow)!important;
  color:var(--ks-navy)!important;
  transform:rotate(1deg);
}
.plan .price{
  border:0!important;
  border-radius:7px!important;
  background:var(--ks-navy)!important;
  box-shadow:0 6px 0 var(--ks-yellow)!important;
}
.plan .price::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  background:radial-gradient(circle at 12px 12px,rgba(255,255,255,.15) 2px,transparent 2.5px) 0 0/24px 24px!important;
  transform:none!important;
  animation:none!important;
  opacity:1!important;
}
.plan .price::after{border-color:rgba(255,212,59,.23)!important}
.plan .price strong{position:relative;color:var(--ks-yellow)!important;text-shadow:none!important}
.features li::before{color:var(--ks-green)!important}
.plan .purchase{
  border:1px solid #000!important;
  border-radius:7px!important;
  background:#111!important;
  color:#fff!important;
  box-shadow:0 4px 0 #5d5d5d!important;
}
.explain{border-radius:10px!important;background:var(--ks-navy)!important}
.explain .step{border-radius:7px!important;background:rgba(255,255,255,.08)!important}
.fact{border-radius:7px!important;background:#f7fbfd!important;box-shadow:none!important}
.faq details{border-radius:7px!important;box-shadow:none!important}
.faq summary::after{color:var(--ks-blue)!important}
.not-included{border-radius:7px!important}

/* Account forms and admin panels */
input,textarea,select{
  min-height:44px;
  border:1px solid #aec4d3!important;
  border-radius:6px!important;
  background:#fff!important;
  color:var(--ks-ink)!important;
}
input:focus,textarea:focus,select:focus{border-color:var(--ks-blue)!important;box-shadow:0 0 0 3px rgba(7,90,166,.14)!important}
form.card{border-top:6px solid var(--ks-yellow)!important}
dialog{border-radius:10px!important}
.order-card{border-left:6px solid var(--ks-blue)!important}

/* Footer and floating help */
footer{
  background:var(--ks-navy)!important;
  color:#c8dae6!important;
  border-top:7px solid var(--ks-yellow);
}
footer b,footer strong{color:#fff!important}
.whatsapp-help{border:3px solid #fff!important;box-shadow:0 6px 0 rgba(9,40,68,.2)!important}

@media(min-width:680px){
  .quick-actions{grid-template-columns:repeat(5,1fr)!important}
  .levels{gap:18px!important}
  .chapter-grid{gap:16px!important}
}

@media(max-width:560px){
  body{font-size:14px!important;background-size:100% 30px,30px 30px!important}
  .wrap{width:min(100% - 22px,940px)}
  .hero{border-bottom-width:7px!important}
  .hero h1.brand-title{font-size:3.2rem!important}
  .hero::before{right:-92px!important;bottom:-78px!important;opacity:.22!important}
  .app-panel{padding:18px 13px!important}
  .quick-actions{grid-template-columns:repeat(3,1fr)!important;gap:20px 8px!important}
  .app-icon{width:53px!important;height:53px!important}
  .levels{grid-template-columns:1fr!important}
  .learn-panel .levels{grid-template-columns:1fr 1fr!important}
  .learn-panel .level{min-height:116px!important;padding:17px!important}
  .learn-panel .level h3{font-size:1.08rem!important}
  .chapter{min-height:142px!important}
  .chapter-body{padding:15px!important}
  #quiz .card{padding:17px 14px!important}
  .q{font-size:1.02rem!important}
  .opt{padding:12px!important;font-size:.84rem!important}
  .plan{padding:18px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}