/* EGITIM v0.20.0 production stylesheet. Generated by concatenating the validated v0.19 cascade in exact load order. Do not add version override sheets after this file. */

/* ===== SOURCE: styles.css ===== */
:root {
  color-scheme: light dark;
  --page-bg: light-dark(#f5f2e9, #101c21);
  --surface: light-dark(#ffffff, #18272d);
  --surface-soft: light-dark(#eaf4f0, #20383b);
  --surface-warm: light-dark(#fff7df, #40361f);
  --text: light-dark(#19313b, #eff7f6);
  --text-muted: light-dark(#52656c, #b9c9cc);
  --primary: light-dark(#0b6b63, #63d4c6);
  --on-primary: light-dark(#ffffff, #0d2426);
  --accent: light-dark(#e9a928, #f4c75d);
  --positive: light-dark(#267447, #75d59a);
  --positive-soft: light-dark(#e7f5ec, #173c2a);
  --warning: light-dark(#925f00, #ffd37a);
  --warning-soft: light-dark(#fff3d7, #41351d);
  --error: light-dark(#a9332a, #ff948c);
  --error-soft: light-dark(#fff0ef, #432522);
  --border: light-dark(#d5ddd9, #33464d);
  --shadow: light-dark(rgba(25, 49, 59, 0.12), rgba(0, 0, 0, 0.3));
  --forest-light: light-dark(#b9d9c8, #2e5f55);
  --forest: light-dark(#6ea78a, #4b8a72);
  --earth: light-dark(#b58a62, #745943);
  --sky: light-dark(#ddecf0, #23404a);
  --radius-small: 10px;
  --radius-control: 12px;
  --radius-card: 18px;
  --content-width: 780px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
}

/* v0.37.0 — role-aware student and teacher dashboards */
.dashboard-loading,.dashboard-empty{padding:32px;border:1px solid #dbe6f2;border-radius:20px;background:#fff;color:#49627d}.dashboard-kicker{display:block;margin-bottom:6px;color:#507095;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.student-dashboard-v037,.teacher-dashboard-v037{display:grid;gap:24px;max-width:1240px;margin:0 auto}.student-welcome{display:flex;align-items:center;justify-content:space-between;min-height:150px;padding:28px 34px;border-radius:28px;background:linear-gradient(135deg,#173f70,#2867a8);color:#fff;box-shadow:0 18px 40px rgba(19,58,101,.16)}.student-welcome h1{margin:0 0 7px;font-size:clamp(1.9rem,3vw,2.7rem)}.student-welcome p{margin:0;color:#dbeaff}.student-welcome .dashboard-kicker{color:#9edee3}.student-welcome img{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.18))}.student-today-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;border:1px solid #d8e5f2;border-radius:24px;background:linear-gradient(135deg,#fff,#f1f8ff);box-shadow:0 12px 32px rgba(25,65,105,.09)}.student-today-card h2,.student-dash-card h2{margin:0 0 8px;color:#173b66}.student-today-card p,.student-dash-card p{margin:0 0 14px;color:#58708a}.student-summary-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.student-dash-card{padding:24px;border:1px solid #dce7f2;border-radius:22px;background:#fff}.dashboard-progress{height:11px;margin:16px 0 10px;overflow:hidden;border-radius:99px;background:#e8eff6}.dashboard-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#27a891,#54c8b5)}.profile-shortcut-card{display:flex;align-items:center;gap:18px}.profile-shortcut-card img{width:92px;height:92px;object-fit:contain;border-radius:24px;background:#eef5ff}.student-reinforce{display:flex;align-items:center;justify-content:space-between;gap:18px;border-color:#ddd6fe;background:#faf8ff}.student-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px}.student-quick-actions button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:86px;padding:20px;border:1px solid #dce7f2;border-radius:18px;background:#fff;color:#173b66;text-align:left}.student-quick-actions span{color:#647b92;font-size:.88rem}
.teacher-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 32px;border-radius:24px;background:#173b66;color:#fff}.teacher-dashboard-head h1{margin:0 0 5px;font-size:clamp(1.8rem,3vw,2.45rem)}.teacher-dashboard-head p{margin:0;color:#d8e7f7}.teacher-dashboard-head .dashboard-kicker{color:#8ed8d0}.teacher-dashboard-head nav{display:flex;flex-wrap:wrap;gap:8px}.teacher-dashboard-head nav button,.teacher-back{min-height:42px;padding:9px 14px;border:1px solid #c9dced;border-radius:12px;background:#fff;color:#173b66;font-weight:750}.teacher-section-title{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.teacher-section-title h2{margin:0;color:#173b66}.teacher-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.teacher-class-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;min-height:112px;padding:20px;border:1px solid #d7e4f0;border-radius:20px;background:#fff;color:#173b66;text-align:left;box-shadow:0 8px 22px rgba(25,65,105,.07)}.class-card-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#e4f5f2;color:#147868;font-size:1.3rem;font-weight:900}.teacher-class-card strong,.teacher-class-card small{display:block}.teacher-class-card small{margin-top:6px;color:#62788e}.teacher-student-list{display:grid;gap:10px}.teacher-student-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid #dde7f1;border-radius:16px;background:#fff}.teacher-student-row img{width:52px;height:52px;object-fit:contain;border-radius:15px;background:#eef5ff}.teacher-student-row h3{margin:0 0 4px;color:#173b66}.teacher-student-row p{margin:0;color:#687e94;font-size:.88rem}.teacher-row-progress{text-align:right}.teacher-row-progress strong,.teacher-row-progress span{display:block}.teacher-row-progress span{color:#6c8196;font-size:.78rem}.teacher-back{justify-self:start}.teacher-student-detail{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}.teacher-student-detail>section{padding:22px;border:1px solid #dce7f1;border-radius:20px;background:#fff}.teacher-profile-summary{display:flex;align-items:center;gap:18px}.teacher-profile-summary img{width:96px;height:96px;object-fit:contain;border-radius:24px;background:#edf5ff}.teacher-profile-summary h2,.teacher-learning-summary h2,.teacher-learning-tree h2,.teacher-recent h2{margin:0 0 8px;color:#173b66}.teacher-learning-tree,.teacher-recent{grid-column:1/-1}.teacher-metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.teacher-metric-row div{padding:12px;border-radius:14px;background:#f2f7fb}.teacher-metric-row strong,.teacher-metric-row span{display:block}.teacher-metric-row span{margin-top:4px;color:#61788f;font-size:.78rem}.teacher-completion-note{margin:14px 0 0;color:#536c84;font-size:.86rem}.teacher-topic{margin-top:10px;border:1px solid #dfe8f1;border-radius:14px}.teacher-topic summary{display:flex;justify-content:space-between;gap:12px;padding:14px;cursor:pointer;font-weight:750}.teacher-topic ul{display:grid;gap:8px;margin:0;padding:0 14px 14px;list-style:none}.teacher-topic li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:8px;border-top:1px solid #edf1f5}.teacher-topic em{font-style:normal;font-size:.82rem}.status-completed{color:#147868}.status-in_progress{color:#8a5d00}.status-not_started{color:#687e94}.authenticated-teacher .primary-navigation>:not(#teacher-nav-item):not([data-utility="help"]):not(.sidebar-divider),.authenticated-teacher .sidebar-progress-card,.authenticated-teacher [data-account-action="profile"],.authenticated-teacher [data-account-action="student"]{display:none!important}
@media(max-width:820px){.student-summary-grid,.teacher-class-grid,.teacher-student-detail{grid-template-columns:1fr}.teacher-learning-tree,.teacher-recent{grid-column:auto}.student-welcome,.student-today-card,.student-reinforce,.teacher-dashboard-head{align-items:flex-start;flex-direction:column}.student-welcome img{position:absolute;right:28px;width:90px;height:90px}.teacher-student-row{grid-template-columns:48px 1fr}.teacher-row-progress,.teacher-student-row .secondary-button{grid-column:2;text-align:left}.teacher-metric-row{grid-template-columns:1fr}.student-quick-actions{grid-template-columns:1fr}}
@media(max-width:480px){.student-welcome,.student-today-card,.student-dash-card,.teacher-dashboard-head{padding:20px}.student-welcome img{width:74px;height:74px}.profile-shortcut-card{align-items:flex-start}.teacher-student-row{gap:10px;padding:12px}}
.student-welcome{position:relative}
.assignment-priority{border-color:#f0c86e;background:linear-gradient(135deg,#fffdf5,#fff5d9)}.assignment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.assignment-card,.assignment-detail,.assignment-form{padding:22px;border:1px solid #dce6f0;border-radius:20px;background:#fff}.assignment-card h3{margin:4px 0 8px;color:#173b66}.assignment-card p{color:#5d748b}.student-assignments{display:grid;gap:28px}.assignment-form{display:grid;gap:16px;max-width:820px}.assignment-form>label,.assignment-form fieldset{display:grid;gap:7px;color:#243f61;font-weight:750}.assignment-form input[type="date"],.assignment-form select,.assignment-form textarea{min-height:46px;padding:10px;border:1px solid #bfd0e0;border-radius:11px;background:#fff;color:#173b66;font:inherit}.assignment-form textarea{min-height:92px;resize:vertical}.assignment-form fieldset{padding:14px;border:1px solid #dce6f0;border-radius:14px}.assignment-form fieldset label,.assignment-students label{display:flex;align-items:center;gap:8px;font-weight:600}.assignment-students{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:8px}.assignment-form-status{min-height:20px;color:#9a3434}.assignment-detail{display:grid;gap:16px}
@media(max-width:760px){.assignment-grid,.assignment-students{grid-template-columns:1fr}}
.submission-panel{margin-top:16px;border:1px solid #d8e7e3;border-radius:16px;background:#f8fcfb}.submission-panel summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;color:#245a52;cursor:pointer;font-weight:800}.submission-panel> :not(summary){margin-left:16px;margin-right:16px}.submission-panel textarea,.review-form textarea{display:block;width:calc(100% - 32px);min-height:110px;padding:12px;border:1px solid #b9cec9;border-radius:12px;background:#fff;color:#173b66;font:inherit;resize:vertical}.submission-label{display:block;margin-top:4px;margin-bottom:7px;color:#274c63;font-weight:800}.submission-panel button{margin-top:12px;margin-right:8px}.submission-note{min-height:20px;margin-bottom:13px;color:#315f58;font-size:.84rem}.submission-feedback{padding:12px;border-radius:12px;background:#fff5d9;color:#5b4a20}.submission-feedback p{margin:4px 0 0;color:#5b4a20}.review-queue{display:grid;gap:12px;margin:0;padding:0;list-style:none}.review-queue li{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid #dce7f1;border-radius:18px;background:#fff}.review-queue h2{margin:2px 0 4px;color:#173b66;font-size:1.08rem}.review-queue p{margin:0;color:#647b92}.review-detail{display:grid;gap:18px;padding:24px;border:1px solid #dce7f1;border-radius:20px;background:#fff}.review-detail h2{margin:0 0 8px;color:#173b66}.review-evidence{padding:18px;border-radius:16px;background:#f4f8fc}.written-evidence{white-space:pre-wrap;line-height:1.7}.review-history{display:grid;gap:10px;padding-left:24px}.review-history li{padding:10px 12px;border-left:3px solid #79b6aa;background:#f8fbfa}.review-history p{margin:4px 0 0}.review-form{display:grid;gap:9px;padding-top:16px;border-top:1px solid #e1e8ef}.review-form label{font-weight:800}.review-form textarea{width:100%}.review-form div{display:flex;flex-wrap:wrap;gap:10px}.review-evidence audio{display:block;width:min(100%,560px);margin-top:14px}
@media(max-width:680px){.submission-panel summary,.review-queue li{align-items:flex-start;flex-direction:column}.review-queue li button,.review-form button{width:100%}.review-form div{display:grid}.review-detail{padding:18px}}
/* end v0.37.0 dashboard layer */

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--page-bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
}

button,
input,
textarea,
select { font: inherit; }

button { touch-action: manipulation; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 24px var(--shadow);
}

.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px 13px 13px 5px;
  background: var(--primary);
  color: var(--on-primary);
}

.brand-mark svg { width: 24px; height: 24px; }
.brand-mark path { fill: currentColor; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.brand strong,
.brand small { display: block; }
.brand strong { font-size: 1.04rem; font-weight: 700; letter-spacing: -0.02em; }
.brand small { color: var(--text-muted); font-size: 0.8rem; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.offline-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--positive);
  font-size: 0.86rem;
  font-weight: 650;
}

.offline-status span { font-size: 0.7rem; }
.offline-status.is-online { color: var(--text-muted); }

.role-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-control);
  background: var(--page-bg);
}

.role-button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 0 15px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  font-weight: 650;
}

.role-button.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 2px 8px var(--shadow);
}

.main-layout {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
}

.lesson-sidebar {
  padding: 26px 20px 22px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.course-position { margin-bottom: 24px; }
.eyebrow { display: block; color: var(--primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.course-position h1 { margin: 5px 0 3px; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.02em; }
.course-position p { margin: 0; color: var(--text-muted); font-size: 0.86rem; }

.progress-block { margin-bottom: 20px; }
.progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--text-muted); font-size: 0.8rem; }
.progress-label strong { color: var(--text); font-weight: 700; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--border); }
.progress-fill { height: 100%; width: 12.5%; border-radius: inherit; background: var(--primary); transition: width 180ms ease; }

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.step-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius-control);
  color: var(--text-muted);
}

.step-item.is-current { background: var(--surface-soft); color: var(--text); font-weight: 650; }
.step-item.is-complete { color: var(--positive); }

.step-marker {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.78rem;
}

.step-item.is-current .step-marker { border-color: transparent; background: var(--primary); color: var(--on-primary); }
.step-item.is-complete .step-marker { border-color: transparent; background: var(--positive-soft); }

.sidebar-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.sidebar-note p { margin: 0; }
.sidebar-note-icon { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; font-weight: 700; }

.student-workspace,
.teacher-workspace { min-width: 0; padding: 18px clamp(16px, 4vw, 48px) 34px; }

.workspace-toolbar {
  max-width: var(--content-width);
  margin: 0 auto 12px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.text-button {
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lesson-screen { max-width: var(--content-width); margin: 0 auto; }

.screen-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 12px 34px var(--shadow);
}

.screen-content { padding: clamp(20px, 4vw, 34px); }
.screen-kicker { margin: 0 0 7px; color: var(--primary); font-size: 0.84rem; font-weight: 700; }
.screen-title { margin: 0 0 9px; font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1.16; letter-spacing: -0.035em; }
.screen-lead { max-width: 650px; margin: 0; color: var(--text-muted); font-size: 1.08rem; }

.hero-illustration {
  min-height: 250px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sky);
}

.hero-illustration svg { display: block; width: 100%; height: 270px; }

.opening-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr);
  gap: 22px;
  align-items: center;
}

.opening-art {
  min-height: 300px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--surface-soft);
}

.opening-art svg { width: min(270px, 82%); height: auto; }
.opening-art .desk { fill: var(--earth); }
.opening-art .bottle { fill: var(--primary); }
.opening-art .note { fill: var(--surface-warm); stroke: var(--accent); }
.opening-art .pencil { fill: var(--accent); }
.opening-art .line { stroke: var(--text); opacity: .52; }

.screen-section { margin-top: 24px; }
.instruction { margin: 0 0 14px; font-size: 1.05rem; font-weight: 650; }
.supporting-text { color: var(--text-muted); }

.choice-grid { display: grid; gap: 11px; }

.choice-button {
  min-height: 58px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.choice-button:hover { background: var(--surface-soft); }
.choice-button[aria-pressed="true"] { border-color: var(--primary); background: var(--surface-soft); }
.choice-button.is-correct { border-color: var(--positive); background: var(--positive-soft); }
.choice-button.is-review { border-color: var(--warning); background: var(--warning-soft); }

.choice-marker {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 750;
}

.feedback-box {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--radius-control);
  background: var(--positive-soft);
  color: var(--positive);
  font-weight: 600;
}

.feedback-box.is-review { background: var(--warning-soft); color: var(--warning); }
.feedback-symbol { flex: 0 0 auto; font-weight: 800; }

.audio-player {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 15px;
  background: var(--surface-soft);
}

.audio-button {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 15px;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  font-size: 1.2rem;
}

.audio-title { margin: 0; font-weight: 700; }
.audio-status { margin: 2px 0 0; color: var(--text-muted); font-size: 0.88rem; }
.transcript-button { min-height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; background: var(--surface); color: var(--text); cursor: pointer; }

.transcript {
  margin-top: 14px;
  padding: 16px;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--surface-warm);
  font-size: 1.04rem;
}

.classification-list { display: grid; gap: 13px; }
.classification-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(220px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.classification-row:last-child { border-bottom: 0; }
.classification-item { font-weight: 700; }
.classification-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.classification-choice { min-height: 46px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.classification-choice[aria-pressed="true"] { background: var(--surface-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }

.quiz-stack { display: grid; gap: 20px; }
.quiz-item { min-width: 0; margin: 0; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--border); }
.quiz-item:last-child { padding-bottom: 0; border-bottom: 0; }
.quiz-item legend { width: 100%; padding: 0; }
.quiz-number { margin: 0 0 4px; color: var(--primary); font-size: .8rem; font-weight: 700; }
.quiz-prompt { margin: 0 0 11px; font-weight: 700; }
.quiz-options { display: grid; gap: 8px; }
.quiz-option { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.quiz-option:has(input:checked) { background: var(--surface-soft); border-color: var(--primary); }
.quiz-option input { width: 20px; height: 20px; accent-color: var(--primary); }

.self-check-list { display: grid; gap: 10px; }
.self-check { min-height: 54px; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.self-check:has(input:checked) { background: var(--surface-soft); border-color: var(--primary); }
.self-check input { width: 22px; height: 22px; accent-color: var(--primary); }

.summary-panel { display: grid; gap: 16px; }
.summary-success { padding: 18px; border-radius: 15px; background: var(--positive-soft); color: var(--positive); }
.summary-success strong { display: block; margin-bottom: 3px; font-size: 1.1rem; }
.summary-next { padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.summary-next span { display: block; color: var(--text-muted); font-size: .82rem; }
.summary-next strong { display: block; margin-top: 3px; }

.lesson-navigation {
  max-width: var(--content-width);
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.primary-button,
.secondary-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 700;
}

.primary-button { border: 0; background: var(--primary); color: var(--on-primary); }
.secondary-button { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.primary-button:disabled,
.secondary-button:disabled { opacity: .42; cursor: not-allowed; }

.focus-mode .app-header,
.focus-mode .lesson-sidebar,
.focus-mode .workspace-toolbar { display: none; }
.focus-mode .main-layout { display: block; }
.focus-mode .student-workspace { max-width: 940px; margin: 0 auto; padding-top: 40px; }

.teacher-workspace { max-width: 1180px; width: 100%; margin: 0 auto; }
.teacher-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 8px 0 22px; }
.teacher-kicker { margin: 0 0 5px; color: var(--primary); font-weight: 700; }
.teacher-header h1 { margin: 0 0 5px; font-size: 1.8rem; line-height: 1.2; letter-spacing: -0.025em; }
.teacher-header p { margin: 0; color: var(--text-muted); }
.teacher-action-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }

.teacher-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; align-items: start; }
.teacher-column { display: grid; gap: 18px; }
.teacher-card { padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.teacher-card h2 { margin: 0 0 14px; font-size: 1.08rem; }

.timeline-list { display: grid; gap: 13px; }
.timeline-row { display: grid; grid-template-columns: 58px 1fr; gap: 12px; }
.timeline-time { color: var(--primary); font-weight: 750; }
.timeline-row strong { display: block; }
.timeline-row p { margin: 2px 0 0; color: var(--text-muted); }

.outcome-card { margin-bottom: 10px; padding: 13px; border-radius: 11px; background: var(--surface-warm); }
.outcome-card:last-child { margin-bottom: 0; }
.outcome-card code { color: var(--warning); font-weight: 750; }
.outcome-card p { margin: 5px 0 0; }

.plain-list { margin: 0; padding-left: 20px; }
.plain-list li + li { margin-top: 7px; }

.evidence-list { display: grid; gap: 0; }
.evidence-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.evidence-row:last-child { border-bottom: 0; }
.evidence-state { color: var(--positive); font-weight: 700; text-align: right; }

.teacher-source { overflow-wrap: anywhere; color: var(--text-muted); font-size: .84rem; }
.teacher-source a { color: var(--primary); }

.teacher-book-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 0 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--border); }
.teacher-book-overview div { min-height: 78px; display: flex; flex-direction: column; justify-content: center; padding: 13px 18px; background: var(--surface); }
.teacher-book-overview strong { color: var(--primary); font-size: 1.35rem; }
.teacher-book-overview span { color: var(--text-muted); font-size: .76rem; }
.teacher-current-lesson { margin-bottom: 18px; padding: 18px 20px; border-left: 5px solid var(--primary); border-radius: 0 14px 14px 0; background: var(--surface-soft); }
.teacher-current-lesson > span { color: var(--primary); font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.teacher-current-lesson h2 { margin: 4px 0; font-size: 1.35rem; }
.teacher-current-lesson p { margin: 0; color: var(--text-muted); }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: min(360px, calc(100vw - 36px));
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--text);
  color: var(--page-bg);
  box-shadow: 0 12px 30px var(--shadow);
}

.fatal-message { margin: 20px; padding: 16px; border-radius: 12px; background: var(--error-soft); color: var(--error); }

@media (max-width: 860px) {
  .app-header { align-items: flex-start; }
  .header-actions { align-items: flex-end; flex-direction: column-reverse; gap: 7px; }
  .main-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 18px; }
  .course-position { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; margin-bottom: 12px; }
  .course-position h1 { margin: 0; }
  .progress-block { margin-bottom: 12px; }
  .step-list { grid-template-columns: repeat(8, minmax(34px, 1fr)); gap: 4px; }
  .step-item { justify-content: center; min-height: 38px; padding: 4px; }
  .step-item span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sidebar-note { display: none; }
  .opening-panel { grid-template-columns: 1fr; }
  .opening-art { min-height: 220px; }
  .teacher-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { font-size: 16px; }
  .app-header { position: static; flex-direction: column; align-items: stretch; }
  .header-actions { align-items: stretch; flex-direction: column-reverse; }
  .offline-status { justify-content: center; }
  .role-switch { width: 100%; }
  .role-button { flex: 1; }
  .student-workspace,
  .teacher-workspace { padding: 14px 12px 26px; }
  .workspace-toolbar { gap: 12px; justify-content: space-between; }
  .screen-content { padding: 19px 16px; }
  .screen-lead { font-size: 1rem; }
  .hero-illustration { min-height: 190px; }
  .hero-illustration svg { height: 205px; }
  .audio-player { grid-template-columns: 52px 1fr; }
  .transcript-button { grid-column: 1 / -1; width: 100%; }
  .classification-row { grid-template-columns: 1fr; gap: 8px; }
  .lesson-navigation { flex-direction: column-reverse; }
  .primary-button,
  .secondary-button { width: 100%; min-height: 52px; }
  .teacher-header { flex-direction: column; }
  .teacher-action-row { width: 100%; justify-content: stretch; }
  .teacher-action-row button { flex: 1; }
}

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

@media print {
  :root { color-scheme: light; }
  .app-header,
  .lesson-sidebar,
  .student-workspace,
  .teacher-action-row,
  .toast { display: none !important; }
  .main-layout { display: block; }
  .teacher-workspace { display: block !important; max-width: none; padding: 0; }
  .teacher-card { break-inside: avoid; box-shadow: none; }
  .teacher-grid { grid-template-columns: 1fr 1fr; }
  body { background: #fff; color: #19313b; }
}

@supports not (color: light-dark(white, black)) {
  :root {
    --page-bg: #f5f2e9;
    --surface: #ffffff;
    --surface-soft: #eaf4f0;
    --surface-warm: #fff7df;
    --text: #19313b;
    --text-muted: #52656c;
    --primary: #0b6b63;
    --on-primary: #ffffff;
    --accent: #e9a928;
    --positive: #267447;
    --positive-soft: #e7f5ec;
    --warning: #925f00;
    --warning-soft: #fff3d7;
    --error: #a9332a;
    --error-soft: #fff0ef;
    --border: #d5ddd9;
    --shadow: rgba(25, 49, 59, 0.12);
    --forest-light: #b9d9c8;
    --forest: #6ea78a;
    --earth: #b58a62;
    --sky: #ddecf0;
  }
}

/* Tam yıllık dijital kitap kabuğu */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.menu-button span { width: 19px; height: 2px; border-radius: 99px; background: currentColor; }

.header-book-position {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.header-book-position span,
.header-book-position strong { display: block; }
.header-book-position span { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.header-book-position strong { margin-top: 1px; font-size: .88rem; }

.book-layout {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
}

.book-sidebar {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.primary-navigation {
  display: grid;
  gap: 4px;
  padding: 15px 14px;
  border-bottom: 1px solid var(--border);
}

.primary-nav-item {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  font-weight: 650;
}

.primary-nav-item:hover { background: var(--page-bg); color: var(--text); }
.primary-nav-item.is-active { background: var(--surface-soft); color: var(--primary); }
.nav-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; }
.primary-nav-item.is-active .nav-icon { border-color: var(--primary); }

.contents-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 10px;
}

.contents-heading strong { display: block; margin-top: 3px; font-size: .9rem; }
.compact-icon-button { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); cursor: pointer; }

.catalog-search {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 10px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--page-bg);
  color: var(--text-muted);
}

.catalog-search:focus-within { border-color: var(--primary); outline: 2px solid color-mix(in srgb, var(--primary) 20%, transparent); }
.catalog-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .88rem; }
.catalog-search input::placeholder { color: var(--text-muted); }

.catalog-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 18px; scrollbar-width: thin; }
.tree-part-label { margin: 14px 9px 6px; color: var(--text-muted); font-size: .69rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.tree-unit { margin-bottom: 5px; }
.tree-unit-toggle {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.tree-unit-toggle:hover,
.tree-unit-toggle.is-current { background: var(--page-bg); }
.tree-unit-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-soft); color: var(--primary); font-size: .72rem; font-weight: 800; }
.tree-unit-copy { min-width: 0; }
.tree-unit-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.tree-unit-copy small { display: block; color: var(--text-muted); font-size: .7rem; }
.tree-chevron { color: var(--text-muted); transition: transform 160ms ease; }
.tree-unit-toggle[aria-expanded="true"] .tree-chevron { transform: rotate(90deg); }
.tree-unit-content { padding: 3px 0 8px 15px; }
.tree-topic { margin: 9px 6px 4px 18px; color: var(--text-muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.tree-lesson {
  position: relative;
  min-height: 39px;
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}

.tree-lesson:hover { background: var(--page-bg); color: var(--text); }
.tree-lesson.is-selected { background: var(--surface-soft); color: var(--primary); }
.tree-lesson.is-available { color: var(--text); }
.tree-lesson-sequence { font-size: .7rem; font-variant-numeric: tabular-nums; }
.tree-lesson-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.lesson-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.tree-lesson.is-available .lesson-status-dot { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.catalog-empty { padding: 20px 10px; color: var(--text-muted); font-size: .86rem; text-align: center; }

.sidebar-status-card { padding: 13px 17px 15px; border-top: 1px solid var(--border); background: var(--surface); }
.sidebar-status-card .offline-status { justify-content: flex-start; }
.sidebar-status-card small { display: block; margin-top: 4px; color: var(--text-muted); font-size: .7rem; }

.sidebar-scrim { display: none; }

.page-content { min-width: 0; }
.page-view { min-height: calc(100vh - 72px); }
.page-view[hidden] { display: none !important; }

.home-view,
.book-view,
.progress-view { padding: clamp(24px, 4vw, 54px); }

.home-view { max-width: 1320px; width: 100%; margin: 0 auto; }
.home-hero {
  position: relative;
  min-height: 410px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  overflow: hidden;
  padding: clamp(30px, 5vw, 64px);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--surface-soft), var(--sky));
}

.home-hero::before { content: ""; position: absolute; width: 280px; height: 280px; right: -90px; top: -120px; border: 1px solid var(--forest-light); border-radius: 50%; opacity: .65; }
.home-hero-copy { position: relative; z-index: 1; }
.home-kicker { margin: 0 0 12px; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.home-hero h1 { margin: 0; max-width: 720px; font-size: clamp(2.25rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.055em; }
.home-hero-copy > p:not(.home-kicker) { max-width: 650px; margin: 20px 0 0; color: var(--text-muted); font-size: clamp(1rem, 1.6vw, 1.18rem); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.large-button { min-height: 54px; padding-inline: 23px; }
.home-resume { min-height: 24px; margin-top: 15px; color: var(--text-muted); font-size: .83rem; }

.book-cover-visual {
  position: relative;
  width: min(310px, 86%);
  aspect-ratio: .74;
  justify-self: center;
  transform: rotate(3deg);
  border-radius: 8px 20px 20px 8px;
  background: #0b6b63;
  box-shadow: -14px 16px 0 rgba(25,49,59,.12), 0 28px 55px rgba(25,49,59,.22);
  color: #fff;
}

.cover-spine { position: absolute; inset: 0 auto 0 0; width: 22px; border-right: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.08); border-radius: 8px 0 0 8px; }
.cover-content { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 31px 26px 20px 49px; }
.cover-label { align-self: flex-start; padding: 5px 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 7px; font-size: .72rem; }
.cover-grade { margin-top: 35px; font-size: 4.8rem; font-weight: 800; line-height: .9; color: #f4c75d; }
.cover-content strong { margin-top: 6px; font-size: 2.4rem; letter-spacing: -.04em; }
.cover-content small { margin-top: 3px; color: rgba(255,255,255,.75); }
.cover-content svg { width: 100%; margin-top: auto; overflow: visible; }
.cover-content svg path:first-child { fill: #b9d9c8; opacity: .88; }
.cover-content svg circle { fill: #f4c75d; }
.cover-content svg path:last-child { stroke: #fff; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

.book-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0 44px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.book-facts div { min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 16px 24px; border-right: 1px solid var(--border); }
.book-facts div:last-child { border-right: 0; }
.book-facts strong { font-size: 1.42rem; color: var(--primary); }
.book-facts span { color: var(--text-muted); font-size: .82rem; }

.home-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 17px; }
.home-section-heading p { margin: 0; }
.home-section-heading h2 { margin: 5px 0 0; font-size: 1.65rem; }
.home-unit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-unit-card { min-height: 178px; display: flex; flex-direction: column; padding: 19px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.home-unit-card:hover { border-color: var(--forest); box-shadow: 0 8px 24px var(--shadow); }
.unit-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.unit-kind { color: var(--primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.unit-range { color: var(--text-muted); font-size: .72rem; }
.home-unit-card h3 { margin: 18px 0 5px; font-size: 1.04rem; }
.home-unit-card p { margin: 0; color: var(--text-muted); font-size: .82rem; }
.unit-card-progress { height: 5px; margin-top: auto; overflow: hidden; border-radius: 99px; background: var(--border); }
.unit-card-progress span { display: block; height: 100%; background: var(--positive); }

.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: 1120px; margin: 0 auto 25px; }
.page-heading p { margin: 0; color: var(--text-muted); }
.page-heading .eyebrow { color: var(--primary); }
.page-heading h1 { margin: 5px 0 7px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.045em; }
.period-switch { display: flex; flex: 0 0 auto; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.period-button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 700; }
.period-button.is-active { background: var(--surface-soft); color: var(--primary); }

.book-unit-tabs { max-width: 1120px; margin: 0 auto 17px; display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 8px; scrollbar-width: thin; }
.book-unit-tab { min-height: 43px; flex: 0 0 auto; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text-muted); cursor: pointer; font-weight: 650; }
.book-unit-tab.is-active { border-color: var(--primary); background: var(--surface-soft); color: var(--primary); }

.book-unit-detail { max-width: 1120px; margin: 0 auto; }
.unit-detail-header { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 19px; align-items: center; padding: 23px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.unit-detail-number { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 17px; background: var(--primary); color: var(--on-primary); font-size: 1.4rem; font-weight: 800; }
.unit-detail-copy small { color: var(--primary); font-weight: 750; }
.unit-detail-copy h2 { margin: 3px 0 4px; font-size: 1.55rem; }
.unit-detail-copy p { margin: 0; color: var(--text-muted); }
.unit-detail-count { color: var(--text-muted); text-align: right; font-size: .82rem; }
.unit-detail-count strong { display: block; color: var(--text); font-size: 1.25rem; }
.module-stack { display: grid; gap: 13px; margin-top: 15px; }
.module-card { overflow: hidden; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.module-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.module-heading h3 { margin: 0; font-size: 1rem; }
.module-heading span { color: var(--text-muted); font-size: .78rem; }
.module-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.book-lesson-row { min-height: 67px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 15px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.book-lesson-row:nth-child(odd) { border-right: 1px solid var(--border); }
.book-lesson-row:hover { background: var(--page-bg); }
.book-lesson-row.is-available { background: var(--positive-soft); }
.book-lesson-number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--page-bg); color: var(--text-muted); font-size: .76rem; font-weight: 750; }
.book-lesson-row.is-available .book-lesson-number { background: var(--positive); color: #fff; }
.book-lesson-copy strong { display: block; font-size: .88rem; }
.book-lesson-copy small { display: block; margin-top: 2px; color: var(--text-muted); font-size: .7rem; }
.book-lesson-state { color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.book-lesson-row.is-available .book-lesson-state { color: var(--positive); }

.planned-banner { margin-bottom: 15px; padding: 15px 17px; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 13px; background: var(--surface-warm); }
.planned-banner strong { display: block; }
.planned-banner p { margin: 3px 0 0; color: var(--text-muted); font-size: .85rem; }

.progress-overview { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; max-width: 1120px; margin: 0 auto 18px; }
.progress-stat-card { min-height: 145px; padding: 21px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.progress-stat-card span { color: var(--text-muted); font-size: .78rem; }
.progress-stat-card strong { display: block; margin: 7px 0 4px; color: var(--primary); font-size: 2rem; }
.progress-stat-card p { margin: 0; color: var(--text-muted); font-size: .82rem; }
.progress-detail-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }
.progress-card { padding: 21px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.progress-card h2 { margin: 0 0 15px; font-size: 1.08rem; }
.journey-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 45px; align-items: center; gap: 11px; min-height: 43px; }
.journey-row span { font-size: .8rem; }
.journey-bar { height: 7px; overflow: hidden; border-radius: 99px; background: var(--border); }
.journey-bar i { display: block; height: 100%; background: var(--positive); }
.journey-value { text-align: right; color: var(--text-muted); }

.student-workspace { max-width: none; width: 100%; }
.lesson-page-header { max-width: var(--content-width); margin: 0 auto 18px; }
.lesson-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .82rem; }
.lesson-breadcrumb .text-button { min-height: 35px; }
.lesson-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 7px; }
.lesson-title-row h1 { margin: 4px 0 0; font-size: 2rem; line-height: 1.1; letter-spacing: -.035em; }
.lesson-title-row .workspace-toolbar { margin: 0; flex: 0 0 auto; }
.lesson-route-card { margin-top: 16px; padding: 14px 16px 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.lesson-route-card .progress-block { margin-bottom: 11px; }
.lesson-step-list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.lesson-step-list .step-item { min-width: 0; justify-content: center; padding: 5px 3px; text-align: center; font-size: .69rem; }
.lesson-step-list .step-marker { width: 25px; height: 25px; }

.focus-mode .book-sidebar,
.focus-mode .sidebar-scrim,
.focus-mode .lesson-page-header { display: none !important; }
.focus-mode .book-layout { display: block; }
.focus-mode .student-workspace { max-width: 940px; margin: 0 auto; padding-top: 40px; }

@media (max-width: 1100px) {
  .book-layout { grid-template-columns: 276px minmax(0, 1fr); }
  .home-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-book-position { display: none; }
}

@media (max-width: 860px) {
  .menu-button { display: grid; }
  .app-header { align-items: center; }
  .header-actions { flex-direction: row; align-items: center; }
  .book-layout { display: block; }
  .book-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: min(330px, 88vw);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform 190ms ease;
    box-shadow: 15px 0 40px rgba(0,0,0,.22);
  }
  .book-sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(10,25,29,.46); }
  .sidebar-scrim[hidden] { display: none; }
  .page-view { min-height: calc(100vh - 72px); }
  .lesson-step-list { grid-template-columns: repeat(8, minmax(34px, 1fr)); }
  .lesson-step-list .step-item span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (max-width: 720px) {
  .home-hero { grid-template-columns: 1fr; padding: 30px 22px; }
  .book-cover-visual { width: min(230px, 72%); }
  .book-facts { grid-template-columns: repeat(2, 1fr); }
  .book-facts div:nth-child(2) { border-right: 0; }
  .book-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .home-unit-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .module-lessons { grid-template-columns: 1fr; }
  .book-lesson-row:nth-child(odd) { border-right: 0; }
  .unit-detail-header { grid-template-columns: 58px minmax(0, 1fr); }
  .unit-detail-number { width: 56px; height: 56px; border-radius: 14px; }
  .unit-detail-count { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 7px; }
  .progress-overview,
  .progress-detail-grid { grid-template-columns: 1fr; }
  .lesson-title-row { align-items: flex-start; flex-direction: column; }
  .lesson-title-row .workspace-toolbar { width: 100%; justify-content: space-between; }
}

@media (max-width: 560px) {
  .app-header { min-height: 68px; flex-direction: row; align-items: center; padding: 10px 12px; }
  .brand { flex: 1; }
  .brand small { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .role-switch { width: auto; }
  .role-button { min-height: 39px; padding: 0 10px; font-size: .82rem; }
  .home-view,
  .book-view,
  .progress-view { padding: 18px 12px 30px; }
  .home-hero { min-height: 0; border-radius: 19px; }
  .home-hero h1 { font-size: 2.25rem; }
  .home-actions { flex-direction: column; }
  .home-actions button { width: 100%; }
  .book-cover-visual { width: 205px; }
  .cover-grade { margin-top: 22px; font-size: 3.8rem; }
  .cover-content strong { font-size: 2rem; }
  .book-facts div { min-height: 78px; padding: 12px 15px; }
  .home-section-heading { align-items: flex-start; flex-direction: column; }
  .home-unit-card { min-height: 155px; }
  .period-switch { width: 100%; }
  .period-button { flex: 1; }
  .unit-detail-header { padding: 16px; gap: 12px; }
  .book-lesson-row { grid-template-columns: 37px minmax(0, 1fr); }
  .book-lesson-state { grid-column: 2; }
  .student-workspace { padding-top: 16px; }
  .lesson-title-row h1 { font-size: 1.65rem; }
  .lesson-route-card { padding-inline: 10px; }
  .lesson-step-list { gap: 2px; }
  .lesson-step-list .step-marker { width: 23px; height: 23px; }
  .teacher-book-overview { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .book-sidebar,
  .sidebar-scrim,
  .menu-button,
  .home-view,
  .book-view,
  .progress-view { display: none !important; }
}

/* v0.3 — 3. sınıfa özel temiz ders portalı */
body { background: light-dark(#f4f6f8, #101c21); }
.app-header { min-height: 70px; padding-block: 10px; background: var(--surface); }
.book-layout { grid-template-columns: 254px minmax(0, 1fr); min-height: calc(100vh - 70px); }
.book-sidebar { top: 70px; height: calc(100vh - 70px); }
.header-search {
  width: min(520px, 42vw);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page-bg);
  color: var(--text-muted);
}
.header-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.header-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.header-search input::placeholder { color: var(--text-muted); }
.grade-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--primary); background: var(--surface-soft); font-size: .82rem; font-weight: 750; white-space: nowrap; }

.sidebar-profile { display: flex; align-items: center; gap: 11px; margin: 15px 14px 5px; padding: 13px; border-radius: 13px; background: var(--surface-soft); }
.profile-avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: var(--primary); color: var(--on-primary); font-size: 1.2rem; font-weight: 800; }
.sidebar-profile strong,
.sidebar-profile small { display: block; }
.sidebar-profile strong { font-size: .9rem; }
.sidebar-profile small { margin-top: 1px; color: var(--text-muted); font-size: .68rem; }
.primary-navigation { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 22px; border-bottom: 0; align-content: start; }
.nav-section-label { margin: 18px 10px 5px; color: var(--text-muted); font-size: .64rem; font-weight: 800; letter-spacing: .08em; }
.primary-nav-item { min-height: 45px; padding-inline: 10px; }
.primary-nav-item .nav-arrow { margin-left: auto; color: var(--text-muted); font-size: 1.2rem; }
.subject-nav-icon { background: #0b6b63; border-color: #0b6b63; color: #fff; font-weight: 800; }
.subject-subnavigation { display: grid; gap: 2px; margin: 1px 0 4px 47px; padding-left: 10px; border-left: 1px solid var(--border); }
.subject-subnav-item { min-height: 34px; padding: 4px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); text-align: left; cursor: pointer; font-size: .76rem; }
.subject-subnav-item:hover,
.subject-subnav-item.is-active { color: var(--primary); background: var(--surface-soft); font-weight: 700; }

.home-view { max-width: 1240px; padding-top: clamp(26px, 4vw, 48px); }
.dashboard-greeting { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.dashboard-greeting p { margin: 0; color: var(--text-muted); }
.dashboard-greeting .eyebrow { color: var(--primary); }
.dashboard-greeting h1 { margin: 5px 0 5px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.06; letter-spacing: -.045em; }
.school-year { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-muted); font-size: .76rem; }
.dashboard-feature-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 15px; }
.continue-card { min-height: 285px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr); overflow: hidden; border-radius: 21px; background: #0b6b63; color: #fff; box-shadow: 0 12px 30px rgba(11,107,99,.18); }
.continue-card-copy { position: relative; z-index: 2; padding: clamp(23px, 4vw, 37px); }
.continue-label { font-size: .7rem; font-weight: 800; letter-spacing: .09em; color: #bfe3d9; }
.continue-card h2 { margin: 8px 0 8px; font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.035em; }
.continue-card p { max-width: 490px; margin: 0; color: rgba(255,255,255,.78); }
.continue-progress { max-width: 410px; display: flex; align-items: center; gap: 11px; margin-top: 24px; }
.continue-progress > span { height: 7px; flex: 1; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.22); }
.continue-progress i { display: block; height: 100%; border-radius: inherit; background: #f4c75d; }
.continue-progress strong { font-size: .73rem; white-space: nowrap; }
.light-primary-button { min-height: 48px; margin-top: 16px; padding: 0 18px; border: 0; border-radius: 11px; background: #fff; color: #0b6b63; cursor: pointer; font-weight: 800; }
.continue-card .home-resume { min-height: 0; margin-top: 8px; color: rgba(255,255,255,.68); font-size: .72rem; }
.continue-illustration { position: relative; display: grid; place-items: end center; overflow: hidden; background: rgba(255,255,255,.055); }
.continue-illustration::before { content: ""; position: absolute; width: 235px; height: 235px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; top: -72px; right: -63px; }
.continue-illustration svg { position: relative; width: 95%; margin-bottom: 10px; }
.continue-illustration circle { fill: #f4c75d; }
.continue-illustration path:first-of-type { fill: #b9d9c8; }
.continue-illustration path:last-of-type { stroke: #fff; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; }

.subject-card { min-height: 285px; display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--border); border-radius: 21px; background: var(--surface); cursor: pointer; }
.subject-card:hover { border-color: var(--primary); box-shadow: 0 10px 28px var(--shadow); }
.subject-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.subject-letter { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 15px; background: var(--surface-soft); color: var(--primary); font-size: 1.7rem; font-weight: 850; }
.subject-badge { padding: 5px 8px; border-radius: 7px; background: var(--page-bg); color: var(--text-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; }
.subject-card h2 { margin: 22px 0 5px; font-size: 1.65rem; }
.subject-card p { margin: 0; color: var(--text-muted); font-size: .88rem; }
.subject-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: var(--text-muted); font-size: .76rem; }
.round-arrow { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); cursor: pointer; }

.home-section-heading { margin-top: 34px; }
.compact-heading { margin-top: 38px; }
.discovery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.discovery-card { min-height: 104px; display: grid; grid-template-columns: 50px minmax(0, 1fr) 24px; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.discovery-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.discovery-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; font-size: .86rem; font-weight: 850; }
.theme-discovery .discovery-icon { background: #e8f4ff; color: #276783; }
.skill-discovery .discovery-icon { background: #fff0da; color: #8a5c0d; }
.activity-discovery .discovery-icon { background: #e7f5ec; color: #267447; }
.discovery-card strong,
.discovery-card small { display: block; }
.discovery-card strong { font-size: .93rem; }
.discovery-card small { margin-top: 3px; color: var(--text-muted); font-size: .72rem; }
.discovery-card b { color: var(--text-muted); }
.compact-unit-grid { grid-template-columns: repeat(4, 1fr); }
.compact-unit-grid .home-unit-card { min-height: 158px; }

.subject-page-hero { max-width: 1120px; display: grid; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 18px; margin: 0 auto 17px; padding: 22px 25px; border-radius: 18px; background: linear-gradient(110deg, #0b6b63, #12534f); color: #fff; }
.subject-page-letter { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.14); font-size: 2rem; font-weight: 850; }
.subject-page-hero .eyebrow { color: #bfe3d9; }
.subject-page-hero h1 { margin: 2px 0; font-size: 2rem; }
.subject-page-hero p { margin: 0; color: rgba(255,255,255,.76); }
.subject-page-count { padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; font-size: .76rem; }
.subject-tabs { max-width: 1120px; display: flex; gap: 3px; margin: 0 auto 24px; overflow-x: auto; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); scrollbar-width: thin; }
.subject-tab { min-height: 43px; flex: 0 0 auto; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 700; font-size: .82rem; }
.subject-tab.is-active { background: var(--surface-soft); color: var(--primary); }
.subject-section-heading { max-width: 1120px; margin: 0 auto 15px; }
.subject-section-heading h2 { margin: 0 0 3px; font-size: 1.35rem; }
.subject-section-heading p { margin: 0; color: var(--text-muted); font-size: .86rem; }
#subject-section-content { max-width: 1120px; margin: 0 auto; }
.sequence-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sequence-filter > span { color: var(--text-muted); font-size: .78rem; }
.sequence-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 14px; align-items: start; }
.sequence-unit-list { display: grid; gap: 7px; }
.sequence-unit-button { min-height: 78px; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.sequence-unit-button:hover { border-color: var(--forest); }
.sequence-unit-button.is-active { border-color: var(--primary); background: var(--surface-soft); }
.sequence-unit-button > span { color: var(--primary); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.sequence-unit-button strong { margin-top: 2px; font-size: .83rem; }
.sequence-unit-button small { margin-top: auto; color: var(--text-muted); font-size: .68rem; }
.selected-unit-panel { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.selected-unit-header > span { color: var(--primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.selected-unit-header h3 { margin: 3px 0; font-size: 1.35rem; }
.selected-unit-header p { margin: 0 0 17px; color: var(--text-muted); font-size: .84rem; }
.topic-accordion-list { display: grid; gap: 8px; }
.topic-accordion { overflow: hidden; border: 1px solid var(--border); border-radius: 11px; }
.topic-accordion summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 10px 13px; cursor: pointer; list-style: none; }
.topic-accordion summary::-webkit-details-marker { display: none; }
.topic-accordion summary span { min-width: 0; }
.topic-accordion summary small,
.topic-accordion summary strong { display: block; }
.topic-accordion summary small { color: var(--primary); font-size: .61rem; font-weight: 800; }
.topic-accordion summary strong { margin-top: 2px; font-size: .84rem; }
.topic-accordion summary > b { color: var(--text-muted); font-size: .7rem; white-space: nowrap; }
.topic-accordion[open] summary { background: var(--page-bg); border-bottom: 1px solid var(--border); }
.topic-lesson-list { display: grid; }
.topic-lesson-row { min-height: 55px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.topic-lesson-row:last-child { border-bottom: 0; }
.topic-lesson-row:hover { background: var(--page-bg); }
.topic-lesson-row.is-available { background: var(--positive-soft); }
.topic-lesson-index { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--page-bg); color: var(--text-muted); font-size: .7rem; font-weight: 800; }
.topic-lesson-row.is-available .topic-lesson-index { background: var(--positive); color: #fff; }
.topic-lesson-row strong,
.topic-lesson-row small { display: block; }
.topic-lesson-row strong { font-size: .79rem; }
.topic-lesson-row small { margin-top: 1px; color: var(--text-muted); font-size: .64rem; }
.topic-lesson-row > b { color: var(--text-muted); font-size: .68rem; }
.topic-lesson-row.is-available > b { color: var(--positive); }

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-card { min-height: 155px; display: grid; grid-template-columns: 50px minmax(0,1fr) 30px; align-items: start; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.theme-card:hover { border-color: var(--primary); box-shadow: 0 8px 23px var(--shadow); }
.theme-card-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; font-size: 1.05rem; font-weight: 850; }
.theme-tone-1 .theme-card-number { background: #e8f4ff; color: #276783; }
.theme-tone-2 .theme-card-number { background: #fff0da; color: #8a5c0d; }
.theme-tone-3 .theme-card-number { background: #e7f5ec; color: #267447; }
.theme-tone-4 .theme-card-number { background: #f2e9ff; color: #67428b; }
.theme-card-copy small,
.theme-card-copy strong,
.theme-card-copy b { display: block; }
.theme-card-copy small { color: var(--primary); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.theme-card-copy strong { margin-top: 3px; font-size: 1rem; }
.theme-card-copy p { margin: 5px 0 12px; color: var(--text-muted); font-size: .75rem; }
.theme-card-copy b { color: var(--text-muted); font-size: .68rem; }
.theme-card-arrow { align-self: center; color: var(--text-muted); }

.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.skill-card { min-height: 105px; display: grid; grid-template-columns: 52px minmax(0,1fr) 22px; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.skill-card:hover { border-color: var(--primary); }
.skill-code { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px; background: var(--skill-bg); color: #19313b; font-weight: 850; }
.skill-card strong,
.skill-card small { display: block; }
.skill-card strong { font-size: .9rem; }
.skill-card small { margin-top: 4px; color: var(--text-muted); font-size: .7rem; }
.skill-card b { color: var(--text-muted); }

.library-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.library-card { min-height: 170px; padding: 19px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.library-card > span { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 13px; background: var(--surface-soft); color: var(--primary); font-size: .75rem; font-weight: 850; }
.library-card h3 { margin: 15px 0 4px; font-size: 1rem; }
.library-card p { margin: 0; color: var(--text-muted); font-size: .78rem; }
.library-card small { display: block; margin-top: 14px; color: var(--positive); font-weight: 700; }
.search-result-list { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.search-result-row { min-height: 62px; width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 10px; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.search-result-row:last-child { border-bottom: 0; }
.search-result-row:hover { background: var(--page-bg); }
.search-result-row > span:first-child { color: var(--primary); font-weight: 800; font-size: .76rem; }
.search-result-row strong,
.search-result-row small { display: block; }
.search-result-row strong { font-size: .84rem; }
.search-result-row small { color: var(--text-muted); font-size: .68rem; }
.search-result-note { color: var(--text-muted); font-size: .75rem; }
.empty-state { padding: 45px 20px; border: 1px dashed var(--border); border-radius: 14px; background: var(--surface); text-align: center; }
.empty-state p { margin: 4px 0 0; color: var(--text-muted); }

@media (max-width: 1050px) {
  .book-layout { grid-template-columns: 236px minmax(0, 1fr); }
  .dashboard-feature-grid { grid-template-columns: 1fr; }
  .subject-card { min-height: 220px; }
  .compact-unit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .header-search { width: min(430px, 46vw); }
  .book-layout { display: block; }
  .book-sidebar { top: 0; height: 100vh; }
}

@media (max-width: 720px) {
  .header-search { display: none; }
  .dashboard-feature-grid,
  .continue-card { grid-template-columns: 1fr; }
  .continue-illustration { display: none; }
  .discovery-grid,
  .theme-grid,
  .skill-grid,
  .library-grid { grid-template-columns: 1fr; }
  .sequence-layout { grid-template-columns: 1fr; }
  .sequence-unit-list { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .sequence-unit-button { min-width: 200px; }
}

@media (max-width: 560px) {
  .grade-chip { display: none; }
  .dashboard-greeting { align-items: flex-start; flex-direction: column; }
  .school-year { align-self: flex-start; }
  .compact-unit-grid { grid-template-columns: 1fr; }
  .subject-page-hero { grid-template-columns: 53px minmax(0,1fr); padding: 17px; }
  .subject-page-letter { width: 50px; height: 50px; border-radius: 13px; font-size: 1.5rem; }
  .subject-page-count { grid-column: 1 / -1; justify-self: start; }
  .subject-tabs { margin-bottom: 18px; }
  .sequence-filter { align-items: flex-start; flex-direction: column; }
  .selected-unit-panel { padding: 14px; }
  .theme-card { grid-template-columns: 44px minmax(0,1fr); }
  .theme-card-number { width: 42px; height: 42px; }
  .theme-card-arrow { display: none; }
  .skill-card { grid-template-columns: 46px minmax(0,1fr); }
  .skill-code { width: 44px; height: 44px; }
  .skill-card b { display: none; }
}

/* v0.5 — T01 “Birlikte Güzel” pilot etkileşimleri */
.opening-symbol {
  min-height: 250px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  font-size: clamp(4.5rem, 12vw, 7rem);
  line-height: 1;
}

.reading-panel { display: grid; gap: 16px; }
.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted);
  font-size: .8rem;
}
.reading-meta span {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--page-bg);
}
.reading-text {
  padding: clamp(17px, 3vw, 25px);
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--page-bg);
  font-size: clamp(1.02rem, 2.2vw, 1.16rem);
  line-height: 1.78;
}
.reading-text p { margin: 0 0 1em; }
.reading-text p:last-child { margin-bottom: 0; }
.reading-text.compact { margin-top: 12px; padding: 15px; font-size: .98rem; line-height: 1.65; }
.reading-complete-button { justify-self: start; }

.recorder-panel { display: grid; gap: 14px; }
.privacy-note {
  padding: 12px 14px;
  border-left: 4px solid var(--primary);
  border-radius: 0 12px 12px 0;
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: .88rem;
}
.privacy-note strong { color: var(--text); }
.recorder-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.recording-status { color: var(--text-muted); font-weight: 700; }
.recording-reference { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.recording-reference summary { padding: 12px 14px; cursor: pointer; font-weight: 700; }
.recording-reference[open] summary { border-bottom: 1px solid var(--border); }
.recorder-fallback { justify-self: start; }
.local-recording-playback { width: min(100%, 520px); }

.text-response-panel { display: grid; gap: 10px; }
.text-response-panel textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--page-bg);
  color: var(--text);
  line-height: 1.55;
}
.text-response-panel textarea:focus { border-color: var(--primary); }
.response-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: .75rem; }
.writing-checklist { padding: 13px 15px; border-radius: 13px; background: var(--surface-soft); }
.writing-checklist strong { display: block; margin-bottom: 5px; }
.writing-checklist ul { margin: 0; padding-left: 19px; color: var(--text-muted); }
.activity-hint { margin: 8px 0 0; color: var(--text-muted); font-size: .88rem; }

.matching-list { display: grid; gap: 10px; }
.matching-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(230px, 1.3fr);
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page-bg);
}
.matching-row select {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}

.ordering-list { display: grid; gap: 9px; }
.ordering-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page-bg);
}
.ordering-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--primary);
  font-weight: 800;
}
.ordering-text { font-weight: 650; }
.ordering-actions { display: flex; gap: 5px; }
.mini-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}
.mini-button:disabled { opacity: .35; cursor: not-allowed; }

.question-feedback {
  display: grid;
  gap: 2px;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--positive-soft);
  color: var(--positive);
}
.question-feedback.is-review { background: var(--warning-soft); color: var(--warning); }
.question-feedback strong { font-size: .82rem; }
.question-feedback span { color: inherit; font-size: .88rem; }
.question-feedback small { color: inherit; opacity: .9; }

@media (max-width: 620px) {
  .opening-panel { grid-template-columns: 1fr; }
  .opening-symbol { min-height: 155px; }
  .matching-row { grid-template-columns: 1fr; }
  .ordering-row { grid-template-columns: 32px minmax(0, 1fr); }
  .ordering-actions { grid-column: 2; }
  .reading-complete-button { width: 100%; }
  .recorder-controls .primary-button { width: 100%; }
}
\n\n/* v0.6.0 refine — pilot-first navigation and no dead-end controls */\n.pilot-sidebar-card { margin: 4px 8px 8px; padding: 12px 13px; border: 1px solid rgba(11,107,99,.18); border-radius: 12px; background: linear-gradient(135deg, var(--surface-soft), var(--surface)); }\n.pilot-sidebar-card span,.pilot-sidebar-card strong,.pilot-sidebar-card small { display:block; }\n.pilot-sidebar-theme { color: var(--primary); font-size:.61rem; font-weight:850; letter-spacing:.08em; }\n.pilot-sidebar-card strong { margin-top:3px; font-size:.9rem; }\n.pilot-sidebar-card small { margin-top:2px; color:var(--text-muted); font-size:.68rem; line-height:1.35; }\n.pilot-lesson-nav { display:grid; gap:4px; }\n.pilot-lesson-link { width:100%; min-height:52px; display:grid; grid-template-columns:34px minmax(0,1fr) 24px; align-items:center; gap:8px; padding:7px 8px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text); text-align:left; cursor:pointer; }\n.pilot-lesson-link:hover { background:var(--page-bg); }\n.pilot-lesson-link.is-active { border-color:rgba(11,107,99,.22); background:var(--surface-soft); }\n.pilot-lesson-link.is-complete .pilot-lesson-number { background:var(--positive-soft); color:var(--positive); }\n.pilot-lesson-number { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--page-bg); color:var(--text-muted); font-size:.68rem; font-weight:850; }\n.pilot-lesson-copy { min-width:0; }\n.pilot-lesson-copy strong,.pilot-lesson-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.pilot-lesson-copy strong { font-size:.76rem; }\n.pilot-lesson-copy small { margin-top:2px; color:var(--text-muted); font-size:.62rem; }\n.pilot-lesson-state { color:var(--primary); font-weight:850; }\n.sidebar-future { margin:18px 8px 4px; padding:11px 12px; border:1px dashed var(--border); border-radius:11px; color:var(--text-muted); }\n.sidebar-future span { font-size:.58rem; font-weight:850; letter-spacing:.07em; }\n.sidebar-future p { margin:5px 0 0; font-size:.66rem; line-height:1.45; }\n.home-subject-grid { grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); }\n.home-subject-card.is-primary-subject { min-height:145px; }\n.future-subject-card { min-height:145px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:13px; align-items:start; padding:20px; border:1px dashed var(--border); border-radius:16px; background:var(--surface); }\n.future-subject-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--page-bg); color:var(--text-muted); font-size:1.35rem; }\n.future-subject-card small,.future-subject-card strong { display:block; }\n.future-subject-card small { color:var(--text-muted); font-size:.62rem; font-weight:850; letter-spacing:.07em; }\n.future-subject-card strong { margin-top:3px; font-size:.95rem; }\n.future-subject-card p { margin:5px 0 0; color:var(--text-muted); font-size:.74rem; line-height:1.45; }\n@media (max-width:760px){ .home-subject-grid{grid-template-columns:1fr;} }\n\n.topic-lesson-row.is-planned { opacity:.72; cursor:default; background:var(--page-bg); }\n.topic-lesson-row.is-planned:hover { background:var(--page-bg); }\n.topic-lesson-row.is-planned b { color:var(--text-muted); font-size:.68rem; font-weight:700; }\n.pilot-progress-list { display:grid; gap:7px; margin-top:12px; }\n.pilot-progress-row { width:100%; min-height:54px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer; }\n.pilot-progress-row:hover { border-color:var(--primary); }\n.pilot-progress-row > span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--page-bg); font-size:.72rem; font-weight:850; }\n.pilot-progress-row strong { font-size:.78rem; }\n.pilot-progress-row small { color:var(--text-muted); font-size:.66rem; }\n.pilot-progress-row.is-complete > span { background:var(--positive-soft); color:var(--positive); }\n

/* v0.7.0 information architecture + visual refinement */
.sidebar-mini-label{margin:10px 10px 8px;font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--muted,#6d756f)}
.all-subject-navigation{display:grid;gap:6px}
.sidebar-subject-group{display:grid;gap:5px}
.sidebar-subject-button{width:100%;border:0;background:transparent;border-radius:14px;padding:9px 10px;display:grid;grid-template-columns:36px 1fr 20px;align-items:center;gap:9px;text-align:left;color:inherit;cursor:pointer;transition:.18s ease}
.sidebar-subject-button:hover,.sidebar-subject-button.is-active{background:var(--subject-soft);transform:translateX(2px)}
.sidebar-subject-button.is-active{box-shadow:inset 3px 0 0 var(--subject-color)}
.sidebar-subject-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--subject-soft);color:var(--subject-color);font-weight:900;font-size:17px}
.sidebar-subject-copy{display:grid;gap:2px;min-width:0}.sidebar-subject-copy strong{font-size:13px}.sidebar-subject-copy small{font-size:10.5px;color:#747b77;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-subject-arrow{color:var(--subject-color);font-weight:800}
.sidebar-pilot-lessons{margin:0 4px 6px 18px;padding-left:10px;border-left:1px solid #dfe7e3;display:grid;gap:4px}.sidebar-pilot-lessons[hidden]{display:none}
.home-subject-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.home-subject-card{min-height:145px!important;position:relative;overflow:hidden;align-items:end!important;padding:18px!important}.home-subject-art{position:absolute;right:-6px;top:-4px;width:108px;height:96px;border-radius:0 0 0 60px;background:var(--subject-soft);display:grid;place-items:center}.home-subject-art i{font-style:normal;font-weight:900;font-size:32px;color:var(--subject-color);z-index:2}.home-subject-art b,.home-subject-art em{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--subject-color) 24%,transparent)}.home-subject-art b{width:72px;height:72px}.home-subject-art em{width:42px;height:42px}.home-subject-copy{position:relative;z-index:2}.home-subject-copy strong{font-size:21px!important}.home-subject-copy span{max-width:230px;line-height:1.35}.home-subject-arrow{position:absolute;right:16px;bottom:16px}
.subject-page-hero{overflow:hidden;position:relative}.subject-page-letter{font-size:27px!important;font-weight:900}
.subject-visual-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr);gap:28px;min-height:270px;border-radius:26px;padding:30px;background:linear-gradient(135deg,#fff 0%,var(--hero-soft) 100%);border:1px solid color-mix(in srgb,var(--hero-color) 18%,#e7ebe8);overflow:hidden;position:relative}.subject-visual-copy{position:relative;z-index:2}.subject-code-badge{display:inline-flex;padding:6px 9px;border-radius:999px;background:#fff;color:var(--hero-color);font-size:11px;font-weight:850;letter-spacing:.08em}.subject-visual-copy h2{font-size:36px;margin:13px 0 9px}.subject-visual-copy>p{max-width:650px;font-size:16px;line-height:1.55;color:#5b625e}.subject-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.subject-facts span{min-width:120px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.8);display:grid}.subject-facts strong{font-size:19px;color:var(--hero-color)}.subject-facts small{font-size:11px;color:#6d736f}.subject-visual-art{position:relative;min-height:205px;display:grid;place-items:center}.subject-visual-art>span{width:118px;height:118px;border-radius:36px;background:var(--hero-color);color:#fff;display:grid;place-items:center;font-size:52px;font-weight:900;box-shadow:0 24px 50px color-mix(in srgb,var(--hero-color) 25%,transparent);transform:rotate(-7deg);z-index:3}.subject-visual-art i,.subject-visual-art b{position:absolute;background:#fff;border-radius:18px;box-shadow:0 14px 25px rgba(0,0,0,.07)}.subject-visual-art i{width:78px;height:52px;right:5px;bottom:18px;transform:rotate(12deg)}.subject-visual-art b{width:52px;height:52px;left:10px;top:18px;transform:rotate(-12deg)}.visual-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--hero-color) 28%,transparent);border-radius:50%}.orbit-a{width:190px;height:190px}.orbit-b{width:240px;height:240px}
.subject-overview-section{margin-top:20px;padding:24px;border:1px solid #e4e9e6;border-radius:22px;background:#fff}.overview-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.overview-section-head small{font-size:11px;letter-spacing:.1em;font-weight:800;color:#777f7a}.overview-section-head h3{font-size:22px;margin:5px 0}.overview-section-head p{margin:0;color:#6a716d}.status-pill{display:inline-flex;padding:7px 10px;border-radius:999px;background:#f0f2f1;color:#616864;font-size:11px;font-weight:800;white-space:nowrap}.status-pill.is-ready{background:#e3f3ec;color:#17684d}.overview-lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.overview-lesson-card{border:1px solid #e0e7e3;border-radius:18px;background:#fff;padding:16px;display:grid;grid-template-columns:42px 1fr 20px;gap:12px;align-items:center;text-align:left;cursor:pointer;transition:.18s}.overview-lesson-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,45,32,.08);border-color:#bdd3c8}.overview-lesson-card.is-complete{background:#f5fbf7}.overview-lesson-no{width:40px;height:40px;border-radius:12px;background:#edf4f1;display:grid;place-items:center;font-weight:850;color:#0b6b63}.overview-lesson-card span:nth-child(2){display:grid;gap:3px}.overview-lesson-card small{font-size:10px;letter-spacing:.09em;color:#77807b}.overview-lesson-card strong{font-size:15px}.overview-lesson-card em{font-style:normal;color:#6c746f;font-size:11px}.planned-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.planned-feature-grid article{padding:18px;border-radius:17px;background:#f7f9f8}.planned-feature-grid article span{font-size:11px;font-weight:850;color:#8a918d}.planned-feature-grid article strong{display:block;margin:8px 0;font-size:15px}.planned-feature-grid article p{margin:0;color:#6f7672;font-size:12px;line-height:1.5}.mini-structure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mini-structure-grid div{padding:13px 14px;border-radius:14px;background:#f7f9f8;display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center}.mini-structure-grid span{font-size:11px;color:#8a918e}.mini-structure-grid strong{font-size:13px}
@media (max-width:1100px){.home-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subject-visual-hero{grid-template-columns:1fr}.subject-visual-art{min-height:150px}.subject-visual-art>span{width:92px;height:92px;font-size:40px}.overview-lesson-grid{grid-template-columns:1fr}}
@media (max-width:680px){.home-subject-grid{grid-template-columns:1fr}.subject-visual-hero{padding:20px}.subject-visual-copy h2{font-size:28px}.subject-facts span{min-width:95px}.planned-feature-grid,.mini-structure-grid{grid-template-columns:1fr}.overview-section-head{display:grid}}

/* v0.8.0 — accessible course accordion navigation */
.sidebar-subject-group{gap:0}
.sidebar-subject-button{position:relative}
.sidebar-subject-button:focus-visible,.sidebar-submenu-link:focus-visible,.sidebar-structure-link:focus-visible,.pilot-lesson-link:focus-visible{outline:3px solid color-mix(in srgb,var(--subject-color,#0b6b63) 28%,transparent);outline-offset:2px}
.sidebar-subject-arrow{font-size:16px;font-weight:900;transition:transform .24s ease,color .2s ease;transform-origin:center}
.sidebar-subject-group.is-open .sidebar-subject-arrow{transform:rotate(180deg);color:var(--subject-color)}
.sidebar-subject-panel{display:grid;grid-template-rows:0fr;opacity:.2;visibility:hidden;pointer-events:none;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease,visibility 0s linear .28s}
.sidebar-subject-panel.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1),opacity .24s ease,visibility 0s}
.sidebar-subject-panel-inner{min-height:0;overflow:hidden;padding:0 7px 0 51px}
.sidebar-subject-panel.is-open .sidebar-subject-panel-inner{padding-bottom:10px}
.sidebar-submenu{display:grid;gap:3px;padding:4px 0 7px;border-left:1px solid color-mix(in srgb,var(--border) 78%,transparent)}
.sidebar-submenu-link{width:100%;min-height:37px;display:grid;grid-template-columns:22px minmax(0,1fr) 18px;align-items:center;gap:5px;border:0;border-radius:9px;background:transparent;color:var(--text);padding:5px 7px;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}
.sidebar-submenu-link:hover{background:var(--page-bg);transform:translateX(2px)}
.sidebar-submenu-link.is-active{background:var(--subject-soft);color:var(--subject-color)}
.sidebar-submenu-link>span{font-size:11px;font-weight:900;text-align:center}.sidebar-submenu-link>strong{font-size:11.5px;line-height:1.25}.sidebar-submenu-link>b{font-size:10px;color:var(--text-muted)}
.sidebar-subsection-label{display:grid;gap:1px;margin:8px 0 5px;padding:0 7px}
.sidebar-subsection-label span{font-size:8.5px;letter-spacing:.1em;font-weight:850;color:var(--text-muted)}
.sidebar-subsection-label strong{font-size:10.5px;color:var(--text)}
.sidebar-structure-list{display:grid;gap:3px;padding-left:1px}
.sidebar-structure-link{width:100%;min-height:38px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:6px;border:0;border-radius:9px;background:transparent;padding:5px 6px;color:var(--text);text-align:left;cursor:pointer;transition:background .16s ease,transform .16s ease}
.sidebar-structure-link:hover{background:var(--page-bg);transform:translateX(2px)}
.sidebar-structure-link.is-active{background:var(--subject-soft);color:var(--subject-color)}
.sidebar-structure-link>span{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--page-bg);font-size:9px;font-weight:850;color:var(--text-muted)}
.sidebar-structure-link.is-active>span{background:var(--subject-color);color:#fff}
.sidebar-structure-link>strong{font-size:10.5px;line-height:1.25;font-weight:720}
.sidebar-subject-panel .sidebar-pilot-lessons{display:grid;gap:3px;padding:0}
.sidebar-subject-panel .pilot-lesson-link{min-height:44px;padding:5px 6px}
.sidebar-subject-panel .pilot-lesson-number{width:28px;height:28px;font-size:9px}
.sidebar-subject-panel .pilot-lesson-copy strong{font-size:10.7px}.sidebar-subject-panel .pilot-lesson-copy small{font-size:9px}
.curriculum-map-item.is-highlighted{border-color:var(--active-subject,#0b6b63);box-shadow:0 0 0 3px color-mix(in srgb,var(--active-subject,#0b6b63) 12%,transparent)}
@media (prefers-reduced-motion:reduce){.sidebar-subject-panel,.sidebar-subject-arrow,.sidebar-submenu-link,.sidebar-structure-link{transition:none!important}}


/* v0.9.0 — cohesive visual language, subject illustrations and lesson polish */
:root{
  --ink-strong:light-dark(#173039,#f2f8f7);
  --ink-soft:light-dark(#647178,#afc0c3);
  --canvas:light-dark(#f7f5ef,#101b20);
  --surface-elevated:light-dark(#ffffff,#19292f);
  --hairline:light-dark(#e1e5e1,#31454b);
  --shadow-soft:0 16px 44px light-dark(rgba(34,55,56,.08),rgba(0,0,0,.28));
  --shadow-hover:0 18px 42px light-dark(rgba(34,55,56,.13),rgba(0,0,0,.34));
}
body{background:radial-gradient(circle at 82% -8%,light-dark(rgba(11,107,99,.055),rgba(99,212,198,.035)),transparent 32%),var(--page-bg)}
.ui-icon{width:1.15em;height:1.15em;display:block;flex:0 0 auto}
.app-header{min-height:76px;border-bottom-color:color-mix(in srgb,var(--border) 72%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.45)}
.brand-mark{border-radius:14px;background:linear-gradient(145deg,#0b6b63,#12534f);box-shadow:0 8px 20px rgba(11,107,99,.18)}
.header-search{border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,var(--page-bg));border-radius:14px;min-height:45px}
.header-search:focus-within{border-color:color-mix(in srgb,var(--primary) 55%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 10%,transparent)}
.header-search-icon{color:var(--text-muted);display:grid;place-items:center}
.book-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,#fff),var(--surface));border-right-color:color-mix(in srgb,var(--border) 72%,transparent)}
.sidebar-profile{border:1px solid color-mix(in srgb,var(--border) 72%,transparent);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-soft) 42%,var(--surface)));box-shadow:0 10px 28px rgba(31,55,51,.06)}
.profile-avatar{background:linear-gradient(145deg,var(--primary),#12534f);box-shadow:0 7px 16px rgba(11,107,99,.18)}
.nav-section-label,.sidebar-mini-label{color:var(--ink-soft);letter-spacing:.12em;font-size:9px}
.primary-nav-item{border-radius:12px;gap:10px;font-weight:680}.primary-nav-item:hover{background:color-mix(in srgb,var(--surface-soft) 68%,transparent)}
.primary-nav-item.is-active{background:linear-gradient(90deg,var(--surface-soft),color-mix(in srgb,var(--surface-soft) 60%,transparent));box-shadow:inset 3px 0 0 var(--primary)}
.nav-icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:10px;background:var(--surface);color:var(--text-muted)}
.primary-nav-item.is-active .nav-icon{background:var(--primary);color:var(--on-primary);border-color:transparent;box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 19%,transparent)}
.sidebar-subject-group{position:relative}
.sidebar-subject-button{min-height:55px;border-radius:14px;padding:8px 9px;transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.sidebar-subject-button:hover{background:color-mix(in srgb,var(--subject-soft) 74%,var(--surface));transform:translateX(2px)}
.sidebar-subject-button.is-active{background:linear-gradient(90deg,var(--subject-soft),color-mix(in srgb,var(--subject-soft) 48%,transparent));box-shadow:inset 3px 0 0 var(--subject-color)}
.sidebar-subject-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--subject-soft),color-mix(in srgb,var(--subject-soft) 62%,#fff));border:1px solid color-mix(in srgb,var(--subject-color) 12%,transparent);box-shadow:0 5px 12px color-mix(in srgb,var(--subject-color) 8%,transparent)}
.sidebar-subject-icon .ui-icon{width:20px;height:20px}
.sidebar-subject-copy strong{font-size:13px;font-weight:760;letter-spacing:-.01em}.sidebar-subject-copy small{font-size:10px;color:var(--ink-soft)}
.sidebar-subject-arrow{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--subject-soft) 72%,transparent)}
.sidebar-subject-arrow .ui-icon{width:15px;height:15px}
.sidebar-subject-panel-inner{padding-left:53px}
.sidebar-submenu{border-left-color:color-mix(in srgb,var(--subject-color) 18%,var(--border));padding-left:5px}
.sidebar-submenu-link,.sidebar-structure-link{border:1px solid transparent}
.sidebar-submenu-link:hover,.sidebar-structure-link:hover{background:color-mix(in srgb,var(--subject-soft) 54%,transparent);border-color:color-mix(in srgb,var(--subject-color) 10%,transparent)}
.sidebar-submenu-link.is-active,.sidebar-structure-link.is-active{background:var(--subject-soft);border-color:color-mix(in srgb,var(--subject-color) 16%,transparent);box-shadow:0 5px 13px color-mix(in srgb,var(--subject-color) 7%,transparent)}
.submenu-icon{width:15px;height:15px}.chevron-icon{width:15px;height:15px}.arrow-icon{width:16px;height:16px}
.sidebar-structure-link>span{background:color-mix(in srgb,var(--subject-soft) 65%,var(--surface));color:var(--subject-color)}
.sidebar-pilot-lessons{border-left:0!important}.sidebar-pilot-lessons .pilot-lesson-link{border:1px solid color-mix(in srgb,var(--border) 60%,transparent);background:color-mix(in srgb,var(--surface) 94%,var(--subject-soft));margin:3px 0}
.sidebar-pilot-lessons .pilot-lesson-link:hover{border-color:color-mix(in srgb,var(--subject-color) 20%,var(--border));box-shadow:0 6px 14px color-mix(in srgb,var(--subject-color) 7%,transparent)}
.sidebar-pilot-lessons .pilot-lesson-link.is-active{background:var(--subject-soft);border-color:color-mix(in srgb,var(--subject-color) 28%,var(--border))}
.dashboard-greeting{max-width:1180px}.dashboard-greeting h1{letter-spacing:-.045em;font-size:clamp(2rem,4vw,3.1rem)}
.dashboard-greeting>div>p:last-child{font-size:1rem;color:var(--ink-soft)}
.school-year{border:1px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:0 6px 16px rgba(24,49,43,.05)}
.continue-card{border-radius:26px;background:linear-gradient(125deg,#0b6b63 0%,#125f58 58%,#194e4a 100%);box-shadow:0 22px 50px rgba(11,107,99,.2);isolation:isolate}
.continue-card:before{content:"";position:absolute;inset:auto -70px -90px auto;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.continue-card:after{content:"";position:absolute;right:75px;top:35px;width:110px;height:110px;border-radius:32px;background:rgba(255,255,255,.045);transform:rotate(18deg)}
.continue-illustration{position:relative;z-index:2;background:transparent}.continue-illustration svg{filter:drop-shadow(0 15px 20px rgba(0,0,0,.12))}
.light-primary-button{border-radius:13px;box-shadow:0 8px 18px rgba(0,0,0,.1)}
.home-subject-grid{gap:18px!important}
.home-subject-card{min-height:172px!important;border-radius:21px!important;border:1px solid color-mix(in srgb,var(--subject-color) 10%,var(--border))!important;background:linear-gradient(145deg,var(--surface) 0%,color-mix(in srgb,var(--subject-soft) 46%,var(--surface)) 100%)!important;box-shadow:0 10px 26px rgba(36,50,47,.055);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.home-subject-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:color-mix(in srgb,var(--subject-color) 28%,var(--border))!important}
.home-subject-art{width:118px;height:108px;background:radial-gradient(circle at 55% 45%,color-mix(in srgb,var(--subject-soft) 78%,#fff),var(--subject-soft));border-radius:0 0 0 70px}
.home-subject-art i{display:grid;place-items:center;width:62px;height:62px;border-radius:19px;background:var(--subject-color);color:#fff;box-shadow:0 14px 28px color-mix(in srgb,var(--subject-color) 24%,transparent)}
.home-subject-art i .ui-icon{width:31px;height:31px}.home-subject-art b,.home-subject-art em{border-color:color-mix(in srgb,var(--subject-color) 20%,transparent)}
.home-subject-copy small{color:var(--subject-color)!important;font-weight:850;letter-spacing:.1em}.home-subject-copy strong{font-size:20px!important;letter-spacing:-.025em}.home-subject-copy span{color:var(--ink-soft)!important;font-size:12.5px;line-height:1.45!important}
.home-subject-arrow{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--surface);color:var(--subject-color);box-shadow:0 5px 14px rgba(30,50,44,.08)}
.subject-page-hero{border-radius:22px;background:linear-gradient(120deg,var(--active-subject,#0b6b63),color-mix(in srgb,var(--active-subject,#0b6b63) 78%,#163a39));box-shadow:0 16px 34px color-mix(in srgb,var(--active-subject,#0b6b63) 17%,transparent)}
.subject-page-letter{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.subject-page-letter .ui-icon{width:31px;height:31px}
.subject-tabs{border-radius:15px;padding:5px;box-shadow:0 7px 20px rgba(30,50,44,.04)}.subject-tab{border-radius:10px}.subject-tab.is-active{box-shadow:0 4px 12px rgba(30,50,44,.06)}
.subject-visual-hero{border-radius:28px;min-height:300px;padding:34px;background:linear-gradient(135deg,var(--surface) 0%,color-mix(in srgb,var(--hero-soft) 72%,var(--surface)) 100%);box-shadow:0 14px 38px rgba(35,50,46,.06)}
.subject-code-badge{border:1px solid color-mix(in srgb,var(--hero-color) 16%,transparent);box-shadow:0 4px 12px rgba(0,0,0,.035)}
.subject-visual-copy h2{font-size:40px;letter-spacing:-.045em}.subject-visual-copy>p{color:var(--ink-soft)}
.subject-facts span{border:1px solid color-mix(in srgb,var(--hero-color) 10%,transparent);box-shadow:0 5px 16px rgba(30,50,44,.035)}
.subject-visual-art>span{width:126px;height:126px;border-radius:38px;transform:rotate(-5deg);background:linear-gradient(145deg,var(--hero-color),color-mix(in srgb,var(--hero-color) 80%,#203a39))}.subject-visual-art>span .ui-icon{width:58px;height:58px}
.subject-visual-art i,.subject-visual-art b,.subject-visual-art em{border:1px solid color-mix(in srgb,var(--hero-color) 10%,transparent);background:color-mix(in srgb,#fff 88%,var(--hero-soft));box-shadow:0 14px 26px rgba(25,45,39,.07)}
.subject-visual-art em{position:absolute;width:42px;height:42px;right:36px;top:26px;border-radius:50%}
.subject-overview-section{border-radius:24px;border-color:color-mix(in srgb,var(--border) 78%,transparent);box-shadow:0 10px 30px rgba(34,51,46,.045)}
.overview-lesson-card{border-radius:17px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-soft) 28%,var(--surface)))}
.overview-lesson-no{border:1px solid color-mix(in srgb,var(--primary) 12%,transparent)}
.mini-structure-grid div,.planned-feature-grid article{border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.lesson-page-header{max-width:880px;margin-inline:auto}.lesson-title-row h1{letter-spacing:-.04em}.lesson-route-card{border-radius:18px;box-shadow:0 8px 26px rgba(31,49,45,.05)}
.screen-card{border-radius:24px;border-color:color-mix(in srgb,var(--border) 72%,transparent);box-shadow:0 18px 46px rgba(27,51,48,.08);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 97%,var(--page-bg)))}
.screen-content{padding:clamp(24px,4.5vw,40px)}
.screen-kicker-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}.screen-kicker-row .screen-kicker{margin:0}.step-type-badge{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--lesson-subject-soft);color:var(--lesson-subject-color);border:1px solid color-mix(in srgb,var(--lesson-subject-color) 13%,transparent)}.step-type-badge .ui-icon{width:18px;height:18px}
.screen-title{font-size:clamp(1.75rem,4vw,2.55rem);letter-spacing:-.045em}.screen-lead{color:var(--ink-soft);line-height:1.65}
.opening-panel{grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);gap:34px}.lesson-goal-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;margin-top:24px;padding:15px;border:1px solid color-mix(in srgb,var(--lesson-subject-color) 12%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--lesson-subject-soft) 44%,var(--surface))}.lesson-goal-card>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--lesson-subject-color);color:#fff}.lesson-goal-card small{font-size:9px;letter-spacing:.1em;color:var(--lesson-subject-color);font-weight:850}.lesson-goal-card p{margin:3px 0 0;color:var(--text);font-weight:620}.goal-icon{width:18px;height:18px}
.lesson-art-card{position:relative;min-height:300px;border-radius:24px;background:radial-gradient(circle at 48% 42%,color-mix(in srgb,var(--lesson-subject-soft) 65%,#fff),var(--lesson-subject-soft));border:1px solid color-mix(in srgb,var(--lesson-subject-color) 13%,transparent);overflow:hidden;display:grid;place-items:center}.lesson-art-card:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid color-mix(in srgb,var(--lesson-subject-color) 14%,transparent)}.lesson-art-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid color-mix(in srgb,var(--lesson-subject-color) 11%,transparent)}
.lesson-art-main{position:relative;z-index:2;width:116px;height:116px;border-radius:36px;display:grid;place-items:center;background:linear-gradient(145deg,var(--lesson-subject-color),color-mix(in srgb,var(--lesson-subject-color) 77%,#233c3a));color:#fff;box-shadow:0 22px 44px color-mix(in srgb,var(--lesson-subject-color) 22%,transparent);transform:rotate(-5deg)}.lesson-art-icon{width:54px;height:54px}
.lesson-art-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:11px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid color-mix(in srgb,var(--lesson-subject-color) 12%,var(--border));box-shadow:0 9px 20px rgba(33,51,47,.08);font-size:11px;font-weight:730;color:var(--text)}.lesson-art-chip.chip-a{left:20px;top:28px}.lesson-art-chip.chip-b{right:18px;bottom:30px}.lesson-art-card i,.lesson-art-card b{position:absolute;border-radius:16px;background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid color-mix(in srgb,var(--lesson-subject-color) 10%,transparent)}.lesson-art-card i{width:56px;height:40px;right:24px;top:44px;transform:rotate(10deg)}.lesson-art-card b{width:44px;height:44px;left:34px;bottom:42px;border-radius:50%}
.choice-grid{gap:12px}.choice-button{min-height:64px;border-radius:15px;background:var(--surface);box-shadow:0 4px 12px rgba(29,49,45,.025);transition:transform .15s ease,border-color .15s ease,background .15s ease}.choice-button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}.choice-marker{border-radius:11px;background:var(--page-bg);color:var(--text-muted)}.choice-button[aria-pressed="true"] .choice-marker{background:var(--primary);color:var(--on-primary);border-color:transparent}
.feedback-box{border:1px solid color-mix(in srgb,var(--positive) 14%,transparent);box-shadow:0 5px 14px rgba(35,74,51,.035)}
.audio-player{border:1px solid color-mix(in srgb,var(--primary) 12%,var(--border));border-radius:18px;background:linear-gradient(145deg,var(--surface-soft),color-mix(in srgb,var(--surface-soft) 55%,var(--surface)))}.audio-button{border-radius:16px;box-shadow:0 9px 20px color-mix(in srgb,var(--primary) 22%,transparent)}.audio-play-icon{width:22px;height:22px}
.reading-panel{gap:18px}.reading-meta span{border-radius:999px;background:var(--surface-soft);border:1px solid color-mix(in srgb,var(--primary) 9%,transparent)}.reading-text{border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:18px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-warm) 28%,var(--surface)));box-shadow:0 7px 22px rgba(37,51,47,.035)}
.recorder-panel{display:grid;gap:15px}.privacy-note{border-radius:14px;border-left:0!important;border:1px solid color-mix(in srgb,var(--primary) 13%,var(--border));background:color-mix(in srgb,var(--surface-soft) 55%,var(--surface))!important}.recorder-controls .primary-button{display:inline-flex;align-items:center;gap:8px}.button-icon{width:18px;height:18px}
.quiz-item{padding:18px;border:1px solid color-mix(in srgb,var(--border) 72%,transparent);border-radius:17px!important;background:var(--surface)}.quiz-stack{gap:14px}.quiz-item:last-child{border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);padding-bottom:18px}.quiz-option{border-radius:13px;transition:background .15s ease,border-color .15s ease}.quiz-option:hover{border-color:color-mix(in srgb,var(--primary) 26%,var(--border))}
.primary-button{border-radius:13px;box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 14%,transparent)}.secondary-button{border-radius:13px}
.lesson-navigation{max-width:780px;margin-top:18px;padding-top:4px}
@media(max-width:760px){.opening-panel{grid-template-columns:1fr}.lesson-art-card{min-height:230px}.lesson-art-main{width:96px;height:96px;border-radius:30px}.lesson-art-icon{width:45px;height:45px}.subject-visual-copy h2{font-size:32px}.home-subject-card{min-height:158px!important}}
@media(prefers-reduced-motion:reduce){.home-subject-card,.choice-button{transition:none!important}.home-subject-card:hover,.choice-button:hover{transform:none}}

/* v0.10.0 — debug cleanup, calmer hierarchy and responsive polish */
:root{
  --sidebar-width:272px;
  --focus-ring:color-mix(in srgb,var(--primary) 28%,transparent);
}
body{overflow-x:hidden}
.book-layout{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.book-sidebar{width:var(--sidebar-width);box-shadow:10px 0 36px rgba(30,49,45,.025)}
.primary-navigation{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--border) 80%,transparent) transparent}
.primary-navigation::-webkit-scrollbar{width:7px}.primary-navigation::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--border) 82%,transparent);border-radius:99px}
.nav-section-label,.sidebar-mini-label{font-size:9px!important;letter-spacing:.11em!important;color:color-mix(in srgb,var(--text-muted) 86%,transparent)!important;margin-top:17px!important;margin-bottom:7px!important}
.primary-nav-item{min-height:48px;padding:8px 10px;border:1px solid transparent}
.primary-nav-item:hover{border-color:color-mix(in srgb,var(--border) 62%,transparent);transform:none}
.nav-icon{width:34px!important;height:34px!important;border-radius:11px!important;background:color-mix(in srgb,var(--page-bg) 72%,var(--surface))}
.sidebar-subject-group{margin:2px 0}
.sidebar-subject-button{grid-template-columns:40px minmax(0,1fr) 30px;min-height:59px;border:1px solid transparent;padding:9px 9px}
.sidebar-subject-button:hover{transform:none;border-color:color-mix(in srgb,var(--subject-color) 10%,var(--border))}
.sidebar-subject-button.is-active{border-color:color-mix(in srgb,var(--subject-color) 11%,transparent);box-shadow:inset 3px 0 0 var(--subject-color),0 5px 16px color-mix(in srgb,var(--subject-color) 6%,transparent)}
.sidebar-subject-copy strong{font-size:13.2px;line-height:1.28}.sidebar-subject-copy small{font-size:9.8px;line-height:1.3}
.sidebar-subject-arrow{color:var(--subject-color);background:transparent}
.sidebar-chevron-icon{width:16px!important;height:16px!important}
.sidebar-subject-panel-inner{padding-left:50px;padding-right:4px}
.sidebar-submenu{display:grid;gap:4px;margin:5px 0 10px}
.sidebar-submenu-link{grid-template-columns:30px minmax(0,1fr) 20px!important;min-height:42px!important;gap:7px!important;padding:6px 7px!important;border:1px solid transparent!important;border-radius:11px!important}
.sidebar-submenu-link:hover{background:color-mix(in srgb,var(--subject-soft) 58%,transparent)!important;border-color:color-mix(in srgb,var(--subject-color) 10%,transparent)!important}
.sidebar-action-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--subject-soft) 72%,var(--surface));color:var(--subject-color)}
.sidebar-action-svg{width:15px!important;height:15px!important}
.sidebar-action-arrow{display:grid;place-items:center;color:color-mix(in srgb,var(--text-muted) 72%,transparent);opacity:.72;transition:transform .16s ease,color .16s ease}
.sidebar-arrow-svg{width:14px!important;height:14px!important}.sidebar-submenu-link:hover .sidebar-action-arrow{transform:translateX(2px);color:var(--subject-color)}
.sidebar-subsection-label{margin:13px 0 7px!important;padding:0 4px!important}.sidebar-subsection-label span{font-size:8.5px!important;letter-spacing:.09em!important;color:var(--text-muted)!important}.sidebar-subsection-label strong{font-size:11px!important;margin-top:2px!important}
.sidebar-structure-list{display:grid;gap:3px}.sidebar-structure-link{min-height:40px!important;border-radius:10px!important;padding:5px 6px!important;grid-template-columns:28px minmax(0,1fr)!important}.sidebar-structure-link>span{width:26px!important;height:26px!important;font-size:8.5px!important;border-radius:8px!important}.sidebar-structure-link strong{font-size:10.5px!important;line-height:1.3!important}
.sidebar-pilot-lessons{gap:4px!important}.sidebar-pilot-lessons .pilot-lesson-link{grid-template-columns:30px minmax(0,1fr) 22px!important;min-height:47px!important;border-radius:11px!important}.pilot-state-icon{width:15px!important;height:15px!important}.pilot-lesson-state{display:grid;place-items:center}
.sidebar-profile{margin:15px 12px 7px;padding:12px 13px;border-radius:15px}.profile-avatar{box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 12%,transparent)}
.page-content{background:linear-gradient(180deg,color-mix(in srgb,var(--page-bg) 98%,#fff),var(--page-bg));min-height:calc(100vh - 72px)}
.dashboard-greeting,.page-heading{padding-top:6px}.dashboard-greeting h1,.page-heading h1{letter-spacing:-.045em}
.home-subject-grid{gap:16px!important}.home-subject-card{border-color:color-mix(in srgb,var(--border) 64%,transparent)!important;box-shadow:0 10px 28px rgba(31,51,47,.04)!important}.home-subject-card:hover{transform:translateY(-2px)!important;box-shadow:0 17px 38px rgba(31,51,47,.08)!important}
.subject-page-hero{overflow:hidden;position:relative}.subject-page-hero:after{content:"";position:absolute;right:-60px;top:-90px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.subject-tabs{overflow-x:auto;scrollbar-width:none}.subject-tabs::-webkit-scrollbar{display:none}.subject-tab{white-space:nowrap;min-height:42px}
.subject-code-badge{font-weight:760;letter-spacing:.02em;text-transform:none!important}
.subject-section-heading{margin-top:24px}
.status-pill{font-weight:720;letter-spacing:0!important;text-transform:none!important}
.screen-card{overflow:hidden}.screen-kicker{letter-spacing:.07em!important}.step-type-badge{flex:0 0 auto}
.choice-button,.quiz-option,.secondary-button,.primary-button,.text-button{transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}
.primary-button:active,.secondary-button:active,.choice-button:active{transform:translateY(0)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.lesson-breadcrumb{flex-wrap:wrap;row-gap:4px}.lesson-title-row{gap:16px}.workspace-toolbar{flex-wrap:wrap}
.lesson-navigation{position:sticky;bottom:0;z-index:6;background:color-mix(in srgb,var(--page-bg) 92%,transparent);backdrop-filter:blur(10px);padding:12px 0 max(12px,env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
@media(max-width:1100px){:root{--sidebar-width:258px}.subject-visual-hero{grid-template-columns:minmax(0,1fr) 260px}.subject-visual-copy h2{font-size:36px}}
@media(max-width:900px){.header-search{max-width:360px}.grade-chip{display:none}.subject-visual-hero{grid-template-columns:1fr}.subject-visual-art{min-height:220px}.subject-facts{flex-wrap:wrap}}
@media(max-width:760px){
  .app-header{gap:10px;padding:10px 12px}.brand small{display:none}.brand-mark{width:36px;height:36px}.header-search{order:3;flex:1 1 100%;max-width:none}.header-actions{margin-left:auto}.role-button{min-height:38px;padding:0 10px;font-size:12px}
  .book-layout{display:block}.book-sidebar{position:fixed!important;left:0;top:0!important;height:100dvh!important;width:min(86vw,320px)!important;z-index:60;transform:translateX(-105%);transition:transform .24s cubic-bezier(.2,.7,.2,1);box-shadow:18px 0 44px rgba(15,34,37,.2)}.book-sidebar.is-open{transform:translateX(0)}
  .primary-navigation{padding-bottom:calc(30px + env(safe-area-inset-bottom))}.page-content{min-height:100vh}.student-workspace,.teacher-workspace{padding-inline:14px}.lesson-title-row{align-items:flex-start}.workspace-toolbar{width:100%}.lesson-navigation{margin-inline:-14px;padding-inline:14px}.subject-page-hero{border-radius:18px}.subject-tabs{margin-inline:-4px;padding-inline:4px}.subject-visual-hero{padding:22px;border-radius:20px}.subject-visual-art{min-height:190px}.subject-facts span{min-width:96px}.home-subject-card:hover{transform:none!important}
}
@media(max-width:480px){.brand strong{font-size:.92rem}.role-switch{padding:3px}.role-button{padding:0 8px}.dashboard-greeting h1{font-size:2rem}.subject-visual-copy h2{font-size:29px}.subject-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.subject-facts span:last-child{grid-column:1/-1}.screen-content{padding:20px 17px}.screen-title{font-size:1.7rem}.lesson-art-chip{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sidebar-action-arrow,.book-sidebar,.primary-button,.secondary-button{transition:none!important}}


/* v0.11.0 — vibrant education suite visual system */
:root{
  color-scheme:light;
  --page-bg:#F5F8FC;
  --surface:#FFFFFF;
  --surface-soft:#F0F6FF;
  --surface-warm:#FFF7E7;
  --text:#17253A;
  --text-muted:#68758A;
  --primary:#08A79D;
  --on-primary:#FFFFFF;
  --accent:#FFB627;
  --positive:#2CAA66;
  --positive-soft:#EAF8F0;
  --warning:#C77A00;
  --warning-soft:#FFF4DC;
  --error:#D64A45;
  --error-soft:#FFF0F0;
  --border:#E4EAF1;
  --shadow:rgba(37,57,90,.10);
  --shadow-hover:0 22px 55px rgba(37,57,90,.14);
  --radius-small:12px;
  --radius-control:15px;
  --radius-card:24px;
  --content-width:900px;
  --sidebar-width:278px;
  font-family:"Nunito","Avenir Next","Noto Sans","Segoe UI",Arial,sans-serif;
}
body{background:
  radial-gradient(circle at 88% 4%,rgba(77,124,254,.08),transparent 28rem),
  radial-gradient(circle at 56% 100%,rgba(8,167,157,.055),transparent 34rem),
  var(--page-bg);}
.app-header{min-height:76px;padding:12px clamp(18px,3vw,34px);border-bottom:1px solid rgba(225,233,243,.9);box-shadow:0 8px 30px rgba(30,48,82,.045);background:rgba(255,255,255,.94)}
.brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,#16C7BA,#078A83);box-shadow:0 10px 22px rgba(8,167,157,.22)}
.brand strong{font-size:1.08rem}.brand small{font-size:.76rem}
.header-search{height:46px;border-radius:16px;background:#F3F6FA;border:1px solid transparent;box-shadow:none}.header-search:focus-within{background:#fff;border-color:#B9D9FF;box-shadow:0 0 0 4px rgba(77,124,254,.10)}
.grade-chip{border:0;background:#FFF1C9;color:#8B5B00;border-radius:14px;font-weight:850}
.role-switch{padding:4px;background:#F2F5F9;border-radius:16px}.role-button{border-radius:12px}.role-button.is-active{background:#fff;box-shadow:0 6px 18px rgba(36,58,92,.09)}
.book-layout{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.book-sidebar{top:76px;height:calc(100vh - 76px);padding:18px 12px;background:linear-gradient(180deg,#1E2B48 0%,#17223A 100%);border-right:0;box-shadow:14px 0 40px rgba(25,38,65,.09);color:#F7FBFF}
.sidebar-profile{margin:0 4px 16px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.07)}
.profile-avatar{background:linear-gradient(145deg,#FFD057,#FF9E42);color:#20304C;box-shadow:0 8px 18px rgba(255,179,59,.22)}
.sidebar-profile strong{color:#fff}.sidebar-profile small{color:#AEBBD0}
.nav-section-label{color:#8290A8!important;margin:18px 12px 7px!important;font-size:.64rem!important;letter-spacing:.11em!important}
.primary-nav-item{min-height:48px;margin:2px 0;border-radius:14px!important;color:#C5D0E1!important}.primary-nav-item:hover{background:rgba(255,255,255,.075)!important;color:#fff!important}.primary-nav-item.is-active{background:linear-gradient(135deg,#2D4A72,#263E64)!important;color:#fff!important;box-shadow:inset 3px 0 0 #55E6D4,0 8px 18px rgba(0,0,0,.12)!important}
.primary-nav-item .nav-icon{color:inherit}.subject-nav-row{border-radius:14px!important}.subject-nav-button{color:#D7DFEC!important;border-radius:14px!important}.subject-nav-button:hover{background:rgba(255,255,255,.075)!important}.subject-nav-row.is-open>.subject-nav-button,.subject-nav-row.is-active>.subject-nav-button{background:rgba(255,255,255,.09)!important;color:#fff!important}.subject-nav-icon{border:0!important;color:#fff!important;box-shadow:0 6px 16px color-mix(in srgb,var(--subject-color) 26%,transparent)!important}
.subject-nav-copy small{color:#91A1BA!important}.subject-nav-row.is-open .subject-nav-copy small{color:#B9C5D7!important}.sidebar-action-arrow{color:#91A1BA!important}
.subject-subnav{margin:3px 5px 8px 15px;padding:6px 0 7px 13px!important;border-left:1px solid rgba(255,255,255,.12)!important}.subject-subnav .primary-nav-item,.subject-subnav button{color:#AEBBD0!important}.subject-subnav .primary-nav-item:hover,.subject-subnav button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}.subject-subnav .is-active{background:rgba(85,230,212,.12)!important;color:#6AF0DF!important}
.page-content{background:transparent}.home-view,.book-view,.progress-view{padding:clamp(24px,3.6vw,52px)}
.suite-greeting{align-items:center!important;margin-bottom:22px!important}.suite-greeting h1{font-size:clamp(2rem,4vw,3.2rem)!important;letter-spacing:-.045em!important;color:#1D2D4A}.suite-greeting>div>p:last-child{max-width:680px;color:#708096!important;font-size:1.02rem}.greeting-side{display:flex;align-items:center;gap:10px}.school-year{border:0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 9px 24px rgba(37,57,90,.08);color:#607086!important;font-weight:750}.greeting-bubble{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#FFE265,#FFB82E);color:#936500;font-size:1.25rem;box-shadow:0 10px 20px rgba(255,190,44,.20)}
.suite-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}.suite-shortcut{min-height:92px;display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border:0;border-radius:24px;text-align:left;cursor:pointer;box-shadow:0 12px 28px rgba(34,54,86,.08);transition:transform .18s ease,box-shadow .18s ease}.suite-shortcut:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(34,54,86,.13)}.suite-shortcut span:last-child{min-width:0}.suite-shortcut strong,.suite-shortcut small{display:block}.suite-shortcut strong{font-size:1rem;color:#fff}.suite-shortcut small{margin-top:2px;color:rgba(255,255,255,.78);font-size:.76rem}.shortcut-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:19px;background:rgba(255,255,255,.18);color:#fff}.shortcut-icon svg{width:27px;height:27px}.suite-shortcut.is-cyan{background:linear-gradient(135deg,#16C7BA,#089CBB)}.suite-shortcut.is-purple{background:linear-gradient(135deg,#8B5CF6,#6D43D9)}.suite-shortcut.is-orange{background:linear-gradient(135deg,#FF9C54,#F56D4B)}
.dashboard-feature-grid{margin-bottom:36px}.continue-card{position:relative;min-height:318px;border-radius:32px;background:linear-gradient(125deg,#44C8F5 0%,#5F8EFA 58%,#7C67EE 100%);box-shadow:0 24px 60px rgba(77,124,254,.22);overflow:hidden}.continue-card:before{width:330px;height:330px;right:-75px;bottom:-155px;border:2px solid rgba(255,255,255,.15)}.continue-card:after{right:31%;top:-42px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.09)}.continue-card-copy{padding:clamp(28px,4vw,46px)}.continue-label{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff!important;font-size:.68rem!important;letter-spacing:.09em!important}.continue-card h2{font-size:clamp(2rem,4vw,3rem);line-height:1.04}.continue-card p{font-size:1rem;color:rgba(255,255,255,.88)}.continue-progress{margin-top:24px!important}.continue-progress>span{height:9px;background:rgba(255,255,255,.2)!important}.continue-progress i{background:#fff!important}.continue-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}.continue-actions .home-resume{margin:0!important;color:rgba(255,255,255,.82)!important}.light-primary-button{min-height:52px!important;padding:0 21px!important;border-radius:16px!important;background:#fff!important;color:#3153AE!important;box-shadow:0 10px 24px rgba(38,62,120,.16)!important;font-weight:850!important}.continue-illustration{position:relative;min-height:318px}.suite-mascot{width:min(330px,100%)!important;height:auto!important;overflow:visible;filter:drop-shadow(0 20px 24px rgba(37,55,118,.16))}.mascot-sun{fill:#FFE15D}.mascot-cloud{fill:rgba(255,255,255,.88)}.mascot-ground{fill:#77D98F}.mascot-book path{fill:#FFF;stroke:#2D4E8C;stroke-width:3}.mascot-book path:nth-child(2){fill:#FFF6C8}.mascot-face circle{fill:#FFD5B8;stroke:#2D4E8C;stroke-width:3}.mascot-face path{fill:none;stroke:#2D4E8C;stroke-width:4;stroke-linecap:round}.mascot-face path:last-child{fill:#1E355F;stroke:none}.mascot-star{fill:#FFE15D;stroke:#F8C13A;stroke-width:2}
.home-section-heading{margin-bottom:18px}.home-section-heading h2{font-size:1.75rem;color:#20304C}.home-section-heading .eyebrow{color:#6B7B94}.home-subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:17px!important}.home-subject-card{min-height:188px!important;display:flex!important;align-items:flex-end!important;padding:20px!important;border:0!important;border-radius:27px!important;background:linear-gradient(145deg,#fff 0%,var(--subject-soft) 100%)!important;box-shadow:0 13px 34px rgba(37,57,90,.085)!important;transition:transform .2s ease,box-shadow .2s ease!important}.home-subject-card:hover{transform:translateY(-5px)!important;box-shadow:0 22px 48px rgba(37,57,90,.14)!important}.home-subject-card:before{content:"";position:absolute;width:128px;height:128px;right:-25px;top:-32px;border-radius:42px;background:var(--subject-color);opacity:.09;transform:rotate(18deg)}.home-subject-card:after{content:"";position:absolute;width:54px;height:54px;right:75px;top:70px;border:2px solid var(--subject-color);border-radius:18px;opacity:.11;transform:rotate(-18deg)}.home-subject-art{right:17px!important;top:16px!important;width:78px!important;height:78px!important;border-radius:25px!important;background:linear-gradient(145deg,var(--subject-color),color-mix(in srgb,var(--subject-color) 72%,#20304C))!important;box-shadow:0 13px 25px color-mix(in srgb,var(--subject-color) 24%,transparent)}.home-subject-art i{color:#fff!important}.home-subject-art .subject-line-icon{width:35px;height:35px;stroke-width:2}.home-subject-art b,.home-subject-art em{display:none}.home-subject-copy small{display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.78);color:var(--subject-color)!important;font-weight:900!important;letter-spacing:.055em!important}.home-subject-copy strong{margin-top:10px!important;font-size:1.27rem!important;color:#22314C}.home-subject-copy span{margin-top:5px!important;color:#748198!important;font-size:.76rem!important}.home-subject-arrow{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--subject-color);box-shadow:0 7px 16px rgba(37,57,90,.08);font-weight:900}
.subject-page-hero{border:0!important;border-radius:25px!important;background:#fff!important;box-shadow:0 12px 30px rgba(37,57,90,.07)!important}.subject-page-letter{border-radius:20px!important;box-shadow:0 11px 23px color-mix(in srgb,var(--active-subject) 22%,transparent)}.subject-page-count{background:color-mix(in srgb,var(--active-subject) 9%,#fff)!important;color:var(--active-subject)!important;border:0!important;border-radius:14px!important}.subject-tabs{gap:7px!important;padding:6px!important;border-radius:18px!important;background:#EEF3F9!important}.subject-tab{border:0!important;border-radius:13px!important}.subject-tab.is-active{background:#fff!important;color:var(--active-subject)!important;box-shadow:0 7px 18px rgba(37,57,90,.08)!important}.subject-visual-hero{min-height:330px;border:0!important;border-radius:32px!important;padding:36px!important;background:linear-gradient(135deg,#fff 0%,var(--hero-soft) 100%)!important;box-shadow:0 18px 42px rgba(37,57,90,.08)!important}.subject-code-badge{box-shadow:0 8px 18px rgba(37,57,90,.07)}.subject-visual-copy h2{font-size:42px!important;color:#20304C}.subject-facts span{border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.72)!important;box-shadow:0 8px 20px rgba(37,57,90,.05)}.subject-visual-art>span{width:138px!important;height:138px!important;border-radius:42px!important;box-shadow:0 26px 55px color-mix(in srgb,var(--hero-color) 28%,transparent)!important}.subject-visual-art>span .ui-icon{width:62px;height:62px;stroke-width:2}.visual-orbit{border-width:2px!important;opacity:.55}.overview-section-head{align-items:center!important}.subject-overview-section{border:0!important;border-radius:26px!important;background:#fff!important;box-shadow:0 12px 30px rgba(37,57,90,.065)!important}.overview-lesson-card{border:0!important;background:#F7F9FC!important;border-radius:18px!important}.overview-lesson-card:hover{background:var(--active-subject-soft,#EEF7F5)!important;transform:translateY(-2px)}.overview-lesson-no{border-radius:14px!important;background:#fff!important;box-shadow:0 7px 15px rgba(37,57,90,.07)}.status-pill{border:0!important;border-radius:999px!important;background:#EEF2F7!important;color:#69778C!important}.status-pill.is-ready{background:#E8F9F2!important;color:#238C59!important}
.lesson-page-header{max-width:1020px!important;margin-inline:auto}.lesson-title-row h1{font-size:clamp(2rem,4vw,3rem)!important;color:#20304C}.lesson-route-card{border:0!important;border-radius:25px!important;background:#fff!important;box-shadow:0 12px 30px rgba(37,57,90,.07)!important}.lesson-screen{max-width:900px!important}.screen-card{border:0!important;border-radius:28px!important;box-shadow:0 18px 48px rgba(37,57,90,.10)!important}.screen-content{padding:clamp(24px,4vw,38px)}.screen-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,#fff);font-size:.72rem}.screen-title{font-size:clamp(1.8rem,4vw,2.55rem);color:#20304C}.opening-art,.lesson-art-card{border:0!important;border-radius:26px!important;background:linear-gradient(145deg,#F4F9FF,#EEF3FF)!important}.choice-button{min-height:62px;border:1px solid #E6ECF4!important;border-radius:18px!important;background:#fff!important;box-shadow:0 7px 16px rgba(37,57,90,.045);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.choice-button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(37,57,90,.08);border-color:#C9D7EB!important}.choice-button[aria-pressed=true]{background:#F0FBF9!important;border-color:#7AD7CF!important}.choice-marker{border:0!important;border-radius:13px!important;background:#F1F5FA;color:#51627B}.audio-player{border-radius:22px!important;background:linear-gradient(135deg,#E9F8FF,#F1EEFF)!important}.audio-button{width:58px;height:58px;border-radius:19px!important;background:linear-gradient(145deg,#44BFEF,#6D73F4)!important;box-shadow:0 10px 22px rgba(80,112,230,.20)}.feedback-box{border-radius:18px!important}.primary-button,.secondary-button{min-height:54px;border-radius:17px!important;font-weight:850}.primary-button{background:linear-gradient(135deg,#08A79D,#0DB7A9)!important;box-shadow:0 10px 20px rgba(8,167,157,.18)}.secondary-button{border-color:#DCE4EF!important;background:#fff!important}.lesson-navigation{position:sticky;bottom:14px;padding:10px;border-radius:22px;background:rgba(245,248,252,.88);backdrop-filter:blur(10px);z-index:5}
.progress-view .page-heading{max-width:1180px}.progress-dashboard,.teacher-workspace{color:#24324B}.teacher-workspace{max-width:1220px}.teacher-header{padding:24px;border-radius:27px;background:linear-gradient(135deg,#fff,#F1F5FF);box-shadow:0 12px 32px rgba(37,57,90,.07)}.teacher-card{border:0!important;border-radius:22px!important;box-shadow:0 10px 26px rgba(37,57,90,.065)!important}.teacher-current-lesson{border-left:0!important;border-radius:20px!important;background:#EEF7FF!important}.teacher-book-overview{border:0!important;gap:12px!important;background:transparent!important}.teacher-book-overview div{border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(37,57,90,.06)}
.is-teacher-mode .app-header{background:#fff}.is-teacher-mode .brand-mark{background:linear-gradient(145deg,#4D7CFE,#6548D8)}.is-teacher-mode .book-sidebar{background:linear-gradient(180deg,#202A43,#182137)}
.toast{border-radius:16px;background:#20304C;color:#fff;box-shadow:0 15px 35px rgba(23,37,58,.22)}
@media(max-width:1100px){.home-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.suite-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}.continue-card{grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr)!important}.subject-visual-copy h2{font-size:36px!important}}
@media(max-width:760px){.suite-shortcuts{grid-template-columns:1fr}.suite-shortcut{min-height:76px;grid-template-columns:48px 1fr;border-radius:20px}.shortcut-icon{width:46px;height:46px;border-radius:15px}.continue-card{grid-template-columns:1fr!important}.continue-illustration{min-height:210px}.suite-mascot{max-width:260px}.home-subject-grid{grid-template-columns:1fr!important}.suite-greeting{align-items:flex-start!important}.greeting-side{margin-top:10px}.subject-visual-hero{padding:24px!important}.subject-visual-copy h2{font-size:31px!important}.lesson-navigation{bottom:8px}}
@media(max-width:520px){.home-view,.book-view,.progress-view{padding:18px 14px}.suite-greeting h1{font-size:2.15rem!important}.continue-card{border-radius:25px}.continue-card-copy{padding:24px}.home-subject-card{min-height:168px!important}.subject-page-hero{border-radius:20px!important}.subject-visual-hero{border-radius:24px!important}.screen-card{border-radius:23px!important}.school-year{display:none}}
@media(prefers-reduced-motion:reduce){.suite-shortcut,.home-subject-card,.choice-button{transition:none!important}.suite-shortcut:hover,.home-subject-card:hover,.choice-button:hover{transform:none!important}}

/* ===== SOURCE: suite-v012.css ===== */
/* v0.12.0 — Student Suite Redesign
   Reference direction: bright child-friendly learning suite + calm teacher dashboard.
   This file intentionally overrides legacy presentation without changing curriculum/data contracts. */

:root {
  color-scheme: light;
  --suite-bg: #f4f8ff;
  --suite-surface: #ffffff;
  --suite-ink: #122a55;
  --suite-ink-2: #344a73;
  --suite-muted: #7586a5;
  --suite-blue: #2475f2;
  --suite-blue-2: #4f90ff;
  --suite-navy: #173b66;
  --suite-navy-2: #0d2d52;
  --suite-cyan: #3fcdf4;
  --suite-teal: #16b9ab;
  --suite-green: #44c785;
  --suite-purple: #8a6cf0;
  --suite-gold: #ffb51c;
  --suite-orange: #ff7a3d;
  --suite-red: #ff5c66;
  --suite-line: #e6edf7;
  --suite-shadow: 0 14px 38px rgba(40, 74, 126, .10);
  --suite-shadow-hover: 0 22px 48px rgba(40, 74, 126, .16);
  --suite-radius-xl: 30px;
  --suite-radius-lg: 24px;
  --suite-radius-md: 18px;
  --suite-radius-sm: 13px;
  --sidebar-width: 250px;
  --header-height: 88px;

  --page-bg: var(--suite-bg);
  --surface: var(--suite-surface);
  --surface-soft: #f1f6ff;
  --surface-warm: #fff8e7;
  --text: var(--suite-ink);
  --text-muted: var(--suite-muted);
  --primary: var(--suite-blue);
  --on-primary: #fff;
  --accent: #ffbd2d;
  --positive: #21a969;
  --positive-soft: #e9f9f0;
  --warning: #c87c04;
  --warning-soft: #fff4dc;
  --error: #d94655;
  --error-soft: #fff0f1;
  --border: var(--suite-line);
  --shadow: rgba(40, 74, 126, .10);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

html, body { background: var(--suite-bg); color: var(--suite-ink); }
body { overflow-x: hidden; }
button, input, textarea, select { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(36, 117, 242, .34) !important;
  outline-offset: 3px;
}

/* ===== Global shell ===== */
.app-shell { min-height: 100vh; background: var(--suite-bg); }
.book-layout { display: block !important; min-height: 0 !important; }

.book-sidebar {
  position: fixed !important;
  z-index: 60;
  inset: 0 auto 0 0 !important;
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px 18px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(80, 155, 255, .12), transparent 31%),
    linear-gradient(180deg, #1c4678 0%, #12365f 55%, #0e2d51 100%) !important;
  color: #fff;
  box-shadow: 8px 0 30px rgba(24, 54, 96, .10);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.book-sidebar::-webkit-scrollbar { width: 6px; }
.book-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }

.app-header {
  position: sticky !important;
  top: 0;
  z-index: 45;
  height: var(--header-height);
  min-height: var(--header-height) !important;
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  display: grid !important;
  grid-template-columns: minmax(270px, .85fr) minmax(340px, 1.25fr) auto;
  align-items: center;
  gap: 26px !important;
  padding: 13px clamp(22px, 3vw, 42px) !important;
  border-bottom: 1px solid rgba(212, 224, 241, .72) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(42, 70, 112, .04);
}

.page-content {
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: 0 !important;
}
.page-view { min-width: 0; }
.home-view,
.book-view,
.progress-view,
.utility-view { max-width: 1320px !important; margin: 0 auto !important; padding: 20px clamp(24px, 3vw, 42px) 42px !important; }
.student-workspace,
.teacher-workspace { margin-left: 0 !important; padding-top: 24px !important; }

/* ===== Brand ===== */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 4px 10px 18px;
  margin-bottom: 14px;
}
.sidebar-logo {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.14));
}
.sidebar-logo svg { width: 62px; height: 62px; overflow: visible; }
.logo-page { stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.logo-page-left { fill: #51d7c4; }
.logo-page-right { fill: #ff825e; }
.logo-spine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.logo-stem { fill: none; stroke: #9adb61; stroke-width: 4; stroke-linecap: round; }
.logo-leaf-a { fill: #84cf55; }
.logo-leaf-b { fill: #b4df67; }
.sidebar-brand-copy { min-width: 0; }
.sidebar-brand-copy strong { display: block; color: #fff; font-size: 1.05rem; line-height: 1.13; letter-spacing: -.015em; }
.sidebar-brand-copy small { display: block; margin-top: 5px; color: #a9c3e2; font-size: .72rem; font-weight: 650; }

/* ===== Header ===== */
.header-title-block { min-width: 0; }
.header-title-block strong { display: block; color: var(--suite-ink); font-size: clamp(1.08rem, 1.5vw, 1.34rem); letter-spacing: -.02em; white-space: nowrap; }
.header-title-block small { display: block; margin-top: 4px; color: #8a99b5; font-size: .84rem; font-weight: 650; }
.header-search {
  width: min(100%, 470px) !important;
  justify-self: center;
  min-height: 54px !important;
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 0 17px !important;
  border: 1px solid #e5ebf5 !important;
  border-radius: 22px !important;
  background: #f1f5fb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.header-search:focus-within { border-color: #b9d1fb !important; box-shadow: 0 0 0 4px rgba(36,117,242,.08); }
.header-search-icon { color: #2f4d79 !important; }
.header-search-icon svg { width: 25px !important; height: 25px !important; }
.header-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--suite-ink); font-size: .96rem; }
.header-search input::placeholder { color: #91a0bb; opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 15px !important; }
.header-icon-button {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: #29456d;
  cursor: pointer;
}
.header-icon-button:hover { background: #f2f6fc; }
.header-icon-button svg { width: 26px; height: 26px; }
.notification-dot { position: absolute; width: 10px; height: 10px; right: 8px; top: 8px; border: 2px solid #fff; border-radius: 50%; background: #ff4b55; }
.student-profile-button {
  min-width: 178px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 4px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--suite-ink);
  text-align: left;
  cursor: pointer;
}
.student-profile-button:hover { background: #f4f7fc; }
.profile-avatar-art { width: 48px; height: 48px; display: block; border-radius: 50%; overflow: hidden; box-shadow: 0 5px 12px rgba(40,74,126,.12); }
.profile-avatar-art svg { width: 48px; height: 48px; display: block; }
.profile-copy small,.profile-copy strong { display: block; }
.profile-copy small { color: #667999; font-size: .78rem; }
.profile-copy strong { margin-top: 1px; font-size: .91rem; }
.menu-button { display: none !important; }

/* ===== Sidebar navigation ===== */
.primary-navigation { display: grid; gap: 5px; }
.primary-nav-item,
.utility-nav-item,
.sidebar-dersler-toggle {
  width: 100%;
  min-height: 49px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #d8e7fa !important;
  text-align: left;
  font-size: .92rem;
  font-weight: 620;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.primary-nav-item:hover,
.utility-nav-item:hover,
.sidebar-dersler-toggle:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.primary-nav-item.is-active { background: linear-gradient(135deg,#2d7df4,#1c66e7); color: #fff !important; box-shadow: 0 10px 22px rgba(0,61,157,.24); }
.nav-icon { width: 28px; height: 28px; display: grid; place-items: center; color: #b5cff0; }
.primary-nav-item.is-active .nav-icon,
.primary-nav-item:hover .nav-icon,
.utility-nav-item:hover .nav-icon,
.sidebar-dersler-toggle:hover .nav-icon { color: #fff; }
.nav-icon svg { width: 23px; height: 23px; stroke-linecap: round; stroke-linejoin: round; }
.menu-chevron { color: #90add2; font-size: 1rem; transition: transform .18s ease; }
.sidebar-dersler-toggle[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.sidebar-divider { height: 1px; margin: 11px 10px; background: rgba(209,228,249,.17); }
.sidebar-motivation {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 18px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  color: #eaf3ff;
}
.sidebar-motivation p { margin: 0; font-size: .78rem; line-height: 1.55; }
.sidebar-motivation strong { color: #fff; }
.motivation-sprout { font-size: 1.65rem; }

.sidebar-subjects-shell {
  margin: 1px 0 7px 9px;
  padding: 5px 0 6px 9px;
  border-left: 1px solid rgba(185,211,241,.17);
}
.sidebar-subjects-shell[hidden] { display: none !important; }
.sidebar-subjects-shell .sidebar-mini-label { display: none !important; }
.sidebar-subject-group { margin: 2px 0; }
.sidebar-subject-button {
  min-height: 43px !important;
  padding: 5px 8px !important;
  border-radius: 12px !important;
  color: #c9dbf2 !important;
  background: transparent !important;
}
.sidebar-subject-button:hover,
.sidebar-subject-button.is-active { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.sidebar-subject-icon { width: 28px !important; height: 28px !important; border-radius: 9px !important; color: #fff !important; background: var(--subject-color) !important; box-shadow: none !important; }
.sidebar-subject-icon .ui-icon { width: 17px !important; height: 17px !important; }
.sidebar-subject-copy strong { color: inherit !important; font-size: .74rem !important; line-height: 1.2 !important; }
.sidebar-subject-copy small { color: #91afd1 !important; font-size: .59rem !important; }
.sidebar-subject-arrow { color: #89a8ce !important; }
.sidebar-subject-panel { margin: 0 0 2px 8px !important; }
.sidebar-subject-panel-inner { padding: 4px 0 7px 7px !important; border-left: 1px solid rgba(255,255,255,.08); }
.sidebar-submenu-link,
.sidebar-structure-link,
.pilot-lesson-link {
  color: #bcd1eb !important;
  background: transparent !important;
  border-color: transparent !important;
}
.sidebar-submenu-link:hover,
.sidebar-structure-link:hover,
.pilot-lesson-link:hover,
.sidebar-submenu-link.is-active,
.sidebar-structure-link.is-active,
.pilot-lesson-link.is-active { background: rgba(255,255,255,.075) !important; color: #fff !important; }
.sidebar-action-icon,
.sidebar-action-arrow,
.pilot-lesson-state { color: #9eb9da !important; }
.sidebar-subsection-label span { color: #91afd1 !important; }
.sidebar-subsection-label strong { color: #e8f2ff !important; }
.pilot-lesson-number { background: rgba(255,255,255,.08) !important; color: #cfe1f5 !important; }
.pilot-lesson-copy small { color: #88a6ca !important; }
.sidebar-structure-link > span { color: #91afd1 !important; }

/* ===== Dashboard hero ===== */
.dashboard-hero {
  position: relative;
  min-height: 242px;
  display: grid;
  grid-template-columns: minmax(360px,.9fr) minmax(330px,.75fr) minmax(215px,.45fr);
  align-items: center;
  gap: 10px;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 24px 28px 0 32px;
  border-radius: 25px;
  background:
    radial-gradient(circle at 42% 23%, rgba(255,255,255,.42), transparent 22%),
    linear-gradient(135deg,#bfeeff 0%,#a6e2fb 45%,#c8f0ff 100%);
  box-shadow: 0 14px 32px rgba(48,116,173,.08);
}
.dashboard-hero:before,
.dashboard-hero:after { content:""; position:absolute; border-radius: 50%; background: rgba(255,255,255,.22); }
.dashboard-hero:before { width: 190px; height: 190px; left: 40%; top: -100px; }
.dashboard-hero:after { width: 130px; height: 130px; right: 9%; bottom: -68px; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-bottom: 22px; }
.hero-copy h1 { margin: 0; color: #102956; font-size: clamp(2.55rem,4vw,4rem); line-height: 1; letter-spacing: -.055em; }
.hero-copy p { margin: 12px 0 18px; color: #18365f; font-size: clamp(1rem,1.5vw,1.23rem); font-weight: 720; }
.hero-primary-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg,#2d7df4,#1f69e7);
  color: #fff;
  box-shadow: 0 10px 22px rgba(32,101,220,.20);
  font-size: 1rem;
  font-weight: 760;
  cursor: pointer;
}
.hero-primary-button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(32,101,220,.27); }
.hero-character { position: relative; z-index: 1; align-self: end; display: flex; justify-content: center; min-width: 0; }
.hero-character svg { width: min(100%, 420px); height: 240px; display: block; }
.hero-message {
  position: relative;
  z-index: 2;
  align-self: center;
  min-height: 142px;
  display: grid;
  grid-template-columns: 1fr 50px;
  align-items: center;
  gap: 10px;
  padding: 20px 20px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  color: #2454b8;
  box-shadow: 0 12px 28px rgba(74,127,181,.08);
}
.hero-message strong { font-size: 1.03rem; line-height: 1.48; }
.hero-message span { font-size: 2.8rem; }

/* ===== Section title ===== */
.home-section-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 14px; }
.home-section-title h2 { margin: 0; color: #152d57; font-size: 1.48rem; letter-spacing: -.025em; }
.outline-link-button,
.text-link-button { border: 0; background: transparent; color: #1e68df; font-weight: 700; cursor: pointer; }
.outline-link-button { min-height: 42px; padding: 0 17px; border: 1px solid #d9e5f7; border-radius: 999px; background: #fff; }
.outline-link-button:hover { border-color: #b6d0f7; background: #f8fbff; }
.text-link-button { padding: 7px; }

/* ===== Subject cards ===== */
.suite-subject-grid {
  display: grid !important;
  grid-template-columns: repeat(9, minmax(105px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 22px;
}
.suite-subject-grid .home-subject-card {
  min-height: 185px !important;
  display: grid !important;
  grid-template-rows: 66px 1fr auto !important;
  align-items: start !important;
  padding: 15px 12px 11px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(180deg, color-mix(in srgb,var(--subject-soft) 84%,#fff) 0%, var(--subject-soft) 100%) !important;
  box-shadow: 0 10px 26px rgba(56,83,127,.075) !important;
  text-align: center !important;
  overflow: hidden;
}
.suite-subject-grid .home-subject-card:before,
.suite-subject-grid .home-subject-card:after { display:none !important; }
.suite-subject-grid .home-subject-card:hover { transform: translateY(-4px) !important; box-shadow: var(--suite-shadow-hover) !important; }
.suite-subject-grid .home-subject-art {
  position: static !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: color-mix(in srgb,var(--subject-color) 88%,#fff) !important;
  box-shadow: 0 9px 18px color-mix(in srgb,var(--subject-color) 22%,transparent) !important;
}
.suite-subject-grid .home-subject-art i { display:grid; place-items:center; color:#fff!important; }
.suite-subject-grid .home-subject-art .subject-line-icon { width: 31px !important; height: 31px !important; stroke-width: 2.1 !important; }
.suite-subject-grid .home-subject-art b,
.suite-subject-grid .home-subject-art em { display:none !important; }
.suite-subject-grid .home-subject-copy { align-self: start; min-width: 0; }
.suite-subject-grid .home-subject-copy small { display:none !important; }
.suite-subject-grid .home-subject-copy strong { display: block; margin: 9px 0 3px !important; color:#142c54!important; font-size: .91rem !important; line-height:1.2; white-space: normal !important; }
.suite-subject-grid .home-subject-copy span { display:block; margin:0!important; color:#465d83!important; font-size:.70rem!important; line-height:1.3; white-space:normal!important; }
.suite-subject-grid .home-subject-arrow {
  position: static !important;
  justify-self: end;
  width: 29px !important;
  height: 29px !important;
  display:grid!important;
  place-items:center;
  border-radius:50%!important;
  background:#fff!important;
  color:#23426d!important;
  box-shadow:0 5px 12px rgba(56,83,127,.09)!important;
  font-size:.85rem;
}

/* ===== Home widgets ===== */
.dashboard-main-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:18px; margin-bottom:15px; }
.dashboard-widget { min-width:0; border:1px solid #e8eef7; border-radius:20px; background:#fff; box-shadow:0 10px 26px rgba(53,81,126,.065); }
.dashboard-widget > h2,
.widget-title-row h2 { margin:0; color:#142d57; font-size:1.28rem; letter-spacing:-.02em; }
.recommendation-widget { padding:14px 16px 16px; }
.recommendation-widget > h2 { margin:0 0 9px 2px; }
.recommendation-content { min-height:142px; display:grid; grid-template-columns:190px minmax(0,1fr); align-items:center; gap:18px; padding:10px 14px 10px 10px; border-radius:16px; background:linear-gradient(100deg,#e7faf6 0%,#effcf8 55%,#f8fffd 100%); }
.recommendation-art { min-height:122px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:linear-gradient(160deg,#c8f0ff,#dcf9f2); }
.recommendation-art svg { width:150px; height:110px; }
.recommendation-copy h3 { margin:8px 0 3px; color:#102b55; font-size:1.32rem; letter-spacing:-.025em; }
.recommendation-copy p { margin:0 0 10px; color:#435a80; font-size:.83rem; }
.recommendation-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#71839f; font-size:.72rem; }
.lesson-chip { display:inline-flex; padding:5px 10px; border-radius:999px; background:#81e8d8; color:#086f68; font-weight:800; }
.recommendation-button { min-height:42px; display:inline-flex; align-items:center; gap:16px; padding:0 18px; border:0; border-radius:12px; background:linear-gradient(135deg,#17baa9,#08a89c); color:#fff; font-weight:800; cursor:pointer; box-shadow:0 8px 16px rgba(8,168,156,.18); }
.recommendation-button:hover { transform:translateY(-1px); }

.progress-widget-home { padding:14px 17px 15px; }
.widget-title-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-bottom:10px; border-bottom:1px solid #edf1f7; }
.progress-summary-body { min-height:142px; display:grid; grid-template-columns:160px minmax(0,1fr); align-items:center; gap:14px; padding-top:8px; }
.progress-ring { --progress:0; width:130px; height:130px; margin:auto; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#16b8a8 calc(var(--progress) * 1%), #e8eef7 0); position:relative; }
.progress-ring:after { content:""; position:absolute; inset:13px; border-radius:50%; background:#fff; }
.progress-ring > div { position:relative; z-index:1; text-align:center; }
.progress-ring strong { display:block; color:#142d57; font-size:1.6rem; line-height:1; }
.progress-ring span { display:block; margin-top:5px; color:#7a8aa5; font-size:.67rem; line-height:1.25; }
.progress-lines { display:grid; gap:1px; }
.progress-lines > div { display:grid; grid-template-columns:38px 62px minmax(0,1fr); align-items:center; gap:8px; min-height:43px; border-bottom:1px solid #edf1f7; }
.progress-lines > div:last-child { border-bottom:0; }
.progress-line-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; color:#fff; font-weight:900; }
.progress-line-icon.is-green{background:#4dcc8a}.progress-line-icon.is-purple{background:#a88af5}.progress-line-icon.is-gold{background:#ffb21a}
.progress-lines strong { color:#142d57; font-size:1rem; }
.progress-lines small { color:#8290aa; font-size:.70rem; }

.dashboard-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dashboard-action-card { min-height:80px; display:grid; grid-template-columns:48px minmax(0,1fr) 30px; align-items:center; gap:13px; padding:11px 18px; border:0; border-radius:19px; color:#17305b; text-align:left; cursor:pointer; box-shadow:0 8px 20px rgba(53,81,126,.055); }
.goal-card { background:linear-gradient(100deg,#fff8f0,#fffdf9); }
.badges-card { background:linear-gradient(100deg,#f4f8ff,#fbfcff); }
.dashboard-action-card:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(53,81,126,.10); }
.action-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:#fff; font-size:1.35rem; font-weight:900; }
.action-icon.is-orange{background:#ff7c34}.action-icon.is-gold{background:#ffb31a}
.dashboard-action-card strong,.dashboard-action-card small { display:block; }
.dashboard-action-card strong { font-size:.96rem; }
.dashboard-action-card small { margin-top:2px; color:#7b8ba6; font-size:.74rem; }
.action-arrow { justify-self:end; color:#244266; font-size:2rem; font-weight:300; }

/* ===== Subject pages ===== */
.subject-page-hero { max-width:none !important; margin:0 0 16px !important; border:0 !important; border-radius:24px !important; background:#fff !important; color:var(--suite-ink) !important; box-shadow:var(--suite-shadow) !important; }
.subject-page-letter { display:grid!important; place-items:center; width:62px!important; height:62px!important; border-radius:18px!important; background:var(--active-subject)!important; color:#fff!important; }
.subject-page-letter .ui-icon { width:31px; height:31px; }
.subject-page-hero .eyebrow { color:var(--active-subject)!important; }
.subject-page-hero h1 { color:var(--suite-ink)!important; }
.subject-page-hero p { color:var(--suite-muted)!important; }
.subject-page-count { padding:8px 12px!important; border-radius:999px!important; background:color-mix(in srgb,var(--active-subject) 10%,#fff)!important; color:var(--active-subject)!important; font-weight:800!important; }
.subject-tabs { max-width:none!important; margin:0 0 16px!important; padding:5px!important; border:0!important; border-radius:16px!important; background:#eaf0f9!important; }
.subject-tab { min-height:42px!important; border:0!important; border-radius:12px!important; color:#6e7f9b!important; }
.subject-tab.is-active { background:#fff!important; color:var(--active-subject)!important; box-shadow:0 7px 16px rgba(53,81,126,.07)!important; }
.subject-section-heading { max-width:none!important; margin:0 0 12px!important; }
.subject-section-heading h2 { color:#17305b!important; }
.subject-section-heading p { color:#7485a2!important; }
.subject-visual-hero { min-height:290px!important; border:0!important; border-radius:26px!important; box-shadow:var(--suite-shadow)!important; }
.subject-overview-section { border:0!important; border-radius:23px!important; box-shadow:0 10px 27px rgba(53,81,126,.065)!important; }
.curriculum-map-item { border-color:#e8eef7!important; border-radius:17px!important; background:#fff!important; }
.curriculum-map-item.is-highlighted { border-color:var(--active-subject)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--active-subject) 10%,transparent)!important; }
.curriculum-state { border-radius:999px!important; background:#eef3f8!important; color:#6f809c!important; }

/* ===== Student lesson workspace ===== */
.student-workspace { max-width:1180px!important; width:100%; margin:0 auto!important; padding:24px clamp(24px,4vw,48px) 38px!important; }
.lesson-page-header { max-width:980px!important; margin:0 auto 15px!important; }
.lesson-breadcrumb { color:#7183a0!important; }
.lesson-title-row h1 { color:#142d57!important; font-size:clamp(1.8rem,3vw,2.6rem)!important; }
.lesson-route-card { padding:15px 17px!important; border:1px solid #e6edf7!important; border-radius:19px!important; background:#fff!important; box-shadow:0 8px 22px rgba(53,81,126,.055)!important; }
.lesson-step-list { display:flex!important; gap:7px!important; overflow:auto; padding-bottom:3px!important; scrollbar-width:none; }
.lesson-step-list::-webkit-scrollbar{display:none}
.lesson-step-list .step-item { min-width:max-content!important; min-height:38px!important; padding:5px 9px!important; border-radius:999px!important; background:#f2f5fa!important; color:#7c8ca6!important; }
.lesson-step-list .step-item.is-current { background:#e6f1ff!important; color:#2268d7!important; }
.lesson-step-list .step-marker { width:25px!important; height:25px!important; border:0!important; background:#fff!important; }
.lesson-step-list .step-item.is-current .step-marker { background:#2b78ee!important; color:#fff!important; }
.lesson-screen { max-width:980px!important; }
.screen-card { border:0!important; border-radius:27px!important; background:#fff!important; box-shadow:0 18px 42px rgba(45,75,123,.10)!important; }
.screen-content { padding:clamp(24px,4vw,38px)!important; }
.screen-kicker-row { display:flex; align-items:center; gap:9px; }
.step-type-badge { width:39px!important; height:39px!important; display:grid!important; place-items:center!important; border-radius:13px!important; background:color-mix(in srgb,var(--lesson-subject-color) 12%,#fff)!important; color:var(--lesson-subject-color)!important; }
.step-type-badge .ui-icon { width:20px; height:20px; }
.screen-kicker { margin:0!important; color:var(--lesson-subject-color)!important; font-size:.74rem!important; letter-spacing:.06em; }
.screen-title { margin-top:11px!important; color:#122b55!important; font-size:clamp(1.7rem,3.6vw,2.65rem)!important; }
.screen-lead { color:#657895!important; line-height:1.6!important; }
.opening-panel { grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)!important; }
.lesson-art-card { min-height:310px!important; border-radius:24px!important; box-shadow:none!important; }
.choice-button { min-height:64px!important; padding:13px 15px!important; border:1.5px solid #e7edf6!important; border-radius:16px!important; background:#fff!important; box-shadow:0 5px 14px rgba(53,81,126,.035); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.choice-button:hover { transform:translateY(-1px); border-color:#bed5f6!important; background:#f8fbff!important; }
.choice-button.is-correct { border-color:#57c98d!important; background:#eefbf4!important; }
.choice-button.is-review { border-color:#f0bd5d!important; background:#fff8e9!important; }
.choice-marker { border:0!important; background:#eef3fb!important; color:#355b91!important; }
.feedback-box { border-radius:15px!important; }
.reading-panel { padding:19px!important; border-radius:20px!important; background:#fbfcff!important; }
.reading-text { font-size:1.06rem!important; line-height:1.85!important; color:#253b61!important; }
.audio-player { padding:16px!important; border:0!important; border-radius:20px!important; background:linear-gradient(110deg,#eef8ff,#f7fbff)!important; }
.audio-button { width:58px!important;height:58px!important;border-radius:19px!important;background:#2d7df4!important;color:#fff!important;box-shadow:0 10px 20px rgba(45,125,244,.22)!important; }
.transcript-button { border-radius:11px!important; }
.lesson-navigation { max-width:980px!important; position:sticky!important; bottom:12px!important; z-index:15; padding:12px!important; margin:16px auto 0!important; border:1px solid rgba(222,232,245,.84); border-radius:20px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 12px 28px rgba(45,75,123,.10); }
.primary-button,.secondary-button { min-height:48px!important; border-radius:13px!important; font-weight:790!important; }
.primary-button { background:linear-gradient(135deg,#2d7df4,#1f69e7)!important; box-shadow:0 8px 18px rgba(45,125,244,.17); }
.secondary-button { background:#f2f5fa!important; border-color:#e3eaf5!important; color:#405675!important; }

/* Recorder */
.recorder-panel { padding:20px!important; border-radius:22px!important; background:linear-gradient(145deg,#f8fbff,#eef6ff)!important; }
.privacy-note { border:0!important; border-radius:15px!important; background:#fff!important; color:#667895!important; box-shadow:0 6px 15px rgba(53,81,126,.05); }
.recorder-stage { min-height:185px; display:grid; place-items:center; gap:12px; margin:16px 0; padding:16px; border-radius:22px; background:linear-gradient(145deg,#e5f5ff,#f4eeff); }
.recorder-orb { position:relative; width:96px; height:96px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#38a7ff,#775cf0); color:#fff; box-shadow:0 16px 30px rgba(81,104,216,.22); font-size:2.4rem; font-weight:900; }
.recorder-orb.is-recording { background:linear-gradient(145deg,#ff6b71,#f04458); animation:recorder-pulse 1.4s ease-in-out infinite; }
.recorder-orb svg { width:38px;height:38px; }
.recorder-wave { height:34px; display:flex; align-items:center; gap:4px; }
.recorder-wave i { width:5px; height:9px; border-radius:999px; background:#5c79d8; animation:wave 1s ease-in-out infinite; }
.recorder-wave i:nth-child(2),.recorder-wave i:nth-child(6){animation-delay:.12s}.recorder-wave i:nth-child(3),.recorder-wave i:nth-child(5){animation-delay:.22s}.recorder-wave i:nth-child(4){animation-delay:.34s}
.recorder-stage p { margin:0; color:#50698e; font-weight:700; }
.recorder-controls { justify-content:center!important; }
.recorder-controls .primary-button { min-width:190px; }
.local-recording-playback { width:100%; margin-top:12px; }
.recording-reference { border:0!important; border-radius:15px!important; background:#fff!important; }
@keyframes recorder-pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,68,88,.18),0 16px 30px rgba(81,104,216,.18)}50%{box-shadow:0 0 0 14px rgba(240,68,88,0),0 16px 30px rgba(81,104,216,.18)}}
@keyframes wave{0%,100%{height:9px}50%{height:30px}}

/* Quiz */
.quiz-stack { display:grid!important; gap:18px!important; }
.quiz-item { margin:0!important; padding:19px!important; border:1px solid #e6edf7!important; border-radius:20px!important; background:#fbfcff!important; }
.quiz-number { display:inline-flex!important; padding:5px 9px!important; border-radius:999px!important; background:#e9f2ff!important; color:#276bd6!important; }
.quiz-prompt { color:#19335f!important; font-size:1.05rem!important; line-height:1.45!important; }
.quiz-options { display:grid!important; grid-template-columns:1fr!important; gap:9px!important; margin-top:14px!important; }
.quiz-option { position:relative; min-height:57px; display:grid!important; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:10px; padding:10px 13px!important; border:1.5px solid #e5ecf6!important; border-radius:15px!important; background:#fff!important; cursor:pointer; }
.quiz-option:hover { border-color:#bfd5f5!important; background:#f8fbff!important; }
.quiz-option input { position:absolute; opacity:0; pointer-events:none; }
.quiz-option-marker { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#edf3fb;color:#49678f;font-weight:850; }
.quiz-option.is-selected { border-color:#78aaf4!important; background:#f1f7ff!important; }
.quiz-option.is-correct { border-color:#57c98d!important; background:#eefbf4!important; }
.quiz-option.is-review { border-color:#f0bd5d!important; background:#fff8e9!important; }
.question-feedback { border-radius:14px!important; }

/* Summary */
.summary-panel { text-align:left; }
.summary-celebration { display:grid; grid-template-columns:74px minmax(0,1fr); align-items:center; gap:16px; margin-bottom:16px; padding:18px; border-radius:20px; background:linear-gradient(120deg,#eefbf4,#f5fbff); }
.summary-celebration-icon { width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:#ffbd2c;color:#fff;font-size:2rem;box-shadow:0 10px 20px rgba(255,189,44,.20); }
.summary-celebration h3 { margin:0 0 4px;color:#16325c;font-size:1.25rem; }
.summary-celebration p { margin:0;color:#647896; }

/* ===== Utility pages ===== */
.utility-view { max-width:1180px!important; }
.utility-hero { min-height:160px; display:grid; grid-template-columns:86px minmax(0,1fr); align-items:center; gap:19px; margin-bottom:18px; padding:24px 28px; border-radius:25px; background:linear-gradient(135deg,#fff,#edf5ff); box-shadow:var(--suite-shadow); }
.utility-hero-icon { width:76px;height:76px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,#2c7cf2,#7b62ea);color:#fff;font-size:2rem;box-shadow:0 14px 26px rgba(62,103,213,.18); }
.utility-hero h1 { margin:3px 0 5px;color:#15305a;font-size:2rem; }
.utility-hero p { margin:0;color:#71839f; }
.utility-content { display:grid; gap:16px; }
.utility-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.utility-card { padding:19px; border:1px solid #e6edf7; border-radius:20px; background:#fff; box-shadow:0 8px 22px rgba(53,81,126,.05); }
.utility-card span { color:#2870df; font-size:.72rem;font-weight:850;letter-spacing:.05em; }
.utility-card h2 { margin:7px 0 6px;color:#17315a;font-size:1.06rem; }
.utility-card p { margin:0;color:#7586a2;font-size:.84rem;line-height:1.55; }
.utility-coming-soon { display:flex; align-items:flex-start; gap:14px; padding:17px 18px; border-radius:18px; background:#fff8e8; color:#8a641f; }
.utility-coming-soon strong { display:block;margin-bottom:2px; }
.utility-home-button { justify-self:start; }
.badge-shelf { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.badge-item { min-height:150px;display:grid;place-items:center;text-align:center;padding:16px;border:1px solid #e7edf7;border-radius:20px;background:#fff; }
.badge-medal { width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ffcd43,#f9a900);color:#fff;font-size:1.8rem;box-shadow:0 11px 22px rgba(249,169,0,.17); }
.badge-item.is-locked { opacity:.48; filter:grayscale(.65); }
.badge-item strong { display:block;margin-top:9px;color:#18345f; }
.badge-item small { color:#7b8ca7; }

/* ===== Progress ===== */
.progress-view .page-heading { max-width:none!important; }
.progress-overview { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:15px!important; }
.progress-stat-card,.progress-card { border:0!important;border-radius:22px!important;background:#fff!important;box-shadow:0 10px 26px rgba(53,81,126,.065)!important; }
.pilot-progress-row { border-color:#e7edf6!important;border-radius:15px!important; }

/* ===== Teacher suite ===== */
.teacher-workspace { max-width:1240px!important; width:100%; margin:0 auto!important; padding:25px clamp(24px,4vw,48px) 42px!important; color:#243554!important; }
.teacher-header { padding:24px 26px!important; border:0!important; border-radius:24px!important; background:linear-gradient(130deg,#fff,#eef5ff)!important; box-shadow:var(--suite-shadow)!important; }
.teacher-kicker { color:#526fe0!important; letter-spacing:.06em; }
.teacher-header h1 { color:#1d3154!important; }
.teacher-header p { max-width:720px;color:#71819b!important; }
.teacher-book-overview { gap:13px!important;border:0!important;background:transparent!important; }
.teacher-book-overview div { border-radius:18px!important;background:#fff!important;box-shadow:0 8px 22px rgba(53,81,126,.055)!important; }
.teacher-book-overview strong { color:#4f6ddc!important; }
.teacher-current-lesson { border:0!important;border-radius:20px!important;background:#edf7ff!important; }
.teacher-card { border:0!important;border-radius:20px!important;box-shadow:0 9px 24px rgba(53,81,126,.055)!important; }
.outcome-card { border-radius:14px!important; }

/* ===== Misc polish ===== */
.toast { left:auto!important; right:26px!important; bottom:26px!important; max-width:420px!important; padding:13px 16px!important; border:0!important; border-radius:15px!important; background:#173b66!important; color:#fff!important; box-shadow:0 14px 30px rgba(15,45,81,.22)!important; }
.empty-state { border-radius:20px!important; }
.status-pill, .curriculum-state, .subject-code-badge { letter-spacing:0!important; }
code { font-family:"SFMono-Regular",Consolas,monospace; }

/* ===== Responsive ===== */
@media (max-width: 1280px) {
  :root { --sidebar-width: 228px; }
  .suite-subject-grid { grid-template-columns:repeat(5,minmax(120px,1fr))!important; }
  .dashboard-hero { grid-template-columns:minmax(330px,.9fr) minmax(300px,.8fr) 210px; }
}

@media (max-width: 1040px) {
  .app-header { grid-template-columns:minmax(220px,.7fr) minmax(300px,1fr) auto; gap:14px!important; }
  .student-profile-button { min-width:52px; grid-template-columns:48px; padding:2px; }
  .profile-copy,.student-profile-button>span:last-child { display:none; }
  .dashboard-hero { grid-template-columns:minmax(300px,1fr) minmax(280px,.8fr); min-height:230px; }
  .hero-message { display:none; }
  .suite-subject-grid { grid-template-columns:repeat(3,minmax(140px,1fr))!important; }
  .dashboard-main-grid { grid-template-columns:1fr; }
  .utility-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .badge-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  :root { --header-height: 72px; }
  .book-sidebar {
    width:min(310px,88vw)!important;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:14px 0 38px rgba(15,45,81,.24);
  }
  .book-sidebar.is-open { transform:translateX(0); }
  .app-header { width:100%; margin-left:0; grid-template-columns:48px minmax(0,1fr) auto; padding:9px 14px!important; }
  .page-content { margin-left:0; }
  .menu-button { width:44px!important;height:44px!important;display:grid!important;place-items:center;border:0!important;border-radius:13px!important;background:#f1f5fb!important; }
  .menu-button span { width:20px!important;background:#274a77!important; }
  .header-title-block small { display:none; }
  .header-search { position:fixed; z-index:30; left:14px; right:14px; top:78px; width:auto!important; max-width:none; display:none!important; box-shadow:0 10px 26px rgba(53,81,126,.12); }
  .header-actions { gap:5px!important; }
  .sidebar-scrim { position:fixed!important; inset:0!important; z-index:55!important; background:rgba(10,32,57,.42)!important; backdrop-filter:blur(2px); }
  .dashboard-hero { grid-template-columns:1fr minmax(230px,.75fr); padding-left:24px; }
  .hero-copy h1 { font-size:2.8rem; }
  .suite-subject-grid { grid-template-columns:repeat(3,minmax(115px,1fr))!important; }
  .home-view,.book-view,.progress-view,.utility-view { padding:18px 18px 34px!important; }
  .teacher-grid { grid-template-columns:1fr!important; }
}

@media (max-width: 620px) {
  .app-header { grid-template-columns:45px minmax(0,1fr) auto; }
  .header-title-block strong { font-size:.95rem; white-space:normal; line-height:1.2; }
  .header-icon-button { width:42px;height:42px; }
  .profile-avatar-art,.profile-avatar-art svg { width:42px;height:42px; }
  .student-profile-button { min-width:42px; }
  .dashboard-hero { min-height:355px; grid-template-columns:1fr; grid-template-rows:auto 170px; padding:22px 20px 0; }
  .hero-copy { padding:0; text-align:center; }
  .hero-copy h1 { font-size:2.55rem; }
  .hero-copy p { font-size:1rem; }
  .hero-character { order:2; }
  .hero-character svg { height:175px; }
  .suite-subject-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; }
  .suite-subject-grid .home-subject-card { min-height:165px!important; }
  .dashboard-main-grid,.dashboard-bottom-grid { grid-template-columns:1fr; }
  .recommendation-content { grid-template-columns:125px minmax(0,1fr); gap:10px; }
  .recommendation-art svg { width:120px; }
  .progress-summary-body { grid-template-columns:125px minmax(0,1fr); }
  .progress-ring { width:112px;height:112px; }
  .progress-lines>div { grid-template-columns:34px 48px minmax(0,1fr); }
  .subject-page-hero { grid-template-columns:54px minmax(0,1fr)!important; }
  .subject-page-count { grid-column:1/-1; justify-self:start; }
  .opening-panel { grid-template-columns:1fr!important; }
  .lesson-art-card { min-height:230px!important; }
  .lesson-title-row { flex-direction:column!important; align-items:flex-start!important; }
  .workspace-toolbar { width:100%; justify-content:flex-start!important; }
  .lesson-navigation { border-radius:16px; }
  .utility-grid,.badge-shelf { grid-template-columns:1fr; }
  .utility-hero { grid-template-columns:64px minmax(0,1fr); padding:20px; }
  .utility-hero-icon { width:60px;height:60px;border-radius:18px; }
}

@media (max-width: 420px) {
  .home-view,.book-view,.progress-view,.utility-view { padding-left:12px!important;padding-right:12px!important; }
  .suite-subject-grid .home-subject-copy strong { font-size:.84rem!important; }
  .suite-subject-grid .home-subject-copy span { font-size:.65rem!important; }
  .recommendation-content { grid-template-columns:1fr; }
  .recommendation-art { display:none; }
  .progress-summary-body { grid-template-columns:1fr; }
  .progress-lines { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
.utility-nav-item.is-active,
.sidebar-dersler-toggle.is-active {
  background: rgba(255,255,255,.10);
  color: #fff !important;
}
.utility-nav-item.is-active .nav-icon,
.sidebar-dersler-toggle.is-active .nav-icon { color:#fff; }

/* v0.12 functional goal + accessibility settings */
.goal-picker-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  padding:22px 24px;
  border:1px solid #e6edf7;
  border-radius:22px;
  background:linear-gradient(120deg,#fff8ef,#fff);
  box-shadow:0 9px 24px rgba(53,81,126,.055);
}
.goal-picker-card span { color:#e97822; font-size:.72rem; font-weight:850; letter-spacing:.055em; }
.goal-picker-card h2 { margin:5px 0 3px; color:#17315a; }
.goal-picker-card p { margin:0; color:#7586a2; }
.goal-picker { display:flex; gap:9px; }
.goal-choice {
  width:72px;
  height:70px;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid #e6edf7;
  border-radius:17px;
  background:#fff;
  color:#526b91;
  font-size:1.25rem;
  font-weight:900;
  cursor:pointer;
}
.goal-choice small { display:block; color:#8b99b0; font-size:.62rem; font-weight:700; }
.goal-choice.is-active { border-color:#ff9a55; background:#fff2e8; color:#e7681b; box-shadow:0 7px 18px rgba(231,104,27,.12); }
.settings-list { display:grid; gap:10px; }
.setting-row {
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 52px;
  align-items:center;
  gap:18px;
  width:100%;
  padding:14px 17px;
  border:1px solid #e5edf7;
  border-radius:18px;
  background:#fff;
  color:#17315a;
  text-align:left;
  cursor:pointer;
}
.setting-row:hover { border-color:#bfd5f5; background:#fbfdff; }
.setting-row strong,.setting-row small { display:block; }
.setting-row small { margin-top:4px; color:#7485a2; line-height:1.4; }
.setting-row > i { position:relative; width:50px; height:29px; border-radius:999px; background:#dce5f1; transition:background .16s ease; }
.setting-row > i > b { position:absolute; width:23px; height:23px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 3px 9px rgba(39,62,96,.16); transition:transform .16s ease; }
.setting-row.is-enabled > i { background:#2f7cf0; }
.setting-row.is-enabled > i > b { transform:translateX(21px); }
.app-shell.pref-large-text { font-size:1.075em; }
.app-shell.pref-large-text .reading-text { font-size:1.16rem!important; }
.app-shell.pref-high-contrast { --suite-muted:#566987; --border:#cfdaea; }
.app-shell.pref-high-contrast .supporting-text,
.app-shell.pref-high-contrast .screen-lead,
.app-shell.pref-high-contrast .home-subject-copy span { color:#526784!important; }
.app-shell.pref-reduce-motion *,
.app-shell.pref-reduce-motion *::before,
.app-shell.pref-reduce-motion *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }

@media(max-width:620px){
  .goal-picker-card{grid-template-columns:1fr}.goal-picker{width:100%}.goal-choice{flex:1}
}

/* Keep search available on tablet/mobile instead of hiding a core function. */
@media (max-width: 820px) {
  .app-header {
    height:auto!important;
    min-height:118px!important;
    grid-template-columns:48px minmax(0,1fr) auto!important;
    grid-template-rows:54px 48px;
    align-content:center;
  }
  .header-search {
    position:static!important;
    grid-column:1 / -1;
    grid-row:2;
    width:100%!important;
    min-height:46px!important;
    display:flex!important;
    box-shadow:none!important;
  }
}
.suite-subject-grid .home-subject-art .subject-rich-icon { width:48px;height:48px;display:block; }
.subject-visual-art>span .subject-rich-icon { width:86px;height:86px;display:block; }

/* ===== SOURCE: suite-v013.css ===== */
/* v0.13.0 — Typography, spacing, sidebar readability and Turkish UI polish.
   This layer overrides v0.12 presentation without changing curriculum/data contracts. */

:root {
  --sidebar-width: 272px;
  --type-xs: .72rem;
  --type-sm: .82rem;
  --type-md: .94rem;
  --type-lg: 1.06rem;
  --type-xl: 1.26rem;
  --type-2xl: 1.52rem;
  --leading-tight: 1.2;
  --leading-ui: 1.4;
  --leading-copy: 1.62;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

html { font-size: 16px; }
body { font-size: 1rem; line-height: var(--leading-ui); text-rendering: optimizeLegibility; }
p, li, label, button, input, textarea, select { line-height: var(--leading-ui); }
h1, h2, h3, h4, p { text-wrap: pretty; }
button { line-height: 1.25; }

/* ===== Header proportions ===== */
.app-header {
  grid-template-columns: minmax(250px, .9fr) minmax(300px, 1.15fr) auto;
  gap: 20px !important;
}
.header-title-block strong {
  font-size: clamp(1.06rem, 1.35vw, 1.28rem);
  line-height: 1.24;
  white-space: normal;
  text-wrap: balance;
}
.header-title-block small { font-size: .80rem; line-height: 1.35; }
.header-search { min-width: 0; }
.header-search input { min-width: 0; font-size: .94rem; }
.student-profile-button { min-width: 164px; }
.profile-copy small { font-size: .76rem; }
.profile-copy strong { font-size: .92rem; }

/* ===== Sidebar legibility ===== */
.book-sidebar { padding: 18px 14px 18px !important; }
.sidebar-brand { min-height: 82px; gap: 11px; padding: 3px 8px 16px; margin-bottom: 10px; }
.sidebar-logo, .sidebar-logo svg { width: 58px; height: 58px; }
.sidebar-brand-copy strong { font-size: 1.02rem; line-height: 1.16; }
.sidebar-brand-copy small { color: #bfd2ea; font-size: .74rem; line-height: 1.35; }

.primary-navigation { gap: 4px; }
.primary-nav-item,
.utility-nav-item,
.sidebar-dersler-toggle {
  min-height: 50px;
  grid-template-columns: 34px minmax(0,1fr) 22px;
  gap: 10px;
  padding: 8px 12px;
  font-size: .94rem;
  line-height: 1.3;
  font-weight: 650;
}
.primary-nav-item > span:nth-child(2),
.utility-nav-item > span:nth-child(2),
.sidebar-dersler-toggle > span:nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nav-icon { color: #c5d9f2; }
.menu-chevron { color: #b7cae4; }

.sidebar-subjects-shell {
  margin: 3px 0 9px 8px !important;
  padding: 5px 0 6px 8px !important;
  border-left-color: rgba(212,230,250,.20) !important;
}
.sidebar-subject-group { margin: 3px 0 !important; }
.sidebar-subject-button {
  min-height: 52px !important;
  grid-template-columns: 34px minmax(0,1fr) 26px !important;
  gap: 9px !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
  color: #eef6ff !important;
}
.sidebar-subject-button:hover,
.sidebar-subject-button.is-active { background: rgba(255,255,255,.09) !important; }
.sidebar-subject-icon {
  width: 31px !important;
  height: 31px !important;
  border-radius: 9px !important;
}
.sidebar-subject-copy { gap: 3px !important; min-width: 0; }
.sidebar-subject-copy strong {
  color: #f6f9ff !important;
  font-size: .80rem !important;
  line-height: 1.28 !important;
  font-weight: 750 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.sidebar-subject-copy small {
  color: #b9cee8 !important;
  font-size: .66rem !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.sidebar-subject-arrow { color: #b9cee8 !important; }

.sidebar-subject-panel {
  margin: 2px 0 8px 9px !important;
}
.sidebar-subject-panel-inner {
  padding: 5px 3px 9px 11px !important;
  border-left: 1px solid rgba(213,230,250,.18) !important;
}
.sidebar-subject-panel.is-open .sidebar-subject-panel-inner { overflow: visible !important; }
.sidebar-submenu { gap: 4px !important; margin: 2px 0 10px !important; padding: 3px 0 3px 4px !important; border-left: 0 !important; }
.sidebar-submenu-link {
  min-height: 42px !important;
  grid-template-columns: 29px minmax(0,1fr) 18px !important;
  gap: 7px !important;
  padding: 6px 7px !important;
  border-radius: 10px !important;
  color: #edf5ff !important;
}
.sidebar-submenu-link strong {
  color: #edf5ff !important;
  font-size: .75rem !important;
  line-height: 1.35 !important;
  font-weight: 680 !important;
  overflow-wrap: anywhere;
}
.sidebar-submenu-link:hover,
.sidebar-submenu-link.is-active {
  background: rgba(255,255,255,.095) !important;
  color: #fff !important;
}
.sidebar-action-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.08) !important;
  color: #d7e8fb !important;
}
.sidebar-action-arrow { color: #b7cbe4 !important; opacity: 1 !important; }

.sidebar-subsection-label {
  gap: 3px !important;
  margin: 13px 0 7px !important;
  padding: 0 5px !important;
}
.sidebar-subsection-label span {
  color: #b5cae4 !important;
  font-size: .64rem !important;
  line-height: 1.35 !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
  font-weight: 700 !important;
}
.sidebar-subsection-label strong {
  color: #f3f8ff !important;
  font-size: .75rem !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}
.sidebar-structure-list { gap: 4px !important; }
.sidebar-structure-link {
  min-height: 42px !important;
  grid-template-columns: 29px minmax(0,1fr) !important;
  gap: 7px !important;
  padding: 6px 7px !important;
  border-radius: 10px !important;
  color: #e5f0fc !important;
}
.sidebar-structure-link > span {
  width: 27px !important;
  height: 27px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.08) !important;
  color: #c2d6ed !important;
  font-size: .61rem !important;
}
.sidebar-structure-link strong {
  color: #eaf3ff !important;
  font-size: .72rem !important;
  line-height: 1.38 !important;
  font-weight: 650 !important;
  overflow-wrap: anywhere;
}
.sidebar-structure-link:hover,
.sidebar-structure-link.is-active { background: rgba(255,255,255,.085) !important; }
.sidebar-structure-link.is-active > span { background: var(--subject-color) !important; color: #fff !important; }

.sidebar-pilot-lessons { gap: 5px !important; padding: 0 !important; }
.sidebar-pilot-lessons .pilot-lesson-link {
  min-height: 54px !important;
  grid-template-columns: 31px minmax(0,1fr) 20px !important;
  gap: 7px !important;
  padding: 7px !important;
  margin: 0 !important;
  border: 1px solid rgba(219,233,250,.10) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.035) !important;
  color: #edf5ff !important;
}
.sidebar-pilot-lessons .pilot-lesson-link:hover,
.sidebar-pilot-lessons .pilot-lesson-link.is-active {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(226,238,252,.17) !important;
}
.pilot-lesson-number {
  width: 29px !important;
  height: 29px !important;
  background: rgba(255,255,255,.09) !important;
  color: #d9e8f8 !important;
  font-size: .62rem !important;
}
.pilot-lesson-copy { min-width: 0; }
.pilot-lesson-copy strong {
  color: #f6f9ff !important;
  font-size: .73rem !important;
  line-height: 1.34 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.pilot-lesson-copy small {
  margin-top: 2px !important;
  color: #b5cae4 !important;
  font-size: .63rem !important;
  line-height: 1.3 !important;
}
.pilot-lesson-state { color: #c3d7ed !important; }
.sidebar-motivation { margin-top: 18px; }
.sidebar-motivation p { font-size: .80rem; line-height: 1.5; }

/* ===== Main dashboard type hierarchy ===== */
.dashboard-hero { min-height: 236px; }
.hero-copy h1 { font-size: clamp(2.45rem, 3.8vw, 3.65rem); line-height: 1.02; }
.hero-copy p { max-width: 520px; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.45; }
.hero-message strong { font-size: .98rem; line-height: 1.45; }
.home-section-title h2,
.dashboard-widget > h2,
.widget-title-row h2 { line-height: 1.2; }
.home-section-title h2 { font-size: 1.42rem; }
.outline-link-button,
.text-link-button { font-size: .82rem; line-height: 1.25; }

.suite-subject-grid .home-subject-card {
  min-height: 202px !important;
  grid-template-rows: 64px minmax(76px,1fr) 31px !important;
  padding: 14px 10px 11px !important;
}
.suite-subject-grid .home-subject-copy {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.suite-subject-grid .home-subject-copy strong {
  min-height: 2.55em;
  margin: 9px 0 4px !important;
  font-size: .86rem !important;
  line-height: 1.27 !important;
  font-weight: 760 !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.suite-subject-grid .home-subject-copy span {
  font-size: .69rem !important;
  line-height: 1.35 !important;
}
.dashboard-widget > h2,
.widget-title-row h2 { font-size: 1.22rem; }
.recommendation-copy h3 { font-size: 1.24rem; line-height: 1.25; }
.recommendation-copy p { font-size: .82rem; line-height: 1.45; }
.recommendation-meta { font-size: .72rem; line-height: 1.35; }
.progress-lines small { font-size: .72rem; line-height: 1.32; }
.dashboard-action-card strong { font-size: .95rem; line-height: 1.3; }
.dashboard-action-card small { font-size: .76rem; line-height: 1.4; }

/* ===== Subject pages ===== */
.eyebrow,
.screen-kicker,
.teacher-kicker,
.subject-code-badge,
.teacher-current-lesson > span {
  text-transform: none !important;
  letter-spacing: .01em !important;
}
.subject-page-hero { gap: 18px !important; padding: 21px 24px !important; }
.subject-page-hero h1 { margin: 3px 0 5px !important; font-size: clamp(1.75rem, 3vw, 2.35rem) !important; line-height: 1.15 !important; }
.subject-page-hero p { margin: 0 !important; font-size: .90rem !important; line-height: 1.55 !important; }
.subject-page-count { font-size: .75rem !important; line-height: 1.3 !important; white-space: normal; text-align: center; }
.subject-tabs { overflow-x: auto; scrollbar-width: none; }
.subject-tabs::-webkit-scrollbar { display: none; }
.subject-tab { flex: 0 0 auto; padding: 8px 14px !important; font-size: .82rem !important; line-height: 1.25 !important; }
.subject-section-heading h2 { margin: 0 0 5px !important; font-size: 1.28rem !important; line-height: 1.25 !important; }
.subject-section-heading p { margin: 0 !important; max-width: 760px; font-size: .86rem !important; line-height: 1.55 !important; }
.subject-visual-copy h2 { font-size: clamp(2rem, 3.2vw, 2.55rem) !important; line-height: 1.12 !important; }
.subject-visual-copy > p { font-size: .96rem !important; line-height: 1.6 !important; }
.subject-facts span { min-width: 116px; }
.subject-facts small { font-size: .70rem !important; line-height: 1.35 !important; }
.overview-section-head small,
.overview-lesson-card small,
.subject-overview-strip small { text-transform: none !important; letter-spacing: .01em !important; }
.overview-section-head h3 { line-height: 1.25; }
.overview-section-head p,
.planned-feature-grid p,
.curriculum-map-item p { line-height: 1.55; }
.overview-lesson-card strong { line-height: 1.35; }
.mini-structure-grid strong { line-height: 1.35; overflow-wrap: anywhere; }

/* ===== Lesson workspace ===== */
.lesson-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:.78rem; line-height:1.4; }
.lesson-title-row { gap: 16px; }
.lesson-title-row h1 { font-size: clamp(1.72rem, 2.8vw, 2.3rem) !important; line-height: 1.14 !important; }
.workspace-toolbar { flex-wrap: wrap; }
.workspace-toolbar .text-button { font-size: .78rem; }
.lesson-route-card { overflow: hidden; }
.progress-label { line-height: 1.35; }
.lesson-step-list .step-item { font-size: .72rem !important; line-height: 1.25 !important; }
.screen-content { padding: clamp(23px, 3.8vw, 36px) !important; }
.screen-kicker { font-size: .76rem !important; line-height: 1.35 !important; }
.screen-title { font-size: clamp(1.65rem, 3.2vw, 2.35rem) !important; line-height: 1.16 !important; }
.screen-lead { max-width: 700px !important; font-size: .98rem !important; line-height: 1.65 !important; }
.supporting-text { font-size: .86rem; line-height: 1.6; }
.choice-button,
.quiz-option,
.self-check,
.classification-choice,
.matching-row,
.ordering-row { line-height: 1.45; }
.choice-button { min-height: 62px; }
.choice-button > span:last-child,
.quiz-option > span:last-child,
.classification-item,
.ordering-text { min-width: 0; overflow-wrap: anywhere; }
.quiz-prompt { font-size: .95rem; line-height: 1.55; }
.quiz-option { align-items: flex-start; min-height: 54px; padding: 11px 12px; }
.quiz-option-marker { flex: 0 0 auto; }
.feedback-box { line-height: 1.55; }
.reading-text { font-size: 1.03rem !important; line-height: 1.75 !important; }
.reading-meta { display:flex; flex-wrap:wrap; gap:7px; }
.reading-meta span { line-height: 1.3; }
.audio-title { line-height: 1.35; }
.audio-status { line-height: 1.45; }
.recorder-controls { align-items: stretch; }
.lesson-navigation .primary-button,
.lesson-navigation .secondary-button { min-height: 48px; }
.summary-celebration h3 { line-height: 1.3; }
.summary-celebration p,
.summary-next strong { line-height: 1.45; }

/* ===== Teacher and utility ===== */
.utility-hero h1 { font-size: clamp(1.7rem, 2.7vw, 2rem); line-height: 1.2; }
.utility-hero p { line-height: 1.55; }
.utility-card h2 { line-height: 1.3; }
.utility-card p { line-height: 1.6; }
.utility-card span { text-transform: none; letter-spacing: .01em; }
.utility-coming-soon { line-height: 1.55; }
.goal-picker-card span { text-transform: none; letter-spacing: .01em; }
.goal-picker-card h2 { line-height: 1.25; }
.goal-picker-card p { line-height: 1.5; }
.teacher-header h1 { font-size: clamp(1.65rem, 2.7vw, 2.1rem) !important; line-height: 1.18 !important; }
.teacher-header p { line-height: 1.6; }
.teacher-card h2 { font-size: 1.04rem; line-height: 1.35; }
.teacher-card p,
.teacher-card li { line-height: 1.6; }
.teacher-book-overview span { font-size: .78rem; line-height: 1.35; }
.teacher-current-lesson h2 { line-height: 1.3; }
.teacher-current-lesson p { line-height: 1.55; }

/* ===== Responsive safeguards ===== */
@media (max-width: 1280px) {
  :root { --sidebar-width: 248px; }
  .sidebar-subject-copy strong { font-size: .77rem !important; }
  .suite-subject-grid { grid-template-columns: repeat(5,minmax(130px,1fr)) !important; }
}

@media (max-width: 1120px) {
  .app-header { grid-template-columns: minmax(210px,.75fr) minmax(260px,1fr) auto; gap: 12px !important; }
  .header-title-block strong { font-size: 1rem; }
  .header-title-block small { font-size: .75rem; }
}

@media (max-width: 820px) {
  :root { --sidebar-width: 0px; }
  .book-sidebar { width: min(334px, 91vw) !important; padding-left: 16px !important; padding-right: 16px !important; }
  .sidebar-subject-copy strong { font-size: .82rem !important; }
  .sidebar-subject-copy small { font-size: .68rem !important; }
  .app-header { grid-template-columns: 48px minmax(0,1fr) auto !important; }
  .header-title-block strong { max-width: 420px; }
  .header-search { min-width: 0 !important; }
  .home-view,.book-view,.progress-view,.utility-view { padding-top: 68px !important; }
}

@media (max-width: 620px) {
  .header-title-block strong { font-size: .91rem !important; line-height: 1.25 !important; }
  .dashboard-hero { min-height: 350px; }
  .hero-copy h1 { font-size: 2.35rem; }
  .hero-copy p { line-height: 1.45; }
  .suite-subject-grid .home-subject-card { min-height: 184px !important; }
  .suite-subject-grid .home-subject-copy strong { min-height: 2.6em; font-size: .82rem !important; }
  .recommendation-copy h3 { font-size: 1.12rem; }
  .progress-lines > div { min-height: 48px; }
  .subject-page-hero { padding: 18px !important; }
  .subject-tabs { margin-inline: -2px !important; }
  .subject-visual-hero { padding: 23px !important; }
  .screen-content { padding: 21px 17px !important; }
  .screen-title { font-size: 1.72rem !important; }
  .screen-lead { font-size: .94rem !important; }
  .reading-text { font-size: 1rem !important; }
  .lesson-navigation { gap: 9px; }
}

@media (max-width: 420px) {
  .suite-subject-grid .home-subject-copy strong { font-size: .79rem !important; }
  .suite-subject-grid .home-subject-copy span { font-size: .66rem !important; }
  .dashboard-action-card { grid-template-columns: 44px minmax(0,1fr) 24px; padding-inline: 14px; }
  .progress-lines > div { grid-template-columns: 34px 45px minmax(0,1fr); gap: 6px; }
  .progress-lines small { font-size: .68rem; }
}

/* Large-text mode should enlarge copy without breaking card hierarchy. */
.app-shell.pref-large-text { font-size: 1.045em; }
.app-shell.pref-large-text .sidebar-subject-copy strong,
.app-shell.pref-large-text .sidebar-submenu-link strong,
.app-shell.pref-large-text .sidebar-structure-link strong,
.app-shell.pref-large-text .pilot-lesson-copy strong { font-size: .80rem !important; }
.app-shell.pref-large-text .reading-text { font-size: 1.14rem !important; line-height: 1.78 !important; }

/* ===== SOURCE: suite-v014.css ===== */
/* v0.14.0 — 3D dashboard hero refinement.
   Desktop: single optimized 3D banner asset.
   Small screens: live Turkish copy + responsive 3D child crop. */

.hero-3d-dashboard {
  position: relative;
  min-height: 0 !important;
  display: block !important;
  aspect-ratio: 2172 / 609;
  margin-bottom: 22px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 26px;
  background: #b7e9fb;
  box-shadow: 0 15px 34px rgba(48, 116, 173, .10);
}
.hero-3d-dashboard::before,
.hero-3d-dashboard::after { display: none !important; }
.hero-3d-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  user-select: none;
  pointer-events: none;
}

/* The desktop graphic already contains the visual headline and CTA.
   Keep the real HTML for accessibility and the existing JS event target. */
.hero-3d-dashboard > .hero-copy {
  position: absolute !important;
  inset: 0;
  z-index: 3;
  padding: 0 !important;
  pointer-events: none;
}
.hero-3d-dashboard > .hero-copy h1,
.hero-3d-dashboard > .hero-copy p {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hero-3d-dashboard .hero-primary-button {
  position: absolute;
  left: 4.1%;
  top: 61.5%;
  width: 24.6%;
  height: 18.5%;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}
.hero-3d-dashboard .hero-primary-button:focus-visible {
  opacity: 1;
  color: transparent;
  outline: 4px solid rgba(255,255,255,.95);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(35,107,235,.38);
}
.hero-3d-dashboard > .hero-character,
.hero-3d-dashboard > .hero-message { display: none !important; }

@media (max-width: 820px) {
  .hero-3d-dashboard {
    min-height: 470px !important;
    aspect-ratio: auto;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    padding: 26px 24px 0 !important;
    background:
      radial-gradient(circle at 76% 22%, rgba(255,255,255,.42), transparent 22%),
      linear-gradient(135deg,#c4efff 0%,#aee5fb 55%,#d4f3ff 100%);
  }
  .hero-3d-banner-image { display: none; }
  .hero-3d-dashboard > .hero-copy {
    position: relative !important;
    inset: auto;
    z-index: 3;
    padding: 0 !important;
    text-align: left;
    pointer-events: auto;
  }
  .hero-3d-dashboard > .hero-copy h1,
  .hero-3d-dashboard > .hero-copy p {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: revert !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
  }
  .hero-3d-dashboard > .hero-copy h1 {
    margin: 0 !important;
    font-size: clamp(2.3rem, 9vw, 3.2rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
  }
  .hero-3d-dashboard > .hero-copy p {
    max-width: 500px;
    margin: 10px 0 17px !important;
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
  .hero-3d-dashboard .hero-primary-button {
    position: static;
    width: auto;
    height: auto;
    min-height: 50px;
    display: inline-flex;
    padding: 0 20px;
    border-radius: 14px;
    background: linear-gradient(135deg,#2d7df4,#1f69e7);
    color: #fff;
    opacity: 1;
    box-shadow: 0 10px 22px rgba(32,101,220,.20);
  }
  .hero-3d-dashboard > .hero-character {
    position: relative;
    display: flex !important;
    z-index: 1;
    justify-content: center;
    align-items: end;
    min-width: 0;
    margin: 12px auto 0;
    width: min(100%, 500px);
    overflow: hidden;
    border-radius: 24px 24px 0 0;
  }
  .hero-3d-dashboard > .hero-character img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: normal;
  }
  .hero-3d-dashboard > .hero-message {
    display: flex !important;
    position: absolute;
    z-index: 4;
    right: 24px;
    bottom: 22px;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #2454b8;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
  }
  .hero-3d-dashboard > .hero-message strong {
    font-size: .88rem;
    line-height: 1.35;
  }
  .hero-3d-dashboard > .hero-message span { font-size: 1.8rem; }
}

@media (max-width: 560px) {
  .hero-3d-dashboard {
    min-height: 500px !important;
    padding: 22px 18px 0 !important;
    border-radius: 22px;
  }
  .hero-3d-dashboard > .hero-copy { text-align: center; }
  .hero-3d-dashboard > .hero-copy h1 { font-size: 2.35rem !important; }
  .hero-3d-dashboard > .hero-copy p { margin-inline: auto !important; }
  .hero-3d-dashboard .hero-primary-button { margin-inline: auto; }
  .hero-3d-dashboard > .hero-character { width: min(100%, 410px); margin-top: 16px; }
  .hero-3d-dashboard > .hero-message {
    right: 16px;
    bottom: 16px;
  }
  .hero-3d-dashboard > .hero-message strong { font-size: .80rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-3d-dashboard .hero-primary-button { transition: none !important; }
}

/* ===== SOURCE: suite-v015.css ===== */
/* v0.15.0 — Account separation + responsive refinement.
   Presentation/interaction only. Curriculum and lesson data contracts are unchanged. */

:root {
  --sidebar-width: 272px;
  --header-height: 88px;
  --layout-gutter: clamp(16px, 2.4vw, 38px);
  --content-max: 1480px;
  --fluid-xs: clamp(.70rem, .67rem + .12vw, .78rem);
  --fluid-sm: clamp(.80rem, .76rem + .14vw, .90rem);
  --fluid-md: clamp(.90rem, .86rem + .16vw, 1rem);
  --fluid-lg: clamp(1.02rem, .96rem + .22vw, 1.18rem);
  --fluid-xl: clamp(1.22rem, 1.10rem + .42vw, 1.55rem);
  --fluid-2xl: clamp(1.58rem, 1.34rem + .82vw, 2.20rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
html, body, .app-shell { width: 100%; max-width: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
button, input, textarea, select { min-width: 0; }
.page-view, .page-content, .student-workspace, .teacher-workspace,
.dashboard-widget, .utility-card, .teacher-card, .screen-content,
.lesson-screen, .subject-section-content { min-width: 0; }

/* ---------- Shell / header ---------- */
.app-header {
  width: calc(100% - var(--sidebar-width)) !important;
  margin-left: var(--sidebar-width) !important;
  min-height: var(--header-height) !important;
  height: auto !important;
  grid-template-columns: minmax(220px,.88fr) minmax(280px,1.14fr) auto !important;
  gap: clamp(12px, 1.8vw, 24px) !important;
  padding: 12px var(--layout-gutter) !important;
}
.page-content { margin-left: var(--sidebar-width) !important; width: calc(100% - var(--sidebar-width)); }
.home-view, .book-view, .progress-view, .utility-view {
  width: min(100%, var(--content-max)) !important;
  max-width: var(--content-max) !important;
  padding: clamp(16px,2vw,24px) var(--layout-gutter) clamp(30px,4vw,54px) !important;
}
.student-workspace, .teacher-workspace {
  width: min(100%, 1260px) !important;
  max-width: 1260px !important;
  margin-inline: auto !important;
  padding-inline: var(--layout-gutter) !important;
}
.header-title-block strong { font-size: var(--fluid-lg) !important; }
.header-title-block small { font-size: var(--fluid-xs) !important; }
.header-search { width: 100% !important; max-width: 500px; }
.header-actions { position: relative; min-width: 0; }
.student-profile-button { max-width: 210px; min-width: 160px; }
.profile-copy { min-width: 0; }
.profile-copy strong, .profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chevron { transition: transform .16s ease; }
.student-profile-button[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }

/* ---------- Account menu ---------- */
.account-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 12px);
  right: 0;
  width: min(310px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid #e2eaf6;
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 58px rgba(34,61,101,.20);
  backdrop-filter: blur(18px);
}
.account-menu[hidden] { display: none !important; }
.account-menu-header {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  padding: 8px 9px 10px;
}
.account-menu-avatar {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 14px; background: linear-gradient(135deg,#dcecff,#c9f3ff);
  color: #1c5aa7; font-weight: 900;
}
.account-menu-header small, .account-menu-header strong { display: block; }
.account-menu-header small { color: #7586a5; font-size: .72rem; }
.account-menu-header strong { margin-top: 1px; color: #17315a; font-size: .90rem; }
.account-menu-separator { height: 1px; margin: 5px 7px; background: #e9eef6; }
.account-menu-item {
  width: 100%; min-height: 58px; display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center; gap: 9px; padding: 8px 9px;
  border: 0; border-radius: 14px; background: transparent;
  color: #213a63; text-align: left; cursor: pointer;
}
.account-menu-item:hover, .account-menu-item:focus-visible { background: #f2f7ff; }
.account-menu-item > span:nth-child(2) { min-width: 0; }
.account-menu-item strong, .account-menu-item small { display: block; }
.account-menu-item strong { font-size: .86rem; line-height: 1.28; }
.account-menu-item small { margin-top: 2px; color: #7a8ba8; font-size: .68rem; line-height: 1.35; }
.account-menu-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #edf5ff; color: #276bd2; font-weight: 850; }
.account-menu-item.is-locked { color: #7d899f; cursor: not-allowed; }
.account-menu-item.is-locked .account-menu-icon { background: #f2f4f8; color: #8895aa; }
.account-lock { font-size: .80rem; opacity: .72; }
.account-menu-logout { color: #ad3645; }
.account-menu-logout .account-menu-icon { color: #b43c49; background: #fff0f2; }

/* ---------- Signed-out demo gate ---------- */
.signed-out-gate {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  padding: 24px; background: rgba(12,35,65,.50); backdrop-filter: blur(9px);
}
.signed-out-gate[hidden] { display: none !important; }
.signed-out-card {
  width: min(460px,100%); padding: clamp(26px,5vw,42px);
  border: 1px solid rgba(255,255,255,.70); border-radius: 28px;
  background: #fff; box-shadow: 0 28px 80px rgba(13,45,82,.28); text-align: center;
}
.signed-out-logo { width: 72px; height: 72px; display: grid; place-items:center; margin: 0 auto 14px; border-radius: 22px; background: #173b66; }
.signed-out-logo svg { width: 54px; height: 54px; }
.signed-out-card h2 { margin: 4px 0 8px; color: #18315a; font-size: var(--fluid-2xl); }
.signed-out-card p:not(.eyebrow) { margin: 0 auto 20px; max-width: 360px; color: #6d7e9b; line-height: 1.62; }
body.is-signed-out { overflow: hidden; }

/* ---------- Teacher access ---------- */
.protected-teacher-nav[hidden] { display: none !important; }
.access-denied-card {
  display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 20px; align-items: start;
  padding: clamp(22px,3vw,34px); border: 1px solid #e6edf7; border-radius: 24px;
  background: linear-gradient(135deg,#fff,#f6f9ff); box-shadow: 0 12px 30px rgba(53,81,126,.07);
}
.access-denied-icon { width: 66px; height: 66px; display:grid; place-items:center; border-radius:20px; background:#eef4ff; font-size:1.9rem; }
.access-denied-card h2 { margin: 2px 0 8px; font-size: var(--fluid-xl); color:#17315a; }
.access-denied-card p { margin:0 0 16px; color:#697b99; line-height:1.62; }

/* ---------- Fluid typography and overflow safeguards ---------- */
.home-section-title h2, .dashboard-widget > h2, .widget-title-row h2 { font-size: var(--fluid-xl) !important; }
.screen-title { font-size: clamp(1.55rem,1.2rem + 1.05vw,2.25rem) !important; overflow-wrap:anywhere; }
.screen-lead { font-size: var(--fluid-md) !important; }
.subject-page-hero h1, .page-heading h1 { font-size: clamp(1.55rem,1.25rem + .9vw,2.15rem) !important; }
.teacher-header h1 { font-size: clamp(1.6rem,1.25rem + 1vw,2.2rem) !important; }
.home-subject-copy strong, .sidebar-subject-copy strong, .pilot-lesson-copy strong,
.book-lesson-row strong, .teacher-card h2, .utility-card h2 {
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
}
.lesson-title-row, .lesson-breadcrumb, .workspace-toolbar, .reading-meta, .recommendation-meta { flex-wrap: wrap; }

/* ---------- Responsive grids ---------- */
.suite-subject-grid { grid-template-columns: repeat(9,minmax(0,1fr)) !important; }
.dashboard-main-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr) !important; }
.dashboard-bottom-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.progress-overview { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.progress-detail-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr) !important; }
.teacher-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) !important; }
.book-facts { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.home-unit-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.module-lessons { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

/* ---------- Wide desktop ---------- */
@media (min-width: 1440px) {
  :root { --sidebar-width: 272px; }
  .suite-subject-grid .home-subject-card { min-width:0; }
}

/* ---------- Compact desktop 1200–1439 ---------- */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --sidebar-width: 238px; --layout-gutter: clamp(18px,2vw,30px); }
  .book-sidebar { padding-inline: 12px !important; }
  .sidebar-brand-copy strong { font-size: .96rem; }
  .app-header { grid-template-columns: minmax(190px,.72fr) minmax(250px,1fr) auto !important; }
  .suite-subject-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
  .dashboard-main-grid { grid-template-columns: 1fr 1fr !important; }
  .home-subject-grid { gap: 11px !important; }
}

/* ---------- Narrow desktop 992–1199 ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
  :root { --sidebar-width: 218px; --header-height: 132px; --layout-gutter: 22px; }
  .book-sidebar { padding: 14px 10px 16px !important; }
  .sidebar-brand { gap: 8px; padding-inline: 5px; }
  .sidebar-logo, .sidebar-logo svg { width: 52px; height: 52px; }
  .sidebar-brand-copy strong { font-size: .88rem; }
  .primary-nav-item,.utility-nav-item,.sidebar-dersler-toggle { padding-inline:9px; font-size:.85rem; }
  .app-header {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: auto 48px;
    grid-template-areas: "title actions" "search search";
    align-content: center;
  }
  .header-title-block { grid-area:title; }
  .header-search { grid-area:search; justify-self: stretch; max-width:none; min-height:46px !important; }
  .header-actions { grid-area:actions; justify-self:end; }
  .student-profile-button { min-width: 150px; }
  .suite-subject-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .dashboard-main-grid, .dashboard-bottom-grid { grid-template-columns: 1fr !important; }
  .progress-overview { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .progress-detail-grid { grid-template-columns: 1fr !important; }
  .teacher-grid { grid-template-columns: 1fr !important; }
  .home-unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  /* Replace the scaled desktop banner with the live responsive hero. */
  .hero-3d-dashboard {
    min-height: 390px !important; aspect-ratio: auto !important; display:grid !important;
    grid-template-columns: minmax(0,1.02fr) minmax(300px,.78fr) !important;
    grid-template-rows: 1fr !important; align-items:center !important;
    padding: 28px 28px 0 !important;
    background: radial-gradient(circle at 72% 18%,rgba(255,255,255,.45),transparent 22%),linear-gradient(135deg,#c4efff,#ace4fb 58%,#d7f4ff) !important;
  }
  .hero-3d-banner-image { display:none !important; }
  .hero-3d-dashboard > .hero-copy { position:relative !important; inset:auto !important; padding:0 0 28px !important; pointer-events:auto !important; z-index:3; }
  .hero-3d-dashboard > .hero-copy h1,.hero-3d-dashboard > .hero-copy p { position:static !important; width:auto !important; height:auto !important; margin:0 !important; overflow:visible !important; clip:auto !important; white-space:normal !important; }
  .hero-3d-dashboard > .hero-copy h1 { font-size:clamp(2.35rem,4.5vw,3.2rem) !important; line-height:1.02 !important; }
  .hero-3d-dashboard > .hero-copy p { margin:11px 0 18px !important; max-width:480px; font-size:1rem !important; }
  .hero-3d-dashboard .hero-primary-button { position:static !important; width:auto !important; height:auto !important; min-height:50px !important; padding:0 20px !important; background:linear-gradient(135deg,#2d7df4,#1f69e7) !important; color:#fff !important; opacity:1 !important; pointer-events:auto !important; border-radius:14px !important; }
  .hero-3d-dashboard > .hero-character { display:flex !important; position:relative; align-self:end; justify-content:center; min-width:0; overflow:hidden; }
  .hero-3d-dashboard > .hero-character img { width:min(100%,430px); height:auto; display:block; }
  .hero-3d-dashboard > .hero-message { display:none !important; }
}

/* ---------- Tablet / drawer 768–991 ---------- */
@media (max-width: 991px) {
  :root { --sidebar-width: 0px; --header-height: 128px; --layout-gutter: clamp(14px,3vw,24px); }
  .book-sidebar {
    width: min(330px, 88vw) !important; transform: translateX(-105%); z-index:150;
    padding: 16px 14px 18px !important; box-shadow: 18px 0 48px rgba(12,38,69,.26);
  }
  .book-sidebar.is-open { transform: translateX(0); }
  .page-content { width:100% !important; margin-left:0 !important; }
  .app-header {
    width:100% !important; margin-left:0 !important;
    grid-template-columns: 46px minmax(0,1fr) auto !important;
    grid-template-rows: 54px 48px;
    grid-template-areas: "menu title actions" "search search search";
    gap:8px 12px !important; padding:9px var(--layout-gutter) 11px !important;
  }
  .menu-button { grid-area:menu; display:grid !important; }
  .header-title-block { grid-area:title; }
  .header-search { grid-area:search; position:static !important; display:flex !important; width:100% !important; max-width:none !important; min-height:46px !important; }
  .header-actions { grid-area:actions; justify-self:end; }
  .student-profile-button { min-width:52px; grid-template-columns:48px; padding:2px; }
  .profile-copy,.student-profile-button>.profile-chevron { display:none; }
  .sidebar-scrim:not([hidden]) { display:block !important; }
  .account-menu { position:fixed; top:74px; right:var(--layout-gutter); }
  .suite-subject-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .dashboard-main-grid, .dashboard-bottom-grid { grid-template-columns: 1fr !important; }
  .progress-overview { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .progress-detail-grid, .teacher-grid { grid-template-columns:1fr !important; }
  .book-facts { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .home-unit-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .module-lessons { grid-template-columns:1fr !important; }

  .hero-3d-dashboard {
    min-height: 390px !important; aspect-ratio:auto !important; display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(260px,.8fr) !important; grid-template-rows:1fr !important;
    align-items:center !important; padding:26px 24px 0 !important;
    background:radial-gradient(circle at 75% 18%,rgba(255,255,255,.45),transparent 22%),linear-gradient(135deg,#c4efff,#aee5fb 58%,#d7f4ff) !important;
  }
  .hero-3d-banner-image { display:none !important; }
  .hero-3d-dashboard > .hero-copy { position:relative !important; inset:auto !important; padding:0 0 24px !important; pointer-events:auto !important; z-index:3; }
  .hero-3d-dashboard > .hero-copy h1,.hero-3d-dashboard > .hero-copy p { position:static !important; width:auto !important; height:auto !important; margin:0 !important; overflow:visible !important; clip:auto !important; white-space:normal !important; }
  .hero-3d-dashboard > .hero-copy h1 { font-size:clamp(2.25rem,5.5vw,3rem) !important; line-height:1.02 !important; }
  .hero-3d-dashboard > .hero-copy p { margin:10px 0 17px !important; font-size:.98rem !important; line-height:1.45 !important; }
  .hero-3d-dashboard .hero-primary-button { position:static !important; width:auto !important; height:auto !important; min-height:49px !important; padding:0 18px !important; background:linear-gradient(135deg,#2d7df4,#1f69e7) !important; color:#fff !important; opacity:1 !important; pointer-events:auto !important; border-radius:14px !important; }
  .hero-3d-dashboard > .hero-character { display:flex !important; position:relative; align-self:end; justify-content:center; min-width:0; overflow:hidden; }
  .hero-3d-dashboard > .hero-character img { width:min(100%,390px); height:auto; display:block; }
  .hero-3d-dashboard > .hero-message { display:none !important; }
}

/* ---------- Small tablet / large phone 480–767 ---------- */
@media (max-width: 767px) {
  :root { --header-height: 124px; }
  .home-view,.book-view,.progress-view,.utility-view { padding-top: 16px !important; }
  .header-title-block strong { font-size: clamp(.88rem,3.3vw,1rem) !important; line-height:1.24; }
  .header-title-block small { display:none; }
  .header-icon-button { width:42px; height:42px; }
  .profile-avatar-art,.profile-avatar-art svg { width:42px; height:42px; }
  .student-profile-button { min-width:42px; grid-template-columns:42px; }
  .suite-subject-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:10px !important; }
  .dashboard-widget { border-radius:18px; }
  .recommendation-content { grid-template-columns: minmax(110px,.38fr) minmax(0,1fr) !important; }
  .progress-summary-body { grid-template-columns: 116px minmax(0,1fr) !important; }
  .progress-overview { grid-template-columns:1fr !important; }
  .lesson-step-list { grid-template-columns: repeat(4,minmax(42px,1fr)) !important; row-gap:6px !important; }
  .teacher-book-overview { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .subject-page-hero { grid-template-columns:52px minmax(0,1fr) !important; }
  .subject-page-count { grid-column:1/-1; justify-self:start; }
  .unit-detail-header { grid-template-columns:54px minmax(0,1fr) !important; }
  .unit-detail-header > :last-child { grid-column:1/-1; }
  .classification-row { grid-template-columns:1fr !important; }
  .goal-picker-card { grid-template-columns:1fr !important; }
  .goal-picker { width:100%; }
  .goal-choice { flex:1; }

  .hero-3d-dashboard {
    min-height: 500px !important; grid-template-columns:1fr !important; grid-template-rows:auto minmax(190px,1fr) !important;
    padding:24px 20px 0 !important; text-align:center;
  }
  .hero-3d-dashboard > .hero-copy { padding-bottom:0 !important; text-align:center; }
  .hero-3d-dashboard > .hero-copy h1 { font-size:clamp(2.2rem,9vw,2.8rem) !important; }
  .hero-3d-dashboard > .hero-copy p { max-width:460px; margin-inline:auto !important; }
  .hero-3d-dashboard .hero-primary-button { margin-inline:auto; }
  .hero-3d-dashboard > .hero-character { width:min(100%,430px); margin:8px auto 0; align-self:end; }
}

/* ---------- Phone <480 ---------- */
@media (max-width: 479px) {
  :root { --layout-gutter: 12px; }
  .app-header { grid-template-columns:42px minmax(0,1fr) auto !important; gap:7px 8px !important; }
  .menu-button { width:40px !important; height:40px !important; }
  .header-title-block strong { font-size:.84rem !important; }
  .header-actions { gap:2px !important; }
  .header-icon-button { width:38px; height:38px; }
  .profile-avatar-art,.profile-avatar-art svg { width:38px; height:38px; }
  .student-profile-button { min-width:38px; grid-template-columns:38px; }
  .account-menu { top:68px; right:10px; left:10px; width:auto; }
  .suite-subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .suite-subject-grid .home-subject-card { min-height:168px !important; padding-inline:10px !important; }
  .home-section-title { align-items:flex-start; }
  .outline-link-button { min-height:38px; padding-inline:12px; font-size:.78rem; }
  .recommendation-content { grid-template-columns:1fr !important; }
  .recommendation-art { min-height:104px; }
  .progress-summary-body { grid-template-columns:1fr !important; }
  .dashboard-action-card { grid-template-columns:44px minmax(0,1fr) 22px !important; }
  .book-facts { grid-template-columns:1fr 1fr !important; }
  .lesson-breadcrumb { font-size:.76rem; }
  .lesson-title-row h1 { font-size:1.55rem !important; }
  .workspace-toolbar { display:grid !important; grid-template-columns:1fr 1fr; }
  .workspace-toolbar button { width:100%; }
  .lesson-navigation { display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
  .lesson-navigation button { width:100%; }
  .utility-hero { grid-template-columns:54px minmax(0,1fr) !important; padding:17px !important; }
  .utility-hero-icon { width:52px !important; height:52px !important; }
  .access-denied-card { grid-template-columns:1fr; text-align:center; }
  .access-denied-icon { margin-inline:auto; }
  .signed-out-card { padding:26px 20px; }
  .hero-3d-dashboard { min-height:490px !important; padding:22px 16px 0 !important; border-radius:20px !important; }
}

@media (max-width: 359px) {
  .suite-subject-grid { grid-template-columns:1fr !important; }
  .workspace-toolbar, .lesson-navigation { grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-chevron, .book-sidebar { transition:none !important; }
}

/* Additional reflow protection for content-heavy lesson and teacher screens. */
.account-menu { max-height: min(520px, calc(100vh - 110px)); overflow-y: auto; }
.teacher-action-row, .subject-facts, .teacher-book-overview, .reading-meta { min-width:0; }
.teacher-action-row { display:flex; flex-wrap:wrap; gap:8px; }
.subject-facts { display:flex; flex-wrap:wrap; }

@media (max-width: 1199px) {
  .teacher-book-overview { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .opening-panel { grid-template-columns: 1fr !important; }
  .opening-art { min-height: clamp(210px,32vw,300px); }
  .subject-visual-hero { grid-template-columns:1fr !important; }
  .subject-visual-art { min-height:190px; }
}

@media (max-width: 991px) {
  .account-menu { top: calc(var(--header-height) + 8px); }
  .page-heading { align-items:flex-start !important; flex-direction:column; gap:10px !important; }
  .screen-card, .lesson-route-card, .teacher-card, .progress-card { max-width:100%; }
}

@media (max-width: 620px) {
  .audio-player { grid-template-columns:48px minmax(0,1fr) !important; }
  .audio-player .transcript-button { grid-column:1 / -1; width:100%; }
  .classification-actions { grid-template-columns:1fr 1fr; }
  .teacher-book-overview { grid-template-columns:1fr 1fr !important; }
  .subject-tabs { display:flex !important; overflow-x:auto; overscroll-behavior-inline:contain; }
}

@media (max-width: 479px) {
  .account-menu { top: calc(var(--header-height) + 6px); }
  .classification-actions { grid-template-columns:1fr; }
  .teacher-book-overview { grid-template-columns:1fr !important; }
  .progress-line-icon { flex:0 0 auto; }
}
.account-menu-icon svg { width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round; }
.account-lock { padding:4px 7px; border-radius:999px; background:#f0f3f8; color:#7b879a; font-size:.60rem; font-weight:800; letter-spacing:.01em; }

/* ===== SOURCE: suite-v016.css ===== */
/* v0.16.0 — Hero fit + narrow-window stability + sidebar icon contrast.
   Keeps curriculum/content behavior intact; visual overrides only. */

:root {
  --hero-fit-ratio: 1920 / 475;
  --sidebar-icon-tile: rgba(44, 111, 181, .34);
  --sidebar-icon-tile-hover: rgba(62, 137, 218, .45);
  --sidebar-icon-border: rgba(202, 226, 252, .20);
}

/* ---------- Desktop / windowed hero: the image is the card ---------- */
.hero-3d-dashboard {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: var(--hero-fit-ratio) !important;
  padding: 0 !important;
  margin-bottom: clamp(16px, 1.7vw, 24px) !important;
  overflow: hidden !important;
  border-radius: clamp(18px, 1.6vw, 26px) !important;
  background: #b8eafb !important;
  box-shadow: 0 14px 32px rgba(48,116,173,.10) !important;
  isolation: isolate;
}
.hero-3d-dashboard::before,
.hero-3d-dashboard::after { display:none !important; }
.hero-3d-banner-image {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:inherit !important;
  user-select:none;
  pointer-events:none;
}

/* The banner already contains the visual copy. Keep semantic text and the CTA
   in the DOM, but prevent a duplicate layer from changing the composition. */
.hero-3d-dashboard > .hero-copy {
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  padding:0 !important;
  pointer-events:none !important;
}
.hero-3d-dashboard > .hero-copy h1,
.hero-3d-dashboard > .hero-copy p {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.hero-3d-dashboard .hero-primary-button {
  position:absolute !important;
  left:4.2% !important;
  top:61.0% !important;
  width:23.8% !important;
  height:18.8% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:clamp(10px,1.2vw,18px) !important;
  background:transparent !important;
  color:transparent !important;
  box-shadow:none !important;
  opacity:0 !important;
  pointer-events:auto !important;
  cursor:pointer;
}
.hero-3d-dashboard .hero-primary-button:focus-visible {
  opacity:1 !important;
  outline:3px solid #fff !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 7px rgba(34,105,225,.38) !important;
}
.hero-3d-dashboard > .hero-character,
.hero-3d-dashboard > .hero-message { display:none !important; }

/* Keep the full horizontal banner even when a desktop browser is windowed.
   This fixes the oversized portrait fallback seen around 500–900 CSS px. */
@media (min-width: 420px) and (max-width: 1199px) {
  .hero-3d-dashboard {
    display:block !important;
    min-height:0 !important;
    aspect-ratio:var(--hero-fit-ratio) !important;
    padding:0 !important;
    background:#b8eafb !important;
  }
  .hero-3d-banner-image { display:block !important; }
  .hero-3d-dashboard > .hero-copy { position:absolute !important; inset:0 !important; padding:0 !important; pointer-events:none !important; }
  .hero-3d-dashboard > .hero-copy h1,
  .hero-3d-dashboard > .hero-copy p { position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }
  .hero-3d-dashboard .hero-primary-button {
    position:absolute !important; left:4.2% !important; top:61% !important; width:23.8% !important; height:18.8% !important;
    min-height:0 !important; padding:0 !important; margin:0 !important; opacity:0 !important; background:transparent !important; color:transparent !important;
  }
  .hero-3d-dashboard > .hero-character,
  .hero-3d-dashboard > .hero-message { display:none !important; }
}

/* True phone layout: live text remains readable; the 3D art is compact rather
   than expanding into the oversized portrait panel used previously. */
@media (max-width: 419px) {
  .hero-3d-dashboard {
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto 172px !important;
    min-height:350px !important;
    aspect-ratio:auto !important;
    padding:20px 16px 0 !important;
    background:linear-gradient(135deg,#c4efff 0%,#aee5fb 58%,#d7f4ff 100%) !important;
    text-align:center;
  }
  .hero-3d-banner-image { display:none !important; }
  .hero-3d-dashboard > .hero-copy {
    position:relative !important; inset:auto !important; padding:0 !important; text-align:center !important; pointer-events:auto !important;
  }
  .hero-3d-dashboard > .hero-copy h1,
  .hero-3d-dashboard > .hero-copy p {
    position:static !important; width:auto !important; height:auto !important; margin:0 !important; overflow:visible !important; clip:auto !important; white-space:normal !important;
  }
  .hero-3d-dashboard > .hero-copy h1 { font-size:clamp(2rem,11vw,2.45rem) !important; line-height:1.02 !important; }
  .hero-3d-dashboard > .hero-copy p { margin:9px auto 14px !important; max-width:300px; font-size:.93rem !important; line-height:1.42 !important; }
  .hero-3d-dashboard .hero-primary-button {
    position:static !important; width:auto !important; height:auto !important; min-height:46px !important; padding:0 17px !important; margin:0 auto !important;
    display:inline-flex !important; align-items:center; justify-content:center; gap:8px; border-radius:13px !important;
    background:linear-gradient(135deg,#2d7df4,#1f69e7) !important; color:#fff !important; opacity:1 !important;
    box-shadow:0 9px 20px rgba(32,101,220,.20) !important;
  }
  .hero-3d-dashboard > .hero-character {
    display:flex !important; position:relative !important; width:min(100%,300px) !important; height:172px !important; margin:2px auto 0 !important;
    align-self:end !important; justify-content:center !important; overflow:hidden !important; border-radius:0 !important;
  }
  .hero-3d-dashboard > .hero-character img {
    width:100% !important; height:100% !important; object-fit:cover !important; object-position:50% 38% !important; display:block !important;
  }
  .hero-3d-dashboard > .hero-message { display:none !important; }
}

/* ---------- Sidebar icon contrast ---------- */
.primary-nav-item .nav-icon,
.utility-nav-item .nav-icon,
.sidebar-dersler-toggle .nav-icon {
  width:34px !important;
  height:34px !important;
  flex:0 0 34px;
  display:grid !important;
  place-items:center;
  border-radius:10px;
  background:var(--sidebar-icon-tile) !important;
  border:1px solid var(--sidebar-icon-border);
  color:#eef7ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.primary-nav-item .nav-icon svg,
.utility-nav-item .nav-icon svg,
.sidebar-dersler-toggle .nav-icon svg { width:20px !important; height:20px !important; }
.primary-nav-item:hover .nav-icon,
.utility-nav-item:hover .nav-icon,
.sidebar-dersler-toggle:hover .nav-icon { background:var(--sidebar-icon-tile-hover) !important; color:#fff !important; }
.primary-nav-item.is-active .nav-icon {
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.24) !important;
  color:#fff !important;
}

/* Subject and nested action tiles: no white-on-white icon treatment. */
.sidebar-subject-icon {
  background:color-mix(in srgb, var(--subject-color) 76%, #173b66) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 5px 13px rgba(5,27,52,.20) !important;
}
.sidebar-subject-icon .ui-icon,
.sidebar-subject-icon svg { color:#fff !important; stroke:currentColor; }
.sidebar-action-icon {
  background:rgba(46,111,180,.34) !important;
  color:#f2f8ff !important;
  border:1px solid rgba(190,219,249,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar-submenu-link:hover .sidebar-action-icon,
.sidebar-submenu-link.is-active .sidebar-action-icon { background:rgba(71,145,224,.46) !important; color:#fff !important; }
.sidebar-logo {
  border-radius:15px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* ---------- Windowed-browser polish ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
  :root { --header-height:128px; }
  .home-view,.book-view,.progress-view,.utility-view { padding-top:18px !important; }
  .app-header { padding-top:10px !important; padding-bottom:10px !important; }
  .suite-subject-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .suite-subject-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .home-section-title { gap:12px; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .suite-subject-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .home-view,.book-view,.progress-view,.utility-view { padding-top:14px !important; }
}

/* Defensive no-horizontal-overflow rules for Safari window resizing. */
.page-content,
.app-header,
.home-view,
.book-view,
.progress-view,
.utility-view,
.dashboard-main-grid,
.dashboard-bottom-grid,
.suite-subject-grid { min-width:0 !important; max-width:100% !important; }
.home-subject-card,
.dashboard-widget,
.recommendation-content,
.progress-summary-body { min-width:0 !important; }
body, #app { overflow-x:hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-3d-dashboard .hero-primary-button { transition:none !important; }
}

/* ===== SOURCE: suite-v017.css ===== */
/* v0.17.0 — Minimal brand shell, functional sidebar progress and debug polish.
   Visual-only refinements plus a local progress summary; curriculum/content unchanged. */

:root {
  --sidebar-panel-soft: rgba(255,255,255,.055);
  --sidebar-panel-border: rgba(198,222,247,.15);
  --sidebar-progress-track: rgba(163,198,235,.17);
  --sidebar-progress-fill-a: #53d2c2;
  --sidebar-progress-fill-b: #69a8ff;
}

/* ---------- Minimal brand ---------- */
.sidebar-brand {
  min-height: 68px !important;
  gap: 11px !important;
  padding: 3px 8px 13px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(201,223,246,.10);
}
.sidebar-logo {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.sidebar-logo svg {
  width: 48px !important;
  height: 48px !important;
  overflow: visible;
}
.sidebar-logo .logo-page { stroke: rgba(255,255,255,.34) !important; stroke-width: 1 !important; }
.sidebar-logo .logo-page-left { fill: #51d6c6 !important; }
.sidebar-logo .logo-page-right { fill: #72aaf8 !important; }
.sidebar-logo .logo-spine { stroke: rgba(255,255,255,.92) !important; stroke-width: 2.6 !important; }
.sidebar-logo .logo-stem { stroke: #82cf68 !important; stroke-width: 3.5 !important; }
.sidebar-logo .logo-leaf-a { fill: #96d96b !important; }
.sidebar-logo .logo-leaf-b { display:none !important; }
.sidebar-brand-copy {
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.sidebar-brand-copy strong {
  margin:0 !important;
  color:#fff !important;
  font-size:clamp(.94rem,1vw,1rem) !important;
  line-height:1.2 !important;
  font-weight:760 !important;
  letter-spacing:-.012em !important;
  white-space:nowrap;
}
.sidebar-brand-copy small {
  margin-top:3px !important;
  color:#b9cfe8 !important;
  font-size:.70rem !important;
  line-height:1.25 !important;
  font-weight:650 !important;
}

/* ---------- Slogan-free header ---------- */
.header-title-block-single {
  display:flex;
  align-items:center;
  min-height:44px;
}
.header-title-block-single strong {
  margin:0 !important;
  line-height:1.18 !important;
}
.header-title-block-single small { display:none !important; }

/* ---------- Functional, quiet sidebar status ---------- */
.sidebar-motivation { display:none !important; }
.sidebar-progress-card {
  margin:16px 5px 2px;
  padding:13px 14px 14px;
  border:1px solid var(--sidebar-panel-border);
  border-radius:15px;
  background:var(--sidebar-panel-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.sidebar-progress-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.sidebar-progress-head span {
  color:#b7cde7;
  font-size:.68rem;
  line-height:1.2;
  font-weight:650;
}
.sidebar-progress-head strong {
  color:#f5f9ff;
  font-size:.76rem;
  line-height:1.2;
  font-weight:760;
  white-space:nowrap;
}
.sidebar-progress-track {
  width:100%;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:var(--sidebar-progress-track);
}
.sidebar-progress-track > i {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--sidebar-progress-fill-a),var(--sidebar-progress-fill-b));
  transition:width .26s ease;
}

/* ---------- Small shell polish ---------- */
.sidebar-divider { margin-top:10px !important; margin-bottom:10px !important; }
.primary-navigation { padding-bottom:2px; }
.book-sidebar { overscroll-behavior:contain; }
.app-header { min-width:0; }
.header-title-block strong { text-wrap:balance; }
.header-search, .header-actions, .page-content, .page-view { min-width:0 !important; }

/* Avoid stale slogan lines accidentally taking space in old cached markup. */
.header-title-block > small:empty { display:none !important; }

@media (min-width: 992px) and (max-width: 1199px) {
  .sidebar-brand { padding-inline:4px !important; }
  .sidebar-logo, .sidebar-logo svg { width:43px !important; height:43px !important; }
  .sidebar-logo { flex-basis:43px !important; }
  .sidebar-brand-copy strong { font-size:.86rem !important; }
  .sidebar-brand-copy small { font-size:.65rem !important; }
  .sidebar-progress-card { margin-inline:2px; padding:11px 10px 12px; }
  .sidebar-progress-head { gap:6px; }
  .sidebar-progress-head span { font-size:.63rem; }
  .sidebar-progress-head strong { font-size:.68rem; }
}

@media (max-width: 991px) {
  .sidebar-brand {
    min-height:64px !important;
    padding:1px 7px 11px !important;
  }
  .sidebar-logo, .sidebar-logo svg { width:46px !important; height:46px !important; }
  .sidebar-logo { flex-basis:46px !important; }
  .sidebar-brand-copy strong { font-size:.96rem !important; }
  .sidebar-progress-card { margin-top:14px; }
}

@media (max-width: 479px) {
  .header-title-block-single strong { font-size:clamp(.95rem,4.6vw,1.1rem) !important; }
  .sidebar-progress-card { border-radius:13px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-progress-track > i { transition:none !important; }
}

/* ===== SOURCE: suite-v018.css ===== */
/* v0.18.0 — Readability, touch comfort, navigation clarity and restrained illustration polish. */

:root {
  --focus-ring-v018: #2477e8;
  --focus-ring-soft-v018: rgba(36, 119, 232, .22);
}

/* Comfortable minimum touch targets for children and classroom tablets. */
.menu-button,
.header-icon-button,
.student-profile-button {
  min-width: 44px !important;
  min-height: 44px !important;
}
.sidebar-submenu-link,
.sidebar-structure-link,
.subject-tab,
.text-link-button {
  min-height: 44px !important;
}
.outline-link-button,
.recommendation-button,
.secondary-button {
  min-height: 46px !important;
}
.text-link-button { padding: 8px 10px !important; }

/* Previously tiny metadata is now legible without competing with headings. */
.sidebar-subject-copy small { font-size: .75rem !important; line-height: 1.25 !important; }
.sidebar-submenu-link > strong { font-size: .76rem !important; line-height: 1.3 !important; }
.sidebar-subsection-label span { font-size: .67rem !important; }
.sidebar-subsection-label strong { font-size: .75rem !important; line-height: 1.3 !important; }
.sidebar-structure-link > span { width: 28px !important; height: 28px !important; font-size: .64rem !important; }
.sidebar-structure-link > strong { font-size: .75rem !important; line-height: 1.32 !important; }
.sidebar-subject-panel .pilot-lesson-copy strong { font-size: .75rem !important; line-height: 1.3 !important; }
.sidebar-subject-panel .pilot-lesson-copy small { font-size: .68rem !important; }
.home-subject-copy span { font-size: .78rem !important; }
.home-subject-copy small,
.subject-facts small,
.overview-section-head small,
.overview-lesson-card small,
.overview-lesson-card em,
.planned-feature-grid article span,
.mini-structure-grid span,
.status-pill,
.subject-code-badge { font-size: .72rem !important; line-height: 1.3 !important; }
.planned-feature-grid article p { font-size: .81rem !important; line-height: 1.55 !important; }

/* Program preview cards are actual controls, with a quiet but clear affordance. */
.mini-structure-grid button {
  width: 100%;
  min-height: 56px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 14px;
  background: #f7f9f8;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.mini-structure-grid button span { color: #747f79; font-weight: 800; }
.mini-structure-grid button strong { font-size: .82rem; line-height: 1.38; overflow-wrap: anywhere; }
.mini-structure-grid button b { color: var(--active-subject, var(--primary)); font-size: 1rem; }

@media (hover: hover) {
  .mini-structure-grid button:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--active-subject, var(--primary)) 20%, var(--border));
    background: color-mix(in srgb, var(--active-subject-soft, #eef7f5) 62%, #fff);
  }
}

/* A restrained visual anchor for subjects whose full digital lessons are upcoming. */
.planned-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center;
  gap: 20px;
}
.planned-feature-grid { grid-template-columns: 1fr !important; }
.planned-feature-grid article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  padding: 14px 16px !important;
}
.planned-feature-grid article span { grid-row: 1 / 3; padding-top: 2px; }
.planned-feature-grid article strong { margin: 0 0 3px !important; }
.planned-illustration {
  min-height: 176px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 48%, rgba(87, 205, 190, .16), transparent 68%);
}
.planned-illustration img {
  display: block;
  width: min(100%, 176px);
  height: auto;
  filter: drop-shadow(0 16px 18px rgba(31, 64, 99, .12));
}

/* Horizontal lesson routes now reveal that more steps continue to the right. */
.lesson-step-list {
  min-height: 44px;
  padding-right: 38px !important;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px 38px;
  transition: -webkit-mask-image .15s ease, mask-image .15s ease;
}
.lesson-step-list.has-more-steps {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 42px), transparent 100%);
}
.lesson-step-list .step-item {
  min-height: 44px !important;
  font-size: .78rem !important;
  scroll-snap-align: start;
}

/* Horizontal subject tabs remain calm but easier to swipe on narrow screens. */
.subject-tabs {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px 28px;
  overscroll-behavior-inline: contain;
}
.subject-tab { scroll-snap-align: start; }

/* Strong, consistent keyboard focus on every new or refined control. */
.mini-structure-grid button:focus-visible,
.subject-tab:focus-visible,
.text-link-button:focus-visible,
.outline-link-button:focus-visible,
.recommendation-button:focus-visible,
.secondary-button:focus-visible,
.menu-button:focus-visible,
.header-icon-button:focus-visible,
.student-profile-button:focus-visible {
  outline: 3px solid var(--focus-ring-v018) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--focus-ring-soft-v018) !important;
}

@media (max-width: 680px) {
  .planned-content-layout { grid-template-columns: 1fr; gap: 6px; }
  .planned-illustration { min-height: 136px; order: -1; }
  .planned-illustration img { width: 132px; }
  .subject-overview-section { padding: 20px !important; }
  .overview-section-head { gap: 12px !important; }
}

@media (max-width: 860px) {
  /* The compact marker keeps its full accessible name on the list item. */
  .lesson-step-list .step-item > span:last-child { display: none !important; }
}

@media (max-width: 479px) {
  .sidebar-submenu-link > strong,
  .sidebar-structure-link > strong { font-size: .77rem !important; }
  .mini-structure-grid button { min-height: 58px; padding: 12px; }
  .lesson-step-list .step-item { font-size: .76rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-structure-grid button,
  .lesson-step-list { transition: none !important; }
}

/* ===== SOURCE: suite-v019.css ===== */
/* v0.19.0 — Functional 3D student profiles, cleaner product naming and lesson numbering. */

/* ---------- Clear, non-repetitive product identity ---------- */
.sidebar-brand-copy small {
  color: #b9cfe8 !important;
  font-size: .70rem !important;
  letter-spacing: .015em;
  text-transform: none;
}
.header-title-block-single strong {
  color: #17315a;
  letter-spacing: -.025em !important;
}

/* ---------- 3D profile avatar ---------- */
.profile-avatar-art {
  display: grid !important;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.94);
  background: linear-gradient(145deg,#dff8f4,#cfe2ff) !important;
  box-shadow: 0 7px 18px rgba(42,83,137,.17) !important;
}
.profile-avatar-art img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.04);
}
.account-menu-avatar {
  overflow: hidden;
  padding: 0 !important;
  border: 2px solid #fff;
  background: linear-gradient(145deg,#dff8f4,#cfe2ff) !important;
  box-shadow: 0 5px 13px rgba(42,83,137,.14);
}
.account-menu-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.05);
}

/* ---------- Profile selection ---------- */
.profile-picker-panel {
  padding: 26px;
  border: 1px solid rgba(210,222,239,.82);
  border-radius: 26px;
  background: linear-gradient(145deg,#fff,#f7faff);
  box-shadow: 0 16px 40px rgba(37,57,90,.07);
}
.profile-picker-intro { max-width: 680px; }
.profile-picker-intro > span {
  color: #2874df;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.profile-picker-intro h2 {
  margin: 6px 0 7px;
  color: #19345e;
  font-size: clamp(1.35rem,1.1rem + .75vw,1.9rem);
  letter-spacing: -.025em;
}
.profile-picker-intro p { margin: 0; color: #687b9a; line-height: 1.55; }
.profile-choice-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 22px;
}
.profile-choice-card {
  position: relative;
  min-height: 328px;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 24px;
  background: #edf5ff;
  color: #17315a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(37,57,90,.07);
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.profile-choice-card:nth-child(2) { background: #e9fbf8; }
.profile-choice-card.is-selected {
  border-color: #2c78e7;
  box-shadow: 0 15px 34px rgba(44,120,231,.16);
}
.profile-choice-art {
  min-height: 248px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.96),rgba(255,255,255,.22) 48%,transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.30),transparent);
}
.profile-choice-art img {
  display: block;
  width: min(92%,310px);
  height: 250px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 18px rgba(31,64,99,.14));
  transition: transform .18s ease;
}
.profile-choice-copy {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 14px 18px;
  border-top: 1px solid rgba(196,214,238,.72);
  background: rgba(255,255,255,.88);
}
.profile-choice-copy strong { font-size: 1rem; line-height: 1.25; }
.profile-choice-copy small { color: #70819c; font-size: .76rem; }
.profile-choice-check {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: transparent;
  box-shadow: 0 7px 17px rgba(37,57,90,.11);
  font-weight: 900;
}
.profile-choice-card.is-selected .profile-choice-check { background: #2c78e7; color: #fff; }
.profile-privacy-note {
  margin-top: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  border-radius: 15px;
  background: #eef9f6;
  color: #416b63;
}
.profile-privacy-note > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #52baa7;
  color: #fff;
  font-weight: 900;
}
.profile-privacy-note p { margin: 0; font-size: .82rem; line-height: 1.5; }
.profile-privacy-note strong { color: #235c53; }

@media (hover:hover) {
  .profile-choice-card:hover {
    transform: translateY(-3px);
    border-color: #79a9ee;
    box-shadow: 0 18px 38px rgba(37,57,90,.13);
  }
  .profile-choice-card:hover .profile-choice-art img { transform: scale(1.025); }
}
.profile-choice-card:focus-visible {
  outline: 3px solid #2477e8 !important;
  outline-offset: 4px !important;
}

/* ---------- Calm, proportional lesson sequence ---------- */
.sidebar-pilot-lessons {
  display: grid !important;
  gap: 7px !important;
  width: calc(100% + 42px);
  margin-left: -42px;
}
.sidebar-pilot-lessons .pilot-lesson-link {
  display: grid !important;
  min-height: 64px !important;
  grid-template-columns: 38px minmax(0,1fr) 22px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 9px !important;
  border-radius: 14px !important;
  text-align: left !important;
}
.sidebar-pilot-lessons .pilot-lesson-number {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 36px;
  border: 1px solid rgba(219,233,250,.13) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.09) !important;
  color: #e8f2ff !important;
  font-size: .69rem !important;
  font-weight: 830 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  line-height: 1 !important;
}
.sidebar-pilot-lessons .pilot-lesson-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.sidebar-pilot-lessons .pilot-lesson-copy strong {
  margin: 0 !important;
  color: #f7faff !important;
  font-size: .77rem !important;
  line-height: 1.32 !important;
  font-weight: 730 !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.sidebar-pilot-lessons .pilot-lesson-copy small {
  margin: 0 !important;
  color: #b9cde5 !important;
  font-size: .69rem !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
.sidebar-pilot-lessons .pilot-lesson-state {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
}
.sidebar-pilot-lessons .pilot-lesson-link.is-active .pilot-lesson-number {
  background: #55c7b7 !important;
  border-color: #55c7b7 !important;
  color: #103e4c !important;
  box-shadow: 0 6px 14px rgba(83,210,194,.20);
}

@media (max-width: 720px) {
  .profile-picker-panel { padding: 20px; border-radius: 22px; }
  .profile-choice-grid { gap: 12px; }
  .profile-choice-card { min-height: 270px; border-radius: 20px; }
  .profile-choice-art { min-height: 196px; }
  .profile-choice-art img { width: 96%; height: 202px; }
  .profile-choice-copy { min-height: 68px; padding: 12px 13px; }
  .profile-choice-copy strong { font-size: .88rem; }
  .profile-choice-copy small { font-size: .70rem; }
  .profile-choice-check { top: 11px; right: 11px; width: 30px; height: 30px; }
}

@media (max-width: 390px) {
  .profile-choice-grid { grid-template-columns: 1fr; }
  .profile-choice-card { min-height: 286px; }
  .profile-choice-art { min-height: 214px; }
  .profile-choice-art img { height: 220px; width: min(90%,260px); }
}

@media (prefers-reduced-motion:reduce) {
  .profile-choice-card,
  .profile-choice-art img { transition: none !important; }
}

/* ===== v0.20 FOUNDATION TOKENS — new development should prefer these semantic variables ===== */
:root {
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --radius-sm: var(--radius-small, 10px);
  --radius-md: var(--radius-control, 12px);
  --radius-lg: var(--radius-card, 18px);
  --touch-target-min: 44px;
  --content-max-width: 1200px;
  --focus-ring-width: 3px;
  --focus-ring-color: var(--accent, #e9a928);
  --motion-fast: 160ms;
  --motion-standard: 220ms;
}

/* ===== v0.21 NAVIGATION + PROFILE DASHBOARD ===== */
/* Active navigation is intentionally shared by every top-level sidebar destination. */
.primary-nav-item.is-active,
.utility-nav-item.is-active,
.sidebar-dersler-toggle.is-active {
  background:linear-gradient(135deg,#2D4A72,#263E64) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 #55E6D4,0 8px 18px rgba(0,0,0,.12) !important;
}
.primary-nav-item.is-active .nav-icon,
.utility-nav-item.is-active .nav-icon,
.sidebar-dersler-toggle.is-active .nav-icon {
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.24) !important;
  color:#fff !important;
}
.utility-nav-item.is-active:hover,
.sidebar-dersler-toggle.is-active:hover { background:linear-gradient(135deg,#33537d,#29456d) !important; }

.profile-dashboard-shell { display:grid; gap:18px; }
.profile-identity-card {
  display:grid;
  grid-template-columns:132px minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:24px 26px;
  overflow:hidden;
  border:1px solid #e2ebf5;
  border-radius:26px;
  background:linear-gradient(135deg,#f7fbff 0%,#eef8ff 52%,#eefcf9 100%);
  box-shadow:0 12px 30px rgba(43,76,122,.07);
}
.profile-identity-avatar {
  width:124px;
  height:124px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.8);
  border-radius:30px;
  background:rgba(255,255,255,.68);
  box-shadow:0 14px 28px rgba(42,81,130,.11), inset 0 1px 0 rgba(255,255,255,.9);
}
.profile-identity-avatar img { width:116px; height:116px; object-fit:contain; object-position:center bottom; }
.profile-identity-copy { min-width:0; }
.profile-grade-chip {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:#e5f7f4;
  color:#167e75;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.02em;
}
.profile-identity-copy h2 { margin:9px 0 6px; color:#17365f; font-size:clamp(1.55rem,2.5vw,2.05rem); }
.profile-identity-copy p { max-width:620px; margin:0; color:#657995; line-height:1.58; }
.profile-identity-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:13px; color:#60738f; font-size:.78rem; font-weight:700; }
.profile-identity-meta span { display:inline-flex; align-items:center; gap:6px; }
.profile-identity-meta i { width:20px; height:20px; display:grid; place-items:center; border-radius:999px; background:#ddf5ef; color:#16816f; font-style:normal; font-size:.66rem; }
.profile-identity-actions { display:grid; gap:9px; min-width:172px; }
.profile-identity-actions .primary-button,
.profile-identity-actions .secondary-button { width:100%; white-space:nowrap; }

.profile-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.profile-dashboard-card,
.profile-progress-card {
  position:relative;
  min-width:0;
  min-height:158px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 18px;
  align-items:start;
  gap:12px;
  padding:18px;
  border:1px solid #e4ebf4;
  border-radius:22px;
  background:#fff;
  color:#203553;
  text-align:left;
  cursor:pointer;
  box-shadow:0 9px 24px rgba(45,75,117,.055);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.profile-progress-card { grid-template-columns:72px minmax(0,1fr) 18px; }
.profile-dashboard-card:hover,
.profile-progress-card:hover { transform:translateY(-2px); border-color:#cad9eb; box-shadow:0 14px 30px rgba(45,75,117,.09); }
.profile-dashboard-card:focus-visible,
.profile-progress-card:focus-visible { outline:3px solid rgba(85,230,212,.5); outline-offset:3px; }
.profile-dashboard-card-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#eaf3ff;
  color:#2469bd;
  font-size:1.25rem;
  font-weight:900;
}
.profile-dashboard-card.is-lesson .profile-dashboard-card-icon { background:#e9f7ff; color:#1378a9; }
.profile-dashboard-card.is-badge .profile-dashboard-card-icon { background:#fff5d9; color:#af7900; }
.profile-dashboard-card.is-goal .profile-dashboard-card-icon { background:#e9f8f4; color:#167e75; }
.profile-dashboard-card-copy,
.profile-progress-copy { min-width:0; display:grid; align-content:start; gap:4px; }
.profile-dashboard-card-copy small,
.profile-progress-copy small { color:#8697ae; font-size:.66rem; font-weight:900; letter-spacing:.08em; }
.profile-dashboard-card-copy strong,
.profile-progress-copy strong { overflow:hidden; color:#203553; font-size:1rem; line-height:1.25; text-overflow:ellipsis; }
.profile-dashboard-card-copy span,
.profile-progress-copy span { color:#6d7f99; font-size:.76rem; line-height:1.45; }
.profile-dashboard-card-arrow { align-self:center; color:#8ca0bb; font-size:1.35rem; }
.profile-progress-ring {
  --profile-progress:0;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#14a99c calc(var(--profile-progress) * 1%),#e7eef6 0);
}
.profile-progress-ring:before { content:""; grid-area:1/1; width:54px; height:54px; border-radius:50%; background:#fff; }
.profile-progress-ring > span { position:relative; grid-area:1/1; display:grid; place-items:center; line-height:1; }
.profile-progress-ring strong { color:#17365f; font-size:.95rem; }
.profile-progress-ring small { margin-top:3px; color:#8999ad; font-size:.55rem; font-weight:800; }

.profile-preferences-card {
  padding:22px 24px;
  border:1px solid #e4ebf4;
  border-radius:24px;
  background:#fff;
  box-shadow:0 9px 24px rgba(45,75,117,.05);
}
.profile-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:16px; }
.profile-section-heading > div > span { color:#7a8da7; font-size:.72rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.profile-section-heading h2 { margin:5px 0 4px; color:#203553; font-size:1.2rem; }
.profile-section-heading p { margin:0; color:#73849c; font-size:.82rem; line-height:1.5; }
.profile-preference-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.profile-preference-chip { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:11px; min-height:66px; padding:11px 13px; border-radius:17px; background:#f6f9fd; }
.profile-preference-chip > span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#e8f1fb; color:#365f91; font-weight:900; }
.profile-preference-chip strong,.profile-preference-chip small { display:block; }
.profile-preference-chip strong { color:#30445f; font-size:.82rem; }
.profile-preference-chip small { margin-top:3px; color:#7b8ca4; font-size:.72rem; font-weight:750; }
.profile-dashboard-shell .profile-picker-panel { margin:0; }

@media (max-width:1050px) {
  .profile-identity-card { grid-template-columns:112px minmax(0,1fr); }
  .profile-identity-avatar { width:106px; height:106px; border-radius:26px; }
  .profile-identity-avatar img { width:100px; height:100px; }
  .profile-identity-actions { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .profile-identity-card { grid-template-columns:82px minmax(0,1fr); gap:16px; padding:19px; border-radius:22px; }
  .profile-identity-avatar { width:80px; height:80px; border-radius:22px; }
  .profile-identity-avatar img { width:76px; height:76px; }
  .profile-identity-copy h2 { font-size:1.35rem; }
  .profile-identity-copy p { font-size:.82rem; }
  .profile-identity-meta { grid-column:1/-1; }
  .profile-identity-actions { grid-template-columns:1fr; }
  .profile-overview-grid { grid-template-columns:1fr; }
  .profile-dashboard-card,.profile-progress-card { min-height:118px; align-items:center; }
  .profile-preference-chips { grid-template-columns:1fr; }
  .profile-section-heading { display:grid; gap:12px; }
  .profile-section-heading .text-link-button { justify-self:start; }
}
@media (max-width:390px) {
  .profile-identity-card { grid-template-columns:70px minmax(0,1fr); padding:16px; gap:13px; }
  .profile-identity-avatar { width:68px; height:68px; border-radius:19px; }
  .profile-identity-avatar img { width:66px; height:66px; }
  .profile-grade-chip { min-height:27px; font-size:.65rem; }
  .profile-dashboard-card,.profile-progress-card { padding:15px; border-radius:19px; }
  .profile-preferences-card { padding:18px; border-radius:20px; }
}

/* v0.24.1 pilot hardening: child-friendly touch targets and broken-image fallback. */
.text-button,
.mini-button,
.transcript-button,
.classification-choice,
.profile-choice-card { min-height:44px; }

.text-response-panel textarea { font-size:1rem; }

img.is-missing-asset {
  object-fit:contain !important;
  padding:10px;
  background:#f2f6fb;
}


/* v0.24.2 curriculum structure cleanup: deterministic sidebar tree geometry. */
:root {
  --sidebar-tree-line-x: 12px;
  --sidebar-tree-line-color: rgba(117, 157, 204, .24);
  --sidebar-tree-active-color: #55c7b7;
}
.sidebar-subject-panel-inner {
  position: relative !important;
  padding-left: 28px !important;
  border-left: 0 !important;
}
.sidebar-subject-panel-inner::before {
  content: "";
  position: absolute;
  left: var(--sidebar-tree-line-x);
  top: 8px;
  bottom: 12px;
  width: 1px;
  border-radius: 999px;
  background: var(--sidebar-tree-line-color);
  pointer-events: none;
  z-index: 0;
}
.sidebar-submenu,
.sidebar-structure-list,
.sidebar-pilot-lessons,
.sidebar-subsection-label {
  position: relative;
  z-index: 1;
}
.sidebar-submenu {
  border-left: 0 !important;
  padding-left: 0 !important;
}
.sidebar-pilot-lessons {
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}
.sidebar-submenu-link,
.sidebar-structure-link,
.sidebar-pilot-lessons .pilot-lesson-link {
  position: relative;
  z-index: 2;
}
.sidebar-submenu-link.is-active::before,
.sidebar-structure-link.is-active::before,
.sidebar-pilot-lessons .pilot-lesson-link.is-active::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--sidebar-tree-active-color);
  box-shadow: 0 0 0 2px rgba(18, 47, 76, .75);
  pointer-events: none;
}
.sidebar-pilot-lessons .pilot-lesson-number,
.sidebar-action-icon,
.sidebar-structure-link > span {
  position: relative;
  z-index: 3;
}

/* v0.31.0 desktop production stabilization: keep the complete lesson route visible on desktop. */
@media (min-width: 1200px) {
  .lesson-step-list {
    gap: 5px !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    scroll-snap-type: none !important;
  }
  .lesson-step-list.has-more-steps {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .lesson-step-list .step-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 5px 6px !important;
    gap: 5px !important;
  }
  .lesson-step-list .step-item > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-structure-link > strong {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* v0.32.1 — Turkish M02 original lesson illustrations */
.lesson-illustration-card{margin:0;min-height:300px;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#f4f9ff,#eef3ff);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--lesson-subject-color) 10%,transparent)}
.lesson-illustration-card img{display:block;width:100%;height:100%;min-height:300px;object-fit:cover}
@media(max-width:760px){.lesson-illustration-card{min-height:230px}.lesson-illustration-card img{min-height:230px}}

/* v0.33.0 — calm, structured digital-book lesson flow */
.flow-next-step{margin:7px 0 0;color:var(--text-muted,#64748b);font-size:.82rem;font-weight:650}
.digital-book-page{max-width:1060px;margin-inline:auto;border:1px solid rgba(33,76,120,.09);border-radius:24px;box-shadow:0 14px 38px rgba(29,62,96,.07);background:#fff}
.digital-book-page .screen-content{max-width:920px;margin-inline:auto;padding:clamp(26px,3vw,42px)}
.digital-book-page .screen-kicker{letter-spacing:.02em;color:var(--lesson-subject-color);font-weight:800}
.digital-book-page .screen-title{max-width:780px;line-height:1.16}
.digital-book-page .screen-lead{max-width:740px;line-height:1.65;color:#53657a}
.digital-book-page.flow-reading{box-shadow:0 10px 30px rgba(29,62,96,.055);background:linear-gradient(90deg,#fbfdff 0,#fff 12%,#fff 88%,#fbfdff 100%)}
.digital-book-page.flow-reading .screen-content{max-width:860px}
.digital-book-page.flow-reading .reading-panel{border:0;background:transparent;padding-inline:0}
.digital-book-page.flow-reading .reading-text{max-width:720px;margin-inline:auto;font-size:clamp(1.08rem,1.25vw,1.24rem);line-height:1.85;color:#24364b}
.digital-book-page.flow-reading .reading-meta{max-width:720px;margin-inline:auto}
.digital-book-page.flow-reading .reading-complete-button{display:block;margin:24px auto 0;background:#eef5ff;color:#174f91;border:1px solid #cbdff6;box-shadow:none}
.digital-book-page.flow-completion .summary-panel{border:0;background:linear-gradient(145deg,#f3f9ff,#f8fff8)}
.lesson-route-card:has(+ *) .lesson-step-list{scrollbar-width:thin}
@media (min-width:1200px){.digital-book-page .screen-content{min-height:420px}.lesson-route-card{padding-block:14px}.lesson-step-list .step-item{border-radius:12px!important}.lesson-step-list .step-marker{flex:0 0 26px;width:26px;height:26px}}
@media (max-width:760px){.digital-book-page{border-radius:18px}.digital-book-page .screen-content{padding:22px 18px}.flow-next-step{display:none}}

/* v0.33.1 — digital-book hardening: less card noise, one question at a time */
.lesson-route-card{border:0!important;border-radius:14px!important;box-shadow:none!important;background:rgba(255,255,255,.72)!important;padding:12px 16px!important}
.lesson-step-list{border-top:1px solid #e4ebf4;padding-top:10px}
.lesson-step-list .step-item{background:transparent!important;border-radius:8px!important;color:#718199!important}
.lesson-step-list .step-item.is-current{background:#edf5ff!important;color:#175db7!important}
.digital-book-page{box-shadow:0 10px 28px rgba(29,62,96,.055)}
.question-route{display:grid;grid-template-columns:1fr;gap:7px;max-width:720px;margin:0 auto 18px;color:#66788e;font-size:.82rem;font-weight:750}
.question-route i{display:block;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--lesson-subject-color) var(--question-progress),#e7edf5 var(--question-progress))}
.digital-book-page .quiz-stack{max-width:760px;margin-inline:auto;gap:0!important}
.digital-book-page .quiz-item{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
.digital-book-page .quiz-option{box-shadow:none!important;border-radius:12px!important}
.question-next-button{display:block;margin:18px 0 0 auto}
.question-set-complete{margin:18px 0 0;padding:13px 15px;border-radius:12px;background:#eef9f3;color:#17633c;font-weight:750}
.summary-learned{margin:18px 0;padding:18px 20px;border-block:1px solid #dce8e3}
.summary-learned>strong{display:block;margin-bottom:10px;color:#385368}
.summary-learned ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.summary-learned li{position:relative;padding-left:28px;color:#263e50;font-weight:700}
.summary-learned li::before{content:"✓";position:absolute;left:0;color:#16865a}
.flow-listening .audio-player{background:transparent!important;border:1px solid #dce7f2!important;box-shadow:none!important}
@media (min-width:1200px){.lesson-step-list .step-item{padding:6px 8px!important}.digital-book-page .screen-content{min-height:390px}}

/* ===== v0.33.2 PROFILE + ACHIEVEMENTS POLISH ===== */
.profile-showcase-card,
.profile-achievements-card {
  padding:22px 24px;
  border:1px solid #e4ebf4;
  border-radius:24px;
  background:#fff;
  box-shadow:0 9px 24px rgba(45,75,117,.05);
}
.profile-showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.profile-showcase-badge {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:13px;
  align-items:center;
  min-height:94px;
  padding:14px;
  border:1px solid #e5edf6;
  border-radius:20px;
  background:linear-gradient(135deg,#fffdf7,#f7fbff);
}
.profile-showcase-badge > span {
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:18px; background:#fff4d6; font-size:1.8rem;
  box-shadow:inset 0 0 0 1px rgba(226,174,55,.15);
}
.profile-showcase-badge strong,.profile-showcase-badge small { display:block; }
.profile-showcase-badge strong { color:#213954; font-size:.92rem; }
.profile-showcase-badge small { margin-top:4px; color:#73869f; font-size:.72rem; line-height:1.4; }
.profile-showcase-empty {
  grid-column:1/-1; display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:13px;
  padding:15px 17px; border:1px dashed #cbd9e9; border-radius:19px; background:#f8fbff;
}
.profile-showcase-empty > span { font-size:1.7rem; color:#8aa0bb; }
.profile-showcase-empty strong,.profile-showcase-empty small { display:block; }
.profile-showcase-empty strong { color:#30455f; }
.profile-showcase-empty small { margin-top:3px; color:#75869d; line-height:1.45; }

.profile-achievement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.profile-achievement-item {
  min-width:0; min-height:120px; display:grid; grid-template-columns:50px minmax(0,1fr); gap:11px; align-items:start;
  padding:13px; border:1px solid #e3eaf3; border-radius:19px; background:#fff; color:#2b405c; text-align:left;
  cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.profile-achievement-item:hover:not(:disabled) { transform:translateY(-2px); border-color:#bfcfe2; box-shadow:0 10px 22px rgba(47,78,117,.08); }
.profile-achievement-item:focus-visible { outline:3px solid rgba(85,230,212,.52); outline-offset:3px; }
.profile-achievement-item.is-earned { background:linear-gradient(145deg,#fffdf7,#ffffff 60%); }
.profile-achievement-item.is-showcased { border-color:#66d9c9; box-shadow:inset 0 0 0 1px rgba(44,184,166,.18); }
.profile-achievement-item.is-locked { cursor:not-allowed; opacity:.68; background:#f7f9fc; }
.profile-achievement-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:#eef4fb; font-size:1.45rem; }
.profile-achievement-item.is-earned .profile-achievement-icon { background:#fff1c9; }
.profile-achievement-item.is-showcased .profile-achievement-icon { background:#ddf6f1; }
.profile-achievement-copy { min-width:0; display:grid; gap:3px; }
.profile-achievement-copy strong { color:#263f5e; font-size:.86rem; line-height:1.25; }
.profile-achievement-copy small { color:#71839b; font-size:.69rem; line-height:1.42; }
.profile-achievement-copy em { margin-top:3px; color:#2c8278; font-size:.68rem; font-style:normal; font-weight:850; }
.profile-achievement-item.is-locked .profile-achievement-copy em { color:#8090a6; }

.profile-choice-grid.profile-choice-grid-ten { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.profile-choice-grid-ten .profile-choice-card { min-height:210px; }
.profile-choice-grid-ten .profile-choice-art { min-height:142px; }
.profile-choice-grid-ten .profile-choice-art img { width:138px; height:138px; max-width:92%; object-fit:contain; }
.profile-choice-grid-ten .profile-choice-copy { min-height:58px; padding:10px 11px; }
.profile-choice-grid-ten .profile-choice-copy strong { font-size:.80rem; }
.profile-choice-grid-ten .profile-choice-copy small { font-size:.66rem; }

@media (max-width:1180px) {
  .profile-choice-grid.profile-choice-grid-ten { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .profile-achievement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .profile-choice-grid.profile-choice-grid-ten { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-showcase-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .profile-showcase-card,.profile-achievements-card { padding:18px; border-radius:20px; }
  .profile-achievement-grid { grid-template-columns:1fr; }
  .profile-choice-grid.profile-choice-grid-ten { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:390px) {
  .profile-choice-grid.profile-choice-grid-ten { grid-template-columns:1fr; }
}

/* v0.33.3 Help Center Foundation */
.help-center-shell { display:grid; gap:18px; width:100%; max-width:1040px; margin-inline:auto; }
.help-audience-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.help-audience-button { min-height:106px; padding:18px 20px; border:1px solid #dfe9f6; border-radius:20px; background:#fff; color:#17315a; text-align:left; cursor:pointer; box-shadow:0 8px 22px rgba(53,81,126,.05); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.help-audience-button strong { display:block; margin-bottom:5px; font-size:1.08rem; }
.help-audience-button span { display:block; color:#71839f; font-size:.88rem; line-height:1.5; }
.help-audience-button:hover { transform:translateY(-1px); border-color:#bcd3f1; box-shadow:0 10px 24px rgba(53,81,126,.08); }
.help-audience-button.is-active { border-color:#2c7cf2; background:#eef6ff; box-shadow:0 0 0 2px rgba(44,124,242,.08); }
.help-audience-button:focus-visible { outline:3px solid rgba(44,124,242,.28); outline-offset:2px; }
.help-quick-start { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.9fr); gap:24px; padding:24px 26px; border:1px solid #dfeaf7; border-radius:22px; background:linear-gradient(135deg,#f9fcff,#eef8f5); box-shadow:0 8px 22px rgba(53,81,126,.05); }
.help-section-kicker { display:block; margin-bottom:5px; color:#2870df; font-size:.75rem; font-weight:850; }
.help-quick-start h2 { margin:0 0 7px; color:#17315a; font-size:1.28rem; }
.help-quick-start p { margin:0; color:#71839f; line-height:1.6; }
.help-quick-start ol { margin:0; padding-left:1.35rem; display:grid; gap:8px; color:#314b72; line-height:1.55; }
.help-category { display:grid; gap:10px; }
.help-category > h2 { margin:2px 2px 0; color:#17315a; font-size:1.03rem; }
.help-disclosure-list { display:grid; gap:10px; }
.help-disclosure { border:1px solid #e1e9f4; border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 6px 18px rgba(53,81,126,.035); }
.help-disclosure summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:76px; padding:15px 18px; cursor:pointer; color:#17315a; }
.help-disclosure summary::-webkit-details-marker { display:none; }
.help-disclosure summary > span:first-child { display:grid; gap:3px; min-width:0; }
.help-disclosure summary strong { font-size:.98rem; line-height:1.35; }
.help-disclosure summary small { color:#7688a4; font-size:.82rem; line-height:1.45; font-weight:550; }
.help-chevron { flex:0 0 auto; color:#6e86a7; font-size:1.2rem; transition:transform .16s ease; }
.help-disclosure[open] .help-chevron { transform:rotate(180deg); }
.help-disclosure[open] summary { background:#f8fbff; border-bottom:1px solid #edf2f8; }
.help-disclosure summary:focus-visible { outline:3px solid rgba(44,124,242,.25); outline-offset:-3px; }
.help-disclosure-body { padding:15px 20px 18px; }
.help-disclosure-body ul { margin:0; padding-left:1.25rem; display:grid; gap:8px; color:#435d7f; font-size:.88rem; line-height:1.6; }
.help-disclosure-body li { max-width:78ch; }
.help-current-limit { padding:16px 18px; border-radius:18px; background:#f5f7fa; color:#60738f; }
.help-current-limit strong { display:block; margin-bottom:3px; color:#314b72; }
.help-current-limit p { margin:0; font-size:.84rem; line-height:1.55; }
@media (max-width: 900px) {
  .help-quick-start { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .help-audience-switch { grid-template-columns:1fr; }
  .help-audience-button { min-height:88px; }
  .help-quick-start { padding:20px; gap:15px; }
  .help-disclosure summary { min-height:70px; padding:14px 15px; }
  .help-disclosure-body { padding:13px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .help-audience-button,.help-chevron { transition:none; }
}

/* v0.33.7 — learning-earned profile cosmetics */
.profile-rewards { max-width:1120px; }
.profile-reward-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:22px; min-height:238px; padding:26px 28px; overflow:hidden; border:1px solid #cfdfef; border-radius:28px; color:#fff; box-shadow:0 14px 34px rgba(31,66,112,.12); }
.profile-hero-background,.profile-hero-overlay { position:absolute; inset:0; width:100%; height:100%; }
.profile-hero-background { z-index:-3; object-fit:cover; }
.profile-hero-overlay { z-index:-2; background:linear-gradient(90deg,rgba(10,37,65,.88) 0%,rgba(15,50,78,.72) 55%,rgba(12,35,57,.35) 100%); }
.profile-hero-avatar { position:relative; width:144px; height:144px; display:grid; place-items:center; }
.profile-hero-avatar-image { width:116px; height:116px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 12px rgba(0,0,0,.22)); }
.profile-hero-frame { position:absolute; inset:0; width:144px; height:144px; object-fit:contain; pointer-events:none; }
.profile-hero-copy { min-width:0; text-shadow:0 1px 2px rgba(0,0,0,.28); }
.profile-hero-copy h2 { margin:6px 0 2px; color:#fff; font-size:clamp(1.65rem,2.5vw,2.25rem); }
.profile-active-title { margin:0 0 14px; color:#e9f7ff; font-size:.94rem; font-weight:800; }
.profile-reward-hero .profile-grade-chip { color:#133b62; background:rgba(255,255,255,.9); text-shadow:none; }
.profile-reward-hero .profile-identity-stats { color:#fff; }
.profile-reward-hero .profile-identity-stats strong,.profile-reward-hero .profile-identity-stats small { color:#fff; }
.profile-hero-badges { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.profile-hero-badges > span { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:5px 9px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(8,31,52,.45); color:#fff; font-size:.7rem; font-weight:750; text-shadow:none; backdrop-filter:blur(5px); }
.profile-hero-badges i { font-style:normal; }
.profile-reward-hero .profile-identity-actions { position:relative; z-index:1; }
.profile-reward-hero .secondary-button { color:#17365f; background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.8); }
.profile-customization { display:grid; gap:10px; padding:20px 22px; border:1px solid #dfe8f2; border-radius:22px; background:#fff; }
.profile-reward-disclosure { overflow:hidden; border:1px solid #dfe8f2; border-radius:18px; background:#fff; }
.profile-reward-disclosure > summary { list-style:none; display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:72px; padding:12px 16px; cursor:pointer; color:#17365f; }
.profile-reward-disclosure > summary::-webkit-details-marker { display:none; }
.profile-reward-disclosure > summary > span:nth-child(2) { display:grid; gap:2px; }
.profile-reward-disclosure > summary strong { font-size:.94rem; }
.profile-reward-disclosure > summary small { color:#71839b; font-size:.74rem; font-weight:700; }
.profile-reward-disclosure > summary > i { color:#7086a3; font-style:normal; font-size:1.2rem; transition:transform .18s ease; }
.profile-reward-disclosure[open] > summary { background:#f7fbff; border-bottom:1px solid #e8eff7; }
.profile-reward-disclosure[open] > summary > i { transform:rotate(180deg); }
.profile-reward-disclosure > summary:focus-visible { outline:3px solid rgba(44,124,242,.28); outline-offset:-3px; }
.reward-section-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#edf6ff; color:#2267c7; font-size:1.05rem; }
.profile-reward-panel { padding:15px; animation:rewardPanelIn .18s ease-out both; }
@keyframes rewardPanelIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.reward-grid { display:grid; gap:11px; }
.reward-grid-avatars,.reward-grid-frames { grid-template-columns:repeat(5,minmax(0,1fr)); }
.reward-grid-backgrounds,.reward-grid-titles { grid-template-columns:repeat(3,minmax(0,1fr)); }
.reward-card { min-width:0; min-height:44px; display:grid; align-content:start; padding:0; overflow:hidden; border:1px solid #dfe8f2; border-radius:16px; background:#f8fafc; color:#17365f; text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.reward-card:hover { transform:translateY(-1px); border-color:#a8c7eb; box-shadow:0 8px 18px rgba(39,78,126,.08); }
.reward-card:focus-visible { outline:3px solid rgba(44,124,242,.3); outline-offset:2px; }
.reward-card.is-selected { border-color:#2c7cf2; box-shadow:inset 0 0 0 1px #2c7cf2; background:#eef7ff; }
.reward-card.is-locked { background:#f4f6f9; }
.reward-card.is-locked img { filter:saturate(.72) brightness(.88); }
.reward-avatar-art { height:132px; display:grid; place-items:end center; background:radial-gradient(circle at 50% 70%,#eef8ff,#e4edf6 72%); }
.reward-avatar-art img { width:126px; height:126px; object-fit:contain; object-position:center bottom; }
.reward-background-art { height:94px; display:block; overflow:hidden; }
.reward-background-art img { width:100%; height:100%; object-fit:cover; }
.reward-frame-art { position:relative; width:116px; height:116px; margin:10px auto 2px; display:grid; place-items:center; }
.reward-frame-avatar { width:82px; height:82px; object-fit:contain; }
.reward-frame-overlay { position:absolute; inset:0; width:116px; height:116px; object-fit:contain; }
.reward-title-art { height:68px; display:grid; place-items:center; color:#245f9e; background:linear-gradient(135deg,#eaf5ff,#e8f8f2); font-size:1.35rem; font-weight:900; }
.reward-card-copy { display:grid; gap:3px; min-height:62px; padding:10px 11px 12px; }
.reward-card-copy strong { font-size:.8rem; line-height:1.25; }
.reward-card-copy small { color:#647892; font-size:.66rem; line-height:1.38; font-weight:700; }
.badge-summary-preview { display:flex; gap:4px; }
.badge-summary-preview span { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#f0f5fb; font-size:.82rem; }
.reward-panel-note { margin:0 0 12px; color:#687b94; font-size:.78rem; line-height:1.5; }
.reward-unlock-notice { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:13px; padding:13px 16px; border:1px solid #bce7d7; border-radius:18px; background:#edf9f5; color:#174f43; }
.reward-unlock-notice > span { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#fff; color:#189274; }
.reward-unlock-notice div { display:grid; gap:1px; }
.reward-unlock-notice small { color:#27826d; font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.reward-unlock-notice strong { font-size:.92rem; }
.reward-unlock-notice p { margin:0; color:#4e756c; font-size:.74rem; }
@media (max-width:980px) {
  .profile-reward-hero { grid-template-columns:126px minmax(0,1fr); }
  .profile-reward-hero .profile-identity-actions { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-hero-avatar { width:122px; height:122px; }
  .profile-hero-avatar-image { width:98px; height:98px; }
  .profile-hero-frame { width:122px; height:122px; }
  .reward-grid-avatars,.reward-grid-frames { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .profile-reward-hero { grid-template-columns:94px minmax(0,1fr); gap:14px; padding:20px; }
  .profile-hero-avatar { width:92px; height:92px; }
  .profile-hero-avatar-image { width:74px; height:74px; }
  .profile-hero-frame { width:92px; height:92px; }
  .reward-grid-avatars,.reward-grid-frames { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reward-grid-backgrounds,.reward-grid-titles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reward-unlock-notice { grid-template-columns:42px minmax(0,1fr); }
  .reward-unlock-notice .secondary-button { grid-column:1/-1; }
}
@media (max-width:440px) {
  .profile-reward-hero { grid-template-columns:1fr; text-align:center; }
  .profile-hero-avatar { margin:auto; }
  .profile-reward-hero .profile-identity-stats,.profile-hero-badges { justify-content:center; }
  .profile-reward-disclosure > summary { grid-template-columns:40px minmax(0,1fr) auto; }
  .badge-summary-preview { display:none; }
  .reward-grid-backgrounds,.reward-grid-titles { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .reward-card,.profile-reward-disclosure > summary > i { transition:none; }
  .profile-reward-panel { animation:none; }
}

/* v0.41.3 — student home, profile and navigation refinement */
.student-dashboard-v037 { gap:20px; }
.student-welcome { min-height:126px; padding:22px 28px; border-radius:24px; box-shadow:0 12px 30px rgba(19,58,101,.13); }
.student-welcome h1 { font-size:clamp(1.7rem,2.6vw,2.25rem); }
.student-welcome img { width:104px; height:104px; }
.student-today-card { padding:24px 28px; }
.student-dash-card { box-shadow:0 7px 20px rgba(25,65,105,.045); }
#utility-view:has(.profile-dashboard-shell) > .utility-hero { display:none; }
.profile-reward-hero { min-height:220px; padding:23px 26px; }
.profile-customization { padding:18px 20px; }
.reward-card-copy small { display:inline-flex; align-items:center; width:fit-content; max-width:100%; min-height:22px; padding:3px 7px; border-radius:999px; background:#eef4fa; color:#526b87; }
.reward-card.is-selected .reward-card-copy small { background:#dcecff; color:#155fb7; }
.reward-card.is-locked .reward-card-copy small { background:#e8ebef; color:#576575; }
.reward-avatar-art { height:138px; }
.reward-avatar-art img { width:132px; height:132px; }
@media (max-width:820px) {
  .student-welcome { min-height:118px; }
}
@media (max-width:480px) {
  .student-welcome { padding:19px 20px; }
}

/* v0.33.4 — focused student profile and compact achievement presentation */
.profile-refined { max-width:1120px; margin-inline:auto; gap:16px; }
.profile-refined .profile-identity-card {
  grid-template-columns:116px minmax(0,1fr) auto;
  gap:22px;
  padding:22px 24px;
  border:1px solid #dfe8f2;
  border-radius:22px;
  background:#fff;
  box-shadow:0 5px 16px rgba(43,76,122,.045);
}
.profile-refined .profile-identity-avatar {
  width:108px; height:108px; border:1px solid #dce8f5; border-radius:24px;
  background:#f2f7fc; box-shadow:none;
}
.profile-refined .profile-identity-avatar img { width:104px; height:104px; }
.profile-refined .profile-identity-copy h2 { margin:6px 0 12px; font-size:1.65rem; }
.profile-identity-stats { display:flex; flex-wrap:wrap; gap:9px 24px; }
.profile-identity-stats span { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:7px; }
.profile-identity-stats strong { color:#1e4777; font-size:1.15rem; }
.profile-identity-stats small { color:#687c96; font-size:.78rem; font-weight:700; }
.profile-theme-progress {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.8fr); align-items:center; gap:24px;
  padding:19px 22px; border:1px solid #dfe8f2; border-radius:18px; background:#fff;
}
.profile-theme-progress span { color:#2870df; font-size:.72rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.profile-theme-progress h2 { margin:4px 0 3px; color:#203b5c; font-size:1.05rem; }
.profile-theme-progress p { margin:0; color:#71839b; font-size:.78rem; }
.profile-theme-progress p strong { color:#2d526f; }
.profile-theme-track { height:10px; overflow:hidden; border-radius:999px; background:#e8eef5; }
.profile-theme-track i { display:block; height:100%; border-radius:inherit; background:#27aa98; }
.profile-refined .profile-showcase-card,
.profile-refined .profile-picker-panel { padding:20px 22px; border:1px solid #dfe8f2; border-radius:20px; background:#fff; box-shadow:none; }
.profile-refined .profile-showcase-badge { min-height:78px; padding:11px 12px; border-radius:15px; background:#fff; }
.profile-refined .profile-showcase-badge > span { width:48px; height:48px; border-radius:14px; box-shadow:none; }
.profile-refined .profile-showcase-empty { padding:13px 15px; border-radius:14px; background:#f7fafc; }
.profile-refined .profile-choice-grid.profile-choice-grid-ten { gap:10px; }
.profile-refined .profile-choice-grid-ten .profile-choice-card { min-height:182px; border-radius:16px; background:#f8fafc; box-shadow:none; }
.profile-refined .profile-choice-grid-ten .profile-choice-card.is-selected { background:#eef7ff; border-color:#4d8fe8; box-shadow:inset 0 0 0 1px #4d8fe8; }
.profile-refined .profile-choice-grid-ten .profile-choice-art { min-height:124px; background:transparent; }
.profile-refined .profile-choice-grid-ten .profile-choice-art img { width:120px; height:120px; }
.profile-refined .profile-choice-grid-ten .profile-choice-copy { min-height:54px; }

.badge-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.badge-item {
  position:relative; min-height:88px; grid-template-columns:50px minmax(0,1fr); place-items:center start;
  gap:12px; padding:13px 15px; border:1px solid #e7edf7; border-radius:16px; background:#fff; color:#18345f; text-align:left; box-shadow:none;
}
.badge-item > div { min-width:0; }
.badge-medal { width:48px; height:48px; border-radius:14px; background:#fff0c8; color:#7e5d08; font-size:1.35rem; box-shadow:none; }
.badge-item strong { margin:0; font-size:.88rem; line-height:1.3; }
.badge-item small { display:block; margin-top:3px; font-size:.72rem; }
.badge-item.is-earned { border-color:#d6e8df; background:#fbfffd; }
.badge-item:is(button) { cursor:pointer; }
.badge-item:is(button):hover { border-color:#8bcfbd; background:#f4fcf8; }
.badge-item:is(button):focus-visible { outline:3px solid rgba(39,170,152,.3); outline-offset:2px; }
.badge-item.is-showcased { border-color:#38aa97; background:#effaf6; box-shadow:inset 0 0 0 1px rgba(39,170,152,.18); }
.badge-item.is-locked { opacity:1; filter:none; background:#f5f7fa; color:#7d8da1; }
.badge-item.is-locked .badge-medal { background:#e5e9ee; filter:grayscale(1); opacity:.62; }
.badge-item.is-locked strong,.badge-item.is-locked small { color:#7d8da1; }
.badge-lock { position:absolute; top:9px; right:10px; font-size:.68rem; filter:grayscale(1); opacity:.7; }

@media (max-width:900px) {
  .profile-refined .profile-identity-card { grid-template-columns:102px minmax(0,1fr); }
  .profile-refined .profile-identity-actions { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-theme-progress { grid-template-columns:1fr; gap:13px; }
  .badge-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .profile-refined .profile-identity-card { grid-template-columns:78px minmax(0,1fr); gap:14px; padding:17px; }
  .profile-refined .profile-identity-avatar { width:74px; height:74px; border-radius:18px; }
  .profile-refined .profile-identity-avatar img { width:72px; height:72px; }
  .profile-refined .profile-identity-copy h2 { margin-bottom:8px; font-size:1.3rem; }
  .profile-identity-stats { display:grid; gap:3px; }
  .profile-refined .profile-identity-actions { grid-template-columns:1fr; }
  .profile-theme-progress,.profile-refined .profile-showcase-card,.profile-refined .profile-picker-panel { padding:17px; }
  .badge-shelf { grid-template-columns:1fr; }
}

/* v0.33.5 — optional lesson reinforcement */
.summary-reinforcement {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin:18px 0 0; padding:15px 17px; border:1px solid #d9e7e3; border-radius:16px; background:#f6fbf9;
}
.summary-reinforcement div { min-width:0; }
.summary-reinforcement strong,.summary-reinforcement span { display:block; }
.summary-reinforcement strong { color:#245c53; font-size:.9rem; }
.summary-reinforcement span { margin-top:3px; color:#607a75; font-size:.78rem; line-height:1.45; }
.summary-reinforcement .secondary-button { flex:0 0 auto; min-height:42px; box-shadow:none; }
.reinforcement-page { border-color:#d9e7e3; box-shadow:0 10px 28px rgba(31,91,78,.06); }
.reinforcement-page .screen-kicker { color:#188574; }
.reinforcement-page .step-type-badge { background:#e4f5f0; color:#176e62; }
@media (max-width:680px) {
  .summary-reinforcement { align-items:stretch; flex-direction:column; gap:12px; }
  .summary-reinforcement .secondary-button { width:100%; }
}

/* v0.33.8 — lightweight child-friendly narration controls */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.speech-player { display:grid; grid-template-columns:1fr auto; gap:16px 20px; align-items:center; padding:18px; }
.speech-player-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.audio-orb { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:var(--on-primary); font-size:1.3rem; box-shadow:0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent); }
.speech-control-row { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:9px; }
.speech-control-row .speech-action { width:auto; min-height:44px; padding-inline:15px; }
.speech-speed-label { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-weight:700; }
.speech-speed-label select { min-height:44px; padding:0 34px 0 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text); font:inherit; font-weight:700; }
.speech-fallback { margin-top:12px; }
.speech-player button:focus-visible,.speech-speed-label select:focus-visible,.transcript-button:focus-visible { outline:3px solid color-mix(in srgb, var(--primary) 35%, white); outline-offset:3px; }
@media (max-width:560px) { .speech-player { grid-template-columns:1fr; padding:15px; }.speech-control-row { display:grid; grid-template-columns:1fr 1fr; }.speech-control-row .speech-action { width:100%; }.speech-speed-label,.speech-player .transcript-button { width:100%; }.speech-speed-label select { flex:1; } }

/* v0.36.0 — offline demo identity shell */
.signed-out-card { width:min(460px,calc(100vw - 32px)); text-align:left; }
.signed-out-card > .signed-out-logo,.signed-out-card > .eyebrow,.signed-out-card > h2,.signed-out-card > p { text-align:center; }
.offline-login-form { display:grid; gap:9px; margin-top:20px; }
.offline-login-form label { color:#263f63; font-size:.86rem; font-weight:800; }
.offline-login-form input { width:100%; min-height:48px; padding:10px 12px; border:1px solid #cfd9e7; border-radius:12px; background:#fff; color:#18315a; font:inherit; }
.offline-login-form input:focus-visible { outline:3px solid rgba(45,117,220,.28); outline-offset:2px; border-color:#2d75dc; }
.offline-login-form input[aria-invalid="true"] { border-color:#b64646; }
.offline-login-form .login-helper { margin:3px 0 0!important; color:#75859c!important; font-size:.76rem; line-height:1.45!important; text-align:left!important; }
.offline-login-form .login-status { min-height:22px; margin:0!important; color:#a33d3d!important; font-size:.82rem; font-weight:700; line-height:1.45!important; text-align:left!important; }
.offline-login-form .primary-button { width:100%; margin-top:2px; }
.teacher-school-context { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 18px; padding:17px 20px; border:1px solid #dce7f3; border-radius:17px; background:#f6faff; }
.teacher-school-context span { color:#2d75dc; font-size:.73rem; font-weight:800; }
.teacher-school-context h2 { margin:3px 0; color:#18315a; font-size:1.15rem; }
.teacher-school-context p { margin:0; color:#6d7e9b; }
.teacher-class-chips { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.teacher-class-chips span { padding:8px 11px; border-radius:999px; background:#e7f1ff; color:#245fae; font-size:.8rem; }
@media (max-width:680px) { .teacher-school-context { align-items:flex-start; flex-direction:column; }.teacher-class-chips { justify-content:flex-start; } }
.teacher-dashboard-head nav button,.teacher-back{min-height:44px}
.assignment-students[hidden],.assignment-students label[hidden]{display:none!important}

/* v0.41.4 — optional, session-only pedagogical mini games */
.summary-minigame{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px 0 0;padding:15px 17px;border:1px solid #dce6f5;border-radius:16px;background:#f7f9fe}
.summary-minigame div{min-width:0}.summary-minigame strong,.summary-minigame span{display:block}.summary-minigame strong{color:#315d9a;font-size:.9rem}.summary-minigame span{margin-top:3px;color:#677995;font-size:.78rem;line-height:1.45}.summary-minigame .secondary-button{flex:0 0 auto;min-height:44px;box-shadow:none}
.student-workspace.is-minigame-mode>.lesson-page-header,.student-workspace.is-minigame-mode>.lesson-navigation{display:none}
.minigame-shell{width:min(800px,100%);margin-inline:auto;padding:clamp(20px,4vw,34px);border-color:#dbe6f4;box-shadow:0 14px 34px rgba(29,78,156,.08)}
.minigame-header{display:grid;grid-template-columns:1fr auto;gap:18px}.minigame-exit{grid-column:1/-1;justify-self:start;min-height:44px}.minigame-heading h2{margin:4px 0 7px;color:#17365f;font-size:clamp(1.45rem,4vw,2rem)}.minigame-heading>p:last-child{margin:0;color:#667891;line-height:1.55}.minigame-progress{align-self:end;min-width:150px;color:#506985;font-size:.8rem;font-weight:800}.minigame-progress>div{height:8px;margin-top:7px;overflow:hidden;border-radius:999px;background:#e4eaf3}.minigame-progress i{display:block;height:100%;border-radius:inherit;background:#2d75dc;transition:width .18s ease}
.minigame-stage{margin-top:24px}.minigame-stage button{min-height:44px;font:inherit}.minigame-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.minigame-match-grid section{display:grid;align-content:start;gap:9px}.minigame-match-grid h3{margin:0 0 3px;color:#6c7d94;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}.minigame-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;border:1px solid #cfdae9;border-radius:13px;background:#fff;color:#234264;text-align:left;cursor:pointer}.minigame-choice:hover{border-color:#75a6e8;background:#f5f9ff}.minigame-choice:focus-visible,.minigame-order-actions button:focus-visible,.minigame-check:focus-visible,.minigame-next:focus-visible{outline:3px solid rgba(45,117,220,.3);outline-offset:2px}.minigame-choice.is-selected{border-color:#2d75dc;background:#eaf3ff;box-shadow:inset 0 0 0 1px #2d75dc}.minigame-choice.is-matched{border-color:#9bd2bd;background:#f0faf6;color:#286652}.minigame-choice.is-wrong{border-color:#e5c9a9;background:#fff8ef;color:#805d38}.minigame-choice:disabled{cursor:default;opacity:1}.minigame-choice b{flex:0 0 25px;text-align:center}
.minigame-sequence-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}.minigame-sequence-list li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;min-height:58px;padding:8px 9px;border:1px solid #d8e2ef;border-radius:14px;background:#fff;color:#284563}.minigame-order-number{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eaf3ff;color:#225fae;font-weight:900}.minigame-order-actions{display:flex;gap:6px}.minigame-order-actions button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbd9ea;border-radius:11px;background:#f8fbff;color:#245a9c;font-weight:900;cursor:pointer}.minigame-order-actions button:disabled{opacity:.35;cursor:default}.minigame-check{margin-top:16px}
.minigame-clue-context{padding:17px;border-left:5px solid #70b6a4;border-radius:12px;background:#f3faf8}.minigame-clue-context span{color:#318273;font-size:.73rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.minigame-clue-context p{margin:7px 0 0;color:#294b47;line-height:1.65}.minigame-question{margin:20px 0 11px;color:#1c3d65;font-size:1.05rem}.minigame-clue-options{display:grid;gap:9px}
.minigame-feedback{display:flex;align-items:flex-start;gap:10px;min-height:50px;margin-top:18px;padding:13px 15px;border-radius:13px;background:#f4f6fa;color:#5e7088;line-height:1.5}.minigame-feedback>span:first-child{font-weight:900}.minigame-feedback.is-correct{background:#edf9f4;color:#276d58}.minigame-feedback.is-hint{background:#fff7eb;color:#805b2f}.minigame-feedback.is-guide{background:#eef5ff;color:#315f98}.minigame-next{display:block;margin:16px 0 0 auto}
.minigame-result{text-align:center}.minigame-result .minigame-exit{display:flex}.minigame-result-mark{display:grid;place-items:center;width:72px;height:72px;margin:8px auto 16px;border-radius:22px;background:#fff1bf;color:#b57900;font-size:2rem;box-shadow:0 9px 20px rgba(181,121,0,.12)}.minigame-result h2{margin:5px 0;color:#17365f;font-size:2rem}.minigame-result>p{color:#667891}.minigame-result-score{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto;padding:15px;border-radius:15px;background:#eef5ff;color:#315d96}.minigame-result-score strong{font-size:1.35rem}.minigame-result-score span{font-size:.86rem}.minigame-result-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
@media(max-width:680px){.summary-minigame{align-items:stretch;flex-direction:column;gap:12px}.summary-minigame .secondary-button{width:100%}.minigame-header{grid-template-columns:1fr}.minigame-progress{width:100%}.minigame-match-grid{grid-template-columns:1fr}.minigame-sequence-list li{grid-template-columns:30px 1fr}.minigame-order-actions{grid-column:2;justify-self:end}.minigame-next{width:100%}.minigame-result-score,.minigame-result-actions{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.minigame-progress i{transition:none}}

/* v0.41.5 — restrained student joy layer and scalable subject tokens */
:root{
  --joy-fast:140ms;--joy-normal:210ms;--joy-celebrate:320ms;
  --joy-ease:cubic-bezier(.2,.7,.2,1);
  --subject-turkish-accent:#159b8e;--subject-turkish-tint:#e9f8f5;
  --subject-mathematics-accent:#3978dc;--subject-mathematics-tint:#eaf2ff;
  --subject-life-science-accent:#e96559;--subject-life-science-tint:#fff0ed;
  --joy-sun:#f5b82e;--joy-coral:#ef765f;--joy-violet:#765fd1;
  --joy-border:#d9e5f2;--joy-shadow:0 12px 30px rgba(25,61,100,.08);
  --joy-shadow-hover:0 18px 38px rgba(25,61,100,.12);
}
.student-dashboard-v037{gap:22px}
.student-dashboard-v037 .student-welcome{isolation:isolate;overflow:hidden;min-height:142px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(125deg,#174b7d 0%,#216f9b 58%,#238f91 100%);box-shadow:0 16px 38px rgba(24,69,110,.16)}
.student-dashboard-v037 .student-welcome:before,.student-dashboard-v037 .student-welcome:after{content:"";position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.13);pointer-events:none}
.student-dashboard-v037 .student-welcome:before{width:180px;height:180px;right:62px;top:-86px;border-radius:54px;transform:rotate(24deg)}
.student-dashboard-v037 .student-welcome:after{width:92px;height:92px;right:190px;bottom:-62px;border-radius:50%}
.student-dashboard-v037 .student-welcome img{transition:transform var(--joy-normal) var(--joy-ease),filter var(--joy-normal) var(--joy-ease)}
.student-dashboard-v037 .student-welcome:hover img{transform:translateY(-2px) rotate(1deg);filter:drop-shadow(0 13px 14px rgba(0,0,0,.2))}
.student-dashboard-v037 .student-today-card{position:relative;overflow:hidden;border-color:var(--joy-border);background:linear-gradient(135deg,#fff 0%,#f3f8ff 100%);box-shadow:var(--joy-shadow);transition:transform var(--joy-normal) var(--joy-ease),box-shadow var(--joy-normal) var(--joy-ease),border-color var(--joy-fast) ease}
.student-dashboard-v037 .student-today-card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--subject-turkish-accent),#4ab7aa)}
.student-dashboard-v037 .student-today-card:hover{transform:translateY(-2px);border-color:#bfd5ea;box-shadow:var(--joy-shadow-hover)}
.student-dashboard-v037 .assignment-priority{background:linear-gradient(135deg,#fffdf7,#fff5d9);border-color:#ead395}
.student-dashboard-v037 .assignment-priority:before{background:linear-gradient(180deg,var(--joy-sun),#e59132)}
.student-dashboard-v037 .student-dash-card{border-color:var(--joy-border);box-shadow:0 9px 24px rgba(28,65,102,.055)}
.student-dashboard-v037 .student-summary-grid .student-dash-card:first-child{background:linear-gradient(145deg,#fff,#f4faf9)}
.student-dashboard-v037 .profile-shortcut-card{background:linear-gradient(145deg,#fff,#f4f2ff)}
.student-dashboard-v037 .profile-shortcut-card img{border:1px solid #d9d5f2;background:linear-gradient(145deg,#eef5ff,#f4efff);box-shadow:0 9px 20px rgba(73,65,135,.09)}
.student-dashboard-v037 .dashboard-progress i{background:linear-gradient(90deg,var(--subject-turkish-accent),#57c8ae);transition:width var(--joy-celebrate) var(--joy-ease)}
.student-dashboard-v037 .student-quick-actions button{border-color:var(--joy-border);box-shadow:0 7px 18px rgba(28,65,102,.045);transition:transform var(--joy-fast) var(--joy-ease),border-color var(--joy-fast) ease,background var(--joy-fast) ease}
.student-dashboard-v037 .student-quick-actions button:hover{transform:translateY(-2px);border-color:#b9cee4;background:#f8fbff}
.suite-subject-grid .home-subject-card{transition:transform var(--joy-normal) var(--joy-ease),box-shadow var(--joy-normal) var(--joy-ease),border-color var(--joy-fast) ease}
.suite-subject-grid .home-subject-card[data-home-subject="turkish"]{border-color:color-mix(in srgb,var(--subject-turkish-accent) 26%,#dbe5ef);background:linear-gradient(145deg,#fff,var(--subject-turkish-tint))}
.subject-page-hero{border-top:4px solid var(--active-subject,var(--subject-turkish-accent))}
.theme-card{position:relative;overflow:hidden;transition:transform var(--joy-normal) var(--joy-ease),box-shadow var(--joy-normal) var(--joy-ease),border-color var(--joy-fast) ease}
.theme-card:after{content:"";position:absolute;width:72px;height:72px;right:-34px;bottom:-38px;border-radius:24px;background:currentColor;opacity:.035;transform:rotate(18deg);pointer-events:none}
.theme-card:hover{transform:translateY(-2px)}
.summary-celebration{border:1px solid #d8eadf;background:linear-gradient(120deg,#ecfaf3,#f4f9ff);box-shadow:0 9px 22px rgba(31,98,76,.06)}
.summary-celebration-icon{animation:joy-check-in var(--joy-celebrate) var(--joy-ease) both}
@keyframes joy-check-in{from{opacity:.3;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
.reward-unlock-notice{background:linear-gradient(120deg,#edf9f5,#fff9e9);box-shadow:0 10px 26px rgba(34,105,81,.09);animation:joy-reveal var(--joy-celebrate) var(--joy-ease) both}
.reward-unlock-notice>span{box-shadow:0 7px 16px rgba(24,146,116,.1)}
@keyframes joy-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.profile-reward-hero{box-shadow:0 17px 40px rgba(31,66,112,.15)}
.profile-hero-avatar{filter:drop-shadow(0 14px 18px rgba(18,43,78,.18))}
.reward-card.is-unlocked{border-color:#c9dbea;background:linear-gradient(145deg,#fff,#f7fbff)}
.reward-card.is-selected{box-shadow:0 0 0 3px rgba(45,117,220,.13),0 10px 24px rgba(32,70,112,.08)}
.minigame-shell{border-top:5px solid #477fd5;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
.minigame-stage{padding:clamp(14px,2.5vw,22px);border:1px solid #e1e8f3;border-radius:20px;background:linear-gradient(145deg,#fbfdff,#f5f8ff)}
.minigame-choice{transition:transform var(--joy-fast) var(--joy-ease),border-color var(--joy-fast) ease,background var(--joy-fast) ease}
.minigame-choice:not(:disabled):hover{transform:translateY(-1px)}
.minigame-choice.is-matched{box-shadow:inset 4px 0 0 #52aa88}.minigame-choice.is-wrong{box-shadow:inset 4px 0 0 #d79b56}
.minigame-result-mark{background:linear-gradient(145deg,#fff4c9,#ffe38a);animation:joy-check-in var(--joy-celebrate) var(--joy-ease) both}
.digital-book-page.flow-reading .reading-panel,.digital-book-page.flow-writing .screen-section,.writing-checklist{box-shadow:none}
.digital-book-page.flow-reading .reading-text{background:#fff}
@media(max-width:680px){.student-dashboard-v037 .student-welcome:before{right:-42px}.student-dashboard-v037 .student-welcome:after{display:none}.minigame-stage{padding:12px}}
@media(prefers-reduced-motion:reduce){.student-dashboard-v037 .student-welcome img,.student-dashboard-v037 .student-today-card,.student-dashboard-v037 .student-quick-actions button,.suite-subject-grid .home-subject-card,.theme-card,.student-dashboard-v037 .dashboard-progress i,.minigame-choice,.summary-celebration-icon,.reward-unlock-notice,.minigame-result-mark{animation:none;transition:none}.student-dashboard-v037 .student-welcome:hover img,.student-dashboard-v037 .student-today-card:hover,.student-dashboard-v037 .student-quick-actions button:hover,.theme-card:hover,.minigame-choice:not(:disabled):hover{transform:none}}

/* v0.42.0 — Grade 3 Mathematics foundation */
.math-activity{--math-accent:#3978dc;--math-soft:#eaf2ff;--math-ink:#173b66}.math-activity .instruction{max-width:62ch}.math-place-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.math-place{min-width:0;padding:16px;border:2px solid #d6e2f2;border-radius:18px;background:#fff;text-align:center}.math-place.is-highlighted{border-color:var(--math-accent);box-shadow:0 0 0 4px rgba(57,120,220,.12)}.math-place h3{margin:0 0 10px;color:var(--math-ink);font-size:1rem}.math-place>strong{display:block;margin-top:10px;font-size:1.55rem}.math-blocks{display:flex;min-height:76px;align-items:flex-end;justify-content:center;gap:5px;flex-wrap:wrap}.math-block{display:inline-block;border:2px solid #245fae;background:var(--math-soft)}.math-block.hundreds{width:34px;height:34px;border-radius:7px;background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(36,95,174,.2) 9px 10px),repeating-linear-gradient(90deg,#dce9ff 0 9px,rgba(36,95,174,.2) 9px 10px)}.math-block.tens{width:9px;height:48px;border-radius:4px;background:repeating-linear-gradient(0deg,#bad3ff 0 4px,#eaf2ff 4px 5px)}.math-block.ones{width:13px;height:13px;border-radius:50%;background:#ffd369;border-color:#9b6810}.math-zero{align-self:center;color:#687b91;font-style:normal}.math-stepper{display:flex;justify-content:center;gap:8px;margin-top:10px}.math-stepper button{width:44px;height:44px;border:2px solid #b9cce5;border-radius:12px;background:#fff;color:var(--math-ink);font-size:1.35rem;font-weight:900}.math-stepper button:focus-visible,.number-line-point:focus-visible,.math-numeric-row input:focus-visible{outline:3px solid #ffb82e;outline-offset:3px}.math-equation{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border-radius:16px;background:var(--math-soft);color:var(--math-ink);font-size:1.2rem}.math-equation strong{font-size:1.65rem}.math-numeric-row{display:flex;align-items:stretch;gap:12px;max-width:440px}.math-numeric-row input{min-width:0;width:190px;min-height:52px;border:2px solid #b9cce5;border-radius:14px;padding:8px 14px;color:var(--math-ink);background:#fff;font:800 1.3rem/1.2 inherit}.math-numeric-row input[aria-invalid="true"]{border-color:#b64646}.number-line-wrap{position:relative;display:grid;grid-template-columns:repeat(var(--line-points,5),minmax(54px,1fr));gap:0;min-width:420px;max-width:100%;margin:28px 8px 18px;padding-top:12px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}.number-line-rail{position:absolute;left:5%;right:5%;top:31px;height:4px;border-radius:4px;background:#8aa7cb}.number-line-point{position:relative;z-index:1;display:flex;min-height:72px;min-width:48px;flex-direction:column;align-items:center;gap:8px;border:0;background:transparent;color:var(--math-ink);font-weight:900}.number-line-point i{width:20px;height:20px;border:4px solid #5680b7;border-radius:50%;background:#fff}.number-line-point.is-known i{border-radius:5px;background:#dce9ff}.number-line-point.is-selected i{border-color:#173b66;background:#ffd369;box-shadow:0 0 0 4px rgba(255,211,105,.35)}.number-line-point span{padding:3px 6px;border-radius:8px;background:#fff}.flow-visual-model .screen-card,.flow-independent-practice .screen-card{box-shadow:none}
@media(max-width:620px){.math-place-grid{gap:7px}.math-place{padding:11px 6px}.math-blocks{min-height:62px}.math-block.hundreds{width:27px;height:27px}.math-numeric-row{flex-direction:column}.math-numeric-row input{width:100%}.number-line-wrap{min-width:410px}.math-equation{flex-wrap:wrap}}
@media(max-width:380px){.math-place-grid{gap:5px}.math-place{padding-inline:4px}.math-place h3{font-size:.88rem}.math-stepper{gap:4px}}
@media(prefers-reduced-motion:reduce){.math-place,.math-block,.math-stepper button,.number-line-point,.number-line-point i{animation:none!important;transition:none!important}}

/* v0.42.2 — kids visual delight: shared art direction and high-energy entry surfaces */
:root{
  --delight-surface:#fff;--delight-surface-soft:#f7faff;--delight-surface-warm:#fffaf0;
  --delight-ink:#17345f;--delight-muted:#647895;
  --delight-radius-sm:12px;--delight-radius-md:18px;--delight-radius-lg:24px;--delight-radius-hero:28px;
  --delight-shadow-subtle:0 7px 18px rgba(34,67,108,.055);
  --delight-shadow-card:0 12px 30px rgba(34,67,108,.085);
  --delight-shadow-raised:0 18px 38px rgba(34,67,108,.13);
  --delight-shadow-celebrate:0 20px 42px rgba(38,94,139,.15);
  --delight-focus:#ffb82e;--delight-coral:#f27462;--delight-sun:#f7b928;--delight-mint:#24b8a8;--delight-violet:#7567d9;
  --subject-turkish-primary:#159b8e;--subject-turkish-soft:#e7f8f5;--subject-turkish-deep:#126b64;--subject-turkish-highlight:#ffd366;
  --subject-math-primary:#3978dc;--subject-math-soft:#eaf2ff;--subject-math-deep:#2458a9;--subject-math-highlight:#ffc95d;
  --subject-life-primary:#e96c5d;--subject-life-soft:#fff0ed;--subject-life-deep:#a9443a;--subject-life-highlight:#ffd66f;
  --subject-science-primary:#35a96c;--subject-science-soft:#eaf8ef;--subject-science-deep:#247249;--subject-science-highlight:#b9e56d;
  --subject-english-primary:#765fd1;--subject-english-soft:#f0edff;--subject-english-deep:#5541a8;--subject-english-highlight:#ffcf72;
}
.home-view{background-color:#f4f8ff;background-image:radial-gradient(circle at 8% 6%,rgba(77,200,187,.08),transparent 24%),radial-gradient(circle at 92% 20%,rgba(76,126,225,.07),transparent 26%)}
.home-section-title h2{color:var(--delight-ink);font-weight:850;letter-spacing:-.025em}
.hero-3d-dashboard{box-shadow:var(--delight-shadow-raised)!important}
.hero-3d-dashboard .hero-primary-button{transition:transform var(--joy-fast) var(--joy-ease),box-shadow var(--joy-fast) ease!important}
.suite-subject-grid .home-subject-card{
  isolation:isolate;border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:var(--delight-shadow-card)!important;
  transition:transform var(--joy-normal) var(--joy-ease),box-shadow var(--joy-normal) var(--joy-ease),border-color var(--joy-fast) ease!important;
}
.suite-subject-grid .home-subject-card:before,.suite-subject-grid .home-subject-card:after{content:"";display:block!important;position:absolute;z-index:0;pointer-events:none}
.suite-subject-grid .home-subject-card:before{width:72px;height:72px;right:-29px;top:54px;border:2px solid var(--subject-color);border-radius:24px;opacity:.12;transform:rotate(18deg)}
.suite-subject-grid .home-subject-card:after{width:10px;height:10px;left:15px;top:18px;border-radius:50%;background:var(--subject-color);box-shadow:13px 8px 0 -2px rgba(255,255,255,.88),24px -3px 0 -3px var(--subject-color);opacity:.34}
.suite-subject-grid .home-subject-art,.suite-subject-grid .home-subject-copy,.suite-subject-grid .home-subject-arrow{position:relative!important;z-index:1}
.suite-subject-grid .home-subject-art{border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 21px color-mix(in srgb,var(--subject-color) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.28)!important;transform:rotate(-1deg)}
.suite-subject-grid .home-subject-arrow{border:1px solid rgba(34,67,108,.06);transition:transform var(--joy-fast) var(--joy-ease),box-shadow var(--joy-fast) ease}
.suite-subject-grid .home-subject-card:hover{transform:translateY(-3px)!important;box-shadow:var(--delight-shadow-raised)!important}
.suite-subject-grid .home-subject-card:hover .home-subject-arrow{transform:translateX(2px);box-shadow:0 9px 18px rgba(34,67,108,.12)!important}
.suite-subject-grid .home-subject-card:active{transform:translateY(-1px)!important}
.suite-subject-grid .home-subject-card:focus-visible{outline:3px solid var(--delight-focus)!important;outline-offset:4px!important}
.dashboard-widget{border-color:#e0e9f5;box-shadow:var(--delight-shadow-card)}
.recommendation-content{position:relative;isolation:isolate;overflow:hidden}
.recommendation-content:after{content:"";position:absolute;z-index:-1;width:78px;height:78px;right:-24px;bottom:-31px;border:2px solid var(--subject-turkish-accent);border-radius:26px;opacity:.11;transform:rotate(22deg);pointer-events:none}
.progress-ring{box-shadow:0 0 0 7px rgba(57,120,220,.045),var(--delight-shadow-subtle)}
.progress-ring:before{content:"";position:absolute;inset:5px;border:2px dotted rgba(57,120,220,.13);border-radius:50%;pointer-events:none}
.dashboard-action-card{border:1px solid rgba(220,230,243,.8);box-shadow:var(--delight-shadow-subtle);transition:transform var(--joy-fast) var(--joy-ease),box-shadow var(--joy-fast) ease,border-color var(--joy-fast) ease}
.dashboard-action-card:hover{transform:translateY(-2px);box-shadow:var(--delight-shadow-card);border-color:#c9daef}
.action-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 16px rgba(47,77,119,.1)}

/* v0.42.2 — focused work surfaces, states and celebration hierarchy */
.primary-button,.secondary-button,.outline-link-button,.recommendation-button,.hero-primary-button{
  transition:transform var(--joy-fast) var(--joy-ease),box-shadow var(--joy-fast) ease,border-color var(--joy-fast) ease,background-color var(--joy-fast) ease;
}
.primary-button:hover,.recommendation-button:hover{transform:translateY(-1px)}
.primary-button:active,.secondary-button:active,.outline-link-button:active,.recommendation-button:active{transform:translateY(1px);box-shadow:none!important}
.primary-button:focus-visible,.secondary-button:focus-visible,.outline-link-button:focus-visible,.recommendation-button:focus-visible,.text-link-button:focus-visible{
  outline:3px solid var(--delight-focus)!important;outline-offset:3px!important;
}
.primary-button:disabled,.secondary-button:disabled{opacity:1;color:#8795a8;background:#e9eef5!important;border-color:#dce4ee!important;box-shadow:none!important;cursor:not-allowed}
.lesson-route-card{position:relative;overflow:hidden;border-color:#e0e9f5!important;box-shadow:var(--delight-shadow-subtle)!important}
.lesson-route-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--active-subject,var(--subject-turkish-primary));pointer-events:none}
.lesson-step-list .step-item{border:1px solid transparent}
.lesson-step-list .step-item.is-current{border-color:#bfd6f5;background:#eaf3ff!important;box-shadow:0 6px 13px rgba(38,98,176,.08)}
.screen-card{position:relative;border:1px solid rgba(224,233,245,.72)!important;box-shadow:var(--delight-shadow-card)!important}
.screen-card:before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:5px;background:var(--lesson-subject-color,var(--subject-turkish-primary));pointer-events:none}
.screen-content{position:relative;z-index:2}
.screen-title{letter-spacing:-.025em}
.step-type-badge{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lesson-subject-color) 18%,transparent),0 5px 12px rgba(34,67,108,.06)}
.choice-button,.quiz-option,.classification-choice,.matching-row,.ordering-row,.self-check{
  box-shadow:var(--delight-shadow-subtle);transition:transform var(--joy-fast) var(--joy-ease),box-shadow var(--joy-fast) ease,border-color var(--joy-fast) ease,background-color var(--joy-fast) ease;
}
.choice-button:hover,.quiz-option:hover,.classification-choice:hover{transform:translateY(-1px);box-shadow:var(--delight-shadow-card)}
.choice-button:active,.quiz-option:active,.classification-choice:active{transform:translateY(1px);box-shadow:none}
.choice-button[aria-pressed="true"],.quiz-option.is-selected{box-shadow:inset 4px 0 0 #3978dc,var(--delight-shadow-subtle)!important}
.choice-button.is-correct,.quiz-option.is-correct{box-shadow:inset 5px 0 0 #32a970,var(--delight-shadow-subtle)!important}
.choice-button.is-review,.quiz-option.is-review{box-shadow:inset 5px 0 0 #d7983c,var(--delight-shadow-subtle)!important}
.choice-button:focus-visible,.quiz-option:focus-within,.classification-choice:focus-visible,.matching-row:focus-within,.ordering-row:focus-within,.self-check:focus-within{
  outline:3px solid var(--delight-focus)!important;outline-offset:3px!important;
}
.feedback-box,.question-feedback{position:relative;border:1px solid #bfe6d6!important;background:#effaf5!important;color:#216b55!important;box-shadow:var(--delight-shadow-subtle)}
.feedback-box:before,.question-feedback:before{content:"";position:absolute;width:7px;height:7px;right:14px;top:12px;border-radius:50%;background:#38b47e;box-shadow:10px 8px 0 -2px #f3bd3e;pointer-events:none}
.feedback-box.is-review,.question-feedback.is-review{border-color:#efd5a4!important;background:#fff8eb!important;color:#775625!important;box-shadow:inset 4px 0 0 #e2a948,var(--delight-shadow-subtle)}
.feedback-box.is-review:before,.question-feedback.is-review:before{background:#d79d3e;box-shadow:10px 8px 0 -2px #f0d7a3}
.summary-celebration{position:relative;isolation:isolate;overflow:hidden;padding:22px!important;border:1px solid #c9e8da!important;border-radius:var(--delight-radius-lg)!important;background:#eefaf4!important;background-image:linear-gradient(125deg,#eaf9f1 0%,#f4f8ff 68%,#fff8df 100%)!important;box-shadow:var(--delight-shadow-celebrate)!important}
.summary-celebration:before,.summary-celebration:after{content:"";position:absolute;z-index:-1;pointer-events:none}
.summary-celebration:before{width:120px;height:120px;right:-42px;top:-46px;border:3px solid rgba(57,120,220,.15);border-radius:38px;transform:rotate(20deg)}
.summary-celebration:after{width:9px;height:9px;right:74px;bottom:28px;border-radius:50%;background:var(--delight-coral);box-shadow:18px -13px 0 -1px var(--delight-sun),34px 4px 0 -2px var(--delight-violet),-13px -18px 0 -2px var(--delight-mint)}
.summary-celebration-icon{border:2px solid rgba(255,255,255,.8);transform:rotate(-2deg);box-shadow:0 12px 24px rgba(188,128,14,.18)!important}
.summary-next,.summary-reinforcement,.summary-minigame{border-radius:var(--delight-radius-md)!important;box-shadow:var(--delight-shadow-subtle)}
.empty-state,.dashboard-empty{position:relative;border-color:#cbd9ea!important;background:#fbfdff!important;box-shadow:var(--delight-shadow-subtle)}
.empty-state:before,.dashboard-empty:before{content:"";display:block;width:38px;height:30px;margin:0 auto 12px;border:3px solid #7ba0d4;border-radius:7px 7px 11px 11px;background:linear-gradient(90deg,#edf5ff 48%,#fff 49%);box-shadow:0 6px 12px rgba(47,84,132,.08);pointer-events:none}

/* v0.42.2 — personality surfaces: profile, rewards and mini games */
.profile-reward-hero{border-radius:var(--delight-radius-hero);box-shadow:var(--delight-shadow-celebrate)}
.profile-reward-hero:after{content:"";position:absolute;z-index:-1;width:110px;height:110px;right:6%;top:-48px;border:2px solid rgba(255,255,255,.24);border-radius:36px;transform:rotate(20deg);pointer-events:none}
.profile-hero-avatar{filter:drop-shadow(0 14px 18px rgba(18,43,78,.2))}
.profile-reward-disclosure{border-color:#dce7f3;box-shadow:var(--delight-shadow-subtle)}
.profile-reward-disclosure[open]{box-shadow:var(--delight-shadow-card)}
.reward-card.is-unlocked{border-color:#cadced;background:#fff;box-shadow:var(--delight-shadow-subtle)}
.reward-card.is-unlocked:hover{box-shadow:var(--delight-shadow-card)}
.reward-card.is-selected{border-color:#3978dc;box-shadow:inset 0 0 0 2px #3978dc,var(--delight-shadow-card)!important}
.reward-card.is-locked{border-style:dashed;box-shadow:none}
.reward-title-art{background:#edf7ff;background-image:linear-gradient(135deg,#eaf5ff,#e9f8f2);box-shadow:inset 0 -1px 0 rgba(34,67,108,.06)}
.minigame-shell{position:relative;isolation:isolate;overflow:hidden;border:1px solid #cfdef1!important;border-top:5px solid #477fd5!important;border-radius:var(--delight-radius-hero)!important;box-shadow:var(--delight-shadow-raised)!important}
.minigame-shell:before{content:"";position:absolute;z-index:-1;width:112px;height:112px;right:-45px;top:-42px;border:2px solid rgba(71,127,213,.14);border-radius:36px;transform:rotate(21deg);pointer-events:none}
.minigame-stage{border-color:#dce6f3;background:#f8fbff;background-image:linear-gradient(145deg,#fbfdff,#f3f7ff);box-shadow:inset 0 1px 0 #fff}
.minigame-choice{border-radius:var(--delight-radius-sm);box-shadow:var(--delight-shadow-subtle)}
.minigame-choice.is-selected{box-shadow:inset 4px 0 0 #2d75dc,var(--delight-shadow-subtle)}
.minigame-choice.is-matched{box-shadow:inset 4px 0 0 #52aa88,var(--delight-shadow-subtle)}
.minigame-choice.is-wrong{box-shadow:inset 4px 0 0 #d79b56,var(--delight-shadow-subtle)}
.minigame-feedback{border:1px solid #dce5f1}
.minigame-result-mark{border:2px solid #fff;box-shadow:0 13px 26px rgba(181,121,0,.15)}

/* v0.42.2 — precision-preserving Math polish */
.math-activity{--math-accent:var(--subject-math-primary);--math-soft:var(--subject-math-soft);--math-ink:var(--delight-ink)}
.math-place{border-color:#cfddef;background:#fff;box-shadow:var(--delight-shadow-subtle)}
.math-place.is-highlighted{border-color:var(--math-accent);box-shadow:0 0 0 4px rgba(57,120,220,.11),var(--delight-shadow-card)}
.math-block{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 7px rgba(36,95,174,.10)}
.math-stepper button{box-shadow:0 4px 10px rgba(34,67,108,.07);transition:transform var(--joy-fast) var(--joy-ease),border-color var(--joy-fast) ease}
.math-stepper button:active{transform:translateY(1px)}
.math-equation{border:1px solid #cfdef2;background:#edf4ff}
.math-numeric-row input{box-shadow:inset 0 2px 4px rgba(34,67,108,.04)}
.number-line-rail{background:#6f94c3;box-shadow:0 2px 0 rgba(255,255,255,.9)}
.number-line-point i{box-shadow:0 4px 9px rgba(34,67,108,.09)}
.number-line-point.is-selected i{box-shadow:0 0 0 4px rgba(255,201,93,.32),0 5px 10px rgba(34,67,108,.11)}

/* v0.42.2 — restrained professional Teacher consistency */
.teacher-workspace{--delight-shadow-card:0 9px 24px rgba(38,65,99,.06)}
.teacher-header,.teacher-dashboard-head{box-shadow:var(--delight-shadow-card)!important}
.teacher-card,.teacher-class-card,.teacher-student-row,.teacher-student-detail>section{border:1px solid #dfe7f1!important;box-shadow:0 7px 18px rgba(38,65,99,.045)!important}
.teacher-current-lesson{border-left:4px solid #4f6ddc!important}
.teacher-topic{background:#fff}
.teacher-topic[open]{border-color:#bdcee2;box-shadow:0 6px 14px rgba(38,65,99,.04)}
.status-completed{font-weight:750}.status-in_progress{font-weight:750}.status-not_started{font-weight:700}

@supports not (backdrop-filter:blur(1px)){
  .lesson-navigation,.profile-hero-badges>span{background:#fff!important}
}
@media(max-width:620px){
  .suite-subject-grid .home-subject-card:before{width:56px;height:56px;right:-24px;top:66px}
  .suite-subject-grid .home-subject-card:after{box-shadow:12px 7px 0 -2px rgba(255,255,255,.88)}
  .summary-celebration{grid-template-columns:58px minmax(0,1fr);padding:17px!important}
  .summary-celebration-icon{width:54px;height:54px;border-radius:17px;font-size:1.55rem}
  .summary-celebration:after{display:none}
  .profile-reward-hero:after,.minigame-shell:before{display:none}
}
@media(max-width:390px){
  .suite-subject-grid .home-subject-card:before{display:none!important}
  .suite-subject-grid .home-subject-card:after{left:12px;top:14px;opacity:.24}
  .dashboard-widget,.dashboard-action-card{box-shadow:var(--delight-shadow-subtle)}
  .choice-button:hover,.quiz-option:hover,.classification-choice:hover{transform:none}
  .summary-celebration{grid-template-columns:1fr;text-align:center}
  .summary-celebration-icon{margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero-3d-dashboard .hero-primary-button,.primary-button,.secondary-button,.outline-link-button,.recommendation-button,.suite-subject-grid .home-subject-card,.suite-subject-grid .home-subject-arrow,.dashboard-action-card,.choice-button,.quiz-option,.classification-choice,.matching-row,.ordering-row,.self-check,.math-stepper button,.reward-card,.minigame-choice{animation:none!important;transition:none!important}
  .primary-button:hover,.recommendation-button:hover,.suite-subject-grid .home-subject-card:hover,.suite-subject-grid .home-subject-card:hover .home-subject-arrow,.dashboard-action-card:hover,.choice-button:hover,.quiz-option:hover,.classification-choice:hover,.math-stepper button:active{transform:none!important}
}

/* v0.43.2 — premium visual grammar hardening.
   One restrained depth/radius/highlight family integrates existing 3D artwork
   without changing layout, pedagogy or runtime behavior. */
:root{
  --eg-surface-page:#f4f7fc;
  --eg-surface-1:#fff;
  --eg-surface-2:#f8faff;
  --eg-border-neutral:#dfe7f2;
  --eg-highlight-top:inset 0 1px 0 rgba(255,255,255,.78);
  --eg-depth-0:none;
  --eg-depth-1:0 2px 7px rgba(32,58,98,.045);
  --eg-depth-2:0 10px 26px rgba(32,58,98,.075);
  --eg-depth-3:0 16px 36px rgba(32,58,98,.105);
  --eg-depth-object:0 13px 24px rgba(25,48,86,.14);
  --eg-depth-celebrate:0 19px 42px rgba(35,82,125,.14);
  --eg-radius-control:14px;
  --eg-radius-card:20px;
  --eg-radius-feature:26px;
  --eg-radius-hero:28px;
  --eg-motion-fast:140ms;
  --eg-motion-normal:200ms;
  --eg-ease:cubic-bezier(.2,.7,.2,1);
}

/* Level 0–2: page, surfaces and cards. */
.student-dashboard-v037,.book-view,.progress-view,.utility-view,.student-workspace,.teacher-workspace{color:var(--delight-ink)}
.student-dashboard-v037 .student-welcome{border-radius:var(--eg-radius-hero);box-shadow:var(--eg-highlight-top),var(--eg-depth-3)}
.student-dashboard-v037 .student-today-card{border-color:var(--eg-border-neutral);border-radius:var(--eg-radius-feature);box-shadow:var(--eg-highlight-top),var(--eg-depth-2)}
.student-dashboard-v037 .student-dash-card,.student-dashboard-v037 .student-quick-actions button,.dashboard-widget,.dashboard-action-card{border-color:var(--eg-border-neutral);border-radius:var(--eg-radius-card);box-shadow:var(--eg-highlight-top),var(--eg-depth-1)}
.student-dashboard-v037 .profile-shortcut-card img{box-shadow:var(--eg-highlight-top),var(--eg-depth-object)}
.subject-page-hero,.subject-overview-section,.theme-card,.curriculum-map-item{border-color:var(--eg-border-neutral)!important;box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important}
.subject-page-hero{border-radius:var(--eg-radius-feature)!important}
.subject-overview-section{border-radius:var(--eg-radius-card)!important}
.subject-tabs{box-shadow:inset 0 1px 2px rgba(36,62,99,.045)}
.subject-tab.is-active{box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important}

/* Shared subject cards: siblings with one material and subject-led accents. */
.suite-subject-grid .home-subject-card{border:1px solid color-mix(in srgb,var(--subject-color) 14%,var(--eg-border-neutral))!important;border-radius:var(--eg-radius-card)!important;box-shadow:var(--eg-highlight-top),var(--eg-depth-2)!important}
.suite-subject-grid .home-subject-card:hover{box-shadow:var(--eg-highlight-top),var(--eg-depth-3)!important}
.suite-subject-grid .home-subject-art{box-shadow:var(--eg-highlight-top),0 9px 18px color-mix(in srgb,var(--subject-color) 20%,transparent)!important}

/* Level 2–4: calm lesson shell with artwork grounded inside subject tint. */
.lesson-route-card{border-color:var(--eg-border-neutral)!important;box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important}
.screen-card{border-color:var(--eg-border-neutral)!important;border-radius:var(--eg-radius-feature)!important;box-shadow:var(--eg-highlight-top),var(--eg-depth-2)!important}
.lesson-illustration-card{
  min-height:0!important;
  aspect-ratio:32/21;
  align-self:center;
  padding:5px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--lesson-subject-color) 20%,var(--eg-border-neutral));
  border-radius:var(--eg-radius-card)!important;
  background:color-mix(in srgb,var(--lesson-subject-color) 7%,#fff);
  box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important;
}
.lesson-illustration-card img{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:32/21;
  display:block;
  object-fit:cover;
  border-radius:calc(var(--eg-radius-card) - 6px);
  filter:none!important;
}
.opening-panel>.lesson-illustration-card{width:100%}
.reading-panel,.writing-checklist,.flow-visual-model .screen-card,.flow-independent-practice .screen-card{box-shadow:var(--eg-depth-0)!important}

/* Level 3: tactile but quiet controls; state meaning remains border + fill. */
.choice-button,.quiz-option,.classification-choice,.matching-row,.ordering-row,.self-check,.minigame-choice{
  border-radius:var(--eg-radius-control)!important;
  box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important;
}
.choice-button:hover,.quiz-option:hover,.classification-choice:hover,.minigame-choice:not(:disabled):hover{box-shadow:var(--eg-highlight-top),var(--eg-depth-2)!important}
.choice-button:active,.quiz-option:active,.classification-choice:active,.minigame-choice:active{transform:translateY(1px);box-shadow:var(--eg-depth-0)!important}
.primary-button,.recommendation-button,.hero-primary-button{box-shadow:var(--eg-highlight-top),0 9px 19px rgba(24,113,141,.16)!important}
.secondary-button,.outline-link-button{box-shadow:var(--eg-highlight-top),var(--eg-depth-1)}

/* Level 5 is reserved for genuine completion/reward emphasis. */
.summary-celebration,.profile-reward-hero{box-shadow:var(--eg-highlight-top),var(--eg-depth-celebrate)!important}
.summary-celebration-icon,.profile-hero-avatar{filter:drop-shadow(var(--eg-depth-object))}
.reward-card.is-unlocked,.profile-reward-disclosure{box-shadow:var(--eg-highlight-top),var(--eg-depth-1)}
.reward-card.is-selected{box-shadow:inset 0 0 0 2px #3978dc,var(--eg-highlight-top),var(--eg-depth-2)!important}
.minigame-shell{box-shadow:var(--eg-highlight-top),var(--eg-depth-3)!important}
.minigame-stage{box-shadow:var(--eg-highlight-top),inset 0 0 0 1px rgba(55,91,139,.025)!important}

/* Precision and professional surfaces intentionally use lower energy. */
.math-place{box-shadow:var(--eg-highlight-top),var(--eg-depth-1)}
.math-place.is-highlighted{box-shadow:0 0 0 4px rgba(57,120,220,.11),var(--eg-highlight-top),var(--eg-depth-2)}
.teacher-workspace{--eg-depth-2:0 7px 18px rgba(30,55,88,.045)}
.teacher-header,.teacher-dashboard-head,.teacher-card,.teacher-class-card,.teacher-student-row,.teacher-student-detail>section{box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important}
.teacher-header,.teacher-dashboard-head{border:1px solid var(--eg-border-neutral)!important}
.teacher-card,.teacher-class-card,.teacher-student-row,.teacher-student-detail>section{border-color:var(--eg-border-neutral)!important}

@media(max-width:620px){
  .lesson-illustration-card{width:100%;aspect-ratio:32/21;padding:4px;border-radius:18px!important}
  .lesson-illustration-card img{aspect-ratio:32/21;border-radius:13px}
  .student-dashboard-v037 .student-welcome,.student-dashboard-v037 .student-today-card,.screen-card{box-shadow:var(--eg-highlight-top),var(--eg-depth-2)!important}
}
@media(max-width:390px){
  .student-dashboard-v037 .student-dash-card,.student-dashboard-v037 .student-quick-actions button,.dashboard-widget,.dashboard-action-card,.choice-button,.quiz-option,.classification-choice,.matching-row,.ordering-row,.self-check{box-shadow:var(--eg-highlight-top),var(--eg-depth-1)!important}
}
@media(prefers-reduced-motion:reduce){
  .student-dashboard-v037 .student-welcome,.student-dashboard-v037 .student-today-card,.student-dashboard-v037 .student-dash-card,.lesson-illustration-card,.hero-3d-dashboard .hero-primary-button,.primary-button,.secondary-button,.outline-link-button,.recommendation-button,.suite-subject-grid .home-subject-card,.suite-subject-grid .home-subject-arrow,.dashboard-action-card,.choice-button,.quiz-option,.classification-choice,.matching-row,.ordering-row,.self-check,.math-stepper button,.reward-card,.minigame-choice{animation:none!important;transition:none!important}
}

/* v0.44.2 — student experience polish: clearer Home action hierarchy. */
.student-dashboard-v037 .student-welcome>div,
.student-dashboard-v037 .student-today-card>div,
.student-dashboard-v037 .profile-shortcut-card>div{min-width:0}
.student-dashboard-v037 .student-today-card h2,
.student-dashboard-v037 .profile-shortcut-card h2{overflow-wrap:anywhere}
.student-dashboard-v037 .student-today-card:hover{transform:none}
.student-dashboard-v037 .student-today-card:not(.assignment-priority) .secondary-button{
  border-color:transparent!important;
  background:linear-gradient(135deg,#2d7df4,#1f69e7)!important;
  color:#fff!important;
  box-shadow:var(--eg-highlight-top),0 9px 19px rgba(31,105,231,.18)!important;
}
.student-dashboard-v037 .student-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.student-dashboard-v037 .student-quick-actions button{
  position:relative;
  cursor:pointer;
  transition:transform var(--eg-motion-fast) var(--eg-ease),border-color var(--eg-motion-fast) ease,box-shadow var(--eg-motion-fast) ease,background-color var(--eg-motion-fast) ease;
}
.student-dashboard-v037 .student-quick-actions button:focus-visible{outline:3px solid var(--delight-focus);outline-offset:3px}
.student-dashboard-v037 .student-quick-actions button:active{transform:translateY(1px);box-shadow:var(--eg-depth-0)!important}
@media(max-width:820px){
  .student-dashboard-v037 .student-quick-actions{grid-template-columns:1fr}
}
@media(max-width:480px){
  .student-dashboard-v037{gap:18px}
  .student-dashboard-v037 .student-welcome{min-height:118px;padding-right:104px}
  .student-dashboard-v037 .student-welcome img{right:18px;width:72px;height:72px}
  .student-dashboard-v037 .student-today-card{gap:17px}
}
@media(prefers-reduced-motion:reduce){
  .student-dashboard-v037 .student-quick-actions button{transition:none!important}
  .student-dashboard-v037 .student-quick-actions button:hover,
  .student-dashboard-v037 .student-quick-actions button:active{transform:none!important}
}

/* v0.44.2 — shared tactile states and unambiguous answer feedback. */
.primary-button:not(:disabled):hover,
.secondary-button:not(:disabled):hover,
.outline-link-button:not(:disabled):hover,
.recommendation-button:not(:disabled):hover{transform:translateY(-1px)}
.primary-button:not(:disabled):active,
.secondary-button:not(:disabled):active,
.outline-link-button:not(:disabled):active,
.recommendation-button:not(:disabled):active,
.reward-card:active{transform:translateY(1px);box-shadow:var(--eg-depth-0)!important}
.choice-button[aria-pressed="true"],
.quiz-option.is-selected{
  border-color:#78a7e8!important;
  background:#eef5ff!important;
  color:var(--delight-ink)!important;
  box-shadow:inset 5px 0 0 #3978dc,var(--eg-highlight-top),var(--eg-depth-1)!important;
}
.choice-button[aria-pressed="true"] .choice-marker,
.quiz-option.is-selected .choice-marker{border-color:#3978dc!important;background:#3978dc!important;color:#fff!important}
.choice-button.is-correct,
.quiz-option.is-correct{
  border-color:#57c98d!important;
  background:#eefbf4!important;
  color:#215f4b!important;
  box-shadow:inset 5px 0 0 #32a970,var(--eg-highlight-top),var(--eg-depth-1)!important;
}
.choice-button.is-correct .choice-marker,
.quiz-option.is-correct .choice-marker{border-color:#32a970!important;background:#32a970!important;color:#fff!important}
.choice-button.is-review,
.quiz-option.is-review{
  border-color:#e6b45a!important;
  background:#fff8e9!important;
  color:#735223!important;
  box-shadow:inset 5px 0 0 #d7983c,var(--eg-highlight-top),var(--eg-depth-1)!important;
}
.choice-button.is-review .choice-marker,
.quiz-option.is-review .choice-marker{border-color:#d7983c!important;background:#fff!important;color:#735223!important}
.choice-button:disabled,
.quiz-option:disabled,
.classification-choice:disabled{cursor:default}
.choice-button:disabled:not([aria-pressed="true"]):not(.is-correct):not(.is-review),
.quiz-option:disabled:not(.is-selected):not(.is-correct):not(.is-review){border-color:#dce4ee!important;background:#f4f6f9!important;color:#68778a!important;box-shadow:none!important}
.feedback-box:not(.is-review) .feedback-symbol,
.question-feedback:not(.is-review) .feedback-symbol{animation:polish-confirm 220ms var(--eg-ease) both}
@keyframes polish-confirm{from{opacity:.35;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .primary-button,.secondary-button,.outline-link-button,.recommendation-button,.reward-card{transition:none!important}
  .primary-button:hover,.secondary-button:hover,.outline-link-button:hover,.recommendation-button:hover,
  .primary-button:active,.secondary-button:active,.outline-link-button:active,.recommendation-button:active,.reward-card:active{transform:none!important}
  .feedback-box .feedback-symbol,.question-feedback .feedback-symbol{animation:none!important}
}

/* v0.44.2 — completion, profile and optional-play hierarchy. */
.summary-next{
  border-color:#d9e5f2!important;
  border-left:4px solid var(--lesson-subject-color,var(--subject-turkish-primary))!important;
  background:#f8fbff;
}
.summary-next span{font-weight:800;letter-spacing:.02em}
.summary-next strong{color:var(--delight-ink);font-size:1rem}
.profile-reward-disclosure>summary:hover{background:#f7fbff}
.profile-reward-disclosure>summary:active{background:#eef5ff}
.profile-reward-disclosure>summary:focus-visible{
  outline:3px solid transparent!important;
  outline-offset:-3px;
  box-shadow:inset 0 0 0 3px var(--delight-focus);
}
.summary-minigame{border-left:4px solid #477fd5!important}
@media(prefers-reduced-motion:reduce){
  .profile-reward-disclosure>summary>i{transition:none!important}
}

/* v0.44.3 — physical-device and accessibility hardening. */
.period-button{min-height:44px}
.teacher-topic>summary:focus-visible,
.submission-panel>summary:focus-visible{
  outline:3px solid var(--focus-ring-v018);
  outline-offset:3px;
}

/* v0.44.4 — calm Teacher workflow clarity. */
.teacher-section-note,.assignment-form-heading p{margin:5px 0 0;color:#60778e}
.teacher-archive,.review-section{overflow:hidden;border:1px solid #dce6f0;border-radius:18px;background:#fff}
.teacher-archive{margin-top:24px}
.teacher-archive>summary,.review-section>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 18px;color:#173b66;cursor:pointer;font-weight:800}
.teacher-archive>summary span,.review-count{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:99px;background:#e9f1f8;color:#31597d;font-size:.82rem}
.teacher-archive>.assignment-grid,.review-section>.review-queue,.review-section>.dashboard-empty{margin:0;padding:0 18px 18px}
.assignment-card-archived{background:#f8fafc;box-shadow:none}
.lesson-picker{gap:12px!important}
.lesson-search input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #bfd0e0;border-radius:11px;background:#fff;color:#173b66;font:inherit}
.lesson-filters{display:flex;flex-wrap:wrap;gap:8px}
.lesson-filter{min-height:44px;padding:8px 14px;border:1px solid #bfd0e0;border-radius:99px;background:#fff;color:#294b70;font:inherit;font-weight:750}
.lesson-filter.is-active{border-color:#206f66;background:#e4f5f2;color:#145e56;box-shadow:inset 0 0 0 1px #206f66}
.lesson-results-status{min-height:20px;color:#60778e;font-size:.86rem;font-weight:600}
.lesson-results{display:grid;gap:14px;max-height:370px;padding:2px 5px 2px 2px;overflow:auto;overscroll-behavior:contain}
.lesson-result-group{display:grid;gap:7px}
.lesson-result-group h3{margin:0;color:#516b84;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.lesson-result-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lesson-result{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:10px 12px;border:1px solid #d3e0eb;border-radius:12px;background:#fff;color:#173b66;text-align:left;font:inherit}
.lesson-result strong,.lesson-result small,.selected-lesson-summary strong,.selected-lesson-summary small{display:block}
.lesson-result small,.selected-lesson-summary small{margin-top:4px;color:#61788f;font-size:.78rem;font-weight:600}
.lesson-result.is-selected{border-color:#206f66;background:#eff9f7;box-shadow:inset 0 0 0 1px #206f66}
.lesson-selected-mark{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#dff3ef;color:#145e56;font-weight:900}
.selected-lesson-summary{padding:13px 15px;border-left:4px solid #247f73;border-radius:10px;background:#f1f9f7;color:#173b66}
.selected-lesson-summary[hidden],.assignment-students[hidden]{display:none!important}
.lesson-empty{padding:18px}
.target-mode{display:flex;flex-wrap:wrap;gap:16px}
.target-count{margin:2px 0;padding:9px 12px;border-radius:10px;background:#eef5fb;color:#31597d;font-size:.88rem;font-weight:800}
.assignment-students label{min-height:44px;padding:8px 10px;border:1px solid #e0e8f0;border-radius:10px}
.optional-label{margin-left:5px;color:#6c8196;font-size:.78rem;font-weight:600}
.assignment-confirmation{padding:16px;border:1px solid #d8e5ef;border-radius:14px;background:#f8fbfd}
.assignment-confirmation h3{margin:0 0 12px;color:#173b66;font-size:1rem}
.assignment-confirmation dl,.assignment-detail-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0}
.assignment-confirmation dl div,.assignment-detail-summary div{min-width:0;padding:10px;border-radius:10px;background:#fff}
.assignment-confirmation dt,.assignment-detail-summary dt{color:#6a8095;font-size:.72rem;font-weight:800;text-transform:uppercase}
.assignment-confirmation dd,.assignment-detail-summary dd{margin:4px 0 0;overflow-wrap:anywhere;color:#173b66;font-weight:750}
.assignment-publish{justify-self:start}
.teacher-assignment-student{grid-template-columns:minmax(0,1fr) auto}
.review-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.review-overview>div{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #dce7f1;border-radius:16px;background:#fff;color:#173b66}
.review-overview strong{font-size:1.35rem}.review-overview span{color:#60778e;font-weight:700}
.review-section{margin-top:14px}
.review-section>summary span:first-child{display:grid;gap:3px}
.review-section>summary small{color:#687e94;font-weight:600}
.review-item-action{display:grid;justify-items:end;gap:8px;min-width:160px}
.review-status{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border:1px solid #cbd9e6;border-radius:99px;background:#f5f8fb;color:#405c77;font-size:.78rem;font-weight:800}
.review-status::before{content:'•';margin-right:6px}
.status-submitted,.status-under_review{border-color:#d7b768;background:#fff9e8;color:#71500b}
.status-revision_requested{border-color:#a9c4dd;background:#f2f7fc;color:#31597d}
.status-reviewed{border-color:#9fcfc5;background:#eff9f7;color:#145e56}
.review-queue h3{margin:2px 0 4px;color:#173b66;font-size:1.08rem}
.review-last-feedback{margin-top:8px!important;padding-left:10px;border-left:3px solid #b8cbc6;color:#536d66!important;font-size:.86rem}
.review-context{display:grid;justify-items:start;gap:4px}
.review-context p{margin:0;color:#60778e}.review-context .review-status{margin-top:5px}
.review-revision-note{margin:0;padding:12px 14px;border-left:4px solid #6d9fc8;border-radius:10px;background:#f1f6fb;color:#31597d}
.review-complete-actions{padding-top:14px;border-top:1px solid #e1e8ef}
.review-next-state{display:grid;justify-items:start;gap:10px;padding:18px;border:1px solid #b8d8cd;border-radius:16px;background:#f3faf7;color:#173b66}
.review-next-state h3,.review-next-state p{margin:0}.review-next-state [data-review-next-slot]{display:grid;gap:10px}.review-next-state button{min-height:44px}
.review-next-state .teacher-back{border:0;background:transparent;padding-inline:0;text-decoration:underline;text-underline-offset:3px}
.review-next-state:focus-visible,.review-next-state button:focus-visible{outline:3px solid var(--focus-ring-v018);outline-offset:3px}
@media(max-width:680px){.review-next-state{justify-items:stretch}.review-next-state button{width:100%}}
.teacher-archive>summary:focus-visible,.review-section>summary:focus-visible,.lesson-filter:focus-visible,.lesson-result:focus-visible{outline:3px solid var(--focus-ring-v018);outline-offset:3px}
@media(max-width:900px){.assignment-confirmation dl,.assignment-detail-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.lesson-result-group>div,.assignment-confirmation dl,.assignment-detail-summary,.review-overview{grid-template-columns:1fr}.lesson-results{max-height:430px}.review-item-action{justify-items:stretch;width:100%;min-width:0}.review-status{justify-self:start}.teacher-archive>.assignment-grid{grid-template-columns:1fr}.teacher-archive>summary,.review-section>summary{align-items:flex-start}.teacher-section-title{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.lesson-filter,.lesson-result,.teacher-archive>summary,.review-section>summary{transition:none!important}}


/* v0.44.7 school backup export (teacher-only) */
.teacher-backup-card{background:#fff;border:1px solid #d7dde8;border-radius:16px;padding:1.25rem 1.4rem;max-width:52rem;}
.teacher-backup-counts{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;padding:0;margin:1rem 0;}
.teacher-backup-counts li{min-width:6.5rem;background:#f4f7fb;border-radius:12px;padding:.65rem .8rem;display:flex;flex-direction:column;gap:.15rem;}
.teacher-backup-counts strong{font-size:1.15rem;}
.teacher-backup-modes{border:0;padding:0;margin:1rem 0;}
.teacher-backup-privacy{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0;line-height:1.45;}
.teacher-backup-privacy input{margin-top:.25rem;}
.teacher-backup-limit{color:#4a5568;font-size:.95rem;}
.teacher-backup-panel .teacher-action-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;}

.teacher-backup-validate{margin-top:1.25rem;}
.teacher-backup-file-label{display:block;margin:.75rem 0 .35rem;font-weight:600;}
.teacher-backup-file{display:block;max-width:100%;}
.teacher-backup-preview{margin-top:1rem;padding:1rem;border-radius:12px;background:#f4f7fb;}
.teacher-backup-preview-list{margin:.5rem 0 0;padding-left:1.2rem;}

/* ===== v0.45.2 Premium Welcome Visual Refinement ===== */
#signed-out-gate.signed-out-gate {
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vh, 44px) clamp(14px, 3vw, 24px);
  background:
    radial-gradient(980px 620px at 8% 12%, rgba(81, 215, 196, 0.32), transparent 56%),
    radial-gradient(760px 520px at 92% 8%, rgba(255, 130, 94, 0.18), transparent 52%),
    radial-gradient(720px 480px at 78% 92%, rgba(45, 117, 220, 0.14), transparent 55%),
    linear-gradient(165deg, #eaf3ff 0%, #f6fbff 38%, #eef9f5 100%);
}
#signed-out-gate .welcome-shell {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(30px, 5.2vw, 52px) clamp(22px, 4vw, 40px) clamp(32px, 5vw, 48px);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 28px 64px rgba(24, 49, 90, 0.16),
    0 8px 24px rgba(45, 117, 220, 0.08);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
#signed-out-gate .welcome-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
#signed-out-gate .welcome-orb,
#signed-out-gate .welcome-glow,
#signed-out-gate .welcome-frag {
  position: absolute;
  display: block;
  pointer-events: none;
}
#signed-out-gate .welcome-orb {
  border-radius: 999px;
}
#signed-out-gate .welcome-orb-a {
  width: 200px; height: 200px; left: -56px; top: -50px;
  background: radial-gradient(circle at 34% 34%, rgba(81, 215, 196, 0.5), rgba(81, 215, 196, 0));
}
#signed-out-gate .welcome-orb-b {
  width: 150px; height: 150px; right: -42px; top: 14%;
  background: radial-gradient(circle at 42% 38%, rgba(255, 130, 94, 0.38), rgba(255, 130, 94, 0));
}
#signed-out-gate .welcome-glow {
  width: 70%; height: 42%; left: 15%; bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(45, 117, 220, 0.12), transparent 70%);
}
#signed-out-gate .welcome-frag-a { right: 12%; bottom: 14%; opacity: 0.9; }
#signed-out-gate .welcome-frag-b { left: 10%; top: 38%; opacity: 0.85; }
#signed-out-gate .welcome-frag-c { right: 24%; top: 22%; width: 28px; height: 28px; opacity: 0.8; }
#signed-out-gate .welcome-panel { position: relative; z-index: 1; }
#signed-out-gate .welcome-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #4d6282;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#signed-out-gate .welcome-brand-mark {
  width: 30px; height: 30px; border-radius: 11px;
  background: linear-gradient(145deg, #51d7c4 0%, #2d75dc 58%, #ff825e 100%);
  box-shadow: 0 10px 20px rgba(45, 117, 220, 0.2);
}
#signed-out-gate .welcome-headline {
  margin: 0 0 12px;
  color: #18315a;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
#signed-out-gate .welcome-support {
  margin: 0 auto 28px;
  max-width: 34ch;
  color: #61758f;
  font-size: clamp(0.95rem, 2.1vw, 1.06rem);
  line-height: 1.62;
}
#signed-out-gate .welcome-cta {
  min-width: min(248px, 100%);
  min-height: 48px;
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(11, 107, 99, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
#signed-out-gate .welcome-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(11, 107, 99, 0.26);
}
#signed-out-gate .welcome-cta:active {
  transform: translateY(0);
  box-shadow: 0 8px 16px rgba(11, 107, 99, 0.2);
}
#signed-out-gate .welcome-cta:focus-visible {
  outline: 3px solid var(--accent, #e9a928);
  outline-offset: 3px;
}
#signed-out-gate .welcome-back {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 6px 0;
  color: #4d6282;
  font-weight: 700;
}
#signed-out-gate .signed-out-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 22px 50px rgba(24, 49, 90, 0.14);
  transition: opacity 220ms ease, transform 220ms ease;
}
#signed-out-gate.is-welcome-mode .signed-out-card[hidden],
#signed-out-gate.is-login-mode .welcome-shell[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  #signed-out-gate .welcome-enter-item {
    animation: welcome-enter 360ms ease both;
  }
  #signed-out-gate .welcome-brand.welcome-enter-item { animation-delay: 40ms; }
  #signed-out-gate .welcome-headline.welcome-enter-item { animation-delay: 90ms; }
  #signed-out-gate .welcome-support.welcome-enter-item { animation-delay: 140ms; }
  #signed-out-gate .welcome-cta.welcome-enter-item { animation-delay: 190ms; }
  #signed-out-gate.is-login-mode .signed-out-card {
    animation: welcome-enter 240ms ease both;
  }
  #signed-out-gate .welcome-orb-a { animation: welcome-float-a 11s ease-in-out infinite; }
  #signed-out-gate .welcome-orb-b { animation: welcome-float-b 13s ease-in-out infinite; }
  #signed-out-gate .welcome-frag-b { animation: welcome-float-c 14s ease-in-out infinite; }
}
@keyframes welcome-enter {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes welcome-float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(6px, 8px, 0); }
}
@keyframes welcome-float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, 6px, 0); }
}
@keyframes welcome-float-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(5px, -6px, 0) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  #signed-out-gate .welcome-enter-item,
  #signed-out-gate .welcome-orb-a,
  #signed-out-gate .welcome-orb-b,
  #signed-out-gate .welcome-frag-b,
  #signed-out-gate.is-login-mode .signed-out-card,
  #signed-out-gate .welcome-cta {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
@media (max-width: 640px) {
  #signed-out-gate .welcome-shell {
    border-radius: 24px;
    padding: 26px 18px 28px;
  }
  #signed-out-gate .welcome-frag-c,
  #signed-out-gate .welcome-glow { display: none; }
  #signed-out-gate .welcome-support { margin-bottom: 22px; }
}
@media (max-height: 560px) {
  #signed-out-gate.signed-out-gate { align-items: start; }
  #signed-out-gate .welcome-shell { margin-top: 6px; padding-top: 20px; padding-bottom: 20px; }
  #signed-out-gate .welcome-orb-a,
  #signed-out-gate .welcome-orb-b { opacity: 0.45; }
  #signed-out-gate .welcome-frag-a,
  #signed-out-gate .welcome-frag-b { opacity: 0.35; }
  #signed-out-gate .welcome-support { margin-bottom: 18px; }
}
@media (max-width: 380px) {
  #signed-out-gate .welcome-frag-a,
  #signed-out-gate .welcome-frag-b { display: none; }
}

/* ===== v0.45.3 assignment clarity ===== */
.student-assignments .submission-hint{margin:0 16px 12px;padding:10px 12px;border-radius:12px;background:#f3f8ff;color:#35557a;font-size:.88rem;line-height:1.45}
.student-assignments .submission-hint strong{font-weight:800}

/* v0.45.5 — soft-3D title identity nameplates */
.egitim-title-plate{
  --plate-ink:#123a5f;
  --plate-a:#dff1ff;
  --plate-b:#c9e6fb;
  --plate-edge:rgba(255,255,255,.78);
  --plate-glow:rgba(47,108,176,.22);
  position:relative;
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:28px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(30,74,122,.18);
  color:var(--plate-ink);
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),
    linear-gradient(135deg,var(--plate-a),var(--plate-b));
  box-shadow:
    0 8px 16px var(--plate-glow),
    inset 0 1px 0 var(--plate-edge),
    inset 0 -2px 4px rgba(18,58,95,.10);
  overflow:hidden;
  vertical-align:middle;
}
.egitim-title-plate__label{
  position:relative;
  z-index:1;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:18rem;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.egitim-title-plate__sheen,
.egitim-title-plate__edge{position:absolute;inset:0;pointer-events:none;}
.egitim-title-plate__sheen{
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.55) 46%,transparent 62%);
  transform:translateX(-35%);
  opacity:.7;
}
.egitim-title-plate__edge{
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.egitim-title-plate--hero{
  min-height:34px;
  padding:0 16px;
  margin:4px 0 12px;
}
.egitim-title-plate--hero .egitim-title-plate__label{font-size:.9rem;}
.egitim-title-plate--compact{
  min-height:26px;
  padding:0 12px;
}
.egitim-title-plate--compact .egitim-title-plate__label{font-size:.72rem;max-width:11rem;}
.egitim-title-plate--sky{--plate-a:#e7f5ff;--plate-b:#cfe9fb;--plate-ink:#15486f;--plate-glow:rgba(45,122,186,.20);}
.egitim-title-plate--mint{--plate-a:#e7faf2;--plate-b:#cceede;--plate-ink:#17604a;--plate-glow:rgba(36,140,108,.18);}
.egitim-title-plate--blue{--plate-a:#e8efff;--plate-b:#cfdcff;--plate-ink:#1d3f86;--plate-glow:rgba(48,88,180,.20);}
.egitim-title-plate--amber{--plate-a:#fff4df;--plate-b:#ffe2b0;--plate-ink:#7a4a12;--plate-glow:rgba(186,122,28,.18);}
.egitim-title-plate--lavender{--plate-a:#f3edff;--plate-b:#ddd0ff;--plate-ink:#4d358a;--plate-glow:rgba(104,78,176,.18);}
.egitim-title-plate--coral{--plate-a:#ffe9e4;--plate-b:#ffd0c5;--plate-ink:#8a3a2c;--plate-glow:rgba(176,78,58,.16);}
.profile-active-title--plate{margin:4px 0 12px;}
.profile-active-title--empty{opacity:.92;}
.reward-title-art--plate{
  height:78px;
  display:grid;
  place-items:center;
  padding:0 10px;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.75),transparent 55%),
    linear-gradient(160deg,#f4f9ff,#eef6f2);
}
.reward-card.is-locked .egitim-title-plate{filter:saturate(.55) brightness(.94);opacity:.86;}
.teacher-student-title{margin:6px 0 8px;}
.teacher-student-title-text{margin:4px 0 8px;color:#4d6788;font-size:.86rem;font-weight:750;}
.student-profile-title-line{margin:2px 0 6px;color:#4d6788;font-size:.82rem;font-weight:750;}
@media (prefers-reduced-motion:no-preference){
  .egitim-title-plate__sheen{animation:egitimTitleSheen 4.8s ease-in-out infinite;}
}
@keyframes egitimTitleSheen{
  0%,28%{transform:translateX(-40%);opacity:.25;}
  48%{transform:translateX(35%);opacity:.75;}
  100%{transform:translateX(55%);opacity:.15;}
}
@media (prefers-reduced-motion:reduce){
  .egitim-title-plate__sheen{animation:none;opacity:.35;transform:none;}
}


/* v0.45.6 settings panel */
.settings-panel{display:grid;gap:18px;max-width:720px}
.settings-section-title{margin:0;font-size:0.95rem;color:#3d4f6f;letter-spacing:0.01em}
.settings-section-body{display:grid;gap:10px;margin-top:8px}
.settings-nav-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  border:1px solid #d7e2f1;background:#fff;border-radius:16px;padding:14px 16px;text-align:left;cursor:pointer;
}
.settings-nav-row:hover{border-color:#bfd5f5;background:#fbfdff}
.settings-nav-row strong,.settings-nav-row small{display:block}
.settings-nav-row small{margin-top:4px;color:#7485a2;line-height:1.4}
.settings-nav-row.is-danger{border-color:#f0c7c7}
.settings-nav-chevron{color:#7b8dad;font-size:1.2rem;line-height:1}
.settings-language{display:grid;gap:8px}
.settings-language-row{border:1px solid #d7e2f1;border-radius:16px;padding:14px 16px;background:#fff}
.settings-language-row strong,.settings-language-row small{display:block}
.settings-language-row small{margin-top:4px;color:#7485a2;line-height:1.4}
.settings-language-row.is-active{border-color:#9ec0f0;background:#f5f9ff}
.settings-language-row.is-soon{opacity:0.72}
.settings-about{border:1px solid #d7e2f1;border-radius:16px;padding:14px 16px;background:#f8fbff;display:grid;gap:6px}
.settings-about p{margin:0;color:#526784;line-height:1.45}
.settings-footnote{margin:0;color:#7b8dad;font-size:0.86rem;line-height:1.4}
@media (prefers-reduced-motion:reduce){
  .setting-row > i,.setting-row > i > b{transition:none!important}
}

/* v0.45.14 — classroom feedback and revision visibility */
.classroom-work-card>div,.classroom-assignment-card{min-width:0}
.classroom-work-note,.classroom-feedback-preview{padding:12px 14px;border:1px solid #c7dceb;border-radius:14px;background:#f4f9ff;color:#24486d;line-height:1.5;overflow-wrap:anywhere}
.classroom-work-note{margin:10px 0 0!important}
.classroom-work-more{font-size:.88rem}
.classroom-assignment-card .classroom-status strong{color:#214c78}
.classroom-feedback-preview{margin:12px 0}
.classroom-feedback-preview strong{display:block;margin-bottom:4px;color:#1b456d}
.classroom-feedback-preview p{margin:0;color:#294f72}
.classroom-assignment-card .text-link-button{margin-left:10px}
.classroom-feedback-history{margin:14px 0;color:#355777}
.classroom-feedback-history ol{margin:8px 0 0;padding-left:22px}
.classroom-feedback-history li{margin:0 0 8px;line-height:1.5}
.classroom-revision-guide{margin:12px 16px;color:#294f72;line-height:1.5}
.teacher-attention{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border:1px solid #cfdfed;border-radius:20px;background:#f7fbff;color:#274967}
.teacher-attention h2{margin:0 0 5px;color:#173b66}
.teacher-attention p{margin:0;line-height:1.45}
.teacher-attention-counts{display:flex;flex-wrap:wrap;gap:10px}
.teacher-attention-counts span{display:grid;gap:2px;min-width:116px;padding:10px 12px;border:1px solid #d8e6f2;border-radius:12px;background:#fff;font-size:.82rem;line-height:1.35}
.teacher-attention-counts strong{font-size:1.3rem;color:#173b66}
.teacher-submission-summary{padding:9px 12px;border-radius:11px;background:#f0f6fc;color:#345b7c!important;line-height:1.45}
.teacher-assignment-student{grid-template-columns:minmax(0,1fr) auto}
.teacher-assignment-student small{display:block;margin-top:4px;color:#5d7288}
.teacher-student-workflow{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.teacher-workflow-label{font-weight:750;color:#214d75}
.app-shell.pref-high-contrast .classroom-work-note,.app-shell.pref-high-contrast .classroom-feedback-preview,.app-shell.pref-high-contrast .teacher-attention{border-color:#718ba6;color:#173b66}
.classroom-assignment-card:focus-visible,.teacher-attention button:focus-visible,.teacher-student-workflow button:focus-visible{outline:3px solid #2867a8;outline-offset:3px}
@media(max-width:820px){.teacher-attention{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.teacher-assignment-student{grid-template-columns:1fr}.teacher-student-workflow{justify-content:flex-start}.classroom-assignment-card .text-link-button{display:block;margin:10px 0 0}}
@media(max-width:430px){.teacher-attention{padding:18px}.teacher-attention-counts{width:100%}.teacher-attention-counts span{min-width:0;flex:1 1 100px}.classroom-work-card .primary-button{width:100%}}

/* v0.45.15 — one next action, compact remaining work */
.student-continuity-more{padding:18px 22px;border:1px solid #d5e3f0;border-radius:20px;background:#fff;color:#244869}
.student-continuity-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.student-continuity-head h2{margin:0;color:#173b66;font-size:1.18em}
.student-continuity-head p{margin:0;color:#526d88}
.student-continuity-more ul{list-style:none;margin:10px 0 0;padding:0}
.student-continuity-more li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid #e2ebf4;min-width:0}
.student-continuity-more li>div{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
.student-continuity-more li strong{color:#173b66}
.student-continuity-more li span{color:#526d88}
.student-continuity-more .text-link-button{flex:none;min-height:44px}
.student-continuity-more button:focus-visible,.student-lesson-primary button:focus-visible,.classroom-work-card button:focus-visible{outline:3px solid #2867a8;outline-offset:3px}
.app-shell.pref-high-contrast .student-continuity-more{border-color:#718ba6;color:#173b66}
.app-shell.pref-high-contrast .student-continuity-more li{border-color:#718ba6}
@media(max-width:520px){.student-continuity-more{padding:16px}.student-continuity-head,.student-continuity-more li{align-items:flex-start;flex-direction:column}.student-continuity-more .text-link-button{align-self:flex-start}}

/* v0.45.16 — scoped teacher assignment context */
.teacher-attention-main{min-width:0;flex:1 1 260px}
.teacher-attention-assignments{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.teacher-attention-assignments li{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0;padding-top:8px;border-top:1px solid #d8e6f2}
.teacher-attention-assignments strong{min-width:0;overflow-wrap:anywhere;color:#173b66}
.teacher-attention-assignments span{color:#345b7c}
.teacher-attention-assignments .text-link-button{min-height:44px}
.teacher-attention-assignments button:focus-visible{outline:3px solid #2867a8;outline-offset:3px}
.teacher-student-workflow>div{display:grid;gap:3px;min-width:0}
.teacher-student-workflow small{color:#345b7c}
.app-shell.pref-high-contrast .teacher-attention-assignments li{border-color:#718ba6}
@media(max-width:680px){.teacher-attention-assignments li{align-items:flex-start;flex-direction:column}.teacher-attention-assignments .text-link-button{align-self:flex-start}}

/* v0.45.18 — student-only prepared routes stay reachable without competing with daily work */
.app-shell:not(.authenticated-teacher) .student-prepared-primary,
.app-shell:not(.authenticated-teacher) .header-icon-button[data-utility="notifications"],
.app-shell.authenticated-teacher .student-prepared-nav{display:none}
.student-prepared-nav{min-width:0;margin-top:5px;border-top:1px solid rgba(209,228,249,.17);padding-top:7px}
.student-prepared-summary{list-style:none;color:#d8e7fa!important}
.student-prepared-summary::-webkit-details-marker{display:none}
.student-prepared-summary .menu-chevron{justify-self:end}
.student-prepared-nav[open] .student-prepared-summary .menu-chevron{transform:rotate(180deg)}
.student-prepared-nav:has(.utility-nav-item.is-active)>.student-prepared-summary{background:rgba(255,255,255,.1);color:#fff!important}
.student-prepared-links{display:grid;gap:2px;margin-left:12px;padding:2px 0 8px 10px;border-left:1px solid rgba(209,228,249,.25)}
.student-prepared-links .utility-nav-item{min-height:44px;font-size:.86rem;box-shadow:none!important}
.student-prepared-links .nav-icon{font-size:1.05rem}
.student-prepared-links p{margin:2px 8px 0;color:#c3d5eb;font-size:.76rem;line-height:1.4}
.student-prepared-summary:focus-visible,.student-prepared-links .utility-nav-item:focus-visible{outline:3px solid #79e6d8;outline-offset:2px}

/* v0.45.18 — one Home priority card, calm progress context and compact shortcuts */
.student-dashboard-v037 .student-summary-grid{grid-template-columns:minmax(0,1fr);gap:0}
.student-dashboard-v037 .student-welcome .student-profile-title-line{margin-top:5px;color:#f2f9ff;font-size:.86rem;line-height:1.3}
.student-dashboard-v037 .student-progress-compact{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;padding:16px 20px;background:#fff!important;box-shadow:none!important}
.student-progress-compact>div:first-child{flex:1 1 220px;min-width:0}
.student-progress-compact h2{margin:0;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
.student-progress-compact .dashboard-progress{flex:1 1 140px;max-width:260px;margin:0}
.student-progress-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.student-progress-links .text-link-button{min-height:44px;white-space:normal;text-align:left}
.student-reinforce-note{margin:-8px 2px 0;color:#345b7c;font-size:.88rem;line-height:1.45}
.student-dashboard-v037 .student-quick-actions button{min-height:44px;padding:10px 14px;justify-content:center;gap:0;background:#fff;box-shadow:none!important}
.student-dashboard-v037 .student-quick-actions strong{font-size:.9rem;line-height:1.3}
.student-dashboard-v037 .student-continuity-more{padding:14px 18px;background:#f8fbff}
.student-dashboard-v037 .student-continuity-head h2{font-size:1.02rem}
.app-shell.pref-high-contrast .student-progress-compact,.app-shell.pref-high-contrast .student-dashboard-v037 .student-quick-actions button,.app-shell.pref-high-contrast .student-dashboard-v037 .student-continuity-more{border-color:#718ba6;color:#173b66}
@media(max-width:520px){.student-dashboard-v037 .student-progress-compact{align-items:stretch;padding:15px}.student-progress-compact .dashboard-progress{flex-basis:100%;max-width:none}.student-progress-links{width:100%}.student-dashboard-v037 .student-quick-actions button{min-height:44px}}

/* v0.45.21 — small, owner-validated assignment context inside the lesson flow */
.lesson-assignment-context[hidden]{display:none!important}
.lesson-assignment-context{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;max-width:900px;margin:0 auto 14px;padding:10px 14px;border:1px solid #cddceb;border-radius:15px;background:#f6f9fd;color:#203b5b}
.lesson-assignment-copy{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;min-width:0;flex:1 1 240px;line-height:1.4}
.lesson-assignment-label{font-size:.76rem;font-weight:850;color:#315f90}
#lesson-assignment-title{font-size:.9rem;overflow-wrap:anywhere}
.lesson-assignment-copy p{flex-basis:100%;margin:0;font-size:.8rem;color:#4d627c}
.lesson-assignment-return{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 12px;border:1px solid #b6cde4;border-radius:11px;background:#fff;color:#245482;font-size:.86rem;font-weight:800;text-align:center;text-decoration:none}
.lesson-assignment-return:hover{background:#eaf3fd}
.lesson-assignment-return:focus-visible{outline:3px solid #2467ab;outline-offset:3px}
.app-shell.pref-high-contrast .lesson-assignment-context{border-color:#507294;background:#fff;color:#15385c}
.app-shell.pref-high-contrast .lesson-assignment-copy p,.app-shell.pref-high-contrast .lesson-assignment-label{color:#274d73}
@media(max-width:520px){.lesson-assignment-context{padding:9px 11px}.lesson-assignment-return{width:100%}}

/* v0.45.22 — factual, non-competitive Teacher classroom/student overview */
.teacher-overview-section,.teacher-overview-identity{min-width:0;padding:20px 22px;border:1px solid #dce6f0;border-radius:18px;background:#fff;color:#173b66}
.teacher-overview-section h2,.teacher-overview-identity h2{margin:0 0 10px;color:#173b66}
.teacher-overview-section p,.teacher-overview-identity p{line-height:1.5}
.teacher-overview-note{color:#526d85;font-size:.88rem}
.teacher-overview-roster,.teacher-overview-work-list,.teacher-overview-lessons{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.teacher-overview-roster-item,.teacher-overview-work-item,.teacher-overview-lessons li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding:14px 16px;border:1px solid #dce6f0;border-radius:13px;background:#f9fbfe}
.teacher-overview-roster-item>div,.teacher-overview-work-item>div{min-width:0}
.teacher-overview-roster-item p,.teacher-overview-work-item span{display:block;margin:4px 0 0;color:#4b657d;overflow-wrap:anywhere}
.teacher-overview-name{min-height:44px;padding:4px 0;border:0;background:transparent;color:#174f82;font:inherit;font-weight:800;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.teacher-overview-work-item strong{overflow-wrap:anywhere}
.teacher-overview-work-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.teacher-overview-work-actions button{min-height:44px}
.teacher-overview-identity{display:flex;align-items:center;gap:16px}
.teacher-overview-identity img{width:74px;height:74px;object-fit:contain;border-radius:18px;background:#eef5ff}
.teacher-overview-identity p{margin:0}
.teacher-overview-lessons strong{color:#176558;font-size:.83rem}
.teacher-overview-section>.teacher-topic{margin-top:16px}
.teacher-overview-section>.teacher-topic .teacher-overview-lessons{padding:0 12px 12px}
.teacher-overview-name:focus-visible,.teacher-overview-work-actions button:focus-visible,.teacher-overview-section summary:focus-visible{outline:3px solid #2467ab;outline-offset:3px}
.app-shell.pref-high-contrast .teacher-overview-section,.app-shell.pref-high-contrast .teacher-overview-identity,.app-shell.pref-high-contrast .teacher-overview-roster-item,.app-shell.pref-high-contrast .teacher-overview-work-item{border-color:#718ba6}
.app-shell.pref-high-contrast .teacher-overview-note,.app-shell.pref-high-contrast .teacher-overview-roster-item p,.app-shell.pref-high-contrast .teacher-overview-work-item span{color:#294a69}
@media(max-width:680px){.teacher-overview-section,.teacher-overview-identity{padding:16px}.teacher-overview-roster-item,.teacher-overview-work-item,.teacher-overview-lessons li{align-items:flex-start;flex-direction:column}.teacher-overview-work-actions{justify-content:flex-start;width:100%}.teacher-overview-work-actions button{width:100%}}

/* v0.45.23 — contextual Teacher return without changing list navigation */
.teacher-context-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.teacher-context-actions .teacher-back{min-height:44px}
.teacher-context-return:focus-visible{outline:3px solid #2467ab;outline-offset:3px}
.app-shell.pref-high-contrast .teacher-context-return{border-color:#507294;color:#15385c}
@media(max-width:520px){.teacher-context-actions{align-items:stretch;flex-direction:column}.teacher-context-actions .teacher-back{width:100%}}