:root {
  --night: #08060d;
  --night-2: #0e0b18;
  --panel: rgba(18, 14, 29, .88);
  --panel-2: rgba(25, 18, 39, .86);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --text: #f3f0fa;
  --body: #cfc8dd;
  --muted: #9189a5;
  --pink: #ff8cf0;
  --purple: #b43cff;
  --deep: #7c3cff;
  --cyan: #3cdcff;
  --green: #34d399;
  --amber: #ffb020;
  --danger: #fb7185;
  --gradient: linear-gradient(115deg,#ff8cf0,#b43cff 55%,#7c3cff);
  --shadow: 0 24px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--body); background: var(--night); font-family: "Instrument Sans", sans-serif; background-image: radial-gradient(circle at 12% 6%,rgba(255,140,240,.10),transparent 30%),radial-gradient(circle at 88% 18%,rgba(60,220,255,.09),transparent 31%),radial-gradient(circle at 50% 100%,rgba(124,60,255,.1),transparent 42%); background-attachment: fixed; }
button,input,textarea,select { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
h1,h2,h3,strong,.button { font-family: "Space Grotesk", sans-serif; }
h1,h2,h3,p { margin-top: 0; }
.hidden { display: none !important; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--pink); font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.05); text-decoration: none; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.button-primary { border: 0; background: var(--gradient); box-shadow: 0 12px 34px rgba(180,60,255,.25); }
.button-ghost { background: rgba(255,255,255,.04); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.auth-loading { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; }
.auth-loading p { color: var(--muted); }
.loading-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: var(--gradient); font: 700 1.7rem "Space Grotesk"; box-shadow: 0 18px 45px rgba(180,60,255,.35); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.94); opacity: .76; } }

