:root{--navy:#11245f;--cream:#fffaf1;--pink:#ef5f91;--aqua:#45c6bf;--green:#98c957;--yellow:#f7c94b;--purple:#8f75d2;--muted:#66708c;--shadow:0 22px 55px rgba(17,36,95,.14);--r:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Nunito,system-ui;color:#24315f;background:var(--cream);line-height:1.6}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:99;background:#fffffff0;border-bottom:1px solid #11245f14;backdrop-filter:blur(14px)}.nav-shell{min-height:76px;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:8px;min-width:185px}.brand img{width:48px}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-family:'Baloo 2';color:var(--navy)}.brand-copy span{color:var(--pink);font-weight:900;font-size:13px}.main-nav{display:flex;flex:1;align-items:center;justify-content:flex-end;gap:8px}.main-nav a,.nav-dropdown summary{padding:9px 10px;border-radius:999px;font-size:14px;font-weight:900;text-align:center}.main-nav a:hover,.main-nav a.active,.nav-dropdown summary:hover,.nav-dropdown summary.active{background:#fff0bd}.nav-dropdown{position:relative}.nav-dropdown summary{list-style:none;cursor:pointer}.nav-dropdown summary::-webkit-details-marker{display:none}.nav-dropdown summary::after{content:"▾";margin-left:6px}.nav-dropdown-menu{position:absolute;top:calc(100% + 9px);left:50%;z-index:120;display:none;min-width:170px;padding:8px;background:#fff;border:1px solid #11245f14;border-radius:8px;box-shadow:var(--shadow);transform:translateX(-50%)}.nav-dropdown[open] .nav-dropdown-menu{display:grid}.nav-dropdown-menu a{display:block;white-space:nowrap}.teacher-link,.menu-toggle{border:0;border-radius:999px;background:#e4d9fa;color:var(--navy);font-weight:900;padding:11px 14px}.menu-toggle{display:none;width:44px}.menu-toggle span{display:block;width:21px;height:2px;background:var(--navy);margin:5px auto}.hero,.page-hero{position:relative;overflow:hidden;background:linear-gradient(#fffdf9,#fff8e9);padding:70px 0}.hero-grid,.page-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.eyebrow,.badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:#fff;box-shadow:0 10px 25px #11245f14;font-weight:900;font-size:.8rem}.hero h1,.page-hero h1,.section-title{font-family:'Baloo 2';line-height:.95;letter-spacing:-.03em}.hero h1{font-size:clamp(4rem,7vw,7rem);margin:18px 0}.hero h1 span{display:block}.page-hero h1{font-size:clamp(3.3rem,6vw,5.8rem);margin:15px 0}.lead{font-size:1.08rem;color:var(--muted);font-weight:700}.accent-green{color:var(--green)}.accent-pink{color:var(--pink)}.accent-aqua{color:var(--aqua)}.accent-purple{color:var(--purple)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.btn{border:0;border-radius:999px;padding:14px 21px;font-weight:900;display:inline-flex;gap:8px;align-items:center;justify-content:center;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:var(--navy);color:#fff;box-shadow:0 13px 28px #11245f38}.btn-secondary{background:#fff;color:var(--navy);box-shadow:0 10px 25px #11245f14}.hero-art{position:relative;min-height:500px;display:flex;align-items:flex-end;justify-content:center}.hero-blob{position:absolute;inset:10px;background:var(--navy);border-radius:45% 55% 49% 51%/41% 42% 58% 59%}.hero-art>img{position:relative;z-index:2;max-height:560px}.hero-art>img.teacher-reading{transform:scale(1.15);transform-origin:bottom center}.float-note{position:absolute;z-index:3;padding:13px 16px;border-radius:17px;background:#fff;font-family:'Baloo 2';font-weight:800;box-shadow:var(--shadow);animation:f 4s infinite}.n1{top:50px;left:-35px}.n2{top:150px;right:0;background:var(--purple);color:#fff}.n3{bottom:35px;right:5px;background:var(--aqua);color:#fff}.feature-strip{margin-top:-38px;position:relative;z-index:3}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;padding:16px;border-radius:24px;box-shadow:var(--shadow)}.feature{display:flex;align-items:center;gap:10px;padding:9px}.feature img{width:40px;padding:8px;border-radius:50%;background:#f5f1ff}.feature strong,.feature span{display:block;line-height:1.2}.feature span{font-size:.75rem;color:var(--muted)}.section{padding:84px 0}.section.word-challenge-section{padding-bottom:36px}.section.context-challenge-section{padding-top:36px}.section.reading-activity-section{padding-top:36px;padding-bottom:36px}.section.reading-activity-first{padding-top:84px}.section.reading-activity-last{padding-bottom:84px}.section.alt{background:#fff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}.section-title{font-size:clamp(2.5rem,5vw,4.2rem);margin:0}.section-subtitle{max-width:600px;color:var(--muted);font-weight:700}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card,.activity{background:#fff;border-radius:var(--r);padding:25px;box-shadow:0 12px 30px #11245f14;border:1px solid #11245f0d}.card{transition:.25s}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.card h3,.activity h3{font-family:'Baloo 2';font-size:1.55rem;line-height:1.1;margin:0 0 8px}.card p,.activity p{color:var(--muted);font-weight:650}.card-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;background:#fff0bd}.card-icon img{width:32px}.page-hero-art{min-height:360px;display:flex;align-items:center;justify-content:center}.page-hero-art img{max-height:390px}.page-hero-art.collaborate-art{position:relative}.collaborate-hero-blob{position:absolute;inset:10px;z-index:0;background:var(--pink);border-radius:45% 55% 49% 51%/41% 42% 58% 59%;box-shadow:var(--shadow)}.collaborate-art>img{position:relative;z-index:2}.page-hero-art.reading-art{position:relative}.reading-hero-blob{position:absolute;inset:10px;z-index:0;background:var(--aqua);border-radius:45% 55% 49% 51%/41% 42% 58% 59%;box-shadow:var(--shadow)}.reading-art>img{position:relative;z-index:2}.page-hero-art.vocabulary-art{position:relative}.vocabulary-hero-blob{position:absolute;inset:10px;z-index:0;background:var(--green);border-radius:45% 55% 49% 51%/41% 42% 58% 59%;box-shadow:var(--shadow)}.vocabulary-art>img{position:relative;z-index:2;max-width:calc(100% - 44px);max-height:350px;border-radius:8px}.goal-box{margin-top:20px;padding:15px 17px;background:#fff;border-left:8px solid var(--aqua);border-radius:17px;box-shadow:0 10px 25px #11245f14;font-weight:900}.activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.question{padding:16px;background:#f7f8fc;border-radius:17px}.option{padding:11px 12px;background:#fff;border:2px solid transparent;border-radius:13px;margin-top:8px;cursor:pointer}.option:hover,.option.selected{border-color:var(--aqua)}.feedback{display:none;margin-top:13px;padding:12px;border-radius:13px;font-weight:900}.feedback.show{display:block}.good{background:#e2f2c7}.try{background:#ffd1e0}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tab-btn{border:0;padding:10px 13px;border-radius:999px;font-weight:900}.tab-btn.active{background:var(--navy);color:#fff}.tab-panel{display:none}.tab-panel.active{display:block}.word-game{display:grid;grid-template-columns:1fr 1fr;gap:14px}.word-bank,.definition-bank{display:grid;gap:10px}.draggable,.dropzone{padding:13px;border-radius:13px;background:#f7f8fc;font-weight:900}.draggable{background:#fff0bd;cursor:grab}.dropzone.correct{background:#e2f2c7}.progress-shell{height:14px;background:#e9edf5;border-radius:999px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,var(--aqua),var(--green));width:0;transition:.3s}.cta{background:var(--navy);color:#fff;border-radius:36px;padding:40px}.cta h2{font-family:'Baloo 2';font-size:clamp(2.3rem,5vw,4rem);line-height:1;margin:0}.footer{background:#0c1947;color:#fff;padding:45px 0 24px;margin-top:70px}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}.footer a{display:block;color:#dbe1ff;margin:6px 0}.footer-bottom{margin-top:25px;padding-top:18px;border-top:1px solid #ffffff22;color:#aeb9e8;font-size:.85rem}.modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:#07102fa8;padding:18px}.modal.open{display:grid}.modal-card{width:min(620px,100%);background:#fff;border-radius:26px;padding:27px}.modal-close{float:right;border:0;border-radius:50%;width:38px;height:38px}.toast{position:fixed;right:20px;bottom:20px;background:var(--navy);color:#fff;padding:13px 17px;border-radius:15px;transform:translateY(140%);transition:.3s;z-index:300}.toast.show{transform:none}@keyframes f{50%{translate:0 -10px}}@media(max-width:900px){.menu-toggle{display:block;margin-left:auto}.teacher-link{display:none}.main-nav{position:absolute;top:76px;left:16px;right:16px;display:none;align-items:stretch;flex-direction:column;background:#fff;padding:14px;border-radius:18px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.nav-dropdown-menu{position:static;min-width:0;padding:4px 0 0 12px;background:transparent;border:0;box-shadow:none;transform:none}.nav-dropdown-menu a{white-space:normal}.hero-grid,.page-hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero .actions{justify-content:center}.feature-grid{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.activity-grid{grid-template-columns:1fr}}@media(max-width:620px){.hero h1{font-size:3.8rem}.hero-art{min-height:360px}.feature-grid,.cards{grid-template-columns:1fr}.section{padding:62px 0}.section-head{align-items:start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.word-game{grid-template-columns:1fr}}
.home-cards{display:flex;flex-wrap:wrap;justify-content:center}.home-cards .card{flex:0 1 calc((100% - 44px)/3)}@media(max-width:900px){.home-cards .card{flex-basis:calc((100% - 22px)/2)}}@media(max-width:620px){.home-cards .card{flex-basis:100%}}
.family-activity-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.family-activity-card { position:relative; display:flex; flex-direction:column; min-height:230px; border:3px solid transparent; cursor:pointer; }
.family-activity-card:focus-visible { outline:4px solid rgba(69,198,191,.35); outline-offset:4px; }
.family-activity-card.selected { border-color:var(--aqua); background:#f0fbf8; transform:translateY(-5px); }
.family-card-number { display:grid; width:38px; height:38px; place-items:center; margin-bottom:14px; border-radius:50%; background:#fff0bd; color:var(--navy); font-weight:900; }
.family-card-select { width:fit-content; margin-top:auto; border:0; padding:0; background:transparent; color:#237d78; font:inherit; font-weight:900; text-decoration:underline; cursor:pointer; }
.family-wheel-experience { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(390px,1.2fr); align-items:center; gap:clamp(30px,6vw,75px); padding:clamp(24px,5vw,55px); border-radius:30px; background:linear-gradient(135deg,#fff,#eaf8f5); box-shadow:var(--shadow); }
.family-wheel-copy h2 { margin:14px 0 8px; font-size:clamp(2rem,4vw,3.2rem); }
.family-wheel-result { min-height:126px; margin:24px 0; padding:16px 18px; border:2px dashed var(--aqua); border-radius:16px; background:#fff; }
.family-wheel-result small,.family-wheel-result strong { display:block; }
.family-wheel-result strong { color:var(--navy); font:800 1.35rem "Baloo 2",sans-serif; }
.family-wheel-result p { margin:4px 0 0; }
.family-wheel-wrap { position:relative; display:grid; justify-items:center; gap:22px; }
.family-wheel { position:relative; width:min(390px,78vw); aspect-ratio:1; border:10px solid #fff; border-radius:50%; background:conic-gradient(var(--pink) 0 60deg,var(--yellow) 60deg 120deg,var(--aqua) 120deg 180deg,var(--purple) 180deg 240deg,var(--green) 240deg 300deg,#ff9d65 300deg); box-shadow:0 20px 45px rgba(17,36,95,.22); transition:transform 1.8s cubic-bezier(.16,.82,.22,1); }
.family-wheel-label { position:absolute; left:calc(50% - 20px); top:calc(50% - 20px); display:grid; width:40px; height:40px; place-items:center; border-radius:50%; background:#fff; color:var(--navy); font-weight:900; transform:rotate(calc(var(--n)*60deg + 30deg)) translateY(-135px) rotate(calc(var(--n)*-60deg - 30deg)); }
.family-wheel-center { position:absolute; inset:50% auto auto 50%; display:grid; width:72px; height:72px; place-items:center; border-radius:50%; background:var(--navy); color:var(--yellow); font-size:2rem; transform:translate(-50%,-50%); box-shadow:0 8px 20px rgba(17,36,95,.25); }
.family-wheel-pointer { position:absolute; top:-13px; z-index:3; width:0; height:0; border-right:20px solid transparent; border-left:20px solid transparent; border-top:40px solid var(--navy); filter:drop-shadow(0 5px 5px rgba(17,36,95,.25)); }
.family-wheel-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; width:100%; margin:0; padding:0; list-style:none; }
.family-wheel-legend li { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:800; }
.family-wheel-legend span { display:grid; width:26px; height:26px; flex:0 0 auto; place-items:center; border-radius:50%; background:#fff; box-shadow:0 4px 10px rgba(17,36,95,.1); }
@media(max-width:850px){.family-activity-cards{grid-template-columns:repeat(2,1fr)}.family-wheel-experience{grid-template-columns:1fr}.family-wheel-copy{text-align:center}.family-wheel-result{text-align:left}}
@media(max-width:560px){.family-activity-cards{grid-template-columns:1fr}.family-wheel-label{transform:rotate(calc(var(--n)*60deg + 30deg)) translateY(-29vw) rotate(calc(var(--n)*-60deg - 30deg))}.family-wheel-legend{grid-template-columns:1fr}}
/* Authentication and dashboards */
.auth-checking body > :not(.auth-loading-screen) { visibility: hidden; }
.auth-ready .auth-loading-screen { display: none; }
.auth-loading-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; color: var(--navy); font-weight: 800; }
.auth-page { min-height: 100vh; background: linear-gradient(135deg, #f5fbff, #fff8ed); }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); }
.auth-welcome { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(32px, 7vw, 100px); background: #eaf8f5; }
.auth-welcome .brand { margin-bottom: 54px; }
.auth-welcome h1 { max-width: 650px; margin: 10px 0; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .95; }
.auth-welcome .lead { max-width: 560px; }
.auth-illustration { width: min(380px, 70%); max-height: 330px; object-fit: contain; align-self: center; margin-top: 20px; }
.auth-card { align-self: center; width: min(520px, calc(100% - 40px)); margin: 40px auto; padding: clamp(28px, 5vw, 54px); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.auth-card h2 { margin: 24px 0 4px; font-size: 2.4rem; }
.back-link { color: var(--navy); font-weight: 800; }
.auth-card form { display: grid; gap: 10px; margin-top: 28px; }
.auth-card label { margin-top: 8px; font-weight: 900; color: var(--navy); }
.auth-card input { width: 100%; min-height: 52px; border: 2px solid #ccd5e7; border-radius: 14px; padding: 12px 14px; font: inherit; }
.auth-card input:focus { outline: 3px solid rgba(69,198,191,.28); border-color: var(--aqua); }
.password-field { position: relative; }
.password-field input { padding-right: 78px; }
.password-field button { position: absolute; top: 6px; right: 6px; min-height: 40px; border: 0; border-radius: 10px; padding: 0 12px; color: var(--navy); background: #edf4fa; font-weight: 900; cursor: pointer; }
.auth-submit { margin-top: 16px; width: 100%; }
.auth-message { min-height: 48px; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; }
.auth-message:empty { padding: 0; }
.auth-message.error, .dashboard-status.error { color: #8a2748; background: #fff0f5; }
.auth-message.success, .dashboard-status.success { color: #315e16; background: #f0f9e8; }
.auth-message.loading { color: var(--navy); background: #eef7ff; }
.privacy-note { margin-top: 24px; font-size: .88rem; color: #59657b; }
.auth-switch { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e2e8f2; text-align: center; font-weight: 800; }
.auth-switch a { color: #237d78; text-decoration: underline; }
.auth-card select, .group-form input { width: 100%; min-height: 52px; border: 2px solid #ccd5e7; border-radius: 14px; padding: 12px 14px; background: #fff; font: inherit; }
.account-type { display: grid; gap: 10px; margin: 18px 0 6px; padding: 0; border: 0; }
.account-type legend { margin-bottom: 8px; font-weight: 900; color: var(--navy); }
.account-type label { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border: 2px solid #dce4ef; border-radius: 14px; cursor: pointer; }
.account-type label:has(input:checked) { border-color: var(--aqua); background: #eaf8f5; }
.account-type input, .terms-check input { width: 20px; min-height: 20px; flex: 0 0 auto; }
.account-type span { display: grid; }
.account-type small { color: #68738a; font-weight: 600; }
.terms-check { display: flex !important; align-items: flex-start; gap: 10px; margin-top: 15px !important; }
.group-form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; gap: 14px; }
.group-form label[for="schoolYear"],
.group-form #schoolYear { display: none; }
#createClassForm { grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr); }
#createClassForm > button { grid-column: 1 / -1; }
.group-form label { display: grid; gap: 6px; font-weight: 900; }
.group-form .auth-message { grid-column: 1 / -1; }
.group-form.compact { grid-template-columns: minmax(180px, 1fr) auto; max-width: 560px; }
.copy-code { display: block; margin: 8px 0 0 auto; border: 0; background: transparent; color: #237d78; font: inherit; font-weight: 900; text-decoration: underline; cursor: pointer; }
#joinGroupCard { display: none !important; }
.learner-form select { width: 100%; min-height: 52px; border: 2px solid #ccd5e7; border-radius: 14px; padding: 12px 14px; background: #fff; font: inherit; }
.learner-credentials { margin-top: 20px; padding: 20px; border: 2px dashed var(--aqua); border-radius: 16px; background: #eaf8f5; }
.learner-credentials[hidden] { display: none; }
.learner-credentials > div { display: flex; justify-content: space-between; gap: 20px; margin: 9px 0; padding: 10px 12px; border-radius: 10px; background: #fff; }
.learner-credentials strong { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.learner-credentials .credential-actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; padding: 12px 0 0; background: transparent; }
.credential-pdf-button { min-height: 38px; border: 0; border-radius: 10px; padding: 7px 11px; background: var(--navy); color: #fff; font: inherit; font-size: .86rem; font-weight: 900; cursor: pointer; white-space: nowrap; }
.credential-pdf-button:disabled { opacity: .65; cursor: wait; }
.learner-row-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.remove-learner-button { min-height:38px; border:1px solid #b4233c; border-radius:10px; padding:7px 11px; background:#fff; color:#9f1833; font:inherit; font-size:.86rem; font-weight:900; cursor:pointer; white-space:nowrap; }
.remove-learner-button:hover,.remove-learner-button:focus-visible { background:#fff0f3; outline:2px solid #9f1833; }
.remove-learner-button:disabled { opacity:.65; cursor:wait; }
.table-subtext { display:block; margin-top:4px; color:#68738a; }
.learner-detail-link { color:#176f6a; font-weight:900; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.learner-detail-link:hover { color:var(--navy); }
.editable-learner-name { display:flex; align-items:center; gap:7px; }
.editable-learner-name[hidden],.edit-learner-name-form[hidden] { display:none; }
.learner-name-edit { width:30px; height:30px; font-size:1rem; }
.edit-learner-name-form { display:grid; grid-template-columns:minmax(150px,1fr) auto auto; align-items:center; gap:7px; min-width:390px; }
.edit-learner-name-form input { width:100%; min-height:40px; border:2px solid #ccd5e7; border-radius:10px; padding:7px 10px; font:inherit; }
.edit-learner-name-form .btn { min-height:40px; padding:7px 10px; }
.edit-learner-name-form .auth-message { grid-column:1/-1; margin:0; }
.support-list { display:flex; flex-wrap:wrap; gap:10px; }
.support-indicator { display:inline-flex; align-items:center; min-height:38px; padding:7px 12px; border-radius:20px; background:#fff4dd; color:var(--navy); font-weight:800; }
.reflection-readonly { padding:14px; border-radius:14px; background:#f5f8fc; }
.reflection-readonly .badge { margin-bottom:9px; }
.reflection-readonly strong { display:block; }
.reflection-readonly p { white-space:pre-wrap; }
.overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.skill-outcomes { display:grid; gap:11px; padding-left:22px; }
.skill-outcomes li::marker { color:var(--green); }
.vocabulary-preview { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:22px; max-width:850px; margin:0 auto; padding:clamp(22px,5vw,46px); border:2px dashed #cbd8e8; border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.vocabulary-preview > div:not(.preview-arrows) { display:grid; gap:12px; }
.vocabulary-preview span { display:block; min-height:48px; padding:12px 15px; border:2px solid #dce4ef; border-radius:12px; color:var(--navy); background:#f8fafc; font-weight:800; }
.preview-arrows { color:var(--aqua); font-size:2rem; font-weight:900; line-height:2.15; padding-top:42px; }
@media(max-width:800px){.overview-grid{grid-template-columns:1fr}.vocabulary-preview{grid-template-columns:1fr}.preview-arrows{display:none}}
.vocabulary-overview-page .page-hero { padding-block:32px; }
.vocabulary-overview-page .page-hero-grid { min-height:0; gap:28px; }
.vocabulary-overview-page .page-hero-art img { max-height:260px; }
.vocabulary-overview-page .section { padding-block:34px; }
.vocabulary-overview-page .overview-grid { gap:18px; }
.vocabulary-overview-page .dashboard-card { padding:22px 24px; }
.vocabulary-overview-page .dashboard-card h2 { margin-bottom:10px; }
.vocabulary-overview-page .dashboard-card p { margin-block:8px; }
.vocabulary-overview-page .skill-outcomes { gap:7px; margin-block:10px 0; }
.vocabulary-overview-page .section-head { margin-bottom:18px; }
.vocabulary-overview-page .vocabulary-preview { padding:24px 30px; gap:16px; }
.vocabulary-overview-page .vocabulary-preview > div:not(.preview-arrows) { gap:8px; }
.vocabulary-overview-page .vocabulary-preview span { min-height:42px; padding:9px 13px; }
@media(max-width:620px){.vocabulary-overview-page .page-hero,.vocabulary-overview-page .section{padding-block:26px}.vocabulary-overview-page .dashboard-card{padding:19px}.vocabulary-overview-page .vocabulary-preview{padding:20px}}
.reading-overview-page .page-hero { padding-block:32px; }
.reading-overview-page .page-hero-grid { min-height:0; gap:28px; }
.reading-overview-page .page-hero-art img { max-height:275px; }
.reading-overview-page .section { padding-block:34px; }
.reading-overview-page .dashboard-card { padding:22px 24px; }
.reading-overview-page .dashboard-card p { margin-block:8px; }
.reading-overview-page .section-head { margin-bottom:18px; }
.reading-preview { display:grid; grid-template-columns:1.05fr .95fr; gap:24px; max-width:920px; margin:0 auto; padding:28px; border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.preview-passage { display:grid; align-content:center; gap:12px; min-height:240px; padding:24px; border-radius:18px; background:#f5f8fc; }
.preview-passage span { height:12px; border-radius:10px; background:#dce4ef; }
.preview-passage span:nth-child(2),.preview-passage span:nth-child(5){width:86%}.preview-passage span:nth-child(3),.preview-passage span:nth-child(6){width:68%}
.preview-question { display:flex; flex-direction:column; justify-content:center; padding:18px; }
.preview-question > div { display:grid; gap:9px; }
.preview-question > div span { min-height:44px; padding:10px 13px; border:2px solid #dce4ef; border-radius:12px; color:var(--navy); font-weight:800; }
.reading-skill-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media(max-width:800px){.reading-overview-grid,.reading-preview,.reading-skill-cards{grid-template-columns:1fr}.reading-overview-page .page-hero,.reading-overview-page .section{padding-block:26px}.preview-passage{min-height:180px}}
.informational-overview-page .page-hero { padding-block:32px; }
.informational-overview-page .page-hero-grid { min-height:0; gap:28px; }
.informational-overview-page .page-hero-art img { max-height:275px; }
.informational-overview-page .section { padding-block:34px; }
.informational-overview-page .dashboard-card { padding:22px 24px; }
.informational-overview-page .dashboard-card p { margin-block:8px; }
.informational-overview-page .section-head { margin-bottom:18px; }
.discussion-preview { display:grid; gap:14px; max-width:780px; margin:0 auto; padding:26px; border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.speech-card { max-width:74%; padding:15px 18px; border-radius:18px; background:#eef7ff; }
.speech-card.right { justify-self:end; background:#eaf8f5; }
.speech-card p { margin:5px 0 0; }
.culture-preview { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; max-width:880px; margin:0 auto; }
.culture-preview article { display:grid; justify-items:center; gap:10px; min-height:210px; padding:28px; border-radius:22px; background:#fff; text-align:center; box-shadow:var(--shadow); }
.culture-preview article img { width:58px; height:58px; }
.culture-preview > span { color:var(--aqua); font-size:2.4rem; font-weight:900; }
@media(max-width:800px){.informational-overview-page .page-hero,.informational-overview-page .section{padding-block:26px}.culture-preview{grid-template-columns:1fr}.culture-preview>span{transform:rotate(90deg);justify-self:center}.speech-card{max-width:92%}}
.about-overview-page .page-hero { padding-block:38px; }
.about-overview-page .page-hero-grid { min-height:0; }
.about-overview-page .page-hero-art img { max-height:300px; }
.about-overview-page .about-art-with-blob { overflow:hidden; padding:22px; border-radius:46% 54% 45% 55% / 42% 42% 58% 58%; background:#11245f; box-shadow:var(--shadow); }
.about-overview-page .about-art-with-blob .about-hero-blob { background:#11245f; box-shadow:none; }
.about-overview-page .about-art-with-blob img { position:relative; z-index:2; }
.about-overview-page .section { padding-block:42px; }
.about-intro { max-width:900px; text-align:center; }
.about-intro h2 { margin:10px 0; font-size:clamp(2rem,4vw,3rem); }
.about-intro p { font-size:1.08rem; line-height:1.75; }
.about-two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.about-steps { display:grid; gap:9px; padding-left:22px; }
.about-steps li::marker { color:var(--aqua); font-weight:900; }
.theory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.theory-card { padding:22px; border:1px solid #e2e8f2; border-radius:20px; background:#fff; box-shadow:0 10px 26px rgba(17,36,95,.07); }
.theory-card img { width:48px; height:48px; }
.theory-card h3 { margin:12px 0 6px; }
.support-audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.support-audience-grid article { padding:24px; border-radius:20px; background:linear-gradient(135deg,#fff,#f4faf9); box-shadow:var(--shadow); }
@media(max-width:900px){.theory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.about-two-column,.theory-grid,.support-audience-grid{grid-template-columns:1fr}.about-overview-page .section{padding-block:30px}}
.current-journey-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: linear-gradient(135deg,#fff,#eaf8f5); }
.current-journey-card > div { flex: 1; }
.reading-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.reading-filters button { min-height: 44px; border: 2px solid #dbe4ef; border-radius: 22px; padding: 8px 16px; background:#fff; color:var(--navy); font:inherit; font-weight:900; cursor:pointer; }
.reading-filters button.active { border-color:var(--aqua); background:#eaf8f5; }
.reading-library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.reading-card { overflow:hidden; border-radius:24px; background:#fff; box-shadow:var(--shadow); }
.reading-card > img { width:100%; height:230px; object-fit:cover; }
.reading-card > div { padding:26px; }
.reading-card-image { position:relative; padding:0!important; }
.reading-card-image img { width:100%; height:230px; object-fit:cover; }
.reading-card-image span { position:absolute; top:14px; right:14px; padding:7px 11px; border-radius:999px; background:var(--navy); color:#fff; font-size:.78rem; font-weight:900; box-shadow:0 8px 18px rgba(17,36,95,.2); }
.reading-card-upcoming { border:1px solid #dfe5ef; box-shadow:0 10px 26px rgba(17,36,95,.07); }
.reading-card-upcoming .reading-card-image img { filter:saturate(.65); opacity:.82; }
.reading-card-upcoming .reading-card-image span { background:#69758c; }
.reading-coming-note { min-height:48px; color:#68738a; font-size:.9rem; }
.reading-card button:disabled { cursor:not-allowed; opacity:.72; }
.journey-hero { padding:48px 0; background:linear-gradient(120deg,#e9f8f5,#fff4dd); }
.journey-hero-grid { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:36px; }
.journey-hero img { width:100%; max-height:300px; object-fit:contain; }
.journey-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; padding-top:34px; padding-bottom:70px; }
.journey-sidebar { align-self:start; position:sticky; top:100px; padding:22px; border-radius:20px; background:#fff; }
.journey-sidebar nav { display:grid; gap:8px; }
.journey-sidebar button { display:flex; justify-content:space-between; gap:12px; width:100%; border:0; border-radius:12px; padding:12px; background:#f5f8fc; color:var(--navy); text-align:left; font:inherit; cursor:pointer; }
.journey-sidebar button.active { background:#eaf8f5; outline:2px solid var(--aqua); }
.journey-sidebar small { color:#69758c; }
.journey-stage { min-height:420px; }
.reading-text { font-size:1.08rem; line-height:1.85; }
.reading-text-cover { display:grid; place-items:center; width:100%; margin:0 0 28px; padding:24px; border-radius:22px; background:linear-gradient(135deg,#eaf8f5,#fff4dd); box-shadow:var(--shadow); }
.reading-text-cover img { width:min(380px,100%); max-height:520px; object-fit:contain; border-radius:18px; box-shadow:0 16px 34px rgba(17,36,95,.18); }
.journey-options { display:grid; gap:12px; margin:22px 0; }
.before-reading-image { width:min(680px,100%); margin:22px 0; overflow:hidden; border:6px solid #fff; border-radius:22px; background:#eaf8f5; box-shadow:var(--shadow); }
.before-reading-image img { width:100%; height:clamp(230px,38vw,410px); object-fit:cover; }
.before-reading-question { margin:24px 0 8px; font-size:1.25rem; }
.journey-options button { min-height:56px; border:2px solid #dbe4ef; border-radius:14px; padding:12px 16px; background:#fff; color:var(--navy); font:inherit; font-weight:800; text-align:left; cursor:pointer; }
.journey-options button.selected { border-color:var(--aqua); background:#eaf8f5; }
.comprehension-quiz { display:grid; gap:22px; margin:24px 0; }
.comprehension-question { margin:0; padding:20px; border:1px solid #dfe6f1; border-radius:18px; background:#f8fafd; }
.comprehension-question legend { padding:0 8px; color:var(--navy); font-weight:900; }
.journey-options button.answer-correct { border-color:var(--green); background:#eff9e8; }
.journey-options button.answer-incorrect { border-color:var(--pink); background:#fff0f5; }
.forum-privacy-note { margin:20px 0; padding:14px 16px; border-left:5px solid var(--aqua); border-radius:12px; background:#eaf8f5; }
.forum-compose,.forum-reply-form { display:grid; gap:10px; margin:20px 0; }
.forum-compose label,.forum-reply-form label { color:var(--navy); font-weight:900; }
.forum-compose textarea,.forum-reply-form textarea,.forum-reply-form select { width:100%; min-height:110px; border:2px solid #ccd5e7; border-radius:14px; padding:12px; background:#fff; font:inherit; }
.forum-reply-form select { min-height:50px; }
.forum-form-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.forum-perspectives { display:grid; gap:16px; margin-top:30px; }
.forum-post,.forum-own-post { padding:20px; border:1px solid #e0e6ef; border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(17,36,95,.06); }
.forum-post header { display:flex; justify-content:space-between; gap:12px; color:var(--navy); }
.forum-post header span { color:#68738a; font-size:.85rem; }
.forum-replies { display:grid; gap:8px; margin:16px 0; padding-left:16px; border-left:3px solid #dce4ef; }
.forum-replies p { margin:0; padding:9px 11px; border-radius:10px; background:#f5f8fc; }
.forum-complete-mark { display:inline-block; margin-top:10px; color:#315e16; font-weight:900; }
.forum-requirements { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.forum-requirements span { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:999px; background:#edf1f6; color:#68738a; font-weight:900; }
.forum-requirements span.done { background:#eff9e8; color:#315e16; }
.educator-forum-card h2 small { color:#68738a; font:700 .82rem Nunito,sans-serif; }
.educator-forum-list { display:grid; gap:16px; margin-top:22px; }
.focused-learner-post { border-color:var(--aqua); box-shadow:0 10px 28px rgba(69,198,191,.18); }
.vocabulary-match { display:grid; grid-template-columns:minmax(140px,.65fr) minmax(240px,1.35fr); gap:20px; margin:20px 0; }
.vocabulary-match h3 { text-align:center; }
.match-list { display:grid; gap:9px; }
.match-list button { display:grid; min-height:50px; place-items:center; border:2px solid #dbe4ef; border-radius:12px; padding:10px 12px; background:#fff; color:var(--navy); font:inherit; font-weight:800; text-align:center; cursor:pointer; }
.vocabulary-word-list button { display:grid; grid-template-columns:1fr; justify-items:center; gap:8px; min-height:104px; text-align:center; }
.vocabulary-word-list button img { width:100%; height:130px; padding:0; border-radius:14px; background:#fff4dd; object-fit:cover; }
.vocabulary-word-list button span { display:block; }
.vocabulary-card-list { display:grid; gap:14px; margin:24px 0; }
.vocabulary-horizontal-card { display:grid; grid-template-columns:150px minmax(130px,.55fr) minmax(280px,1.4fr) auto; align-items:center; gap:20px; padding:14px; border:2px solid #dbe4ef; border-radius:20px; background:#fff; box-shadow:0 8px 22px rgba(17,36,95,.06); transition:border-color .2s ease,background .2s ease; }
.vocabulary-horizontal-card>img { width:150px; height:105px; border-radius:14px; object-fit:cover; }
.vocabulary-card-word { display:grid; gap:2px; text-align:center; }
.vocabulary-card-word small { color:#68738a; font-weight:800; }
.vocabulary-card-word strong { color:var(--navy); font:800 1.25rem "Baloo 2",sans-serif; }
.vocabulary-card-answer { display:grid; gap:5px; }
.vocabulary-card-answer label { color:var(--navy); font-size:.82rem; font-weight:900; }
.vocabulary-card-answer select { width:100%; min-height:50px; border:2px solid #ccd5e7; border-radius:12px; padding:8px 11px; background:#fff; color:var(--navy); font:inherit; }
.vocabulary-card-feedback { min-height:20px; color:#68738a; font-size:.82rem; font-weight:900; }
.vocabulary-horizontal-card.matched { border-color:var(--green); background:#f4faee; }
.vocabulary-horizontal-card.matched .vocabulary-card-feedback { color:#315e16; }
.vocabulary-horizontal-card.incorrect { border-color:var(--pink); background:#fff7fa; }
.vocabulary-horizontal-card.incorrect .vocabulary-card-feedback { color:#8a2748; }
@media(max-width:850px){.vocabulary-horizontal-card{grid-template-columns:120px 1fr}.vocabulary-horizontal-card>img{width:120px;height:100px}.vocabulary-card-answer{grid-column:1/-1}.vocabulary-horizontal-card>.btn{grid-column:1/-1}}
@media(max-width:520px){.vocabulary-horizontal-card{grid-template-columns:1fr;justify-items:stretch}.vocabulary-horizontal-card>img{width:100%;height:190px}.vocabulary-card-answer,.vocabulary-horizontal-card>.btn{grid-column:auto}}
.match-list button.selected { border-color:var(--aqua); background:#eaf8f5; }
.match-list button.matched { border-color:var(--green); background:#eff9e8; color:#315e16; }
.match-list button:disabled { cursor:default; opacity:.8; }
.match-progress { font-weight:900; color:var(--navy); }
.journey-response, #journeyReflection label { display:grid; gap:7px; margin:16px 0; font-weight:900; }
.journey-response textarea, #journeyReflection textarea, #journeyReflection select { min-height:100px; border:2px solid #ccd5e7; border-radius:14px; padding:12px; font:inherit; }
#journeyReflection select { min-height:52px; }
#journeyReflection select[name="confidence"] { font-size:1.05rem; font-weight:800; background:#fffaf1; }
.journey-celebration { display:grid; justify-items:center; gap:12px; padding:45px 20px; text-align:center; }
.journey-celebration:not(.eagle-celebration-ready) { visibility:hidden; }
.dashboard-card:has(#badgesList),.dashboard-card:has(#badgeDetail) { display:none; }
.dashboard-grid:has(#badgesList),.dashboard-grid:has(#badgeDetail) { grid-template-columns:1fr; }
.journey-celebration > span { font-size:5rem; }
.eagle-progress-card { text-align:center; background:linear-gradient(145deg,#fff,#eefaf7); }
.eagle-progress-widget { display:grid; justify-items:center; gap:8px; }
.eagle-progress-widget h2 { margin:4px 0 0; }
.eagle-progress-widget .progress-track { width:100%; }
.eagle-progress-image { position:relative; width:min(230px,80%); margin:8px auto; }
.eagle-progress-image img { width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; filter:drop-shadow(0 14px 20px rgba(17,36,95,.2)); animation:eagle-float 3.4s ease-in-out infinite; }
.eagle-progress-card.locked .eagle-progress-image img { filter:grayscale(1) opacity(.38); }
.eagle-progress-card.locked .eagle-spark { display:none; }
.recommended-wide-card { width:100%; }
.eagle-spark { position:absolute; top:4%; right:5%; z-index:2; color:var(--yellow); font-size:2rem; animation:eagle-sparkle 1.5s ease-in-out infinite alternate; }
@keyframes eagle-float{50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes eagle-sparkle{to{transform:scale(1.35) rotate(20deg);opacity:.55}}
.journey-celebration.eagle-celebration-ready { position:relative; isolation:isolate; overflow:hidden; min-height:580px; align-content:center; border-radius:22px; background:radial-gradient(circle at 50% 30%,#fff9d8,#eefaf7 48%,#eef3ff); }
.journey-celebration.eagle-celebration-ready>.badge { position:relative; z-index:2; font-size:.92rem; }
.celebration-eagle { position:relative; z-index:2; width:min(330px,75%); aspect-ratio:1; border:8px solid #fff; border-radius:50%; object-fit:cover; box-shadow:0 22px 55px rgba(17,36,95,.24); animation:eagle-unlock .9s cubic-bezier(.2,.9,.25,1.3) both,eagle-float 3.4s 1s ease-in-out infinite; }
.eagle-stage-label { position:relative; z-index:2; padding:7px 14px; border-radius:999px; background:#fff; color:var(--navy); font-weight:900; }
.celebration-actions { position:relative; z-index:2; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
@keyframes eagle-unlock{from{opacity:0;transform:scale(.3) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.fireworks { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.fireworks i { --color:var(--pink); position:absolute; left:var(--x); top:52%; width:10px; height:10px; border-radius:50%; background:var(--color); opacity:0; animation:firework-pop 1.5s var(--delay) ease-out 3; }
.fireworks i:nth-child(4n+1){--color:var(--aqua)}.fireworks i:nth-child(4n+2){--color:var(--yellow)}.fireworks i:nth-child(4n+3){--color:var(--green)}
@keyframes firework-pop{0%{opacity:0;transform:translateY(80px) scale(.2)}35%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.eagle-progress-image img,.eagle-spark,.celebration-eagle,.fireworks i{animation:none!important}}
@media(max-width:800px){.journey-hero-grid,.journey-layout,.vocabulary-match{grid-template-columns:1fr}.journey-sidebar{position:static}.current-journey-card{align-items:flex-start;flex-direction:column}.journey-sidebar nav{grid-template-columns:repeat(2,1fr)}}
.dashboard-page { background: #f5f8fc; color: var(--navy); }
.dashboard-header { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 4px 18px rgba(17,36,95,.08); }
.dashboard-menu { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-left:auto; }
.dashboard-menu a { padding:10px 14px; border-radius:999px; color:var(--navy); font-weight:900; }
.dashboard-menu a:hover,.dashboard-menu a.active { background:#fff0bd; }
.view-only-notice { display:inline-block; margin-top:18px; padding:12px 16px; border-left:6px solid var(--aqua); border-radius:12px; background:#fff; box-shadow:0 8px 22px rgba(17,36,95,.09); }
.preview-option-list,.preview-prompt-list,.preview-question ol,.preview-vocabulary ol { display:grid; gap:10px; padding-left:28px; }
.preview-option-list li,.preview-prompt-list li,.preview-question li,.preview-vocabulary li { padding:10px 14px; border-radius:12px; background:#f5f8fc; font-weight:800; }
.preview-vocabulary { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.preview-question { margin:22px 0; padding:18px; border-radius:18px; background:#fffaf1; }
@media(max-width:800px){.dashboard-menu{order:3;width:100%;justify-content:center}.dashboard-header .nav-shell{flex-wrap:wrap;padding:10px 0}.preview-vocabulary{grid-template-columns:1fr}}
.dashboard-nav { display: flex; align-items: center; gap: 18px; }
.dashboard-nav a { color: var(--navy); font-weight: 800; }
.student-dashboard-menu-link { margin-left:auto; white-space:nowrap; }
.student-quick-header { margin-bottom:24px; }
.dashboard-hero { padding: 56px 0 42px; background: linear-gradient(120deg, #e9f8f5, #fff4dd); }
.dashboard-welcome { display: flex; align-items: center; gap: 24px; }
.dashboard-hero h1 { margin: 5px 0; font-size: clamp(2.2rem, 5vw, 4rem); }
.avatar-bubble { width: 104px; height: 104px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #fff; box-shadow: var(--shadow); font-size: 3.8rem; }
.avatar-bubble[role="button"] { cursor:pointer; }
.avatar-bubble[role="button"]:focus-visible { outline:4px solid var(--aqua); outline-offset:4px; }
.avatar-bubble img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar-picker-backdrop { position:fixed; inset:0; z-index:500; display:grid; place-items:center; overflow:auto; padding:24px; background:rgba(7,16,47,.78); backdrop-filter:blur(6px); }
.avatar-picker-card { width:min(760px,100%); padding:clamp(24px,4vw,40px); border-radius:28px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.3); text-align:center; }
.avatar-picker-card h2 { margin:12px 0 4px; font-size:clamp(2rem,5vw,3rem); }
.avatar-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:26px 0; }
.avatar-choice-grid button { display:grid; gap:8px; padding:10px; border:3px solid transparent; border-radius:20px; background:#f5f8fc; color:var(--navy); font:inherit; font-weight:900; cursor:pointer; transition:.2s; }
.avatar-choice-grid button:hover { transform:translateY(-3px); background:#eaf8f5; }
.avatar-choice-grid button.selected { border-color:var(--aqua); background:#eaf8f5; box-shadow:0 8px 22px rgba(69,198,191,.25); }
.avatar-choice-grid img { width:100%; aspect-ratio:1; border-radius:14px; object-fit:cover; }
.avatar-picker-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
@media(max-width:560px){.avatar-choice-grid{grid-template-columns:repeat(2,1fr);gap:10px}.avatar-picker-backdrop{padding:12px}.avatar-picker-card{padding:22px 16px}}
.dashboard-content { display: grid; gap: 24px; padding-top: 34px; padding-bottom: 70px; }
.dashboard-status { margin: 0; padding: 12px 16px; border-radius: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.metric-card, .dashboard-card { border: 1px solid #e2e8f2; border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(17,36,95,.07); }
.metric-card { display: grid; gap: 6px; padding: 22px; }
.metric-card span { color: #68738a; font-weight: 800; }
.metric-card strong { font: 800 2rem/1 "Baloo 2", sans-serif; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.dashboard-grid.completed-only-grid { grid-template-columns:1fr; }
.dashboard-card:has(#pendingActivities) { display:none; }
.dashboard-card { padding: clamp(20px, 3vw, 30px); }
.dashboard-card h2 { margin-top: 0; }
.progress-overview { text-align: center; }
.progress-ring { --progress: 0deg; width: 160px; height: 160px; display: grid; place-items: center; margin: 18px auto; border-radius: 50%; background: conic-gradient(var(--aqua) var(--progress), #e7edf4 0); position: relative; }
.progress-ring::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #fff; }
.progress-ring span { position: relative; font: 800 2rem "Baloo 2", sans-serif; }
.recommended-card { background: linear-gradient(135deg, #fff, #fff7df); }
.category-progress { display: grid; gap: 20px; }
.category-row > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; text-transform: capitalize; }
.progress-track { height: 13px; overflow: hidden; border-radius: 20px; background: #e7edf4; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua), var(--green)); }
.activity-list { display: grid; gap: 10px; }
.activity-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 62px; padding: 10px 12px; border-radius: 13px; color: var(--navy); background: #f5f8fc; }
.activity-row:hover { background: #eaf8f5; }
.activity-row span:first-child { display: grid; }
.activity-row small { color: #68738a; text-transform: capitalize; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 14px; }
.earned-badge { display: grid; justify-items: center; gap: 5px; padding: 16px; text-align: center; border-radius: 16px; background: #fff7df; }
.earned-badge img { width: 56px; height: 56px; object-fit: contain; }
.earned-badge span { font-size: .82rem; }
.empty-state { color: #68738a; }
.teacher-classes { display: grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap: 24px; }
.group-summary-card { padding:0; overflow:hidden; }
.group-summary-card.is-open { grid-column:1/-1; }
.group-card-summary { width:100%; min-height:210px; display:flex; align-items:stretch; justify-content:space-between; gap:20px; padding:24px; background:linear-gradient(145deg,#fff,#f4fbfa); }
.group-card-toggle { border:0; border-radius:999px; padding:10px 14px; background:var(--navy); color:#fff; font:inherit; font-weight:900; cursor:pointer; white-space:nowrap; }
.group-card-toggle:hover,.group-card-toggle:focus-visible { background:#176f6a; outline:3px solid var(--aqua); outline-offset:2px; }
.group-card-toggle[aria-expanded="true"] { background:#176f6a; }
.group-card-copy,.group-card-meta { display:flex; flex-direction:column; align-items:flex-start; }
.group-card-copy { gap:10px; }
.group-card-title { font-family:'Baloo 2'; color:var(--navy); font-size:1.75rem; line-height:1.05; }
.group-card-meta { min-width:92px; align-items:flex-end; justify-content:space-between; text-align:right; }
.group-card-meta>strong { font-family:'Baloo 2'; color:var(--pink); font-size:2.4rem; line-height:1; }
.group-card-action { color:#176f6a; font-weight:900; }
.editable-group-text { display:flex; align-items:center; gap:9px; }
.pencil-edit { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:#e4d9fa; color:var(--navy); font-size:1.15rem; font-weight:900; cursor:pointer; }
.pencil-edit:hover,.pencil-edit:focus-visible { background:var(--yellow); outline:2px solid var(--navy); }
.cancel-group-edit { border:0; border-radius:999px; padding:9px 13px; background:#e4d9fa; color:var(--navy); font:inherit; font-weight:900; cursor:pointer; }
.edit-group-form { padding:18px 24px; background:#fff8e9; }
.edit-group-form[hidden] { display:none; }
.edit-group-form label { display:grid; gap:7px; font-weight:900; }
.edit-group-form input { width:100%; min-height:48px; border:2px solid #ccd5e7; border-radius:13px; padding:10px 13px; font:inherit; }
.edit-group-form>div { display:flex; gap:10px; margin-top:12px; }
.class-students-panel { grid-column:1/-1; padding:0 24px 24px; background:#fff; }
.class-students-panel[hidden] { display:none; }
.class-students-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid #dfe7eb; }
.class-students-heading h3 { margin:0; font-family:'Baloo 2'; font-size:1.5rem; }
.close-group-panel { border:0; border-radius:999px; padding:8px 13px; background:#edf1f6; color:var(--navy); font-weight:900; cursor:pointer; }
.class-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.table-wrap { overflow-x: auto; }
.class-card table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.class-card th, .class-card td { padding: 14px 10px; border-bottom: 1px solid #e3e8f1; text-align: left; }
.journey-stage-table { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; }
.journey-stage-table th { padding:12px; background:var(--navy); color:#fff; text-align:left; font-size:.82rem; }
.journey-stage-table th:first-child { border-radius:12px 0 0 0; }
.journey-stage-table th:last-child { border-radius:0 12px 0 0; }
.journey-stage-table td { padding:13px 12px; border-bottom:1px solid #e3e8f1; background:#fff; vertical-align:middle; }
.journey-stage-table td:first-child { width:45px; color:#68738a; font-weight:900; }
.journey-stage-table td:nth-child(2) { min-width:190px; }
.educator-reading-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.educator-reading-card { display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; padding:14px; border:2px solid transparent; border-radius:18px; background:#f5f8fc; transition:.2s; }
.educator-reading-card:hover { transform:translateY(-3px); border-color:var(--aqua); }
.educator-reading-card.is-selected { border-color:var(--navy); background:#eaf8f5; box-shadow:0 10px 24px rgba(17,36,95,.12); }
.educator-reading-card img { width:72px; height:82px; object-fit:cover; border-radius:12px; background:#fff; }
.educator-reading-card>span { display:grid; gap:4px; min-width:0; }
.educator-reading-card small { color:#68738a; font-weight:900; }
.educator-reading-card strong { color:var(--navy); line-height:1.15; }
.educator-reading-card .progress-track { height:8px; margin-top:5px; }
.journey-stage-table td strong,.journey-stage-table td small { display:block; }
.journey-stage-table td small { color:#68738a; text-transform:capitalize; }
.journey-stage-table tr.stage-status-completed td { background:#f5fbef; }
.journey-stage-table tr.stage-status-started td { background:#eef8ff; }
.answer-review-card .section-head { align-items:center; }
.answer-review-stage { margin-top:22px; }
.answer-review-stage h3 { margin:0 0 12px; color:var(--navy); font-family:'Baloo 2'; font-size:1.35rem; }
.answer-attempt-list { display:grid; gap:12px; }
.answer-attempt { padding:16px; border:2px solid #dfe7eb; border-radius:16px; background:#fff; }
.answer-attempt.is-correct { border-color:#9bcb75; background:#f5fbef; }
.answer-attempt.is-incorrect { border-color:#ef9aaa; background:#fff7f8; }
.answer-attempt header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.answer-attempt header span { flex:0 0 auto; font-size:.82rem; font-weight:900; color:#68738a; }
.answer-attempt p { display:grid; gap:3px; margin:12px 0 0; }
.answer-attempt small { color:#68738a; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.answer-attempt .correct-answer { color:#315e16; }
.answer-attempt time { display:block; margin-top:10px; color:#68738a; font-size:.8rem; }
.stage-status-pill { display:inline-block; padding:5px 9px; border-radius:999px; background:#edf1f6; color:#68738a; font-size:.78rem; font-weight:900; text-transform:capitalize; white-space:nowrap; }
.stage-status-completed .stage-status-pill { background:#dff3cf; color:#315e16; }
.stage-status-started .stage-status-pill { background:#dceeff; color:#225b88; }
.teacher-progress { display: inline-block; min-width: 54px; padding: 5px 9px; border-radius: 20px; background: #eaf8f5; font-weight: 900; }
.progress-save-success { color: #315e16; }
.progress-save-error { color: #8a2748; }
@media (max-width: 800px) { .auth-layout { grid-template-columns: 1fr; } .auth-welcome { min-height: auto; padding: 34px 24px; } .auth-welcome .brand { margin-bottom: 28px; } .auth-illustration { display: none; } .metric-grid { grid-template-columns: repeat(2,1fr); } .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .group-form, .group-form.compact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dashboard-nav a { display: none; } .dashboard-welcome { align-items: flex-start; } .avatar-bubble { width: 76px; height: 76px; font-size: 2.7rem; } .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .metric-card { padding: 16px; } .class-heading { display: block; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Shared site footer */
.footer.footer-enhanced {
  position: relative;
  overflow: hidden;
  margin-top: 70px;
  padding: 58px 0 24px;
  background:
    radial-gradient(circle at 88% 15%, rgba(69,198,191,.18), transparent 24%),
    linear-gradient(135deg, #07143f 0%, #102866 58%, #153375 100%);
}

.reading-progress-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.reading-progress-heading h2{margin:.35rem 0 0}.reading-progress-heading p{margin:.25rem 0 0}.student-reading-progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.student-reading-progress-card{display:grid;grid-template-columns:92px 1fr;gap:1rem;padding:1rem;border:2px solid #e7e1f4;border-radius:20px;background:#fff}.student-reading-progress-card.is-next{border-style:dashed;background:#faf8ff}.student-reading-progress-card>img{width:92px;height:120px;object-fit:cover;border-radius:14px}.student-reading-progress-card h3{margin:.35rem 0;font-size:1.15rem}.student-reading-progress-card p{margin:.25rem 0}.student-reading-progress-card strong{display:block;margin:.35rem 0 .65rem}.student-reading-progress-card .btn{width:100%;padding:.55rem .75rem}@media(max-width:620px){.reading-progress-heading{display:block}.reading-progress-heading .btn{margin-top:1rem}.student-reading-progress-card{grid-template-columns:72px 1fr}.student-reading-progress-card>img{width:72px;height:96px}}
.footer.footer-enhanced::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--aqua), var(--green), #f7c94b, var(--pink));
}
.footer-enhanced .footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1.45fr) minmax(150px, .72fr) minmax(190px, .85fr);
  gap: clamp(32px, 6vw, 82px);
  align-items: start;
}
.footer-enhanced .footer-about { max-width: 450px; }
.footer-enhanced .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: #fff;
}
.footer-enhanced .footer-logo {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  background: transparent;
}
.footer-enhanced .footer-logo img { width: 48px; height: 48px; object-fit: contain; }
.footer-enhanced .footer-brand strong,
.footer-enhanced .footer-brand small { display: block; }
.footer-enhanced .footer-brand strong { font: 800 1.35rem/1.05 "Baloo 2", sans-serif; }
.footer-enhanced .footer-brand small { margin-top: 2px; color: #b9f2eb; font-size: .92rem; font-weight: 800; }
.footer-enhanced .footer-about p { max-width: 410px; margin: 0 0 15px; color: #dce6ff; line-height: 1.7; }
.footer-enhanced .footer-purpose {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid rgba(185,242,235,.28);
  border-radius: 999px;
  color: #b9f2eb;
  background: rgba(69,198,191,.1);
  font-size: .82rem;
  font-weight: 800;
}
.footer-enhanced .footer-links h3 { margin: 7px 0 16px; color: #fff; font-size: 1.05rem; }
.footer-enhanced .footer-links a {
  position: relative;
  display: block;
  width: fit-content;
  margin: 10px 0;
  color: #dce6ff;
  font-weight: 700;
  transition: color .2s ease, transform .2s ease;
}
.footer-enhanced .footer-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.footer-enhanced .footer-links a:hover,
.footer-enhanced .footer-links a:focus-visible { color: #fff; transform: translateX(3px); }
.footer-enhanced .footer-links a:hover::after,
.footer-enhanced .footer-links a:focus-visible::after { transform: scaleX(1); }
.footer-enhanced .footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.15);
  color: #aebce4;
  font-size: .84rem;
}
@media (max-width: 760px) {
  .footer.footer-enhanced { margin-top: 48px; padding-top: 46px; }
  .footer-enhanced .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 26px; }
  .footer-enhanced .footer-about { grid-column: 1 / -1; }
  .footer-enhanced .footer-bottom { flex-direction: column; gap: 8px; margin-top: 34px; }
}
@media (max-width: 430px) {
  .footer-enhanced .footer-grid { grid-template-columns: 1fr; }
  .footer-enhanced .footer-about { grid-column: auto; }
}

/* Keep the owl mark centered with the two-line brand name. */
.brand img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  object-position: center;
}
.brand-copy {
  min-height: 32px;
  justify-content: center;
}
.forgot-password-link { display:block; margin:8px 0 16px auto; padding:0; border:0; background:transparent; color:#176f6a; font:inherit; font-weight:900; text-decoration:underline; cursor:pointer; }
.password-recovery-panel { margin:10px 0 18px; padding:18px; border-radius:16px; background:#eaf8f5; }
.password-recovery-panel[hidden] { display:none; }
.password-recovery-panel>div { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.legal-copy { max-width: 860px; margin: 0 auto; }
.legal-copy h2 { margin: 30px 0 8px; color: var(--navy); font-family: "Baloo 2", sans-serif; }
.legal-copy p { color: var(--muted); }
.legal-copy a { color: #176f6a; font-weight: 900; text-decoration: underline; }