@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;600;800&display=swap');

:root {
  /* brAIn brand palette */
  --brain-night: #0B1030;
  --brain-orbit: #5B5BF0;
  --brain-mars: #FF8A5B;
  --brain-signal: #3DE0E0;
  --brain-starlight: #F2F4FF;

  --primary: var(--brain-orbit);
  --primary-dark: #3B3BC4;
  --primary-soft: #E6E8FF;
  --accent: var(--brain-mars);
  --accent-dark: #B8481C;
  --accent-soft: #FFE9DF;
  --ink: var(--brain-night);
  --body: #2A3060;
  --muted: #5F6699;
  --surface: #ffffff;
  --canvas: var(--brain-starlight);
  --line: #D9DCF2;
  --success: #16794d;
  --danger: #b42318;
  --blue: var(--brain-signal);
  --violet: var(--brain-night);
  --shadow-sm: 0 4px 14px rgba(11, 16, 48, .08);
  --shadow-lg: 0 24px 60px rgba(11, 16, 48, .18);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --font-display: "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
  --font-body: "Manrope", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--font-body); font-size: 16px; line-height: 1.55; }
button, textarea, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 4px solid var(--brain-signal); outline-offset: 3px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; z-index: 999; left: 12px; top: -80px; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.hidden { display: none !important; }

.front-page { min-height: 100vh; overflow: hidden; background: var(--canvas); color: var(--body); }
.front-header { width: min(1360px, calc(100% - 48px)); min-height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; margin: 0 auto; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--ink); text-decoration: none; }
.brand-lockup img { width: 54px; height: 54px; object-fit: contain; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.brand-lockup strong b, .brain-wordmark b { color: var(--primary); font-weight: inherit; }
.brand-lockup.inverse strong b, .login-brand strong b { color: var(--brain-signal); }
.brand-lockup small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.front-nav { display: flex; align-items: center; gap: 30px; }
.front-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; color: var(--body); text-decoration: none; font-weight: 800; font-size: 14px; }
.front-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 2px; background: var(--primary); transition: right .2s ease; }
.front-nav a:hover::after { right: 0; }
.front-sign-in { justify-self: end; min-height: 46px; padding: 0 19px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 900; transition: background .2s ease, color .2s ease; }
.front-sign-in:hover { background: var(--ink); color: #fff; }

.front-hero { width: min(1360px, calc(100% - 48px)); min-height: 690px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr); align-items: center; gap: clamp(40px, 6vw, 94px); margin: 0 auto; padding: 62px 0 84px; }
.front-hero-copy { position: relative; z-index: 2; }
.front-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--primary-dark); font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.front-eyebrow span { width: 34px; height: 2px; background: var(--accent); }
.front-hero h1 { max-width: 730px; margin: 0 0 24px; font-size: clamp(3.8rem, 6.3vw, 6.9rem); line-height: .93; letter-spacing: -.065em; }
.front-hero h1 em { display: block; color: var(--primary); font-style: normal; }
.front-lead { max-width: 620px; margin-bottom: 30px; color: var(--body); font-family: var(--font-body); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.35; }
.front-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.front-primary, .front-secondary { min-height: 54px; padding: 0 23px; border-radius: 999px; font-weight: 900; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.front-primary { border: 2px solid var(--primary); background: var(--primary); color: #fff; box-shadow: 0 6px 0 var(--primary-dark); }
.front-primary:hover { background: var(--ink); border-color: var(--ink); }
.front-primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--primary-dark); }
.front-secondary { border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.front-secondary:hover { background: var(--ink); color: #fff; }
.front-proof { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--line); }
.front-proof span { color: var(--muted); font-size: 13px; font-weight: 800; }
.front-proof strong { margin-right: 4px; color: var(--ink); font-family: var(--font-display); font-size: 21px; }
.front-hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.hero-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(91,91,240,.25); }
.orbit-one { width: 520px; height: 520px; }
.orbit-two { width: 650px; height: 650px; border-style: dashed; }
.hero-book-card { position: relative; z-index: 2; width: min(368px, 66%); overflow: hidden; border: 10px solid #fff; border-radius: 36px 36px 36px 10px; background: #fff; box-shadow: 0 36px 80px rgba(11,16,48,.22); transform: rotate(2deg); }
.hero-book-card img { display: block; width: 100%; height: auto; aspect-ratio: 1154 / 1248; object-fit: cover; }
.hero-book-caption { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; }
.hero-book-caption span { color: var(--primary); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.hero-book-caption strong { color: var(--ink); font-family: var(--font-display); }
.hero-note { position: absolute; z-index: 3; min-width: 175px; display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 14px 36px rgba(11,16,48,.16); font-size: 13px; transform: rotate(-2deg); }
.hero-note span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-dark); font-family: var(--font-display); font-weight: 900; }
.note-top { top: 26px; right: 0; }
.note-bottom { bottom: 24px; left: 0; transform: rotate(2deg); }
.hero-brand-mark { position: absolute; z-index: 4; width: 96px; height: 96px; right: 0; bottom: 0; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(11,16,48,.18)); }