/* Signed-out product landing */
.landing { min-height: 100vh; overflow: hidden; }
.landing-nav { width: min(1180px,calc(100% - 40px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); }
.landing-nav > div { display: flex; align-items: center; gap: 18px; }
.landing-nav > div > a:not(.button) { text-decoration: none; color: var(--muted); font-weight: 700; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand span { display: grid; line-height: 1; }
.brand strong { font-size: 1.08rem; letter-spacing: .02em; }
.brand small { margin-top: 4px; color: var(--pink); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.landing-hero { width: min(1180px,calc(100% - 40px)); min-height: 650px; margin: 0 auto; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(50px,8vw,110px); padding: 88px 0; }
.landing-hero h1 { max-width: 720px; margin-bottom: 24px; color: var(--text); font-size: clamp(2.8rem,5.6vw,5.2rem); line-height: .98; letter-spacing: -.065em; }
.landing-hero h1::first-line { color: #fff; }
.landing-hero > div:first-child > p { max-width: 680px; margin-bottom: 28px; color: #bcb4cc; font-size: 1.15rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust-line { display: block; margin-top: 18px; color: var(--muted); }
.product-preview { position: relative; padding: 24px; border: 1px solid var(--border-strong); border-radius: 30px; background: linear-gradient(145deg,rgba(29,21,45,.96),rgba(12,9,19,.96)); box-shadow: var(--shadow); transform: rotate(1.3deg); }
.product-preview::before { content:""; position:absolute; inset:-35px; z-index:-1; background: radial-gradient(circle,rgba(180,60,255,.26),transparent 68%); filter:blur(12px); }
.preview-top { display:flex; align-items:center; gap:7px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.preview-top span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.preview-top b { margin-left:auto; color:var(--muted); font-size:.78rem; }
.wave { margin: 34px 0 28px; color: var(--cyan); font-size: clamp(1.5rem,3vw,2.2rem); letter-spacing:.1em; text-align:center; text-shadow:0 0 22px rgba(60,220,255,.38); }
.preview-passage { padding: 26px; border-radius: 20px; background:rgba(255,255,255,.045); color:var(--text); font:600 1.08rem/2.05 "Space Grotesk"; }
.preview-passage span { padding: 3px 2px; border-radius: 4px; }
.word-error { background:rgba(251,113,133,.22); color:#fecdd3; text-decoration:underline wavy var(--danger); }
.preview-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }
.preview-metrics span { padding:14px 9px; border:1px solid var(--border); border-radius:14px; color:var(--muted); text-align:center; font-size:.72rem; }
.preview-metrics b { display:block; margin-bottom:4px; color:var(--text); font-size:1.15rem; }
.landing-steps { width:min(1180px,calc(100% - 40px)); margin:30px auto 50px; padding:50px; border:1px solid var(--border); border-radius:30px; background:rgba(255,255,255,.025); }
.landing-steps header { text-align:center; }
.landing-steps h2 { color:var(--text); font-size:clamp(1.8rem,4vw,3rem); }
.landing-steps > div { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px; }
.landing-steps article { padding:24px; border-radius:20px; background:var(--panel); border:1px solid var(--border); }
.landing-steps article > b { width:34px; height:34px; display:grid; place-items:center; margin-bottom:28px; border-radius:10px; color:#fff; background:var(--gradient); }
.landing-steps h3 { margin-bottom:8px; color:var(--text); }
.landing-steps p { margin:0; color:var(--muted); line-height:1.55; }
.pilot-disclaimer { max-width:760px; margin:0 auto; padding:20px 30px 70px; color:var(--muted); text-align:center; line-height:1.6; }

/* Educator app */
.app-shell { min-height:100vh; display:grid; grid-template-columns:260px minmax(0,1fr); }
.app-sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:24px 18px; border-right:1px solid var(--border); background:rgba(10,7,16,.91); backdrop-filter:blur(18px); z-index:20; }
.app-brand { padding:0 10px 25px; }
.app-sidebar nav { display:grid; gap:7px; }
.side-link { width:100%; min-height:46px; display:flex; align-items:center; gap:12px; padding:0 13px; border:0; border-radius:13px; color:var(--body); background:transparent; text-align:left; font-weight:600; }
.side-link > span { width:22px; color:var(--muted); font-size:1.18rem; text-align:center; }
.side-link:hover { color:var(--text); background:rgba(255,255,255,.05); }
.side-link.active { color:var(--pink); background:rgba(255,140,240,.12); }
.side-link.active > span { color:var(--pink); }
.nav-badge { min-width:22px; height:22px; display:grid; place-items:center; margin-left:auto; border-radius:999px; color:#170b1d; background:var(--pink); font:700 .72rem "Space Grotesk"; }
.pilot-card { margin-top:auto; padding:17px; border:1px solid rgba(180,60,255,.28); border-radius:16px; background:linear-gradient(145deg,rgba(180,60,255,.13),rgba(60,220,255,.04)); }
.pilot-card span { color:var(--pink); font-size:.66rem; font-weight:800; letter-spacing:.12em; }
.pilot-card strong,.pilot-card small { display:block; }
.pilot-card strong { margin:9px 0 5px; color:var(--text); font-size:.9rem; }
.pilot-card small { color:var(--muted); line-height:1.4; }
.back-link { margin:16px 10px 0; color:var(--muted); text-decoration:none; font-weight:600; font-size:.82rem; }
.back-link:hover { color:var(--pink); }
.app-main { min-width:0; }
.app-topbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(24px,4vw,52px); border-bottom:1px solid var(--border); background:rgba(8,6,13,.65); backdrop-filter:blur(18px); }
.app-topbar > div:first-of-type { display:grid; }
.app-topbar .eyebrow { margin:0 0 2px; font-size:.62rem; }
.app-topbar > div > strong { color:var(--text); }
.teacher-identity { display:flex; align-items:center; gap:10px; }
.teacher-identity > span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--gradient); font:700 .9rem "Space Grotesk"; }
.teacher-identity div { display:grid; }
.teacher-identity small { color:var(--muted); font-size:.72rem; }
.mobile-menu-button { display:none; border:0; color:var(--text); background:transparent; font-size:1.35rem; }
.workspace-view { padding:clamp(30px,5vw,58px); }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; }
.page-heading h1 { margin-bottom:10px; color:var(--text); font-size:clamp(2rem,4vw,3.35rem); line-height:1.03; letter-spacing:-.055em; }
.page-heading p { max-width:680px; margin:0; color:var(--muted); font-size:1rem; line-height:1.55; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.metric-grid article { position:relative; min-height:170px; padding:21px; border:1px solid var(--border); border-radius:20px; background:var(--panel); box-shadow:0 16px 42px rgba(0,0,0,.12); }
.metric-grid small { display:block; margin:12px 0 2px; color:var(--muted); }
.metric-grid strong { display:block; color:var(--text); font-size:2.35rem; }
.metric-grid p { margin:2px 0 0; color:var(--muted); font-size:.78rem; }
.metric-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; font-weight:800; }
.metric-icon.pink { color:var(--pink); background:rgba(255,140,240,.12); }.metric-icon.cyan { color:var(--cyan); background:rgba(60,220,255,.12); }.metric-icon.purple { color:#c692ff; background:rgba(180,60,255,.13); }.metric-icon.green { color:var(--green); background:rgba(52,211,153,.12); }
.overview-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr); gap:18px; }
.panel { border:1px solid var(--border); border-radius:22px; background:var(--panel); box-shadow:0 16px 42px rgba(0,0,0,.12); }
.overview-grid > .panel { padding:25px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.panel-heading h2 { margin:0; color:var(--text); font-size:1.3rem; }
.text-action { border:0; color:var(--pink); background:transparent; font-weight:700; }
.submission-list { display:grid; gap:9px; }
.submission-row { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:13px; border:1px solid transparent; border-radius:15px; color:var(--body); background:rgba(255,255,255,.035); text-align:left; }
.submission-row:hover { border-color:rgba(255,140,240,.25); background:rgba(255,140,240,.06); }
.student-dot { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,var(--purple),var(--cyan)); font:700 .78rem "Space Grotesk"; }
.submission-row span:nth-child(2) { min-width:0; }
.submission-row strong,.submission-row small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.submission-row strong { color:var(--text); }
.submission-row small { margin-top:4px; color:var(--muted); }
.submission-row > b { color:var(--pink); font-size:.78rem; }
.empty-inline { padding:30px 12px; color:var(--muted); text-align:center; }
.next-panel { background:linear-gradient(145deg,rgba(34,20,48,.94),rgba(14,11,24,.94)); }
.next-panel h2 { color:var(--text); }
.loop-list { display:grid; gap:6px; }
.loop-list p { display:flex; gap:12px; margin:0; padding:10px; border-radius:12px; }
.loop-list p:hover { background:rgba(255,255,255,.035); }
.loop-list p > b { width:27px; height:27px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; color:var(--pink); background:rgba(255,140,240,.12); }
.loop-list span,.loop-list strong,.loop-list small { display:block; }
.loop-list small { margin-top:3px; color:var(--muted); line-height:1.4; }

/* Library */
.library-total { min-width:110px; padding:15px 20px; border:1px solid var(--border); border-radius:16px; text-align:center; background:rgba(255,255,255,.03); }
.library-total strong,.library-total small { display:block; }.library-total strong { color:var(--text); font-size:1.6rem; }.library-total small { color:var(--muted); }
.filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.filter-row > span { margin-left:auto; color:var(--muted); font-size:.78rem; }
.filter-pill { min-height:38px; padding:0 15px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.03); font-weight:700; }
.filter-pill:hover,.filter-pill.active { color:var(--text); border-color:rgba(255,140,240,.34); background:rgba(255,140,240,.11); }
.passage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.passage-card { display:flex; flex-direction:column; padding:18px; border:1px solid var(--border); border-radius:22px; background:var(--panel); transition:.22s ease; }
.passage-card:hover { transform:translateY(-4px); border-color:rgba(255,140,240,.28); box-shadow:0 22px 55px rgba(0,0,0,.26); }
.passage-card-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:14px; }
.grade-chip,.genre-chip { padding:6px 9px; border-radius:999px; font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.grade-chip { color:var(--pink); background:rgba(255,140,240,.11); }.genre-chip { color:var(--cyan); background:rgba(60,220,255,.1); }
.passage-art { min-height:116px; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; margin-bottom:18px; border-radius:17px; color:#fff; background:radial-gradient(circle at 78% 20%,rgba(60,220,255,.25),transparent 34%),linear-gradient(135deg,#1e1233,#351652 55%,#102d3c); overflow:hidden; }
.passage-art span { color:rgba(255,255,255,.65); font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; }.passage-art strong { max-width:200px; margin-top:5px; font-size:1.25rem; }
.passage-card h2 { margin-bottom:9px; color:var(--text); font-size:1.2rem; }
.passage-card > p { flex:1; color:var(--muted); line-height:1.55; }
.passage-meta { display:flex; flex-wrap:wrap; gap:7px; margin:3px 0 18px; }
.passage-meta span { padding:5px 8px; border-radius:8px; color:#aaa1bd; background:rgba(255,255,255,.045); font-size:.7rem; }
.passage-card .button { width:100%; }

/* Review */
.review-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; align-items:start; }
.review-queue { display:grid; gap:8px; }
.queue-button { width:100%; display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--border); border-radius:15px; color:var(--body); background:var(--panel); text-align:left; }
.queue-button.active,.queue-button:hover { border-color:rgba(255,140,240,.34); background:rgba(255,140,240,.08); }
.queue-button span:last-child { min-width:0; }.queue-button strong,.queue-button small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.queue-button strong{color:var(--text)}.queue-button small{margin-top:3px;color:var(--muted);font-size:.72rem}
.review-workspace { min-height:560px; padding:27px; }
.empty-state { min-height:490px; display:grid; place-content:center; justify-items:center; color:var(--muted); text-align:center; }.empty-state > span{font-size:2.2rem}.empty-state h2{margin:14px 0 6px;color:var(--text)}
.review-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }.review-heading h2{margin-bottom:5px;color:var(--text);font-size:1.7rem}.review-heading p{color:var(--muted)}
.status-pill { padding:7px 11px; border-radius:999px; color:var(--amber); background:rgba(255,176,32,.11); font-size:.7rem; font-weight:800; text-transform:uppercase; }
.audio-box { padding:14px; margin-bottom:18px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.035); }.audio-box audio{width:100%;height:42px}.audio-box p{margin:8px 0 0;color:var(--muted);font-size:.75rem}
.word-instructions { color:var(--muted); font-size:.8rem; }
.clickable-passage { padding:22px; border:1px solid var(--border); border-radius:17px; background:rgba(255,255,255,.035); font:500 1.06rem/2.15 "Space Grotesk"; }
.word-button { display:inline; padding:3px 2px; border:0; border-radius:5px; color:var(--text); background:transparent; }.word-button:hover,.word-button.selected{outline:1px solid rgba(60,220,255,.5);background:rgba(60,220,255,.11)}.word-button.omission{color:#fecdd3;background:rgba(251,113,133,.18);text-decoration:line-through}.word-button.mispronunciation{color:#fef3c7;background:rgba(255,176,32,.17);text-decoration:underline wavy var(--amber)}.word-button.self-correction{color:#a7f3d0;background:rgba(52,211,153,.14);text-decoration:underline}.word-button.repetition,.word-button.insertion{color:#bfdbfe;background:rgba(60,220,255,.13);border-bottom:2px dotted var(--cyan)}
.miscue-menu { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:11px; margin:10px 0; border-radius:13px; background:#1d142a; border:1px solid rgba(255,140,240,.22); }.miscue-menu strong{margin-right:5px;color:var(--text)}.miscue-menu button{padding:7px 10px;border:1px solid var(--border);border-radius:9px;color:var(--body);background:rgba(255,255,255,.05)}.miscue-menu button:hover{color:var(--text);border-color:var(--pink)}
.response-box { margin-top:18px; padding:18px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.025); }.response-box h3{margin-bottom:8px;color:var(--text)}.response-box p{margin:7px 0;color:var(--body);line-height:1.5}.answer-correct{color:var(--green);font-weight:700}.answer-incorrect{color:var(--danger);font-weight:700}
.response-box .retell-audio-box{margin:16px 0 0;background:rgba(60,220,255,.035)}
.review-bottom { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:16px; margin-top:18px; }.notes-field{width:100%;min-height:130px;padding:13px;border:1px solid var(--border);border-radius:14px;color:var(--text);background:rgba(255,255,255,.035);resize:vertical}.notes-field:focus,.field:focus{outline:2px solid rgba(60,220,255,.35);border-color:var(--cyan)}
.metric-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:15px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.03); }.metric-panel div{padding:10px;border-radius:10px;background:rgba(255,255,255,.035)}.metric-panel small,.metric-panel strong{display:block}.metric-panel small{color:var(--muted)}.metric-panel strong{margin-top:3px;color:var(--text);font-size:1.35rem}.metric-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:5px}.metric-actions .button{flex:1;min-height:40px;padding:0 12px;font-size:.76rem}

