/* Student-only foundation. Teacher workspace retains its existing visual system. */
body.student-ui {
  color-scheme: light;
  --brand-primary: #012f5a;
  --brand-primary-strong: #03122a;
  --brand-primary-soft: #eaf0f5;
  --brand-accent: #cea75c;
  --brand-accent-soft: #f7f0e3;
  --page-bg: #f7f8fa;
  --surface: #fff;
  --surface-soft: #f3f5f7;
  --text: #172433;
  --text-muted: #66717d;
  --border: #d7dee5;
  --success: #18875a;
  --error: #c53b3b;
  --warning: #9b5b12;
  --focus: #2f6edb;
  --radius-control: 3px;
  --radius-panel: 4px;
  --bg: var(--page-bg);
  --muted: var(--text-muted);
  --line: var(--border);
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-strong);
  --primary-soft: var(--brand-primary-soft);
  --accent: var(--brand-accent);
  --danger: var(--error);
  --surface-muted: var(--surface-soft);
  --shadow: none;
  background: var(--page-bg);
}
.student-ui :is(button,input,select,textarea) { border-radius: var(--radius-control); }
.student-ui :is(button,.secondary-button,.primary-button,input,select) { min-height: 44px; }
.student-ui :is(input,select,textarea) { font-size: 16px; max-width: 100%; min-width: 0; }
.student-ui :is(button,a,input,select,textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.student-ui :is(.panel,.card,.test-hero,.test-panel,.daily-summary,.access-card) { border-radius: var(--radius-panel); box-shadow: none; }
.student-ui .panel { background: var(--surface); }
.student-ui .topbar { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: none; }
.student-ui .topbar-inner { min-height: 72px; max-width: 1080px; padding: 8px 24px; display: flex; justify-content: space-between; }
.student-ui #page-title { font-size: 16px; color: var(--text-muted); }
.student-brand { display: flex; align-items: center; gap: 8px; color: var(--brand-primary); text-decoration: none; font-weight: 750; font-size: 20px; }
.student-brand img { object-fit: contain; flex: 0 0 auto; }
.student-ui .main-content { max-width: 1080px; padding: 24px 24px calc(100px + env(safe-area-inset-bottom)); min-width: 0; }
.student-ui .bottom-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-flow: row; gap: 0; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 0 0 env(safe-area-inset-bottom); z-index: 120; }
.student-ui .nav-button { min-width: 0; min-height: 60px; border: 0; border-top: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text-muted); font-size: 16px; }
.student-ui .nav-button.active { color: var(--brand-primary); background: transparent; border-top-color: var(--brand-primary); font-weight: 750; }
.student-ui.access-locked .access-overlay { align-content: start; place-items: start center; padding: clamp(24px,8vh,72px) 24px 32px; background: var(--surface); }
.student-ui .auth-card { width: min(100%,360px); padding: 0; margin: 0; background: transparent; border: 0; box-shadow: none; gap: 16px; }
.student-ui .login-brand { margin-bottom: 12px; font-size: 24px; }
.student-ui .auth-card h2 { font-size: 26px; }
.password-control { display: flex; align-items: stretch; min-width: 0; position: relative; }
.password-control input { width: 100%; padding-right: 64px; }
.password-toggle { position: absolute; inset: 1px 1px 1px auto; width: 60px; padding: 0 8px; background: transparent; border: 0; color: var(--brand-primary); font-size: 14px; }
.student-ui.student-layer-open .app-shell { display: block; }
.student-ui.student-layer-open #app { visibility: hidden; }
.student-ui.student-layer-open .access-overlay { top: 73px; bottom: 64px; z-index: 100; background: var(--page-bg); padding: 24px 24px 48px; overflow-y: auto; }
.student-ui .account-card { width: min(100%,640px); padding: 0; margin: 0; border: 0; background: transparent; }
.account-menu { display: grid; }
.account-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; }
.student-ui .account-card form { display: grid; gap: 16px; }
.student-ui .account-card form label { display: grid; gap: 8px; }
.text-button { display: inline-flex; align-items: center; width: fit-content; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--brand-primary); text-decoration: none; }
.practice-greeting { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding: 0 0 20px; }
.practice-greeting h2 { font-size: 26px; margin: 0 0 8px; }
.practice-greeting p { margin: 0; color: var(--text-muted); }
.student-library-words { display: flex; width: fit-content; margin-bottom: 16px; gap: 24px; text-decoration: none; }
.student-ui .progress-library-button { display: grid; grid-template-columns: minmax(0,1fr) auto 16px; align-items: center; gap: 12px; padding: 20px 0; width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.student-ui .progress-scope-list { display: block; }
.mastery-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 8px 0 24px; }
.mastery-summary strong { font-size: 28px; color: var(--brand-primary); }
.mastery-summary progress { width: 100%; height: 8px; accent-color: var(--brand-primary); }
.progress-entry { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.student-ui :is(.test-source-card,.test-hero,.daily-assignment-panel) { border-radius: var(--radius-panel); box-shadow: none; }
@media(max-width:600px) {
  .student-ui .main-content { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  .student-ui .topbar-inner { padding: 8px 16px; }
  .student-ui.student-layer-open .access-overlay { padding: 20px 16px 48px; }
  .student-ui .teacher-header { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) { .student-ui *, .student-ui *::before, .student-ui *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* The supplied SVG includes square whitespace around its horizontal wordmark. */
.student-ui .brand-logo { display: flex; align-items: center; justify-content: center; width: 160px; height: 56px; overflow: hidden; }
.student-ui .brand-logo img { width: 160px; height: 160px; max-width: none; }
.student-ui .login-brand .brand-logo { width: 260px; height: 88px; }
.student-ui .login-brand .brand-logo img { width: 260px; height: 260px; }
.student-ui .test-home > .panel { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 0 24px; background: transparent; }
.student-ui .free-practice-entry { border-radius: var(--radius-control); color: var(--brand-primary); background: var(--surface); box-shadow: none; }
.student-ui #page-title { display: none; }
.student-ui .nav-button { transition: none; }
.student-ui .progress-view > :is(h2,p) { margin: 0; }
.student-ui .submission-drop-zone { border-color: var(--border); border-radius: var(--radius-panel); background: var(--surface-soft); }
.student-ui .submission-success { color: var(--success); border-color: var(--success); background: #eaf6ef; }

/* Login: compact brand and form rhythm, without changing account forms. */
.student-ui.access-locked .access-overlay:has([data-auth-form="login"]) {
  padding: clamp(32px, 6vh, 56px) 24px 32px;
}
.student-ui [data-auth-form="login"] { width: min(100%, 336px); gap: 16px; }
.student-ui [data-auth-form="login"] .login-brand { justify-content: center; margin: 0 0 8px; }
.student-ui [data-auth-form="login"] .brand-logo { width: 216px; height: 72px; }
.student-ui [data-auth-form="login"] .brand-logo img { width: 216px; height: 216px; }
.student-ui [data-auth-form="login"] h2 { margin: 0 0 2px; font-size: 22px; line-height: 1.3; }
.student-ui [data-auth-form="login"] label { gap: 6px; font-size: 14px; font-weight: 600; }
.student-ui [data-auth-form="login"] .access-input {
  height: 44px; min-height: 44px; padding: 10px 12px; border-width: 1px; line-height: 22px;
}
.student-ui [data-auth-form="login"] .password-control input { padding-right: 60px; }
.student-ui [data-auth-form="login"] .password-toggle { inset-block: 0; width: 56px; font-weight: 500; }
.student-ui [data-auth-form="login"] .access-error:empty { display: none; }
.student-ui [data-auth-form="login"] > .primary-button {
  min-height: 44px; padding: 10px 16px; margin-top: 4px; font-size: 16px; line-height: 24px;
}

/* Stage 2 frozen practice surfaces; existing Student Shell and tokens remain authoritative. */
.student-ui .today-heading { display:flex;align-items:center;gap:12px; }
.student-ui .today-heading h2 { margin:0;flex:1;font-size:20px; }
.student-ui .today-heading > img { width:52px;height:52px; }
.student-ui .today-heading > span { font-size:13px;white-space:nowrap; }
.student-ui .task-refresh { padding:8px;background:transparent;border:0;min-width:44px;min-height:44px;flex-shrink:0;display:grid;place-items:center; }
.student-ui .task-refresh img { width:18px;height:18px; }
.student-ui .task-progress { width:100%;height:6px;accent-color:var(--brand-primary);border:0; }
.student-ui .task-row { display:grid;grid-template-columns:52px minmax(0,1fr) auto 12px;gap:12px;align-items:center;text-align:left;width:100%;padding:12px;background:var(--surface-soft);border:0;color:var(--text); }
.student-ui .task-row > img { width:52px;height:52px;grid-row:1 / 3; }
.student-ui .task-label { font-weight:600;overflow-wrap:anywhere; }
.student-ui .task-state { border-radius:16px;background:var(--surface-soft);color:var(--text-muted);padding:4px 12px;font-size:12px;white-space:nowrap; }
.student-ui .task-state.in-progress { background:#e8f3ff;color:#006acb; }
.student-ui .task-state.complete { background:#eaf8f1;color:var(--success); }
.student-ui .special-test { max-width:860px;margin:auto;background:transparent;border:0;padding:0;gap:20px; }
.student-ui .special-type-badge { display:flex;align-items:center;gap:12px;background:var(--brand-primary-soft);border:1px solid var(--border);border-radius:10px;padding:10px 14px;width:fit-content; }
.student-ui .special-type-badge img { width:52px;height:52px; }
.student-ui .special-type-badge h2 { font-size:16px;margin:0; }
.student-ui .special-test h3 { font-size:22px;color:var(--brand-primary); }
.student-ui .assigned-preview .panel { padding:14px 18px;border:1px solid var(--border);line-height:1.6; }
.student-ui .assigned-preview strong { font-size:18px;color:var(--brand-primary); }
.student-ui .special-test .answer-input { height:54px;width:100%;border:1px solid #a4bed2;border-radius:8px; }
.student-ui .special-test .primary-button { width:100%;min-height:50px; }
.student-ui .correction-answer,.student-ui .correction-hidden { padding:18px 14px;border-radius:8px;line-height:1.6; }
.student-ui .correction-answer { background:#edf9f4;border:1px solid #b2e7d1;color:var(--success); }
.student-ui .correction-answer strong { display:block;font-size:24px; }
.student-ui .correction-hidden { background:var(--surface-soft);border:1px solid var(--border);color:var(--text-muted);text-align:center; }
.student-ui .correction-rollback { display:grid;gap:18px; }
.student-ui [data-special-timer],.student-ui .timer { border-radius:18px;padding:8px 14px;background:var(--brand-primary-soft);color:var(--brand-primary);font-size:14px; }
.student-ui [data-special-timer].critical { background:#fff1f0;color:var(--error); }
.student-ui .practice-note { text-align:center;color:var(--text-muted);font-size:12px; }
.student-ui .active-test-panel,.student-ui .test-result-panel { max-width:860px;margin:auto;background:transparent;border:0;padding:0;box-shadow:none; }
.student-ui .ordinary-question-card { margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px 20px; }
.student-ui .ordinary-question-card .answer-input { height:54px; }
.student-ui .ordinary-question-card .prompt-sub { font-size:24px;color:var(--brand-primary);padding:18px 0;border-bottom:1px solid var(--border); }
.student-ui .ordinary-question-card .test-actions { margin-top:20px; }
.student-ui .test-result-panel .wrong-list { border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:16px; }
.student-ui .test-result-panel .wrong-item { border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--surface); }
@media(max-width:600px) {
 .student-ui .task-row { grid-template-columns:52px minmax(0,1fr) auto 10px;gap:6px 10px; }
 .student-ui .task-label { grid-column:2 / 5; }
 .student-ui .task-state { grid-column:3; }
 .student-ui .today-heading { gap:6px; }
 .student-ui .today-heading > img { width:46px;height:46px; }
 .student-ui .ordinary-question-card { padding:20px 18px; }
}

.student-ui .practice-greeting { border:0;background:url('stage2/imgDecorationOpenBook.png') right center / auto 118px no-repeat;min-height:96px;margin-bottom:0; }
.student-ui .test-home { position:relative;padding-bottom:90px; }
.student-ui .test-home::after { content:"";position:absolute;bottom:0;right:0;width:240px;height:80px;background:url('stage2/imgDecorationGrowthPeople.png') right bottom / contain no-repeat;pointer-events:none; }
.student-ui .practice-disclosure { background:var(--brand-primary-soft);border:1px solid var(--border);padding:12px 16px; }
.student-ui .practice-disclosure.frequent-errors { background:#fcf1f0;border-color:#ffd7d1; }
.student-ui .practice-disclosure summary { display:flex;align-items:center;gap:16px;color:var(--brand-primary);font-size:17px;font-weight:600;cursor:pointer;min-height:52px;list-style:none; }
.student-ui .practice-disclosure summary::-webkit-details-marker { display:none; }
.student-ui .practice-disclosure summary img { width:52px;height:52px; }
.student-ui .practice-disclosure summary span { margin-left:auto; }
.student-ui .practice-disclosure[open] summary { margin-bottom:16px; }
.student-ui .special-stage-content { display:grid;gap:18px; }
.student-ui .special-question-card { background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:24px 20px; }
.student-ui .special-question-card p { margin:0; }
.student-ui .special-question-card .irregular-question-fields { display:grid;gap:16px; }
.student-ui .special-question-card label { display:grid;gap:8px;color:var(--text-muted); }
.student-ui .special-question-card .answer-input:disabled { background:var(--surface-soft);color:var(--text-muted); }

.student-ui .test-home > .daily-assignment-panel { background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;gap:8px; }
.student-ui .task-row { min-height:72px;padding:8px;border-radius:8px; }
.student-ui .task-progress { appearance:none;overflow:hidden;border-radius:4px;background:var(--surface-soft); }
.student-ui .task-progress::-webkit-progress-bar { background:var(--surface-soft); }
.student-ui .task-progress::-webkit-progress-value { background:var(--brand-primary); }
.student-ui .test-home > .practice-disclosure { padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--brand-primary-soft); }
.student-ui .test-home > .practice-disclosure.frequent-errors { background:#fcf1f0;border-color:#ffd7d1; }

@media(min-width:800px) {
 .student-ui .test-home { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 30px; }
 .student-ui .test-home > * { grid-column:1 / -1; }
 .student-ui .test-home > .practice-disclosure { grid-column:auto;align-self:start;margin:0; }
 .student-ui .test-home > .daily-assignment-panel { position:relative;gap:5px;padding:12px; }
 .student-ui .today-heading { min-height:40px; }
 .student-ui .today-heading h2 { flex:none; }
 .student-ui .today-heading > img { width:40px;height:40px; }
 .student-ui .task-refresh { margin-left:auto; }
 .student-ui .daily-assignment-panel > .task-progress { position:absolute;width:30%;right:58px;top:30px; }
 .student-ui .task-row { min-height:54px;grid-template-columns:42px minmax(0,1fr) auto 12px; }
 .student-ui .task-row > img { width:42px;height:42px;grid-row:auto; }
}

.student-ui .ordinary-result { display:grid;gap:16px; }
.student-ui .ordinary-result h2,.student-ui .ordinary-result h3,.student-ui .ordinary-result p { margin:0; }
.student-ui .result-counts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:10px; }
.student-ui .result-counts div { display:grid;gap:10px; }
.student-ui .result-counts span { font-size:13px;color:var(--text-muted); }
.student-ui .result-counts strong { font-size:28px;color:var(--success); }
.student-ui .result-counts div:nth-child(2) strong { color:var(--error); }
.student-ui .result-counts div:nth-child(3) strong { color:var(--warning); }
.student-ui .ordinary-result .wrong-item { padding:14px 0;display:grid;gap:8px; }
.student-ui .ordinary-result .wrong-item:last-child { border-bottom:0; }
.student-ui .ordinary-result .wrong-prompt { font-weight:600; }
.student-ui .ordinary-result .wrong-student-answer { color:var(--error);font-size:14px; }
.student-ui .ordinary-result .wrong-correct-answer { font-size:14px; }
.student-ui .ordinary-result .primary-button { width:100%;min-height:50px;border-radius:8px; }
.student-ui .ordinary-result .result-return { justify-self:center;font-size:14px;color:var(--text-muted); }

.student-ui #app { scroll-margin-top:88px; }

/* Stage 3 Library: existing category and permission read model, compact browsing. */
.student-ui .formal-library { --library-navy:#073a6b; --library-border:#dee6ef; color:#13253a; }
.student-ui .library-header { display:flex; align-items:center; gap:16px; }
.student-ui .library-header h2 { margin:0; font-size:28px; line-height:1.4; color:var(--library-navy); overflow-wrap:anywhere; }
.student-ui .library-description { margin:3px 0 16px; color:#718096; font-size:13px; }
.student-ui .library-switch { display:flex; width:260px; height:40px; padding:2px; border:1px solid var(--library-border); border-radius:20px; background:#fff; }
.student-ui .library-switch button { flex:1; min-height:34px; padding:0; border:0; border-radius:18px; background:transparent; color:#718096; font-size:14px; }
.student-ui .library-switch button[aria-pressed="true"] { background:var(--library-navy); color:#fff; font-weight:700; }
.student-ui .library-lane { margin-top:32px; }
.student-ui .library-lane-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.student-ui .library-lane-heading h3 { margin:0; font-size:20px; color:var(--library-navy); }
.student-ui .library-lane-heading button { padding:0 4px; background:none; border:0; color:#718096; font-size:12px; }
.student-ui .library-folder-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 30px; }
.student-ui .library-folder-grid:empty,.student-ui .library-resource-rows:empty { display:none; }
.student-ui .library-folder { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; min-width:0; min-height:116px; gap:8px; padding:16px; border:1px solid var(--library-border); border-radius:14px; background:white; text-align:left; color:inherit; font-size:15px; }
.student-ui .library-folder img { flex:none; }
.student-ui .library-folder span { overflow-wrap:anywhere; }
.student-ui .library-back { border:0; background:none; padding:0; min-width:26px; font-size:34px; color:var(--library-navy); }
.student-ui .library-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 20px; color:#718096; font-size:12px; }
.student-ui .library-breadcrumb button { min-height:28px; padding:0; border:0; background:none; color:inherit; font-size:inherit; overflow-wrap:anywhere; }
.student-ui .library-folder-view .library-folder-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.student-ui .library-folder-view .library-folder { min-height:126px; padding:18px; }
.student-ui .library-resource-rows { display:grid; gap:12px; max-width:960px; }
.student-ui .library-folder-grid:not(:empty)+.library-resource-rows:not(:empty) { margin-top:18px; }
.student-ui .library-resource-row,.student-ui .library-vocabulary-entry { display:flex; align-items:center; min-width:0; width:100%; gap:12px; min-height:60px; padding:10px 14px; background:white; border:1px solid var(--library-border); border-radius:12px; text-align:left; color:inherit; font-size:15px; }
.student-ui .library-resource-row > span:not(.library-chevron),.student-ui .library-vocabulary-entry > span:not(.library-chevron) { min-width:0; overflow-wrap:anywhere; }
.student-ui .library-resource-row img { flex:none; }
.student-ui .library-chevron { margin-left:auto; color:#718096; font-size:24px; flex:none; }
.student-ui .library-vocabulary-entries { display:grid; gap:14px; margin-top:30px; max-width:620px; }
.student-ui .library-vocabulary-entry { min-height:64px; padding:5px 14px 5px 11px; font-size:16px; gap:4px; }
.student-ui .library-vocabulary-entry img { width:52px; height:52px; object-fit:contain; flex:none; }
.student-ui .library-folder:hover,.student-ui .library-resource-row:hover,.student-ui .library-vocabulary-entry:hover { border-color:#9db4cd; background:#fbfcff; }
@media(max-width:600px) {
  .student-ui .main-content:has(.formal-library) { padding:24px 18px calc(100px + env(safe-area-inset-bottom)); }
  .student-ui .library-header h2 { font-size:23px; }
  .student-ui .library-description { font-size:12px; margin:3px 0 8px; }
  .student-ui .library-switch { width:100%; }
  .student-ui .library-lane { margin-top:22px; }
  .student-ui .library-lane-heading { margin-bottom:10px; }
  .student-ui .library-lane-heading h3 { font-size:17px; }
  .student-ui .library-folder-grid,.student-ui .library-folder-view .library-folder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
  .student-ui .library-folder,.student-ui .library-folder-view .library-folder { min-height:92px; padding:12px; border-radius:12px; font-size:14px; gap:4px; }
  .student-ui .library-breadcrumb { border-bottom:1px solid var(--library-border); padding-bottom:6px; margin-bottom:10px; }
  .student-ui .library-resource-rows { gap:10px; }
  .student-ui .library-resource-row { min-height:56px; padding:9px 11px; gap:8px; font-size:14px; }
}

.student-ui .main-content:has(.formal-library) { max-width:1168px; }
.student-ui .library-lane-heading button { min-height:24px; }
@media(min-width:601px) { .student-ui .main-content:has(.formal-library) { padding-top:40px; } }
.student-ui .main-content:has(.formal-library) { width:min(100%,1168px); }
.student-ui .library-lane-heading,.student-ui .library-folder-grid { max-width:1010px; }
.student-ui .library-vocabulary-entry img[src$="imgSchool.png"] { border-radius:50%; }

/* One student navigation, responsive presentation of the existing destinations. */
.student-ui .topbar { z-index: 120; }
.student-ui .modal-overlay { z-index: 220; }
.student-ui .bottom-nav { position: fixed; inset: auto 0 0; width: 100%; max-width: none; transform: none; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-top: 1px solid #dce2e8; }
.student-ui .nav-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; height: 72px; min-height: 72px; padding: 12px 0 0; border: 0; color: #7b8793; font-size: 12px; font-weight: 500; line-height: 18px; isolation: isolate; }
.student-ui .nav-button.active { color: var(--brand-primary); background: transparent; font-size: 12.5px; font-weight: 500; }
.student-ui .nav-button.active::before { content: ""; position: absolute; z-index: -1; width: 72px; height: 56px; top: 7px; left: 50%; transform: translateX(-50%); border-radius: 10px; background: var(--brand-primary-soft); }
.student-ui .nav-button.active::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; border-radius: 1.5px; background: var(--brand-accent); }
.student-ui .nav-icon { display: block; height: 22px; line-height: 0; }
.student-ui .nav-icon img { display: block; max-width: none; }
.student-ui .nav-icon-selected, .student-ui .active .nav-icon-inactive { display: none; }
.student-ui .active .nav-icon-selected { display: block; }
.student-ui .nav-button:active::before { background: #dde6ee; }
.student-ui .nav-button:focus-visible { outline-offset: -4px; }
.student-ui.student-layer-open .access-overlay { bottom: calc(73px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .student-ui .app-shell { padding-bottom: 0; }
  .student-ui .topbar-inner { position: relative; width: 100%; max-width: none; height: 72px; padding: 0 48px; }
  .student-ui .bottom-nav { position: absolute; inset: 0 auto auto 50%; transform: translateX(-50%); width: 484px; height: 72px; gap: 12px; padding: 0; border: 0; }
  .student-ui .nav-button, .student-ui .nav-button.active { flex-direction: row; justify-content: flex-start; gap: 9px; padding: 0 18px; font-size: 14px; line-height: 22px; }
  .student-ui .nav-icon { height: 19px; }
  .student-ui .nav-button.active::before { width: 98px; height: 46px; top: 13px; }
  .student-ui .nav-button.active::after { top: auto; bottom: 0; width: 46px; }
  .student-ui .main-content { padding-bottom: 32px; }
  .student-ui.student-layer-open .access-overlay { bottom: 0; }
}
/* Batch 2: login and focused account forms only. */
.student-ui.access-locked .access-overlay:has(.student-login) { display: block; padding: 0; background: #fbfcfd; }
.student-login { width: 100%; position: relative; min-height: max(844px,100dvh); overflow: hidden; background: #fbfcfd; isolation: isolate; }
.student-login > picture { position: absolute; pointer-events: none; z-index: -1; display: block; }
.student-login .login-soft { left: -120px; top: -80px; }
.student-login .login-soft img { display: block; max-width: none; }
.student-login .login-book { width: 190px; height: 142px; top: 71px; right: -39px; opacity: .8; }
.student-login .login-landscape { width: calc(100% + 21px); height: 137px; left: -5px; bottom: 0; }
.student-login :is(.login-book,.login-landscape) img { width: 100%; height: 100%; object-fit: cover; }
.student-ui .student-login [data-auth-form="login"] { display: flex; flex-direction: column; gap: 0; width: auto; max-width: 400px; margin: 0 24px; padding: 134px 0 0; }
.student-login .login-official-logo { width: 300px; height: 100px; object-fit: contain; max-width: none; margin-left: -30px; }
.student-login .login-support { color: #617a94; font-size: 14px; line-height: 21px; margin: 4px 0 11px; }
.student-ui .student-login [data-auth-form="login"] h2 { color: var(--brand-primary); font-size: 31px; line-height: 45px; margin: 0 0 15px; }
.student-login h2::after { content: ""; display: block; width: 42px; height: 3px; background: var(--brand-accent); margin-top: 7px; border-radius: 2px; }
.student-ui .student-login [data-auth-form="login"] label { display: grid; gap: 5px; margin: 0 0 15px; color: #566b7e; font-size: 14px; font-weight: 500; line-height: 20px; }
.student-login .login-input { display: block; position: relative; }
.student-login .login-input > img { position: absolute; left: 14px; top: 15px; z-index: 1; pointer-events: none; }
.student-ui .student-login [data-auth-form="login"] input { height: 52px; padding: 12px 48px 12px 46px; border: 1px solid #cbd6e0; border-radius: 6px; font-size: 16px; font-weight: 400; background: white; width: 100%; }
.student-login input::placeholder { color: #9da9b5; }
.student-ui .password-toggle { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; min-height: 44px; inset: 3px 4px auto auto; }
.student-ui .password-toggle img { display: block; max-width: none; }
.student-ui .student-login [data-auth-form="login"] .password-toggle { inset: 4px 4px auto auto; width: 44px; }
.student-ui .student-login [data-auth-form="login"] > .primary-button { height: 52px; min-height: 52px; font-size: 17px; font-weight: 500; border-radius: 6px; margin: 0; padding: 0; box-shadow: 0 4px 10px #012f5a1c; }
.student-login .login-motivation { color: #617a94; font-size: 14px; line-height: 23px; margin: 128px 34px 88px; }
.student-login .login-motivation::after { content: ""; display: block; width: 30px; height: 5px; background: var(--brand-accent); border-radius: 1px; }
.student-ui [data-auth-form] .access-error:empty, .student-ui .account-result:empty { display: none; }
.student-login .access-error { order: 1; font-size: 13px; margin: 10px 0 0; }
.student-ui [data-auth-form] [aria-invalid="true"] { border-color: #d12421; }
.student-ui [data-auth-form][data-state="pending"] .primary-button { background: #eff2f7; color: #718096; box-shadow: none; }
.student-ui .student-account-form { display: block; max-width: 480px; width: 100%; }
.student-ui .student-account-form > .text-button { float: left; margin: 0 14px 20px 0; font-size: 0; }
.student-ui .student-account-form > .text-button::before { content: '‹'; font-size: 32px; }
.student-ui .student-account-form h2 { font-size: 23px; line-height: 44px; margin: 0 0 28px; color: #073a6b; }
.student-ui .student-account-form form { clear: both; gap: 0; }
.student-ui .student-account-form label { display: grid; gap: 12px; font-size: 13px; line-height: 18px; margin: 0 0 24px; color: #13253a; }
.student-ui .student-account-form .access-input { height: 50px; border: 1px solid #dee6ef; border-radius: 10px; padding: 12px 14px; width: 100%; background: #fff; }
.student-ui .student-account-form .password-control input { padding-right: 52px; }
.student-ui .student-account-form input[readonly] { background: #f1f5fa; color: #718096; }
.student-ui .student-account-form .account-help { font-size: 12px; color: #718096; margin: -16px 0 24px; line-height: 20px; }
.student-ui .name-help { display: flex; gap: 8px; justify-content: space-between; margin: -16px 0 24px; font-size: 12px; line-height: 20px; color: #718096; }
.student-ui .name-help p { margin: 0; }
.student-ui .name-help output { white-space: nowrap; }
.student-ui .student-account-form .primary-button { min-height: 50px; border-radius: 11px; font-weight: 700; width: 100%; }
.student-ui .student-account-form .primary-button:disabled { background: #f0f2f7; color: #718096; border: 1px solid #dee6ef; opacity: 1; }
.student-ui .student-account-form .access-error { font-size: 12px; color: #d12421; margin: 0 0 14px; }
.student-ui .account-result:not(:empty) { background: #ebfaf2 url('auth/success.svg') no-repeat 12px center; color: #073a6b; border-radius: 10px; padding: 16px 12px 16px 44px; font-size: 12px; margin: 24px 0 0; }
.student-ui .student-account-form form[data-state="failed"] .access-error { background: #fdeded url('auth/error.svg') no-repeat 12px center; border-radius: 10px; padding: 16px 12px 16px 44px; }
@media (min-width: 900px) {
  .student-login { min-height: max(900px,100dvh); }
  .student-login .login-soft { left: -170px; top: -145px; }
  .student-login .login-book { width: 600px; height: 448px; right: 0; top: 56px; opacity: .72; }
  .student-login .login-landscape { width: min(930px,65vw); height: 310px; left: auto; right: 0; opacity: .92; }
  .student-ui .student-login [data-auth-form="login"] { width: 400px; margin-left: max(48px,calc((100vw - 1200px)/2)); padding-top: 95px; }
  .student-login .login-official-logo { width: 360px; height: 120px; margin-left: -31px; }
  .student-login .login-support { font-size: 16px; line-height: 24px; margin: 23px 0 56px; }
  .student-ui .student-login [data-auth-form="login"] h2 { font-size: 42px; line-height: 58px; margin-bottom: 25px; }
  .student-login h2::after { width: 52px; margin-top: 0; }
  .student-ui .student-login [data-auth-form="login"] label { font-size: 15px; line-height: 21px; gap: 5px; margin-bottom: 14px; }
  .student-ui .student-login [data-auth-form="login"] input { height: 56px; font-size: 17px; }
  .student-login .login-input > img { top: 17px; }
  .student-ui .student-login [data-auth-form="login"] .password-toggle { top: 6px; }
  .student-ui .student-login [data-auth-form="login"] > .primary-button { height: 56px; margin-top: 10px; font-size: 18px; }
  .student-login .login-motivation { font-size: 16px; line-height: 28px; margin: 68px 0 106px max(48px,calc((100vw - 1200px)/2)); }
  .student-login .login-motivation::after { width: 36px; height: 3px; margin-top: 5px; }
}
/* Batch 3 — shared student account utilities. */
.student-ui .student-my-home { display: block; width: min(100%,1120px); box-shadow: none; }
.student-my-home h2 { margin: 0 0 22px; font-size: 23px; color: var(--brand-primary); }
.my-intro, .my-avatar, .my-username, .my-summary-help, .my-functions h3, .my-entry-copy small { display: none; }
.my-grid { display: grid; gap: 20px; min-width: 0; }
.my-summary { display: flex; align-items: center; min-height: 64px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow-wrap: anywhere; }
.my-summary > div { min-width: 0; }
.my-summary > div > strong { font-size: 19px; color: #13253a; }
.my-functions { min-width: 0; }
.student-my-home .account-menu { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.student-my-home .account-menu button, .my-logout { min-height: 58px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 500; }
.student-my-home .account-menu button:last-child { border-bottom: 0; }
.my-entry-copy { flex: 1; min-width: 0; }
.my-chevron { margin-left: auto; color: #718096; font-size: 24px; }
.utility-icon { display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; background: #eef5ff; border-radius: 12px; }
.utility-icon img { flex: none; max-width: none; }
.utility-icon.profile { background: #eaf3ff; }
.utility-icon.upload { background: #eaf7ef; }
.utility-icon.password { background: #fff6e5; }
.utility-icon.logout { background: #fdeeee; }
.student-ui .my-logout { width: 100%; min-height: 54px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: #b73535; text-align: left; }
.student-ui .student-data-page { display: block; position: relative; width: min(100%,560px); box-shadow: none; }
.student-data-page > h2 { color: var(--brand-primary); font-size: 23px; margin: 0 0 28px; }
.student-export-card { border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 18px; box-shadow: 0 4px 14px #0a1f3814; }
.export-heading { display: flex; align-items: flex-start; gap: 14px; }
.utility-icon.large { flex-basis: 52px; width: 52px; height: 52px; }
.export-heading h3 { font-size: 19px; margin: 0 0 6px; }
.export-heading p { font-size: 13px; color: #718096; margin: 0; line-height: 1.6; }
.export-detail { border-top: 1px solid var(--border); margin: 18px 0; padding-top: 16px; font-size: 13px; line-height: 1.7; }
.student-export-card button { width: 100%; min-height: 52px; border-radius: 12px; }
.export-privacy { display: flex; align-items: center; gap: 8px; padding: 16px; min-height: 52px; border-radius: 12px; background: #ecf4fc; color: #073a6b; font-size: 12px; margin: 18px 0 28px; }
.export-privacy img { flex: none; }
.export-result { display: flex; align-items: center; gap: 10px; border-radius: 11px; padding: 16px 12px; min-height: 58px; font-size: 13px; background: #ecf4fc; color: #073a6b; }
.export-result:empty { display: none; }
.export-result[data-state="success"] { background: #eaf7ef; color: #24683e; }
.export-result[data-state="failed"] { background: #fdeded; color: #d12421; }
.export-result[data-state="success"]::before { content: url('auth/success.svg'); width: 22px; height: 22px; }
.export-result[data-state="failed"]::before { content: url('auth/error.svg'); width: 22px; height: 22px; }
.student-logout-confirm { width: min(342px,calc(100vw - 48px)); border: 0; border-radius: 20px; padding: 24px; color: #13253a; box-shadow: 0 20px 64px #05162933; }
.student-logout-confirm::backdrop { background: rgb(5 15 26 / 36%); }
.student-logout-confirm h2 { font-size: 28px; margin: 0 0 12px; }
.student-logout-confirm p { color: #718096; font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.student-logout-confirm > div { display: flex; gap: 16px; }
.student-logout-confirm button { flex: 1; min-height: 50px; border: 1px solid #dee6ef; border-radius: 12px; background: white; color: #13253a; }
.student-logout-confirm [data-logout-confirm] { background: #c44040; color: white; border-color: #c44040; }
.student-ui.student-layer-open .modal-overlay:not([hidden]) { display: grid; }
.student-ui .student-submission-dashboard { width: min(100%,680px); }
.student-submission-dashboard .teacher-header { align-items: flex-start; }
.student-submission-dashboard .teacher-header h1 { font-size: 23px; }
.student-submission-dashboard .teacher-header h2 { font-size: 17px; margin: 24px 0 6px; }
.student-submission-dashboard .teacher-header p { font-size: 13px; }
.student-submission-dashboard .submission-upload-form { padding: 0; border: 0; background: transparent; box-shadow: none; }
.submission-selected { display: grid; justify-items: center; gap: 6px; padding: 16px; border: 1px dashed #b8cbe0; border-radius: 14px; background: #f0f6fc; text-align: center; }
.submission-selected strong { font-size: 15px; overflow-wrap: anywhere; max-width: 100%; }
.submission-selected > span { font-size: 12px; color: #718096; }
.submission-selected > div { display: flex; gap: 24px; }
.submission-selected .text-button { min-height: 44px; font-size: 13px; }
.submission-selected .text-button:last-child { color: #b73535; }
.student-submission-dashboard [data-submission-upload-button] { min-height: 50px; width: 100%; }
.student-submission-dashboard [hidden] { display: none !important; }
.student-submission-dashboard .submission-history-item { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .student-ui.student-layer-open .access-overlay:has(.student-my-home),
  .student-ui.student-layer-open .access-overlay:has(.student-data-page),
  .student-ui.student-layer-open .access-overlay:has(.student-submission-dashboard) { padding: 28px 18px 36px; }
}
@media (min-width: 900px) {
  .student-my-home h2 { font-size: 28px; margin: 0 0 8px; }
  .my-intro { display: block; font-size: 13px; color: #718096; margin: 0 0 60px; }
  .my-grid { grid-template-columns: 300px minmax(0,620px); grid-template-rows: 196px 64px; gap: 20px 40px; grid-template-areas: 'summary menu' 'logout menu'; justify-content: start; align-items: start; }
  .my-summary { grid-area: summary; min-height: 196px; padding: 24px 22px; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 18px; border-radius: 16px; }
  .my-avatar { display: grid; place-items: center; width: 56px; height: 56px; background: #ecf4fc; color: #073a6b; border-radius: 14px; font-size: 24px; }
  .my-username { display: block; color: #718096; font-size: 12px; margin-top: 6px; }
  .my-summary-help { display: grid; gap: 6px; grid-column: 1 / -1; padding-top: 16px; margin: 0; border-top: 1px solid var(--border); font-size: 13px; }
  .my-summary-help span { color: #718096; font-size: 12px; }
  .my-functions { grid-area: menu; }
  .my-functions h3 { display: block; font-size: 18px; margin: 0 0 20px; }
  .student-my-home .account-menu button { min-height: 72px; padding: 10px 18px; }
  .my-entry-copy small { display: block; color: #718096; font-size: 12px; margin-top: 5px; }
  .my-logout { grid-area: logout; min-height: 64px; padding: 12px 18px; }
  .utility-icon { flex-basis: 40px; width: 40px; height: 40px; }
}

.student-ui .student-my-home > h2 { margin-bottom: 22px; }
.student-ui .student-data-page > h2 { padding-left: 44px; line-height: 44px; margin: 0 0 24px; }
.student-ui .utility-back { width: 44px; height: 44px; padding: 0; justify-content: flex-start; font-size: 36px; line-height: 1; }
.student-data-page > .utility-back { position: absolute; top: 0; left: 0; }
.student-ui .student-submission-dashboard { padding: 0; background: transparent; border: 0; box-shadow: none; }
.submission-page-header { display: flex; gap: 0; align-items: center; margin-bottom: 24px; }
.submission-page-header h1 { margin: 0; font-size: 23px; color: #073a6b; }
.submission-intro h2 { font-size: 17px; margin: 0 0 8px; }
.submission-intro p { font-size: 13px; margin: 0 0 24px; }
.student-ui .student-submission-dashboard .submission-drop-zone { border-radius: 14px; }
.student-ui .student-submission-dashboard [data-submission-upload-button] { border-radius: 11px; background: #073a6b; }
.student-ui .student-export-card .primary-button { background: #073a6b; }
.student-ui .student-export-card .primary-button:disabled,
.student-ui .student-submission-dashboard [data-submission-upload-button]:disabled { background: #eff2f7; color: #718096; opacity: 1; border: 1px solid #dee6ef; }
@media (min-width: 900px) {
  .student-ui .student-my-home > h2 { margin-bottom: 8px; }
}

.student-ui .student-logout-confirm { min-height: 232px; }
.student-ui .student-logout-confirm button { min-height: 50px; }
.submission-selected { grid-template-columns: 36px minmax(0,1fr); text-align: left; justify-items: start; gap: 4px 12px; }
.submission-selected > img { grid-row: 1 / 3; }
.submission-selected > strong, .submission-selected > span, .submission-selected > div { grid-column: 2; }

/* Batch 4 — ordinary vocabulary; special vocabulary keeps its own presentation. */
.student-ui .active-test-panel { width: min(100%,860px); margin-inline: auto; }
.student-ui .active-test-panel .ordinary-scope { margin: 0 0 12px; color: var(--brand-primary); font-size: 19px; overflow-wrap: anywhere; }
.student-ui .active-test-panel .active-test-mode { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.student-ui .active-test-panel > .question-meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; align-items: center; }
.student-ui .active-test-panel .question-position { font-size: 14px; font-weight: 700; color: #0a67a8; }
.student-ui .active-test-panel [data-timer] { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 16px; background: #fff8eb; color: #975013; }
.student-ui .active-test-panel [data-timer].critical { background: #fef4f2; color: #b42318; border: 1px solid #f4b8ae; }
.student-ui .active-test-panel [data-timer].timed-out { background: #fdf3e6; color: #c55112; }
.student-ui .ordinary-correction-progress { font-size: 12px; color: #64748b; border-left: 1px solid var(--border); padding-left: 10px; }
.student-ui .active-test-panel > .task-progress { height: 6px; margin-block: 12px; }
.student-ui .active-test-panel .progress-dots { display: none; }
.student-ui .active-test-panel .ordinary-question-card { margin-top: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.student-ui .ordinary-spelling .prompt { font-size: 13px; font-weight: 500; color: #64748b; margin: 0; }
.student-ui .ordinary-spelling .prompt-sub { font-size: 28px; font-weight: 700; color: var(--brand-primary); margin: 0; overflow-wrap: anywhere; }
.student-ui .active-test-panel .answer-input { min-height: 94px; width: 100%; padding: 14px; font-size: 17px; border-radius: 10px; border: 1px solid #d7e3ec; background: #fff; }
.student-ui .active-test-panel .answer-input:disabled { background: #f5f6f7; color: #718096; }
.student-ui .active-test-panel .current-answer-submit { width: 100%; min-height: 58px; margin-top: 12px; border-radius: 10px; background: var(--brand-primary); font-size: 17px; }
.student-ui .active-test-panel .current-answer-submit:disabled { background: #eff2f7; color: #718096; opacity: 1; }
.student-ui .active-test-panel .ordinary-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 4px; background: #ecf8f0; color: #22643c; }
.student-ui .active-test-panel .ordinary-feedback.wrong { background: #fdeded; color: #b42318; }
.student-ui .active-test-panel .ordinary-feedback.timeout { background: #fdf3e6; color: #c55112; }
.student-ui .ordinary-feedback strong { font-size: 16px; }
.student-ui .ordinary-feedback p { color: #13253a; font-size: 12px; margin: 6px 0 0; }
.student-ui .active-test-panel .question-progress-copy { display: flex; flex-wrap: wrap; gap: 8px; color: #64748b; font-size: 12px; margin: 14px 0; }
.student-ui .active-test-panel .test-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.student-ui .active-test-panel .test-actions button { flex: 1 1 auto; min-height: 44px; }
@media (min-width: 900px) {
 .student-ui .ordinary-spelling .prompt-sub { font-size: 32px; }
 .student-ui .active-test-panel .answer-input { min-height: 84px; }
}
.student-ui .active-test-panel { display: block; }
.student-ui .active-test-panel .ordinary-spelling { gap: 12px; }
.student-ui .ordinary-spelling .prompt-sub { padding: 0; border: 0; }
.student-ui .active-test-panel .test-actions { margin-top: 12px; }
.student-ui .active-test-panel .test-actions button { scroll-margin-bottom: 90px; }
@media (max-width: 899px) {
 .student-ui .main-content:has(.active-test-panel) { padding: 18px 18px calc(100px + env(safe-area-inset-bottom)); }
}

/* Batch 5: Vocabulary Browser, shared filters and real relation detail. */
.student-ui .main-content:has(.words-view) { width:min(100%,1156px); max-width:1156px; padding:20px 18px calc(104px + env(safe-area-inset-bottom)); }
.student-ui .vocabulary-back { color:#718096; font-size:13px; min-height:44px; padding:0 8px; background:transparent; border:0; }
.student-ui .words-view { display:grid; gap:12px; color:#13253a; }
.student-ui .words-view h2 { margin:0; font-size:24px; color:#073a6b; }
.student-ui .words-heading { margin:0; }
.student-ui .words-body,.student-ui .words-content { display:grid; gap:12px; min-width:0; }
.student-ui .school-word-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.student-ui .school-word-filters h3,.student-ui .school-unit-sidebar { display:none; }
.student-ui .words-view .unit-select-label { min-width:0; margin:0; font-size:12px; color:#718096; }
.student-ui .words-view .unit-select { width:100%; border:1px solid #dee6ef; border-radius:10px; background:white; }
.student-ui .words-view .tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; border:1px solid #dee6ef; border-radius:24px; padding:2px; background:white; }
.student-ui .words-view .tabs .tab-button { padding:4px; font-size:12px; border:0; border-radius:22px; white-space:normal; }
.student-ui .words-view .tabs .active { background:#073a6b; color:white; font-weight:700; }
.student-ui .words-view .card-list.words { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.student-ui .school-words .card-list.words { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.student-ui .words-view .word-card { display:block; min-width:0; padding:12px; border:1px solid #dee6ef; border-radius:12px; background:white; min-height:72px; cursor:default; }
.student-ui .word-card-header { display:flex; align-items:center; gap:4px; min-width:0; }
.student-ui .words-view .word-card-toggle { flex:1; min-width:0; padding:0; text-align:left; overflow-wrap:anywhere; background:transparent; border:0; color:#073a6b; font-size:18px; font-weight:700; }
.student-ui .words-view .vocabulary-audio { display:inline-flex; justify-content:center; align-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:#eef6fc; }
.student-ui .words-view .vocabulary-audio img { display:block; }
.student-ui .words-view p { overflow-wrap:anywhere; }
.student-ui .words-view .word-meaning { margin:7px 0; color:#718096; font-size:13px; }
.student-ui .words-view .word-source-sentence { font-size:14px; line-height:1.6; white-space:pre-wrap; margin:8px 0; }
.student-ui .words-view mark { color:#a36700; font-weight:700; background:transparent; }
.student-ui .words-view .word-source-title { text-align:right; font-style:italic; color:#718096; font-size:12px; }
.student-ui .words-view .word-source-action { background:transparent; color:#073a6b; border:0; padding:0 8px; text-decoration:underline; }
.student-ui .words-view .word-source-unavailable { color:#718096; font-size:12px; }
.student-ui .words-view .empty-state { grid-column:1/-1; }
.student-ui .words-view .family-card { padding:14px; border:1px solid #dee6ef; border-radius:12px; background:white; min-width:0; }
.student-ui .words-view .family-open { display:flex; gap:12px; align-items:center; justify-content:space-between; font-size:16px; color:#073a6b; overflow-wrap:anywhere; }
.student-ui .family-relations { display:grid; gap:16px; }
.student-ui .family-pair { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); gap:8px; align-items:center; }
.student-ui .family-pair .family-node { padding:10px; display:block; background:#eef6fc; border-radius:9px; min-width:0; }
.student-ui .family-node .word-card-header { flex-wrap:wrap; }
.student-ui .family-node strong { flex:1; overflow-wrap:anywhere; font-size:16px; color:#073a6b; }
.student-ui .family-node p { margin:4px 0; font-size:12px; }
.student-ui .family-relation-label { background:#f7f9fb; padding:9px; border-radius:8px; font-size:12px; color:#073a6b; }
.student-ui .words-view .irregular-group-playback { min-height:48px; white-space:normal; overflow-wrap:anywhere; }
@media(min-width:900px) {
 .student-ui .main-content:has(.words-view) { padding-top:36px; }
 .student-ui .words-view h2 { font-size:30px; }
 .student-ui .school-words .words-body { grid-template-columns:250px minmax(0,1fr); gap:24px; align-items:start; }
 .student-ui .school-word-filters { grid-template-columns:minmax(0,1fr); padding:14px; background:white; border:1px solid #dee6ef; border-radius:12px; }
 .student-ui .school-word-filters h3 { display:block; margin:0; color:#073a6b; font-size:14px; }
 .student-ui .school-unit-sidebar { display:grid; gap:10px; }
 .student-ui .school-unit-sidebar button { border:1px solid #dee6ef; border-radius:22px; background:white; color:#718096; }
 .student-ui .school-unit-sidebar [aria-current=true] { background:#073a6b; color:white; font-weight:700; }
 .student-ui .mobile-unit-select { display:none; }
 .student-ui .school-words .card-list.words { grid-template-columns:minmax(0,1fr); gap:10px; }
 .student-ui .words-view .word-card { min-height:58px; padding:7px 18px; }
 .student-ui .words-view .word-card-toggle { flex:initial; font-size:16px; }
 .student-ui .words-view .card-list.words:has(.family-card) { grid-template-columns:minmax(0,430fr) minmax(0,666fr); align-items:start; gap:12px 24px; }
 .student-ui .words-view .family-card { grid-column:1; }
 .student-ui .words-view .family-expanded { grid-column:2; grid-row:1 / span 20; }
}
.student-ui .school-words .word-card.expanded { grid-column:auto; }
.student-ui .family-desktop-selected { display:none; }
@media(min-width:900px) {
 .student-ui .family-desktop-selected { display:block; grid-column:1; }
 .student-ui .family-desktop-selected .family-card { border-color:#073a6b; background:#eef6fc; }
}
@media(min-width:900px) {
 .student-ui .outside-words .words-body { grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:end; }
 .student-ui .outside-words .words-content { display:contents; }
 .student-ui .outside-words .tabs { grid-column:2; grid-row:1; width:min(100%,620px); }
 .student-ui .outside-words .card-list.words,.student-ui .outside-words .load-more-row { grid-column:1/-1; }
 .student-ui .outside-words .word-card { display:grid; grid-template-columns:260px minmax(0,1fr) auto; gap:6px 12px; padding:14px; }
 .student-ui .outside-words .word-card-header { grid-column:1; grid-row:1; }
 .student-ui .outside-words .word-card-toggle { flex:1; font-size:18px; }
 .student-ui .outside-words .word-source-title { grid-column:2; grid-row:1; align-self:center; margin:0; }
 .student-ui .outside-words .word-source-action { grid-column:3; grid-row:1; }
 .student-ui .outside-words .word-meaning,.student-ui .outside-words .word-source-sentence,.student-ui .outside-words .word-source-unavailable { grid-column:1/-1; text-align:center; margin:0; }
}

/* PRM V1: paragraph reading with one optional sentence detail. */
.student-ui .main-content:has(.precision-reading) { width:min(100%,1168px); max-width:1168px; padding:36px 24px 104px; }
.precision-reading { max-width:980px; color:#13253a; }
.student-ui .prm-back { border:0; background:none; padding:0; color:#718096; font-size:13px; }
.prm-title { display:flex; align-items:center; gap:8px; margin:0 0 14px; }
.prm-title h2 { flex:1; min-width:0; color:#073a6b; font-size:30px; margin:0; overflow-wrap:anywhere; }
.student-ui .prm-pill { border:1px solid #dee6ef; border-radius:22px; background:white; color:#073a6b; font-size:12px; font-weight:700; min-width:44px; padding:6px 12px; }
.student-ui .prm-icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:0; border:0; background:none; }
.prm-icon-button img { flex:none; width:24px; height:24px; }
.prm-font-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 12px; font-size:12px; color:#718096; }
.prm-font-controls output { min-width:34px; text-align:center; font-variant-numeric:tabular-nums; }
.student-ui .prm-font-controls .prm-pill { min-height:44px; }
.prm-font-controls button:disabled { opacity:.4; cursor:default; }
.prm-surface { border:1px solid #dee6ef; border-radius:12px; background:white; padding:22px; }
.prm-paragraph { font-size:var(--prm-body-font-size,20px); line-height:1.75; margin-bottom:20px; overflow-wrap:anywhere; }
.prm-paragraph:last-child { margin-bottom:0; }
.student-ui .prm-sentence { display:inline; min-height:0; border:0; border-radius:3px; background:none; margin:0; padding:0; font:inherit; color:inherit; text-align:left; white-space:normal; cursor:pointer; }
.student-ui .prm-sentence[aria-expanded=true], .student-ui .prm-audio-focus, .student-ui .prm-source-focus { background:#ebf2fb; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.prm-vocabulary { font-weight:700; }
.prm-vocabulary.spelling { color:#c72924; }
.prm-vocabulary.recognition { color:#ffb800; }
.prm-detail { display:block; margin:16px 0; padding:12px; border-radius:10px; font-size:13px; line-height:1.65; font-weight:400; }
.prm-translation { background:#eef6fc; }
.prm-detail>header { display:flex; align-items:center; justify-content:space-between; gap:6px; color:#073a6b; }
.prm-detail p { margin:8px 0; }
.prm-controls { display:flex; align-items:center; gap:2px; }
.prm-analysis { padding:14px; background:#ebf2fb; }
.prm-structure-text { font-weight:700; line-height:2; }
.prm-bracket { font-weight:800; }
.group-0 { color:#2f6edb; }.group-1 { color:#0f4c81; }.group-2 { color:#7152c9; }.group-3 { color:#c9841a; }.group-4 { color:#238165; }.group-5 { color:#bc487b; }
.prm-segment-labels { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; }
.prm-relation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:12px 0; text-align:center; font-weight:700; position:relative; }
.prm-relation svg { grid-column:1/-1; width:100%; height:34px; color:#7152c9; }
.prm-relation span { overflow-wrap:anywhere; padding:0 4px; }
.prm-relation-target { color:#7152c9; }.prm-relation-source { color:#c9841a; }
.prm-relation small { grid-column:1/-1; color:#718096; font-weight:400; }
.prm-annotation>p:first-child>span { color:#9b5b12; font-size:11px; margin-right:8px; }
.prm-annotation>p:last-child,.prm-muted { color:#718096; font-size:12px; }
.prm-transfers { margin-top:24px; }
.prm-transfers h3 { color:#012f5a; font-size:18px; border-bottom:1px solid #d7dfe7; padding-bottom:12px; }
.prm-transfers article + article { margin-top:16px; }.prm-transfers h4 { font-size:14px; margin:0 0 8px; }.prm-transfers p { font-size:13px; line-height:1.6; margin:0; color:#526377; }
.prm-section_heading,.prm-instruction { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prm-source-focus, .prm-audio-focus, .prm-sentence { scroll-margin:110px 0; }

@media(max-width:600px) {
 .student-ui .main-content:has(.precision-reading) { padding:20px 18px calc(104px + env(safe-area-inset-bottom)); }
 .prm-title h2 { font-size:22px; }.prm-title { flex-wrap:wrap; }.prm-title h2 { flex-basis:calc(100% - 104px); }
 .prm-surface { padding:16px; }.prm-paragraph { margin-bottom:16px; }
 .prm-detail { padding:12px; }.prm-analysis { padding:12px; }
}

.prm-relation { max-width:360px; }
/* Ordinary student flow; calibration keeps the existing multi-sentence editor. */
.student-ui .main-content:has(.student-readaloud) { width:min(100%,1168px); max-width:1168px; padding:24px 24px 104px; }
.student-readaloud { width:min(100%,980px); max-width:980px; color:#13253a; }
.ra-title { display:flex; align-items:center; gap:12px; justify-content:space-between; margin:8px 0 24px; }
.ra-title h2 { color:#012f5a; font-size:28px; margin:0; overflow-wrap:anywhere; }
.ra-title>span { white-space:nowrap; border-radius:999px; padding:6px 10px; background:#eaf0f5; color:#012f5a; font-size:11px; font-weight:700; }
.ra-progress { margin-bottom:12px; }.ra-progress>div { display:flex; justify-content:space-between; font-size:12px; margin-bottom:10px; }.ra-progress span { color:#718096; }
.ra-progress progress { display:block; width:100%; height:4px; appearance:none; border:0; border-radius:2px; overflow:hidden; background:#e3e8ed; }.ra-progress progress::-webkit-progress-bar { background:#e3e8ed; }.ra-progress progress::-webkit-progress-value { background:#012f5a; }.ra-progress progress::-moz-progress-bar { background:#012f5a; }
.ra-card { display:block; padding:16px 22px 28px; border:1px solid #d7dfe7; border-radius:4px; background:white; min-height:535px; }
.ra-card>header { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#718096; font-weight:700; }
.ra-status { padding:5px 10px; border-radius:999px; background:#f2f5f7; font-size:11px; }.ra-status.recording,.ra-status.retry { color:#c53b3b; background:#fdf0f0; }.ra-status.result { color:#18875a; background:#eaf6f0; }.ra-status.assessing { color:#2f6edb; background:#eaf0f5; }.ra-status.unavailable { color:#9b5b12; background:#fdf6e8; }
.ra-english { font-size:20px; line-height:30px; font-weight:700; margin:28px 0 24px; overflow-wrap:anywhere; }.ra-chinese { color:#718096; font-size:14px; line-height:22px; margin:0 0 16px; }
.ra-card hr { border:0; border-top:1px solid #d7dfe7; margin:16px 0 20px; }
.student-ui .student-readaloud :is(.primary-button,.secondary-button,.danger-button) { display:inline-flex; align-items:center; justify-content:center; gap:12px; font-size:14px; padding:10px 16px; min-height:44px; }
.student-ui .student-readaloud .primary-button { background:#012f5a; color:white; }.student-ui .student-readaloud .danger-button { background:#c53b3b; color:white; }.student-ui .student-readaloud .secondary-button { background:white; color:#012f5a; border:1px solid #d7dfe7; }
.student-readaloud button:disabled { opacity:.45; cursor:default; }
.student-readaloud img { flex:none; max-width:none; }
.ra-reference { margin-bottom:8px; }.ra-guidance { margin:22px 0 30px; font-size:13px; color:#718096; }.ra-recording-note { color:#718096; text-align:center; font-size:12px; }
.ra-actions { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }.ra-actions>button { flex:1; max-width:220px; }.ra-actions.ra-start { justify-content:center; margin-top:32px; }.ra-start>button { max-width:190px; min-height:50px!important; }
.ra-result-hero { display:flex; align-items:center; gap:12px; padding:14px; border-radius:4px; margin-bottom:14px; }.ra-result-hero.passed { background:#eaf6f0; color:#18875a; }.ra-result-hero.retry { background:#fdf0f0; color:#c53b3b; }.ra-result-hero.unavailable { background:#fdf6e8; color:#9b5b12; }
.ra-result-hero small { display:block; font-size:11px; color:#718096; }.ra-result-hero strong { display:block; font-size:16px; margin-top:4px; }.ra-hero-score { margin-left:auto; flex-shrink:0; }.ra-hero-score strong { font-size:26px; color:#13253a; }.ra-result-hero p { font-size:12px; line-height:1.6; color:#13253a; }
.ra-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.ra-metrics>div { background:#f6f8fa; border-radius:4px; padding:10px 12px; }.ra-metrics span { display:block; color:#718096; font-size:11px; }.ra-metrics strong { display:block; font-size:18px; margin-top:6px; }
.ra-feedback { font-size:12px; line-height:1.6; margin-top:14px; }.ra-word-issue { color:#9b5b12; }.ra-replay { border:0; background:none; color:#012f5a; margin-top:12px; font-size:12px; }
.ra-assessing { display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 0; color:#012f5a; }.ra-assessing p { font-size:12px; color:#718096; }.ra-assessing img { animation:ra-spin 1.2s linear infinite; }@keyframes ra-spin { to { transform:rotate(360deg); } }
.ra-round-complete>p { font-size:12px; }.ra-round-complete h3 { font-size:12px; color:#012f5a; margin:24px 0 12px; }.ra-word-hints { display:flex; flex-wrap:wrap; gap:8px; }.ra-word-hints span { border-radius:999px; background:#fdf6e8; color:#9b5b12; padding:5px 10px; font-size:11px; }
.student-ui .ra-weak-sentence { width:100%; display:block; border:0; background:#f6f8fa; text-align:left; padding:12px; margin:8px 0; }.ra-weak-sentence>span { display:block; font-size:12px; overflow-wrap:anywhere; }.ra-weak-sentence>span:first-child { color:#718096; margin-bottom:6px; }.ra-weak-sentence strong { float:right; color:#9b5b12; }
@media(max-width:600px){.student-ui .main-content:has(.student-readaloud) { padding:20px 18px calc(104px + env(safe-area-inset-bottom)); }.ra-title { align-items:flex-start; }.ra-title h2 { font-size:24px; }.ra-card { padding:16px; }.ra-english { font-size:17px; line-height:28px; }.ra-chinese { font-size:13px; line-height:21px; }.ra-actions:not(.ra-start)>button { max-width:none; }.ra-round-complete .ra-result-hero { flex-wrap:wrap; }}

/* Batch 8: the same read projection serves both responsive layouts. */
.student-ui .main-content:has(.pg-home,.pg-detail) { width:min(100%,1168px);max-width:1168px;padding:28px 24px 104px; }
.progress-view.pg-home,.progress-view.pg-detail { display:block;width:100%;max-width:none;color:#13253a;line-height:1.4; }
.pg-home h2 { margin:0;font-size:36px;color:#073a6b; }.student-ui .pg-home>.pg-subtitle { color:#718096;margin:14px 0 24px; }
.pg-libraries { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; }
.pg-library { --pg-color:#1fa56b; }.pg-library.outside,.pg-detail.outside { --pg-color:#387de0; }.pg-library.irregular_verbs,.pg-detail.irregular_verbs { --pg-color:#7d4ae0; }.pg-library.word_families,.pg-detail.word_families { --pg-color:#e08c0a; }
.student-ui .pg-library { display:grid;grid-template-columns:1fr auto;gap:10px;padding:20px;text-align:left;border:1px solid #e5ebf2;border-radius:12px;background:white;box-shadow:0 3px 10px #073a6b12;min-width:0; }
.pg-library-icon { grid-area:1/1;max-width:none;border-radius:50%; }.pg-chevron { grid-area:1/2;align-self:center; }.pg-chevron img { display:block;max-width:none; }
.pg-library-copy { grid-area:2/1/3/3;min-width:0; }.pg-library-copy strong { display:block;font-size:20px; }.pg-library-copy small { display:block;font-size:14px;color:#718096;margin-top:10px; }
.pg-percent { grid-area:3/1;color:var(--pg-color);font-size:26px; }.pg-library progress { grid-area:4/1/5/3; }.pg-encouragement { grid-area:5/1/6/3;color:#718096;font-size:11px; }
.pg-home progress,.pg-detail progress { display:block;width:100%;height:6px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:#e7edf4; }
.pg-home progress::-webkit-progress-bar,.pg-detail progress::-webkit-progress-bar { background:#e7edf4; }.pg-home progress::-webkit-progress-value,.pg-detail progress::-webkit-progress-value { background:var(--pg-color); }.pg-home progress::-moz-progress-bar,.pg-detail progress::-moz-progress-bar { background:var(--pg-color); }
.pg-motivation { position:relative;background:#eef8f2;border-radius:14px;padding:28px 34px;margin-top:18px;min-height:118px;display:flex;align-items:center;gap:10px;overflow:hidden; }.pg-motivation strong { color:#073a6b;font-size:20px; }.pg-motivation p { font-size:15px;margin:8px 0 0; }.pg-growth { position:absolute;right:10px;bottom:0;width:300px;height:100px;object-fit:cover;opacity:.52; }.pg-spark { display:none; }
.pg-detail { --pg-color:#29a866; }.pg-detail>header { display:flex;align-items:center;gap:8px;margin-bottom:24px; }.pg-detail h2 { color:#073a6b;font-size:28px;margin:0; }.student-ui .pg-back { border:0;background:transparent;color:#073a6b;font-size:34px;width:44px;min-height:44px;padding:0;text-align:left; }
.pg-detail-top { display:grid;grid-template-columns:220px minmax(0,1fr) 320px;gap:28px;align-items:stretch; }.pg-detail-top:not(:has(.pg-book)) { grid-template-columns:220px minmax(0,1fr); }
.pg-overview,.pg-recent,.pg-book { background:white;border:1px solid #dee6ef;border-radius:14px;padding:16px 18px;min-width:0; }
.pg-overview { display:flex;flex-direction:column;align-items:center;justify-content:center; }.pg-ring { width:108px;height:108px;border-radius:50%;background:conic-gradient(var(--pg-color) calc(var(--percentage)*1%),#e5edf6 0);display:grid;place-items:center; }.pg-ring>div { border-radius:50%;width:84px;height:84px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f7f9fc; }.pg-ring strong { color:#073a6b;font-size:32px; }.pg-ring small,.pg-count { color:#718096;font-size:12px; }.pg-count { margin:8px 0 0; }
.pg-recent h3 { color:#073a6b;font-size:18px;margin:0 0 8px; }.pg-recent-empty { text-align:center; }.pg-recent-empty img { display:block;margin:8px auto 4px;max-width:none; }.pg-recent-empty strong { font-size:14px;font-weight:500; }.pg-recent-empty p,.pg-recent-note { color:#718096;font-size:11px;margin:4px 0 0; }
.pg-days { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;text-align:center; }.pg-day-bar { height:82px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;border-bottom:1px solid #e3e9f1;padding-bottom:2px; }.pg-day-bar span { font-size:10px;color:#073a6b; }.pg-day-bar i { width:14px;background:var(--pg-color);border-radius:5px 5px 0 0; }.pg-day small { display:block;font-size:10px;color:#718096;margin-top:8px; }
.pg-book { font-size:14px;padding-top:24px; }.pg-book select { width:100%;margin-top:12px;min-height:46px;border:1px solid #dee6ef;border-radius:10px;background:white;padding:8px;color:#13253a; }
.pg-section-heading { display:flex;justify-content:space-between;align-items:center;gap:12px;margin:38px 0 12px; }.pg-section-heading h3 { color:#073a6b;font-size:18px;margin:0; }.pg-section-heading small { color:#718096;font-size:12px; }
.pg-scopes { background:white; }.student-ui .pg-scope { display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;padding:10px 20px;border:0;border-bottom:1px solid #dee6ef;border-radius:0;background:white;min-height:58px; }.pg-scope>span:first-child { min-width:0; }.pg-scope strong { display:block;font-size:14px;font-weight:500;overflow-wrap:anywhere; }.pg-scope small { display:block;font-size:11px;color:#718096;margin-top:4px; }.pg-scope-meter { width:220px;max-width:32%;flex-shrink:0; }.pg-scope-meter strong { font-size:12px;text-align:right;color:#073a6b;margin-bottom:8px; }
.student-ui .pg-expand { width:100%;min-height:44px;background:white;border:1px solid #dee6ef;border-radius:12px;color:#073a6b;margin-top:12px; }.pg-expand span { float:right;margin-right:14px; }.pg-illustration { display:block;width:min(100%,720px);height:auto;object-fit:contain;opacity:.8;margin:28px auto 0;border-radius:14px; }
.pg-empty { display:flex;align-items:center;gap:14px;background:white;border:1px solid #dee6ef;border-radius:14px;padding:18px;min-height:112px;grid-column:1/-1; }.pg-empty img { max-width:none; }.pg-empty strong { color:#073a6b; }.pg-empty p { color:#718096;font-size:12px; }.pg-entry-list { margin-top:20px;background:white;border-radius:12px;padding:0 16px; }.pg-entry { display:flex;flex-wrap:wrap;gap:10px;padding:16px 0;border-bottom:1px solid #dee6ef;overflow-wrap:anywhere; }.pg-entry small { margin-left:auto;color:#073a6b; }.pg-detail-note { color:#718096;font-size:12px; }
@media(max-width:900px){.pg-libraries { grid-template-columns:repeat(2,minmax(0,1fr)); }.pg-detail-top { grid-template-columns:160px minmax(0,1fr); }.pg-book { grid-column:1/-1; }}
@media(max-width:600px){
 .student-ui .main-content:has(.pg-home,.pg-detail) { padding:18px 18px calc(104px + env(safe-area-inset-bottom)); }.pg-home h2 { font-size:30px; }.student-ui .pg-home>.pg-subtitle { margin:8px 0 10px;font-size:16px; }.pg-libraries { grid-template-columns:1fr;gap:10px; }
 .student-ui .pg-library { grid-template-columns:52px minmax(0,1fr) 52px;gap:6px 8px;padding:13px 14px 12px; }.pg-library-icon { grid-area:1/1/3/2;align-self:center; }.pg-library-copy { grid-area:1/2/3/3;align-self:center; }.pg-library-copy strong { font-size:17px; }.pg-library-copy small { font-size:13px;margin-top:4px; }.pg-chevron { grid-area:1/3;justify-self:end; }.pg-percent { grid-area:2/3;font-size:14px;color:#073a6b;justify-self:end; }.pg-library progress { grid-area:3/1/4/4;margin-top:6px; }.pg-encouragement { grid-area:4/1/5/4; }
 .pg-motivation { padding:12px 16px;min-height:64px;border-radius:12px;margin-top:10px; }.pg-spark { display:block;max-width:none; }.pg-growth { display:none; }.pg-motivation strong { font-size:14px; }.pg-motivation p { font-size:13px;margin:2px 0 0; }
 .student-ui .main-content:has(.pg-detail) { padding-top:4px; }
 .pg-detail>header { margin-bottom:0; }.pg-detail h2 { font-size:22px; }.pg-detail-top,.pg-detail-top:not(:has(.pg-book)) { display:flex;flex-direction:column;gap:12px; }.pg-overview { border:0;background:transparent;padding:0 0 4px; }.pg-recent { padding:12px 17px;min-height:126px; }.pg-recent h3 { font-size:16px; }.pg-book { margin-top:20px;border:0;border-radius:0;background:transparent;padding:0; }.pg-book select { font-size:14px; }.pg-section-heading { margin:24px 0 12px; }.pg-section-heading h3 { font-size:17px; }.student-ui .pg-scope { padding:8px 14px;min-height:52px; }.pg-scope-meter { width:102px; }.pg-illustration { margin-top:20px; }.pg-days { gap:5px; }.pg-day-bar { height:66px; }
}

.student-ui .practice-disclosure summary { position:relative; }
.student-ui .practice-card-title { position:absolute; inset:0 60px; display:flex; align-items:center; justify-content:center; font:inherit; text-align:center; pointer-events:none; }

.student-ui .family-graph { position:relative; margin:12px 0; padding-left:48px; }
.student-ui .family-connections { position:absolute; left:0; top:0; width:46px; height:100%; overflow:visible; fill:none; stroke:#6796c7; stroke-width:1.5; }
.student-ui .family-nodes { display:grid; gap:8px; }
.student-ui .family-nodes .family-node { background:#eef6fc; border-radius:9px; padding:8px 10px; min-width:0; }
@media(min-width:900px) {
 .student-ui .words-view .card-list.words:has(.family-card) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .student-ui .words-view .family-card, .student-ui .words-view .family-expanded { grid-column:auto; grid-row:auto; }
}
.task-celebration-backdrop { position:fixed; inset:0; background:rgba(247,251,255,.24); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:none; z-index:1999; }
.task-celebration { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(180px,calc(100vw - 32px)); aspect-ratio:1; pointer-events:none; z-index:2000; }
.task-celebration-all { width:min(312px,calc(100vw - 32px)); }
@media(min-width:900px) {
 .task-celebration-single { width:220px; }
 .task-celebration-all { width:360px; }
}
.task-celebration * { pointer-events:none; }
.task-celebration-reduced { width:auto; aspect-ratio:auto; max-width:85vw; border-radius:14px; padding:16px 24px; background:#eef6fc; color:#073a6b; font-weight:700; }
/* V2 family overview and relation prompts: Figma 596:425, 597:557, 406:2134. */
.student-ui .words-view .card-list.words:has(.family-card) { grid-template-columns:1fr; }
.student-ui .words-view .family-card.family-expanded { grid-column:1; grid-row:auto; }
.student-ui .family-overview-layout { display:grid; gap:16px; }
.student-ui .family-members { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.student-ui .family-members .family-node { display:block; min-width:0; padding:12px; background:#eaf1f6; border:1px solid #d7dee5; border-radius:4px; }
.student-ui .family-node.selected { border-color:#012f5a; }
.student-ui .family-word { padding:0; border:0; background:none; color:#012f5a; font:inherit; font-weight:700; text-align:left; overflow-wrap:anywhere; }
.student-ui .family-group-label { color:#637383; font-size:13px; }
.student-ui .family-word-detail, .student-ui .family-phrases { border:1px solid #d7dee5; border-radius:4px; padding:12px; margin-top:8px; }
.student-ui .chained-prompt { padding:16px; background:white; border:1px solid #d7dee5; border-radius:4px; color:#012f5a; }
.student-ui .chained-prompt strong { font-size:28px; line-height:1.3; }
.student-ui .chained-prompt p { margin:8px 0 0; }
@media(min-width:900px) {
 .student-ui .family-overview-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
}
.student-ui .chained-test { max-width:954px; gap:16px; }
.student-ui .chained-test .special-type-badge { padding:0 0 12px; border:0; border-bottom:1px solid #d7dee5; border-radius:0; background:none; display:block; }
.student-ui .chained-test .special-type-badge img { display:none; }
.student-ui .chained-test .special-type-badge h2 { font-size:24px; }
.student-ui .chained-test .special-stage-content { gap:12px; }
.student-ui .chained-test .answer-input { border-color:#d7dee5; border-radius:4px; }
.student-ui .chained-test .chained-wrong-answer, .student-ui .chained-error-count { color:#bd170b; }
.student-ui .chained-test .chained-correct-answer { color:#00824b; }
.student-ui .chained-test .panel { padding:14px; }
.student-ui .chained-test .panel p { margin:6px 0; }
.student-ui .chained-status { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#637383; font-size:13px; }
.student-ui .chained-status p { margin:0; }
.student-ui .chained-status [role=timer] { color:#bd5900; }
.student-ui .family-members > .family-node:only-child { grid-column:1 / -1; }
.student-ui .chained-test .special-type-badge { width:100%; }
.student-ui .chained-test .special-question-card { padding:0; border:0; border-radius:0; background:transparent; }
.student-ui .chained-test .answer-input { min-height:90px; padding:14px; }