#g4LearningLayer, #g4LearningLayer *, .g4-learner-bar, .g4-learner-bar *, .g4-mascot, .g4-mascot *, .g4-adaptive-modal, .g4-adaptive-modal * { box-sizing: border-box; }
#g4LearningLayer [hidden], .g4-adaptive-modal [hidden] { display:none !important; }

#g4LearningLayer {
  position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center;
  min-height: 100vh; padding: 24px; overflow: auto;
  color: #172f29; background: #dceae4 url('/assets/generated/grade-4/grade-4-learning-banner.webp') center / cover no-repeat;
  font-family: "Segoe UI", system-ui, sans-serif;
}
#g4LearningLayer::before { content:""; position:fixed; inset:0; background:rgba(9,36,29,.72); }
.g4-auth-card {
  position: relative; width: min(440px, 100%); padding: 28px; color: #fff;
  background: rgba(11,45,36,.93); border: 1px solid rgba(255,255,255,.24); border-radius: 8px;
  box-shadow: 0 22px 60px rgba(0,0,0,.3); backdrop-filter: blur(12px);
}
.g4-auth-card h1 { margin: 6px 0 0; color:#fff; font-size:46px; line-height:1.04; letter-spacing:0; text-transform:none; }
.g4-auth-card p { margin: 12px 0; }
.g4-motto { color:#ffd17d; font-weight:800; }
.g4-auth-copy, .g4-privacy { color:rgba(255,255,255,.76); line-height:1.5; }
.g4-privacy { margin-top:16px !important; font-size:12px; }
.g4-auth-form { display:grid; gap:8px; }
.g4-auth-form label, .g4-auth-form legend { font-size:13px; font-weight:800; }
.g4-auth-form input[type="text"], .g4-auth-form select {
  width:100%; height:46px; padding:0 12px; color:#172f29; background:#fff; border:1px solid transparent; border-radius:6px; font:inherit;
}
.g4-auth-form fieldset { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:7px 0; padding:0; border:0; }
.g4-auth-form legend { grid-column:1/-1; margin-bottom:7px; }
.g4-auth-form fieldset label { position:relative; margin:0; cursor:pointer; }
.g4-auth-form fieldset input { position:absolute; opacity:0; }
.g4-auth-form fieldset span { display:grid; min-height:40px; place-items:center; padding:5px; color:#172f29; background:#fff; border:2px solid transparent; border-radius:6px; font-size:12px; }
.g4-auth-form fieldset input:checked + span { color:#176b4d; border-color:#f4a62a; }
.g4-auth-button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:9px; padding:9px 16px; border:1px solid transparent; border-radius:6px; font:800 14px/1 "Segoe UI",system-ui,sans-serif; text-decoration:none; cursor:pointer; }
.g4-auth-button.primary { color:#fff; background:#eb6834; }
.g4-auth-button.google { width:100%; color:#172f29; background:#fff; }
.g4-auth-button[aria-disabled="true"] { pointer-events:none; opacity:.62; }
.g4-google-mark { display:grid; width:23px; height:23px; place-items:center; color:#3367d6; border:1px solid #d8dce5; border-radius:50%; font-weight:900; }
.g4-divider { display:flex; align-items:center; gap:9px; margin:17px 0 8px; color:rgba(255,255,255,.58); font-size:10px; text-transform:uppercase; }
.g4-divider::before,.g4-divider::after { content:""; height:1px; flex:1; background:rgba(255,255,255,.2); }
.g4-auth-message { min-height:18px; margin:2px 0 !important; color:#ffc2bc; font-size:12px; }
.g4-auth-loader { position:relative; display:grid; justify-items:center; gap:12px; color:#fff; font-weight:800; }
.g4-auth-loader::before { content:""; width:34px; height:34px; border:4px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:g4-spin .8s linear infinite; }
@keyframes g4-spin { to { transform:rotate(360deg); } }

.g4-learner-bar {
  position:sticky; z-index:850; top:0; display:flex; min-height:58px; align-items:center; gap:14px;
  padding:8px max(16px,calc((100vw - 1100px)/2)); color:#17332b; background:rgba(255,255,255,.96);
  border-bottom:1px solid #d7e2dd; box-shadow:0 3px 14px rgba(15,48,38,.08); backdrop-filter:blur(10px);
  font-family:"Segoe UI",system-ui,sans-serif;
}
.g4-learner-brand { display:grid; margin-right:auto; }
.g4-learner-brand strong { font-size:14px; }
.g4-learner-brand span { color:#6a7974; font-size:11px; }
.g4-learner-person { display:flex; align-items:center; gap:8px; min-width:0; }
.g4-avatar { display:grid; width:34px; height:34px; place-items:center; flex:0 0 34px; color:#176b4d; background:#dff2e8; border-radius:50%; font-weight:900; }
.g4-person-copy { display:grid; min-width:0; }
.g4-person-copy strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.g4-person-copy small { color:#6a7974; font-size:10px; }
.g4-bar-button { min-height:36px; padding:7px 11px; color:#17332b; background:#fff; border:1px solid #d7e2dd; border-radius:6px; font:800 12px/1 "Segoe UI",system-ui,sans-serif; cursor:pointer; }
.g4-bar-button.ai { color:#fff; background:#176b4d; border-color:#176b4d; }

.g4-mascot { position:fixed; z-index:820; left:8px; bottom:8px; display:grid; justify-items:start; pointer-events:none; font-family:"Segoe UI",system-ui,sans-serif; }
.g4-mascot img { width:104px; max-height:150px; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(13,45,37,.2)); animation:g4-float 3.4s ease-in-out infinite; }
.g4-mascot[data-age-group="younger"] img { animation-duration:2.5s; }
.g4-mascot[data-age-group="older"] img { animation-duration:4.2s; }
@keyframes g4-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-6px) rotate(1deg); } }
.g4-mascot-bubble { max-width:220px; margin:0 0 -7px 54px; padding:9px 11px; color:#17332b; background:#fff; border:1px solid #d7e2dd; border-radius:8px; box-shadow:0 8px 24px rgba(13,45,37,.16); font-size:12px; font-weight:750; line-height:1.4; opacity:0; transform:translateY(7px); transition:.18s ease; }
.g4-mascot-bubble.on { opacity:1; transform:none; }
.g4-reaction-layer { position:fixed; z-index:950; inset:0; overflow:hidden; pointer-events:none; }
.g4-reaction { position:absolute; left:30px; bottom:120px; font-size:30px; animation:g4-pop 1.1s ease-out forwards; }
@keyframes g4-pop { 0%{opacity:0;transform:translateY(10px) scale(.5)} 20%{opacity:1;transform:scale(1.15)} 100%{opacity:0;transform:translateY(-90px) rotate(10deg)} }

.g4-adaptive-modal { position:fixed; z-index:11000; inset:0; display:grid; place-items:center; padding:20px; background:rgba(7,28,23,.72); font-family:"Segoe UI",system-ui,sans-serif; }
.g4-adaptive-panel { width:min(700px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:26px; color:#172f29; background:#fff; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.34); }
.g4-adaptive-head { display:flex; align-items:start; justify-content:space-between; gap:18px; }
.g4-adaptive-head h2 { margin:0; color:#172f29; font-size:28px; letter-spacing:0; text-transform:none; }
.g4-adaptive-head p { margin:5px 0 0; color:#65766f; font-size:13px; }
.g4-close { width:38px; height:38px; padding:0; color:#344c44; background:#fff; border:1px solid #d7e2dd; border-radius:6px; font-size:22px; cursor:pointer; }
.g4-assess-progress { height:7px; margin:20px 0; overflow:hidden; background:#e2ebe7; border-radius:4px; }
.g4-assess-progress span { display:block; width:0; height:100%; background:#176b4d; transition:width .3s ease; }
.g4-question-label { color:#c95e22; font-size:11px; font-weight:900; text-transform:uppercase; }
.g4-question { min-height:62px; margin:7px 0 18px; color:#172f29; font-size:24px; line-height:1.25; }
.g4-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.g4-option { min-height:54px; padding:10px 13px; color:#172f29; text-align:left; background:#f4f8f6; border:1px solid #d7e2dd; border-radius:6px; font-weight:750; cursor:pointer; }
.g4-option.correct { background:#dff2e8; border-color:#61aa85; }
.g4-option.wrong { background:#fde7e5; border-color:#d9857e; }
.g4-feedback { margin:15px 0; padding:11px 13px; background:#f4f8f6; border-left:4px solid #176b4d; line-height:1.45; }
.g4-result { padding:20px 0; text-align:center; }
.g4-result strong { display:block; color:#176b4d; font-size:62px; line-height:1; }

@media (max-width:720px) {
  #g4LearningLayer { grid-template-columns:minmax(0,1fr); align-items:end; padding:12px; }
  .g4-auth-card { width:100%; max-width:440px; min-width:0; padding:22px; }
  .g4-auth-card h1 { font-size:30px; }
  .g4-learner-bar { gap:7px; padding:7px 9px; }
  .g4-learner-brand span, .g4-person-copy, .g4-bar-button.signout { display:none; }
  .g4-bar-button { padding:6px 8px; font-size:11px; }
  .g4-mascot { left:2px; bottom:4px; }
  .g4-mascot img { width:48px; max-height:68px; }
  .g4-mascot-bubble { display:none; }
  .g4-options { grid-template-columns:1fr; }
  .g4-adaptive-panel { padding:18px; }
  .g4-question { font-size:20px; }
}

@media (prefers-reduced-motion:reduce) {
  .g4-mascot img,.g4-reaction,.g4-auth-loader::before { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}