/* Progress/settings */
.progress-content { padding:0; overflow:hidden; }
.progress-row { display:grid; grid-template-columns:minmax(180px,1.3fr) repeat(4,minmax(90px,.7fr)); align-items:center; gap:12px; padding:16px 21px; border-bottom:1px solid var(--border); }.progress-row:last-child{border:0}.progress-row.header{color:var(--muted);background:rgba(255,255,255,.025);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.progress-student{display:flex;align-items:center;gap:11px}.progress-student span:last-child strong,.progress-student span:last-child small{display:block}.progress-student span:last-child small{color:var(--muted)}.progress-row > strong{color:var(--text)}.growth-positive{color:var(--green)!important}.progress-note{padding:18px 21px;color:var(--muted);font-size:.8rem;background:rgba(60,220,255,.035)}
.settings-list { display:grid; gap:12px; }.settings-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--panel)}.settings-list article>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:var(--pink);background:rgba(255,140,240,.11);font-size:1.2rem}.settings-list h2{margin-bottom:5px;color:var(--text);font-size:1rem}.settings-list p{margin:0;color:var(--muted);line-height:1.45}.settings-list article>b{padding:6px 10px;border-radius:999px;color:var(--amber);background:rgba(255,176,32,.1);font-size:.7rem}.settings-list article>b.ready{color:var(--green);background:rgba(52,211,153,.1)}.privacy-callout{margin-top:18px;padding:20px;border:1px solid rgba(255,176,32,.22);border-radius:18px;background:rgba(255,176,32,.055)}.privacy-callout strong{color:#fcd34d}.privacy-callout p{margin:6px 0 0;color:#c5bda5;line-height:1.55}

/* Modal */
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(4,3,8,.76); backdrop-filter:blur(10px); }
.modal-card { position:relative; width:min(600px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:29px; border:1px solid var(--border-strong); border-radius:24px; background:#100c1a; box-shadow:var(--shadow); }
.modal-card h2 { margin-bottom:6px; color:var(--text); font-size:1.55rem; }.modal-card>p{color:var(--muted)}
.modal-close { position:absolute; top:17px; right:17px; width:34px; height:34px; border:1px solid var(--border); border-radius:10px; color:var(--muted); background:rgba(255,255,255,.04); font-size:1.2rem; }
fieldset { margin:18px 0; padding:0; border:0; } legend,.field-label { display:block; margin-bottom:9px; color:var(--text); font-weight:700; }
.student-check-list { max-height:170px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; overflow:auto; }.student-check{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03)}.student-check input{accent-color:var(--purple)}
.toggle-row { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--border)}.toggle-row span,.toggle-row strong,.toggle-row small{display:block}.toggle-row small{margin-top:3px;color:var(--muted)}.toggle-row input{width:20px;height:20px;accent-color:var(--purple)}
.field { width:100%; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:11px; color:var(--text); background:rgba(255,255,255,.04); color-scheme:dark; }
.form-message { min-height:20px; margin:14px 0 0; color:var(--danger); }.form-message.success{color:var(--green)}
.modal-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:16px; }.toast{position:fixed;right:22px;bottom:22px;z-index:120;max-width:390px;padding:14px 18px;border:1px solid rgba(52,211,153,.3);border-radius:13px;color:#d1fae5;background:#11261f;box-shadow:var(--shadow);font-weight:700}

@media (max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.passage-grid{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.review-bottom{grid-template-columns:1fr}.review-layout{grid-template-columns:230px minmax(0,1fr)}}
@media (max-width:800px){.landing-hero{grid-template-columns:minmax(0,1fr);padding-top:60px}.landing-hero>div{min-width:0}.product-preview{width:100%;max-width:600px;min-width:0}.wave{overflow:hidden;white-space:nowrap}.landing-steps>div{grid-template-columns:repeat(2,1fr)}.app-shell{grid-template-columns:1fr}.app-sidebar{position:fixed;left:0;transform:translateX(-105%);width:270px;transition:.2s ease}.app-shell.menu-open .app-sidebar{transform:translateX(0)}.mobile-menu-button{display:block}.app-topbar{justify-content:flex-start}.app-topbar .teacher-identity{margin-left:auto}.review-layout{grid-template-columns:1fr}.review-queue{grid-template-columns:repeat(2,1fr)}.progress-row{grid-template-columns:minmax(150px,1.3fr) repeat(2,minmax(80px,.7fr))}.progress-row>*:nth-child(4),.progress-row>*:nth-child(5){display:none}}
@media (max-width:600px){.landing-nav{width:calc(100% - 28px)}.landing-nav>div>a:not(.button){display:none}.landing-nav .button{min-height:38px;padding:0 14px;font-size:.78rem}.landing-hero,.landing-steps{width:calc(100% - 28px)}.landing-hero{padding:55px 0}.landing-hero h1{font-size:2.75rem;overflow-wrap:anywhere}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .button{width:100%}.landing-steps{padding:28px 18px}.landing-steps>div{grid-template-columns:1fr}.preview-metrics{grid-template-columns:1fr}.preview-passage{overflow-wrap:anywhere}.workspace-view{padding:28px 16px}.app-topbar{padding:0 16px}.teacher-identity div{display:none}.page-heading{align-items:flex-start;flex-direction:column}.metric-grid,.passage-grid{grid-template-columns:1fr}.metric-grid article{min-height:145px}.filter-row>span{width:100%;margin:5px 0 0}.review-queue{grid-template-columns:1fr}.review-workspace{padding:18px}.clickable-passage{padding:16px}.review-bottom{display:block}.metric-panel{margin-top:14px}.student-check-list{grid-template-columns:1fr}.modal-card{padding:24px 18px}.settings-list article{grid-template-columns:auto 1fr}.settings-list article>b{grid-column:2}.progress-row{grid-template-columns:1fr 80px}.progress-row>*:nth-child(3){display:none}}