.front-principles { background: var(--ink); color: #fff; display: grid; grid-template-columns: repeat(3,1fr); }
.front-principles article { min-height: 230px; display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 52px clamp(28px,4vw,70px); border-right: 1px solid rgba(255,255,255,.16); }
.front-principles article:last-child { border-right: 0; }
.principle-number { color: var(--brain-signal); font-family: var(--font-display); font-weight: 900; }
.front-principles h2 { margin-bottom: 12px; color: #fff; font-size: 26px; }
.front-principles p { margin: 0; color: #C3C7EC; }

.front-journey { width: min(1360px, calc(100% - 48px)); margin: 0 auto; padding: 118px 0 130px; }
.front-section-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.65fr); align-items: end; gap: 60px; margin-bottom: 48px; }
.front-section-heading h2 { max-width: 760px; margin: 0; font-size: clamp(2.7rem,5vw,5.1rem); letter-spacing: -.05em; }
.front-section-heading > p { max-width: 480px; margin: 0; color: var(--muted); font-family: var(--font-body); font-size: 22px; line-height: 1.4; }
.journey-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 22px; }
.journey-card { grid-column: span 6; min-height: 360px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.journey-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(11,16,48,.12); }
.journey-card img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.journey-card div { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,3vw,42px); }
.journey-card span { color: var(--primary); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.journey-card h3 { margin: 12px 0 14px; font-size: 27px; }
.journey-card p { margin: 0; color: var(--muted); }
.journey-card:nth-child(2), .journey-card:nth-child(3) { background: #EEF0FF; }

.portal-entry { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; padding: clamp(64px,8vw,120px); background: var(--primary); color: #fff; }
.front-eyebrow.light { color: var(--primary-soft); }
.portal-entry-copy h2 b, .login-intro-copy h1 b { color: var(--brain-signal); font-weight: inherit; }
.portal-entry-copy h2 { color: #fff; font-size: clamp(3.1rem,5vw,5.6rem); letter-spacing: -.055em; }
.portal-entry-copy > p:last-child { max-width: 480px; color: #E0E2FF; font-family: var(--font-body); font-size: 23px; }
.portal-role-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.portal-role-cards article { min-height: 350px; display: flex; flex-direction: column; padding: 34px; border-radius: 26px; background: #fff; color: var(--body); }
.role-number { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); font-family: var(--font-display); font-weight: 900; }
.portal-role-cards h3 { margin: 34px 0 12px; font-size: 32px; }
.portal-role-cards p { color: var(--muted); }
.portal-role-cards button { min-height: 50px; margin-top: auto; border: 0; border-radius: 13px; background: var(--ink); color: #fff; font-weight: 900; transition: background .2s ease; }
.portal-role-cards button:hover { background: var(--primary); }
.front-footer { min-height: 150px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 28px clamp(24px,5vw,80px); background: #070A22; color: #fff; }
.brand-lockup.inverse { color: #fff; }
.brand-lockup.inverse small { color: #A0A6D6; }
.front-footer p { margin: 0; color: #A0A6D6; font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.front-footer button { justify-self: end; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: transparent; color: #fff; font-weight: 800; }

.back-to-front { position: absolute; z-index: 4; top: 24px; left: 24px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(11,16,48,.45); color: #fff; font-weight: 800; }
.back-to-front svg { width: 18px; height: 18px; transform: rotate(180deg); }
.login-intro .login-brand { margin-top: 42px; }

.login-gate { min-height: 100vh; display: grid; place-items: center; padding: clamp(18px, 4vw, 56px); background: radial-gradient(circle at 15% 15%, var(--primary-soft) 0, transparent 28%), radial-gradient(circle at 92% 88%, var(--accent-soft) 0, transparent 24%), var(--canvas); }
.login-panel { width: min(1120px, 100%); min-height: 650px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #fff; box-shadow: var(--shadow-lg); }
.login-intro { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 4vw, 54px); overflow: hidden; background: var(--ink); color: #fff; }
.login-brand { color: #fff; position: relative; z-index: 2; }
.login-brand small { color: #B5BAE6; }
.login-picture { position: relative; overflow: hidden; min-height: 260px; margin: 42px 0 30px; border: 6px solid rgba(255,255,255,.15); border-radius: 24px; transform: rotate(-1.5deg); box-shadow: 0 18px 38px rgba(0,0,0,.25); }
.login-picture img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.login-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(11,16,48,.78)); }
.login-picture-label { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 16px; color: #fff; font-weight: 800; }
.login-intro-copy { margin-top: auto; max-width: 520px; }
.login-intro-copy .eyebrow { color: var(--brain-signal); }
.login-intro-copy h1 { color: #fff; }
.login-intro-copy p:last-child { margin-bottom: 0; color: #D5D8F5; font-size: 18px; }
.login-card { align-self: center; padding: clamp(28px, 5vw, 64px); }
.login-card-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.login-card-heading h2 { margin: 0; }
.lock-mark { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--primary-soft); color: var(--primary-dark); }
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 26px; border-radius: 15px; background: #E9EBFA; }
.login-tab { min-height: 48px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-weight: 800; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.login-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.login-form { display: grid; }
.login-form[hidden] { display: none; }
.login-form label { margin: 0 0 7px; color: var(--ink); font-weight: 800; }
.login-form > input { width: 100%; min-height: 52px; margin-bottom: 17px; padding: 0 15px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.login-form > input::placeholder { color: #7A80B0; }
.login-form > input:focus { border-color: var(--primary); }
.form-help { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.teacher-login-links { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -5px 0 8px; font-size: 13px; }
.teacher-login-links label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--body); font-weight: 700; }
.teacher-login-links input { width: 18px; height: 18px; accent-color: var(--primary); }
.teacher-login-links button { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--primary-dark); font-weight: 800; }
.login-error { min-height: 24px; color: var(--danger); font-size: 13px; font-weight: 800; }
.login-submit { width: 100%; margin-top: 4px; }
.demo-access { display: grid; gap: 2px; margin-top: 18px; padding: 12px 14px; border: 1px dashed #A9AEE0; border-radius: 12px; background: #F5F6FF; color: var(--body); font-size: 13px; }
.demo-access strong { color: var(--primary-dark); }
.test-mode { margin-top: 22px; padding: 16px; border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); }
.test-mode[hidden] { display: none; }
.test-mode .eyebrow { color: var(--accent-dark); }
.test-mode p:not(.eyebrow) { margin-bottom: 12px; color: var(--body); font-size: 13px; }
.test-mode-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.test-mode-actions button { min-height: 46px; font-size: 14px; }
.test-badge { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; }
@media (max-width: 480px) { .test-mode-actions { grid-template-columns: 1fr; } }
.login-footer-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.login-footer-note svg { width: 17px; height: 17px; flex: 0 0 auto; }

.topbar { position: sticky; top: 0; z-index: 30; min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 12px clamp(18px, 4vw, 56px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; width: fit-content; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; color: white; background: var(--primary); border-radius: 15px 15px 15px 5px; font-family: var(--font-display); font-size: 18px; box-shadow: 0 5px 0 var(--primary-dark); }
.brand strong, .brand small, .profile-copy strong, .profile-copy small { display: block; }
.brand strong { font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.brand small, .profile-copy small { color: var(--muted); font-size: 12px; }
.portal-brand img { width: 48px; height: 48px; }
.signed-in-role { justify-self: center; min-height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; font-size: 13px; }
.account-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.profile-button { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); text-align: left; border-radius: 12px; padding: 4px 8px; }
.sign-out-button { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font-weight: 800; transition: background .2s ease, border-color .2s ease; }
.sign-out-button:hover { border-color: var(--primary); background: var(--primary-soft); }
.sign-out-button svg { width: 19px; height: 19px; }
.avatar, .mini-avatar { display: grid; place-items: center; color: var(--ink); background: var(--accent); border-radius: 50%; font-weight: 800; }
.avatar { width: 42px; height: 42px; }

.student-shell, .teacher-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.side-nav, .teacher-sidebar { padding: 30px 18px; background: #fff; border-right: 1px solid var(--line); }
.side-nav { position: sticky; top: 76px; height: calc(100vh - 76px); }
.nav-item, .teacher-nav { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; margin-bottom: 8px; border: 0; border-radius: 14px; color: var(--muted); background: transparent; font-weight: 700; text-align: left; transition: background .2s ease, color .2s ease; }
.nav-item:hover, .teacher-nav:hover { background: #EEF0FF; color: var(--primary-dark); }
.nav-item.active, .teacher-nav.active { background: var(--primary-soft); color: var(--primary-dark); }
.nav-note { margin-top: 28px; padding: 18px; background: var(--ink); color: #fff; border-radius: var(--radius-md); }
.nav-note-number { display: block; font-family: var(--font-display); font-size: 32px; line-height: 1; }
.nav-note span:last-child { font-size: 13px; opacity: .8; }
.student-content, .teacher-content { width: min(1240px, 100%); padding: clamp(26px, 4vw, 54px); margin: 0 auto; }

.welcome-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 32px; }
.eyebrow, .overline { margin: 0 0 4px; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; color: var(--ink); font-family: var(--font-display); font-weight: 700; line-height: 1.16; letter-spacing: -.03em; }
h1 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.025em; }
h2 { margin-bottom: 8px; font-size: clamp(1.45rem, 2.3vw, 2.1rem); }
h3 { margin-bottom: 6px; font-size: 1.12rem; }
p { margin-top: 0; }
.welcome-row p:last-child, .teacher-heading p:last-child { margin-bottom: 0; color: var(--muted); }
.progress-orbit { flex: 0 0 128px; width: 128px; height: 128px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--primary) var(--progress), #DDE0F7 0); position: relative; }
.progress-orbit::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--canvas); }
.progress-orbit span { position: relative; text-align: center; }
.progress-orbit strong, .progress-orbit small { display: block; }
.progress-orbit strong { color: var(--ink); font-family: var(--font-display); font-size: 24px; }
.progress-orbit small { color: var(--muted); font-size: 12px; }

.continue-card { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 330px; overflow: hidden; margin-bottom: 52px; background: var(--ink); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.continue-copy { align-self: center; padding: clamp(28px, 5vw, 58px); }
.continue-card .overline { color: var(--brain-signal); margin-top: 22px; }
.continue-card h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); max-width: 560px; }
.continue-card p:not(.overline) { max-width: 520px; color: #D5D8F5; }
.continue-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-left: 6px solid rgba(255,255,255,.12); }
.status-chip, .assessment-pill, .count-badge, .table-status { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.status-chip { background: var(--primary-soft); color: var(--primary-dark); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.primary-button, .secondary-button, .sound-button, .text-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 13px; font-weight: 800; transition: background .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.primary-button { padding: 0 20px; border: 2px solid var(--primary); background: var(--primary); color: #fff; box-shadow: 0 5px 0 var(--primary-dark); }
.primary-button:hover { background: var(--ink); border-color: var(--ink); }
.primary-button:active { box-shadow: 0 2px 0 var(--primary-dark); }
.secondary-button { padding: 0 20px; border: 2px solid var(--line); background: white; color: var(--ink); }
.sound-button { padding: 0 16px; border: 2px solid rgba(255,255,255,.45); background: transparent; color: #fff; }
.sound-button:hover { background: rgba(255,255,255,.1); }
.sound-button.full { width: 100%; color: var(--primary-dark); border-color: var(--line); }
.text-button { padding: 0 6px; border: 0; background: transparent; color: var(--primary-dark); }
.text-button svg { width: 20px; }

.section-heading, .panel-heading, .teacher-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-heading { margin-bottom: 22px; }
.unit-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-bottom: 60px; }
.unit-card { overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.unit-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,16,48,.13); }
.unit-card img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.unit-card-body { padding: 18px; }
.unit-label { color: var(--primary); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.unit-card h3 { min-height: 42px; margin: 4px 0 14px; }
.unit-progress { height: 8px; overflow: hidden; background: #DDE0F7; border-radius: 999px; }
.unit-progress span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.unit-meta { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 12px; }
.unit-card button { width: 100%; min-height: 48px; margin-top: 14px; border: 0; border-radius: 12px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; }

.activity-library { scroll-margin-top: 100px; padding-top: 12px; }
.count-badge { background: var(--primary-soft); color: var(--primary-dark); }
.unit-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filter-button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 800; }
.filter-button.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.activity-list { display: grid; gap: 10px; }
.activity-row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto auto; align-items: center; gap: 16px; min-height: 84px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.activity-number { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 900; }
.activity-row h3 { margin: 0; font-size: 17px; }
.activity-row p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.assessment-pill { background: #EEF0FA; color: var(--ink); white-space: nowrap; }
.assessment-pill.auto { background: #e1f5ec; color: #17603f; }
.assessment-pill.teacher { background: var(--accent-soft); color: var(--accent-dark); }
.assessment-pill.reflection { background: var(--primary-soft); color: var(--primary-dark); }
.activity-row .open-activity { min-width: 96px; min-height: 44px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; }
.complete-mark { color: var(--success); display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.complete-mark svg { width: 18px; }

.teacher-shell { grid-template-columns: 240px minmax(0, 1fr); }
.teacher-sidebar { background: var(--ink); color: #fff; }
.sidebar-label { margin: 0 14px 18px; color: #A0A6D6; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.teacher-nav { color: #D5D8F5; }
.teacher-nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.teacher-nav.active { background: #fff; color: var(--ink); }
.privacy-note { margin-top: 40px; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; }
.privacy-note strong, .privacy-note span { display: block; }
.privacy-note span { color: #B5BAE6; font-size: 13px; margin-top: 4px; }
.teacher-heading { align-items: center; margin-bottom: 28px; }
.teacher-heading h1 { font-size: clamp(2rem,3vw,2.8rem); }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.metric-card { padding: 22px; border-top: 5px solid var(--primary); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.metric-card.amber { border-color: var(--accent); }
.metric-card.blue { border-color: var(--blue); }
.metric-card.violet { border-color: var(--violet); }
.metric-card span, .metric-card small, .metric-card strong { display: block; }
.metric-card span { color: var(--muted); font-weight: 700; }
.metric-card strong { margin: 8px 0 2px; color: var(--ink); font-family: var(--font-display); font-size: 34px; }
.metric-card small { color: var(--muted); }
.teacher-columns { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.7fr); gap: 20px; }
.panel { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.panel-heading { align-items: center; margin-bottom: 18px; }
.panel-heading h2 { font-size: 23px; margin-bottom: 0; }
.student-table-wrap { overflow-x: auto; }
.student-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.student-table th { padding: 12px; color: var(--muted); font-size: 12px; text-align: left; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.student-table td { padding: 15px 12px; border-bottom: 1px solid #E6E8F7; vertical-align: middle; }
.student-table td:first-child { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); }
.mini-avatar { width: 32px; height: 32px; font-size: 13px; }
.mini-avatar.teal { background: var(--primary); color: #fff; }.mini-avatar.gold { background: var(--accent); }.mini-avatar.blue { background: var(--blue); }.mini-avatar.violet { background: var(--violet); color: #fff; }
.table-progress { width: 110px; height: 7px; overflow: hidden; background: #DDE0F7; border-radius: 999px; }
.table-progress span { display: block; height: 100%; background: var(--primary); }
.student-table small { color: var(--muted); }
.table-status { background: #EEF0FA; color: var(--ink); }
.table-status.on-track { background: #e2f5ea; color: #17603f; }.table-status.review { background: var(--accent-soft); color: var(--accent-dark); }.table-status.support { background: #fde8e6; color: var(--danger); }
.review-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #E6E8F7; }
.review-card:last-child { border-bottom: 0; }
.review-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-dark); }
.review-card strong, .review-card small { display: block; }
.review-card strong { color: var(--ink); }
.review-card small { color: var(--muted); margin: 2px 0 8px; }
.review-card button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-weight: 800; }
.coverage-panel { margin-top: 20px; }
.coverage-note { color: var(--muted); font-weight: 700; }
.coverage-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.coverage-unit { padding: 16px; border-radius: 15px; background: #F5F6FF; border: 1px solid var(--line); }
.coverage-unit strong { color: var(--ink); }
.coverage-unit span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.coverage-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.coverage-dot { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--primary-dark); font-size: 10px; font-weight: 900; }

dialog { border: 0; padding: 0; color: var(--body); }
dialog::backdrop { background: rgba(11,16,48,.66); backdrop-filter: blur(3px); }
.activity-dialog { width: min(1120px, calc(100% - 24px)); max-height: calc(100vh - 24px); border-radius: 24px; box-shadow: var(--shadow-lg); }
.dialog-layout { background: #fff; }
.dialog-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.dialog-header h2 { margin-bottom: 0; }
.icon-button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 13px; }
.dialog-progress { height: 6px; background: #DDE0F7; }
.dialog-progress span { display: block; width: 35%; height: 100%; background: var(--primary); }
.dialog-body { display: grid; grid-template-columns: 320px minmax(0,1fr); min-height: 570px; }
.activity-brief { padding: 24px; background: #F5F6FF; border-right: 1px solid var(--line); }
.activity-brief img { width: 100%; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 16px; border-radius: 16px; }
.activity-brief h3 { margin-top: 22px; }
.activity-workspace { padding: clamp(24px,4vw,48px); overflow-y: auto; }
.workspace-intro { margin-bottom: 24px; }
.workspace-intro h3 { font-size: 26px; }
.sort-items, .choice-grid, .evidence-grid, .reflection-grid { display: grid; gap: 12px; }
.sort-items { grid-template-columns: repeat(3,1fr); margin-bottom: 26px; }
.sort-item, .choice-card, .evidence-option, .reflection-option { min-height: 72px; padding: 14px; border: 2px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font-weight: 800; text-align: left; transition: border .2s ease, background .2s ease; }
.sort-item.selected, .choice-card.selected, .evidence-option.selected, .reflection-option.selected { border-color: var(--primary); background: var(--primary-soft); }
.sort-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--muted); font-size: 13px; font-weight: 800; }
.sort-meter { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #DDE0F7; }
.sort-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--primary); transition: width .35s ease; }
.sort-tray { min-height: 92px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; padding: 14px; border: 2px dashed var(--line); border-radius: 18px; background: #F8F9FF; }
.sort-tray:empty::after { content: "All sorted!"; margin: auto; color: var(--success); font-weight: 800; }
.sort-chip { min-height: 56px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border: 2px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font-weight: 800; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 3px 0 var(--line); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; }
.sort-chip:hover { border-color: var(--primary); transform: translateY(-2px); }
.sort-chip.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(91,91,240,.22); }
.chip-emoji { font-size: 28px; line-height: 1; }
.sort-chip.dragging { opacity: .3; }
.drag-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; cursor: grabbing; transform: rotate(-4deg) scale(1.06); box-shadow: 0 16px 30px rgba(11,16,48,.25); }
.sort-chip.placed { min-height: 40px; padding: 4px 10px 4px 6px; border-color: #9ED9B8; background: #E9F8EF; box-shadow: none; font-size: 13px; cursor: default; }
.sort-chip.placed:hover { transform: none; }
.sort-chip.placed .chip-emoji { font-size: 20px; }
.sort-chip.placed::after { content: "✓"; color: var(--success); }
.sort-chip.shake, .bin.nope { animation: sort-shake .45s ease; }
@keyframes sort-shake { 20%, 60% { transform: translateX(-8px) rotate(-3deg); } 40%, 80% { transform: translateX(8px) rotate(3deg); } }
.bins { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.bin { position: relative; min-height: 220px; display: flex; flex-direction: column; border: 3px solid var(--bin); border-radius: 16px 16px 24px 24px; background: var(--bin-soft); transition: transform .2s ease, box-shadow .2s ease; }
.bin.paper { --bin: #2F6DB5; --bin-soft: #E7F0FB; }
.bin.plastic { --bin: #C0392B; --bin-soft: #FBE9E7; }
.bin.cans { --bin: #2E8B57; --bin-soft: #E6F4EC; }
.bin-drop { position: relative; display: grid; justify-items: center; gap: 2px; padding: 22px 8px 12px; border: 0; border-radius: 10px 10px 0 0; background: var(--bin); color: #fff; font-weight: 800; }
.bin-lid { position: absolute; left: -9px; right: -9px; top: -15px; height: 14px; border-radius: 10px 10px 4px 4px; background: var(--bin); filter: brightness(.8); transform-origin: 10% 100%; transition: transform .25s ease; }
.bin-icon { font-size: 22px; line-height: 1; }
.bin-drop strong { color: #fff; font-family: var(--font-display); font-size: 20px; }
.bin-drop small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.bin-items { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 12px; }
.bin.drag-over, .choosing-bin .bin:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 5px rgba(91,91,240,.25); }
.bin.drag-over .bin-lid, .choosing-bin .bin:hover .bin-lid { transform: rotate(-18deg) translateY(-6px); }
.choosing-bin .bin-drop { animation: bin-ready 1.2s ease-in-out infinite; }
@keyframes bin-ready { 50% { filter: brightness(1.12); } }
.bin.gulp { animation: bin-gulp .5s ease; }
@keyframes bin-gulp { 30% { transform: scale(1.06, .94); } 60% { transform: scale(.98, 1.03); } }
.choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.evidence-grid { grid-template-columns: repeat(3,1fr); }
.evidence-option { min-height: 150px; text-align: center; }
.evidence-option svg { width: 38px; height: 38px; display: block; margin: 0 auto 10px; color: var(--primary); }
.reflection-grid { grid-template-columns: repeat(2,1fr); }
.voice-recorder { margin-top: 18px; padding: 18px; border: 2px solid var(--line); border-radius: 18px; background: #F8F9FF; }
.voice-recorder[hidden] { display: none; }
.recorder-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.record-button { min-height: 52px; display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 800; }
.record-button svg { width: 22px; height: 22px; }
.record-button.recording { background: var(--danger); color: #fff; animation: record-pulse 1.4s ease-in-out infinite; }
@keyframes record-pulse { 50% { box-shadow: 0 0 0 8px rgba(180,35,24,.18); } }
.record-time { color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.record-lang { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.record-lang select { min-height: 40px; padding: 0 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 700; }
.transcript-label { margin: 16px 0 6px; color: var(--primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.transcript-box { min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-size: 17px; line-height: 1.5; white-space: pre-wrap; }
.transcript-interim { color: var(--muted); }
.transcript-placeholder { color: var(--muted); font-size: 14px; }
.voice-recorder audio, .voice-note audio { width: 100%; margin-top: 12px; }
.voice-note { max-width: 560px; margin: 22px auto 0; text-align: left; }
#review-voice { margin: 0 24px 20px; }
#review-voice .voice-note { margin-top: 0; }
.review-snippet { display: block; margin: -4px 0 8px; color: var(--body); font-size: 13px; font-style: italic; }
.teacher-feedback { padding: 12px 16px; border-radius: 14px; background: var(--primary-soft); color: var(--ink); }
.teacher-feedback p { margin: 4px 0 0; color: var(--body); }
.new-badge { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; vertical-align: middle; }
.workspace-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.feedback-box { margin-top: 20px; padding: 16px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; }
.feedback-box.error { background: #fde8e6; color: var(--danger); }
.done-panel { text-align: center; padding: 50px 20px; }
.done-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--primary); color: #fff; }
.done-icon svg { width: 42px; height: 42px; }

.review-dialog { width: min(620px, calc(100% - 24px)); border-radius: 22px; box-shadow: var(--shadow-lg); }
.review-dialog form { padding-bottom: 22px; }
.review-evidence, .review-dialog fieldset, .feedback-label, .review-dialog textarea, .dialog-actions { margin-left: 24px; margin-right: 24px; }
.review-evidence { display: flex; align-items: center; gap: 16px; margin-top: 22px; margin-bottom: 22px; }
.evidence-preview { width: 150px; height: 100px; display: grid; place-items: center; align-content: center; border-radius: 14px; background: #EEF0FF; color: var(--primary-dark); font-size: 12px; }
.evidence-preview svg { width: 34px; height: 34px; }
.review-dialog fieldset { border: 0; padding: 0; }
.review-dialog legend, .feedback-label { color: var(--ink); font-weight: 800; margin-bottom: 10px; }
.judgment-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.judgment-options label { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.feedback-label { display: block; margin-top: 20px; }
.review-dialog textarea { width: calc(100% - 48px); resize: vertical; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translate(-50%, 120px); opacity: 0; padding: 13px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; box-shadow: var(--shadow-lg); transition: transform .22s ease, opacity .22s ease; }
.toast.show { transform: translate(-50%,0); opacity: 1; }

@media (max-width: 1050px) {
  .front-header { grid-template-columns: 1fr auto; }
  .front-nav { display: none; }
  .front-hero { grid-template-columns: 1fr; padding-top: 50px; }
  .front-hero-copy { max-width: 820px; }
  .front-hero-visual { min-height: 620px; }
  .front-principles { grid-template-columns: 1fr; }
  .front-principles article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .front-principles article:last-child { border-bottom: 0; }
  .front-section-heading { grid-template-columns: 1fr; gap: 22px; }
  .journey-card { grid-column: span 12; }
  .portal-entry { grid-template-columns: 1fr; }
  .student-shell, .teacher-shell { width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr); overflow-x: clip; }
  .side-nav, .teacher-sidebar { position: static; width: 100%; max-width: 100%; min-width: 0; height: auto; display: flex; gap: 8px; padding: 12px clamp(18px,4vw,36px); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .student-content, .teacher-content, .panel { min-width: 0; }
  .nav-item, .teacher-nav { width: auto; flex: 0 0 auto; margin: 0; padding-right: 18px; }
  .nav-note, .privacy-note, .sidebar-label { display: none; }
  .unit-grid, .metric-grid, .coverage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .teacher-columns { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .front-header { width: calc(100% - 32px); min-height: 78px; }
  .brand-lockup img { width: 46px; height: 46px; }
  .brand-lockup strong { font-size: 18px; }
  .front-sign-in { min-height: 44px; padding: 0 15px; }
  .front-hero { width: calc(100% - 32px); min-height: 0; grid-template-columns: minmax(0,1fr); gap: 38px; padding: 52px 0 64px; }
  .front-hero h1 { font-size: clamp(3rem,15vw,4.3rem); }
  .front-lead { font-size: 1.25rem; }
  .front-actions { display: grid; }
  .front-primary, .front-secondary { width: 100%; }
  .front-proof { display: grid; gap: 10px; margin-top: 34px; }
  .front-hero-visual { min-height: 420px; }
  .orbit-one { width: 350px; height: 350px; }
  .orbit-two { width: 430px; height: 430px; }
  .hero-book-card { width: 72%; max-width: 320px; border-width: 6px; border-radius: 24px 24px 24px 8px; }
  .hero-book-caption { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 12px 14px; }
  .hero-note { display: none; }
  .hero-note { min-width: 145px; padding: 10px 12px; font-size: 12px; }
  .note-top { top: 14px; right: 0; }
  .note-bottom { bottom: 8px; left: 0; }
  .hero-brand-mark { width: 72px; height: 72px; right: 0; bottom: 4px; }
  .front-principles article { grid-template-columns: 38px 1fr; padding: 34px 22px; }
  .front-journey { width: calc(100% - 32px); padding: 78px 0 86px; }
  .front-section-heading h2 { font-size: clamp(2.5rem,12vw,3.5rem); }
  .journey-grid { gap: 14px; }
  .journey-card { min-height: 0; grid-template-columns: 1fr; }
  .journey-card img { min-height: 0; aspect-ratio: 16/10; }
  .journey-card div { padding: 24px; }
  .portal-entry { gap: 38px; padding: 70px 18px; }
  .portal-role-cards { grid-template-columns: 1fr; }
  .portal-role-cards article { min-height: 300px; }
  .front-footer { grid-template-columns: 1fr auto; }
  .front-footer p { display: none; }
  .login-gate { padding: 0; place-items: start stretch; background: #fff; }
  .login-panel { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .login-intro { min-height: 290px; padding: 22px 20px 30px; }
  .back-to-front { top: 16px; left: 16px; }
  .login-intro .login-brand { margin-top: 54px; }
  .login-picture { position: absolute; inset: 0; min-height: 0; margin: 0; border: 0; border-radius: 0; transform: none; opacity: .18; box-shadow: none; }
  .login-picture img { min-height: 100%; }
  .login-picture::after, .login-picture-label { display: none; }
  .login-intro-copy { position: relative; z-index: 1; margin-top: auto; }
  .login-intro-copy p:last-child { font-size: 16px; }
  .login-card { align-self: start; padding: 30px 20px 40px; }
  .topbar { grid-template-columns: 1fr auto; min-height: 70px; padding: 10px 14px; backdrop-filter: none; }
  .signed-in-role { display: none; }
  .account-actions { gap: 4px; }
  .profile-copy { display: none; }
  .sign-out-button span { display: none; }
  .sign-out-button { width: 44px; padding: 0; justify-content: center; }
  .student-content, .teacher-content { padding: 24px 16px 40px; }
  .welcome-row { align-items: flex-start; }
  .progress-orbit { flex-basis: 96px; width: 96px; height: 96px; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-card img { height: 230px; border-left: 0; border-top: 6px solid rgba(255,255,255,.12); }
  .unit-grid, .metric-grid, .coverage-grid { grid-template-columns: 1fr; }
  .activity-row { grid-template-columns: 54px minmax(0,1fr) auto; }
  .activity-row .assessment-pill { display: none; }
  .activity-row .open-activity { min-width: 72px; font-size: 13px; }
  .section-heading, .teacher-heading { align-items: flex-start; }
  .section-heading .text-button { display: none; }
  .teacher-heading .assign-button { display: none; }
  .dialog-body { grid-template-columns: 1fr; }
  .activity-brief { border-right: 0; border-bottom: 1px solid var(--line); }
  .activity-brief img { max-height: 210px; }
  .sort-items, .choice-grid, .evidence-grid, .reflection-grid { grid-template-columns: 1fr; }
  .bins { gap: 8px; }
  .bin { min-height: 170px; }
  .bin-drop strong { font-size: 16px; }
  .bin-items { padding: 8px 6px; }
  .bin .chip-label { display: none; }
  .sort-chip { min-height: 50px; padding: 6px 12px 6px 8px; font-size: 14px; }
  .activity-dialog { max-height: calc(100vh - 12px); }
  .judgment-options { grid-template-columns: 1fr; }
}

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

@media (prefers-contrast: more) {
  :root { --line: #63747f; --muted: var(--body); }
  .unit-card, .panel, .activity-row { border-width: 2px; }
}

/* ------------------------------------------------------------------ assessment workflow (student) */
.book-page { margin: -4px 0 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
.alert-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding: 18px 20px; border-radius: 18px; border: 2px solid var(--line); background: #fff; }
.alert-card.improve { border-color: var(--accent); background: var(--accent-soft); }
.alert-card.feedback { border-color: var(--primary); background: var(--primary-soft); }
.alert-card h3 { margin: 2px 0 6px; }
.alert-card p { margin: 0; }
.teacher-quote { font-size: 16px; color: var(--ink); }
.teacher-quote span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.todo-section { margin: 26px 0 40px; }
.empty-state { padding: 28px; border: 2px dashed var(--line); border-radius: 20px; background: #fff; color: var(--muted); font-size: 32px; text-align: center; }
.empty-state p { margin: 8px 0 0; font-size: 16px; font-weight: 700; }
.empty-state.small { font-size: 14px; }
.unit-group-title { margin: 22px 0 10px; font-size: 18px; }
.status-pill, .due-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 999px; background: #EEF0FA; color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.st-done, .st-approved, .st-judged, .st-replied { background: #e2f5ea; color: #17603f; }
.st-submitted, .st-waiting { background: var(--primary-soft); color: var(--primary-dark); }
.st-needs_improvement, .st-returned, .st-late, .due-chip.late { background: var(--accent-soft); color: var(--accent-dark); }
.st-notstarted { background: #EEF0FA; color: var(--muted); }
.picture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.picture-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.picture-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 3px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); font-weight: 800; text-align: center; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.picture-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 10px; background: #fff; }
.picture-card span { font-size: 14px; line-height: 1.3; }
.picture-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.picture-card.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 4px rgba(91,91,240,.2); }
.picture-card.selected span::before { content: "\2713  "; color: var(--primary-dark); }
.picture-card.wrong { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(180,35,24,.15); }
.picture-card.shake { animation: sort-shake .45s ease; }
.chip-img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; }
.sort-chip.placed .chip-img { width: 28px; height: 28px; }
.word-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.word-tag { padding: 6px 14px; border-radius: 999px; background: #EEF0FA; color: var(--ink); font-weight: 800; }
.word-tag.found { background: #e2f5ea; color: #17603f; text-decoration: line-through; }
.word-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; max-width: 560px; margin-bottom: 20px; }
.letter { aspect-ratio: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: clamp(13px, 2.4vw, 20px); font-weight: 700; }
.letter.anchor { background: var(--primary); color: #fff; border-color: var(--primary); }
.letter.found { background: #c9f0dc; border-color: #9ED9B8; color: #17603f; }
.pair-block { margin-bottom: 16px; }
.pair-word { margin: 0 0 8px; color: var(--primary-dark); font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.evidence-composer { margin-top: 22px; }
.evidence-composer .evidence-option { cursor: pointer; }
.evidence-option.selected { border-color: var(--primary); background: var(--primary-soft); }
.photo-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.photo-preview img, .sent-photo, .review-photo { max-width: 100%; max-height: 320px; border-radius: 14px; border: 1px solid var(--line); object-fit: contain; background: #fff; }
.completion-img { display: block; max-width: 320px; width: 100%; margin: 0 auto 10px; }
.sent-media { max-width: 560px; margin: 18px auto 0; text-align: left; }
.media-note { display: flex; align-items: center; gap: 8px; color: var(--body); font-weight: 700; }
.media-note svg { width: 20px; height: 20px; color: var(--primary); }
.done-icon.improve { background: var(--accent); color: var(--ink); }
.judgment-badge { display: inline-block; margin: 6px 0; padding: 6px 16px; border-radius: 999px; font-weight: 800; }
.j-secure { background: #e2f5ea; color: #17603f; }
.j-developing { background: var(--primary-soft); color: var(--primary-dark); }
.j-emerging { background: var(--accent-soft); color: var(--accent-dark); }
.feedback-thread { display: grid; gap: 8px; max-width: 560px; margin: 14px auto 0; text-align: left; }
.feedback-item { padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); color: var(--ink); }
.feedback-item p { margin: 4px 0 0; color: var(--body); }
.feedback-item small { color: var(--muted); }

/* ------------------------------------------------------------------ assessment workflow (teacher) */
.teacher-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.teacher-heading-actions .secondary-button, .teacher-heading-actions .primary-button { min-height: 48px; }
.queue-list { display: grid; gap: 0; margin-bottom: 14px; }
.primary-button.full { width: 100%; }
.attention-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid #E6E8F7; background: transparent; text-align: left; }
.attention-row strong, .attention-row small { display: block; }
.attention-row small { color: var(--muted); }
.class-identity { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.class-identity h2 { margin: 2px 0 6px; }
.class-identity p { margin: 0; color: var(--body); }
.student-table.roster { min-width: 720px; }
.student-cell { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.student-table td:first-child { display: table-cell; }
.student-table .mini-avatar { flex: 0 0 auto; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td, tr.clickable:focus td { background: #F5F6FF; }
.back-link { margin-bottom: 12px; padding-left: 0; }
.work-row { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.draft-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #EEF0FA; color: var(--muted); font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
.toc-unit { margin-bottom: 20px; }
.toc-row { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 4px; border: 0; border-top: 1px solid #E6E8F7; background: transparent; color: var(--ink); text-align: left; }
.toc-row:hover { background: #F5F6FF; }
.toc-num { color: var(--primary-dark); font-weight: 800; font-size: 13px; }
.toc-main strong, .toc-main small, .toc-stats small { display: block; }
.toc-main small, .toc-stats small { color: var(--muted); font-size: 12px; }
.toc-stats { text-align: right; }
.assigned-tag, .unassigned-tag { display: inline-block; margin-bottom: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.assigned-tag { background: #e2f5ea; color: #17603f; }
.unassigned-tag { background: #EEF0FA; color: var(--muted); }
.activity-students { margin-top: 14px; display: grid; gap: 10px; }

.review-dialog { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 24px); }
.review-body { padding: 20px 24px 24px; overflow-y: auto; }
.review-body .feedback-label, .review-body fieldset, .review-body textarea, .review-body .dialog-actions { margin-left: 0; margin-right: 0; }
.review-body textarea { width: 100%; resize: vertical; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-meta small { color: var(--muted); }
.review-section { margin: 22px 0 10px; font-size: 18px; }
.auto-result { display: inline-block; margin: 0 0 8px; padding: 6px 12px; border-radius: 999px; font-weight: 800; }
.r-first_try { background: #e2f5ea; color: #17603f; }
.r-few_tries { background: var(--primary-soft); color: var(--primary-dark); }
.r-needed_support { background: var(--accent-soft); color: var(--accent-dark); }
.mistake-list { margin: 4px 0 0; padding-left: 20px; color: var(--body); }
.reflection-answer { font-size: 20px; color: var(--ink); font-weight: 700; }
.picture-grid.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.picture-grid.mini figure { margin: 0; padding: 6px; border: 2px solid var(--line); border-radius: 12px; opacity: .55; }
.picture-grid.mini figure.chosen { border-color: var(--primary); opacity: 1; }
.picture-grid.mini img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.picture-grid.mini figcaption { font-size: 11px; font-weight: 700; color: var(--ink); }
.review-media { display: grid; gap: 12px; }
.earlier { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.earlier summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.earlier-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E6E8F7; }
.judgment-set { border: 0; padding: 0; margin: 0 0 14px; }
.judgment-set .judgment-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.judgment-choice { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.judgment-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.judgment-choice strong, .judgment-choice small { display: block; }
.judgment-choice small { color: var(--muted); font-size: 12px; }
.date-input { min-height: 46px; margin-bottom: 18px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; font: inherit; }
.assign-unit { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; }
.assign-unit legend { padding: 0 6px; font-weight: 800; color: var(--ink); }
.assign-unit legend label { display: flex; align-items: center; gap: 8px; }
.assign-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #E6E8F7; cursor: pointer; }
.assign-row:first-of-type { border-top: 0; }
.assign-row input, .assign-unit legend input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); }
.assign-row strong, .assign-row small { display: block; }
.assign-row small { color: var(--muted); font-size: 12px; }
.test-name-label { display: block; margin: 0 0 6px; color: var(--ink); font-size: 13px; font-weight: 800; }
.test-name { width: 100%; min-height: 44px; margin-bottom: 10px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: inherit; }

@media (max-width: 760px) {
  .alert-card { flex-direction: column; align-items: flex-start; }
  .picture-grid.four, .picture-grid.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .work-row .status-pill { grid-row: 2; grid-column: 2 / -1; justify-self: start; white-space: normal; }
  .toc-row { grid-template-columns: 1fr; gap: 4px; }
  .toc-stats { text-align: left; }
  .judgment-set .judgment-options { grid-template-columns: 1fr; }
  .review-body { padding: 16px; }
  .teacher-heading-actions { width: 100%; }
}

/* ------------------------------------------------------------------ Units 2-4 activity types */
.bin.renewable { --bin: #2E8B57; --bin-soft: #E6F4EC; }
.bin.nonrenewable { --bin: #7A5A3A; --bin-soft: #F3ECE4; }
.bins:has(.bin.renewable) { grid-template-columns: repeat(2, 1fr); }
.picture-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.picture-card.text-only { justify-content: center; min-height: 92px; }
.picture-card.text-only span { font-size: 16px; }
.other-mark { font-size: 28px; }
.picture-card.matched { border-color: #9ED9B8; background: #E9F8EF; position: relative; }
.picture-card.matched::after { content: attr(data-match); position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: #fff; font-size: 13px; font-weight: 800; }
.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.match-col { display: grid; gap: 12px; align-content: start; }
.match-head { margin: 0; color: var(--primary-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.order-steps { display: grid; gap: 6px; max-width: 360px; margin: 0 0 18px; padding: 0; list-style: none; }
.order-steps li { display: grid; justify-items: center; }
.order-steps li + li::before { content: "↓"; color: var(--primary); font-weight: 800; }
.order-step { width: 100%; min-height: 48px; display: grid; place-items: center; border-radius: 14px; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.order-step.fixed { border: 2px solid var(--line); background: #fff; color: var(--ink); }
.order-step.blank { border: 3px dashed var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.order-step.blank.filled { border-style: solid; border-color: #9ED9B8; background: #E9F8EF; color: #17603f; }
.order-step.shake { animation: sort-shake .45s ease; }
.order-chip { min-height: 44px; border: 2px solid var(--line); font-family: var(--font-display); cursor: pointer; }
.order-chip.selected { border-color: var(--primary); background: var(--primary-soft); }
.order-chip.found { opacity: .5; text-decoration: line-through; cursor: default; }
.form-part { margin-bottom: 18px; padding: 14px; border: 2px solid transparent; border-radius: 18px; transition: border-color .2s ease, background .2s ease; }
.form-part.missing { border-color: var(--primary); background: #F5F6FF; }
.form-part.wrong-part { border-color: var(--accent); background: var(--accent-soft); }
.form-part.part-note, .form-part.part-images { padding-top: 0; padding-bottom: 0; }
.form-note { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--primary-soft); color: var(--ink); font-weight: 700; }
.form-question { margin: 0 0 10px; color: var(--ink); font-size: 17px; font-weight: 800; }
.form-question small { color: var(--muted); font-weight: 700; }
.images-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.images-strip figure { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.images-strip img { width: 100%; max-height: 260px; object-fit: contain; }
.images-strip figcaption { margin-top: 6px; color: var(--body); font-size: 13px; font-weight: 700; }
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; }
.yesno-btn { min-height: 52px; border: 3px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.yesno-btn.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.textsort-row { margin-bottom: 10px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.textsort-row.wrong { border-color: var(--danger); }
.textsort-row p { margin: 0 0 8px; color: var(--ink); font-weight: 700; }
.textsort-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.textsort-buttons .yesno-btn { min-height: 44px; font-family: var(--font-body); font-size: 13px; }
.answer-list { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.answer-list div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 10px; background: #F5F6FF; }
.answer-list dt { color: var(--body); font-size: 13px; }
.answer-list dd { margin: 0; color: var(--ink); font-weight: 800; }
.order-answer { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
@media (max-width: 760px) {
  .picture-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .picture-grid.three .picture-card span { font-size: 12px; }
  .answer-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* Pictures inside draggable chips must not start the browser's own image drag. */
.sort-chip img, .picture-card img { pointer-events: none; -webkit-user-drag: none; user-select: none; }