/* EMS Boost student dashboard, modern shell. Applies only while a student is signed in. */
body:has(#appHero:not(.hidden)){ background:#f2f5fd; }

/* ---- header ---- */
body:has(#appHero:not(.hidden)) #appHero{ background:radial-gradient(700px 260px at 85% -40%,rgba(47,91,255,.7),transparent 70%),linear-gradient(135deg,#070d24,#0f1d5c); padding:12px 18px; position:relative; }
#appHero:not(.hidden) .hero-inner{ max-width:1180px; padding:0; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
#appHero:not(.hidden) .logo-mark{ margin:0; background:none; border:0; padding:0; }
#appHero:not(.hidden) .logo-mark span:last-child{ display:none; }
#appHero:not(.hidden) .logo-mark .sq{ width:40px; height:40px; }
#appHero:not(.hidden) .logo-mark:after{ content:"EMS Boost"; font-family:'Sora','Manrope',sans-serif; font-weight:800; color:#fff; font-size:17px; margin-left:2px; }
#appHero:not(.hidden) h1, #appHero:not(.hidden) .tagline, #appHero:not(.hidden) .stat-row{ display:none; }
#appHero:not(.hidden) .session-bar{ margin:0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:6px 8px 6px 6px; flex:0 1 auto; gap:14px; }
#appHero:not(.hidden) .avatar{ width:38px; height:38px; background:linear-gradient(135deg,#ffb81f,#ff8a1f); color:#2b1d00; }
#appHero:not(.hidden) .session-left .who strong{ font-size:14px; }
.gx-sbar-r{ display:flex; align-items:center; gap:10px; }

/* ---- navigation ---- */
.tabnav{ max-width:none; padding:0; }
.gx-nav{ max-width:1180px; margin:0 auto; padding:16px 18px 0; }
.gx-groups{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; overflow:visible; padding:0; }
.gx-g{ display:flex !important; align-items:center; gap:12px; text-align:left; padding:12px 14px !important; border-radius:18px !important; background:#fff !important; color:#0b1b33 !important; border:1.5px solid #e3eaf9 !important; box-shadow:0 2px 6px rgba(15,40,90,.04); white-space:normal !important; transition:transform .15s, box-shadow .15s, border-color .15s; }
.gx-g:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,40,90,.1); }
.gx-ic{ font-style:normal; font-size:22px; width:44px; height:44px; border-radius:14px; background:#eef3ff; display:grid; place-items:center; flex:0 0 auto; }
.gx-gt{ display:flex; flex-direction:column; min-width:0; }
.gx-gt b{ font-family:'Sora','Manrope',sans-serif; font-size:15px; font-weight:700; }
.gx-gt small{ font-size:12.5px; font-weight:500; color:#5b6b85; line-height:1.3; margin-top:1px; }
.gx-g.on{ background:linear-gradient(135deg,#2f5bff,#5a3dff) !important; border-color:transparent !important; box-shadow:0 14px 30px rgba(47,91,255,.35) !important; }
.gx-g.on .gx-gt b{ color:#fff; } .gx-g.on .gx-gt small{ color:#d6dfff; } .gx-g.on .gx-ic{ background:rgba(255,255,255,.2); }
.gx-g.one .gx-ic{ background:#fff0c7; }
.gx-subs{ display:flex; gap:8px; padding:14px 0 4px; border:0; overflow-x:auto; }
.gx-s{ display:flex; flex-direction:column; align-items:flex-start; background:#fff !important; border:1.5px solid #e3eaf9 !important; border-radius:14px !important; padding:9px 16px !important; color:#0b1b33 !important; font-weight:700; }
.gx-s small{ font-size:11.5px; font-weight:500; color:#5b6b85; margin-top:1px; }
.gx-s.on{ border-color:#2f5bff !important; background:#eef3ff !important; color:#1d3fbf !important; box-shadow:inset 0 -3px 0 #2f5bff; }

/* ---- home cards ---- */
.gx{ max-width:1100px; }
.gx-hero{ background:radial-gradient(500px 200px at 100% 0,rgba(255,184,31,.35),transparent 70%),linear-gradient(135deg,#070d24,#13276f) !important; border-radius:28px !important; padding:26px 28px !important; box-shadow:0 24px 50px rgba(11,22,64,.28); }
.gx-hero h2{ font-family:'Sora',sans-serif; font-size:clamp(24px,3vw,32px) !important; }
.gx-mini div{ background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.18); border-radius:18px !important; }
.gx-mini b{ font-family:'Sora',sans-serif !important; color:#ffd25a; }
.gx h3{ font-family:'Sora',sans-serif; }
.gx-opt{ border-radius:26px !important; border-width:1.5px !important; box-shadow:0 14px 36px rgba(15,40,90,.07); transition:transform .15s,box-shadow .15s; }
.gx-opt:hover{ transform:translateY(-3px); box-shadow:0 22px 46px rgba(15,40,90,.13); }
.gx-opt.here{ background:linear-gradient(180deg,#f3f7ff,#fff) !important; border-color:#2f5bff !important; }
.gx-opt.star{ background:linear-gradient(180deg,#fff8e6,#fff) !important; }
.gx-quick button{ border-radius:20px !important; padding:18px 12px !important; border-width:1.5px; font-family:'Sora',sans-serif; box-shadow:0 8px 22px rgba(15,40,90,.05); transition:transform .15s; }
.gx-quick button:hover{ transform:translateY(-3px); border-color:#2f5bff; }
.gx-aicard{ border-radius:28px !important; background:linear-gradient(135deg,#eef3ff,#e6fbf5) !important; border:0 !important; box-shadow:0 14px 36px rgba(15,40,90,.08); }
.gx-next{ border-radius:24px !important; background:linear-gradient(135deg,#0b1640,#1c3aa8) !important; }
.gx-card, .bt-card{ border-radius:22px !important; box-shadow:0 10px 30px rgba(15,40,90,.06); }
.gx-btn.gold{ border-radius:999px !important; }

/* ---- phones: bottom bar ---- */
@media(max-width:760px){
  body:has(#appHero:not(.hidden)){ padding-bottom:132px; }
  #appHero:not(.hidden) .hero-inner{ justify-content:space-between; }
  #appHero:not(.hidden) .session-bar .who span{ display:none; }
  #tabnav{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid #e3eaf9; box-shadow:0 -12px 30px rgba(15,40,90,.1); padding:0 !important; }
  .gx-nav{ padding:0 !important; display:flex; flex-direction:column-reverse; }
  .gx-groups{ gap:2px; padding:6px 6px calc(8px + env(safe-area-inset-bottom)); }
  .gx-g{ flex-direction:column; gap:2px; padding:6px 2px !important; border:0 !important; background:none !important; box-shadow:none !important; text-align:center; border-radius:14px !important; }
  .gx-g:hover{ transform:none; box-shadow:none; }
  .gx-ic{ width:auto; height:auto; background:none !important; font-size:21px; }
  .gx-gt small{ display:none; } .gx-gt b{ font-size:11px; font-weight:700; }
  .gx-g.on{ background:#eef3ff !important; box-shadow:none !important; } .gx-g.on .gx-gt b{ color:#1d3fbf; }
  .gx-subs{ padding:8px 10px; background:#f6f8ff; border-bottom:1px solid #e3eaf9; }
  .gx-s{ padding:7px 12px !important; flex:0 0 auto; } .gx-s small{ display:none; }
  .gx-hero{ padding:20px !important; border-radius:22px !important; }
  .gx-mini{ width:100%; justify-content:space-between; gap:8px; } .gx-mini div{ flex:1; min-width:0 !important; padding:8px 6px !important; }
}
.gx-nav{ width:100%; box-sizing:border-box; max-width:1136px !important; }
#homeMain .gx{ max-width:1136px !important; padding-left:18px !important; padding-right:18px !important; box-sizing:border-box; }
#tabPool{ display:none !important; }
.gx-g{ min-width:0; padding:10px 12px !important; gap:10px !important; }
.gx-ic{ width:40px; height:40px; font-size:20px; }
.gx-gt small{ white-space:normal; font-size:12px; }
.gx-nav{ max-width:1100px !important; }
@media(max-width:760px){
  #appHero:not(.hidden) .session-bar .who{ display:none; }
  #appHero:not(.hidden) .hero-inner{ flex-wrap:nowrap; }
  #homeMain .gx{ padding-top:14px !important; }
  .tabnav{ margin:0; }
}
@media(min-width:761px){
  .gx-groups{ gap:8px !important; }
  .gx-g{ padding:10px 10px !important; gap:8px !important; overflow:hidden; }
  .gx-ic{ width:36px; height:36px; font-size:18px; border-radius:12px; }
  .gx-gt b{ font-size:14px; white-space:nowrap; }
  .gx-gt small{ font-size:11.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
}
/* six main sections (IELTS added): always share the width evenly */
.gx-groups{ display:grid !important; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
.gx-g{ min-width:0 !important; }
.gx-gt{ min-width:0; overflow:hidden; }
.gx-gt b{ overflow:hidden; text-overflow:ellipsis; }
@media(min-width:761px){ .gx-gt small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; } }
@media(max-width:760px){ .gx-gt b{ font-size:10.5px !important; white-space:nowrap; } .gx-ic{ font-size:20px; } }
@media(max-width:760px){ .gx-gt b{ font-size:11.5px !important; letter-spacing:-.01em; } .gx-ic{ font-size:22px; } }
/* round 3: at most five tabs, labels at least 12px; Practise now tiles in one full row */
@media(max-width:760px){
  .gx-gt b{ font-size:12px !important; letter-spacing:0; }
  .gx-g{ padding:6px 1px !important; }
  .gx-quick{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; }
  .gx-quick button{ padding:14px 6px !important; font-size:14px; line-height:1.25; }
  .gx-quick button small{ font-size:12px; line-height:1.3; }
}
.gx-today .gx-hi{ color:#0b1b4a; }