/* =====================================================================
   iLearn theme — gives every unit hub the same look as the home page
   (purple dotted background, Lilita One titles, bold ink-bordered cards).
   Loaded by the hubs after their own styles:
   <link rel="stylesheet" href="../shared/ilearn-theme.css">
   ===================================================================== */
:root{--il-ink:#1b1b2f;--il-yel:#ffd23f;--il-pink:#ff4f9a;--il-pur:#7b4dff;--il-soft:#f6f3ff}
html{background:#6b4cf0}
body{background:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2.5px) 0 0/28px 28px,linear-gradient(160deg,#5f43e8 0%,#8f63ff 50%,#ff7ac0 120%) fixed!important;color:var(--il-ink)}
h1,h2,h3,.section-title,.pathhead{font-family:"Lilita One","Fredoka",sans-serif!important;font-weight:400!important;letter-spacing:.2px}

/* header: compact purple bar like the home page, no moving crowd */
header.top{background:rgba(95,67,232,.9)!important;padding:10px 14px!important;border-bottom:3px solid var(--il-ink);overflow:visible}
header.top .crowd,header.top .wave{display:none!important}
.top-inner{gap:10px}
.brand{gap:10px}
.logo{width:42px!important;height:42px!important;border-radius:13px!important;background:var(--il-yel)!important;border:3px solid var(--il-ink);box-shadow:0 3px 0 var(--il-ink)!important;font-size:22px!important;transform:rotate(-6deg)}
.brand h1{font-size:clamp(22px,4vw,28px)!important;color:#fff;-webkit-text-stroke:1.4px var(--il-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--il-ink)}
.brand small{margin-top:3px!important;font-size:11.5px!important;opacity:.95!important}
.hud .pill{background:#fff!important;color:var(--il-ink)!important;border:3px solid var(--il-ink)!important;border-radius:12px!important;box-shadow:0 3px 0 var(--il-ink);padding:5px 10px!important;font-size:14px!important}
.hud .ilc-chip{background:var(--il-yel)!important;color:var(--il-ink)!important;border:3px solid var(--il-ink)!important;border-radius:12px!important;box-shadow:0 3px 0 var(--il-ink);padding:5px 10px!important}
.hud .ilc-chip.in{background:#fff!important}
main{margin-top:16px!important}

/* cards and panels: bold ink style */
.panel,.card,.page,.bizwrap,.modal{border:3px solid var(--il-ink)!important;box-shadow:0 5px 0 var(--il-ink)!important}
.panel,.card{border-radius:20px}
.card:hover{transform:translateY(-3px)!important}
.card:active{transform:translateY(4px)!important;box-shadow:0 1px 0 var(--il-ink)!important}
.card .ic{border-width:2.5px}
.card h3{font-size:19px!important}
.panel h2{font-size:25px!important}
.pagebar{border-bottom-width:3px!important}
.pagebar h2{font-size:22px!important}

/* titles that sit on the purple background */
.section-title{color:#fff;-webkit-text-stroke:1.4px var(--il-ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--il-ink);font-size:26px!important}
.section-title .tag{-webkit-text-stroke:0;text-shadow:none;font-family:Nunito,sans-serif;background:var(--il-yel);color:var(--il-ink);border:2.5px solid var(--il-ink)}
.pathhead{color:#fff;-webkit-text-stroke:1px var(--il-ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--il-ink);font-size:19px!important}
.pathhead::after{background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 12px)!important;opacity:.6!important}
footer{color:#fff!important;opacity:.9}
footer a{color:#fff}

/* section menu (Lesson path · 1 vs 1 · Team games …): stays in place, no longer floats */
.navchips{position:static!important;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:3px solid var(--il-ink)!important;box-shadow:0 4px 0 var(--il-ink)}
.navchips button{font-weight:900}

/* phones: use the full width */
@media(max-width:600px){
  header.top{padding:8px 8px!important}
  main{padding-left:8px!important;padding-right:8px!important}
  .panel,.card{border-radius:16px}
  .section-title{font-size:23px!important}
}