:root {
  color-scheme: light;
  --ink: #0d2039;
  --ink-soft: #53677e;
  --brand-blue: #0e5fae;
  --brand-navy: #0a376b;
  --brand-cyan: #00aee6;
  --brand-pale: #e8f5ff;
  --blue-pale: #e8f2ff;
  --line: #d8e2ef;
  --line-strong: #bfd0e2;
  --paper: #ffffff;
  --canvas: #f4f8fd;
  --surface-soft: #f7faff;
  --surface-blue: #eff7ff;
  --warning: #9a4d00;
  --error: #b42318;
  --processing-spin-duration: 1.8s;
  --processing-progress-duration: 3.2s;
  --radius: 18px;
  --shadow: 0 14px 38px rgba(10, 35, 68, .10);
  --app-viewport-height: 100vh;
  font-size: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: var(--app-viewport-height); margin: 0; background: var(--canvas); color: var(--ink); }
body { min-height: var(--app-viewport-height); }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 2px; }
a { color: var(--brand-navy); }
[hidden] { display: none !important; }

.session-checking { display: none; }
html.checking-session #authScreen,
html.checking-session #workspace { display: none !important; }
html.checking-session .session-checking {
  min-height: var(--app-viewport-height);
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink-soft);
  background: radial-gradient(circle at 15% 5%, rgba(0, 174, 230, .12) 0, transparent 36%), linear-gradient(145deg, #f7fbff, #eaf3fc);
  font-size: 15px;
  font-weight: 650;
  text-align: center;
}

.auth-screen { min-height: var(--app-viewport-height); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 14px); padding: max(20px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 15% 5%, rgba(0, 174, 230, .12) 0, transparent 36%), linear-gradient(145deg, #f7fbff, #eaf3fc); }
.auth-brand, .brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.auth-brand { position: static; justify-content: center; gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-brand img, .brand img { display: block; flex: 0 0 auto; width: 144px; height: 76px; padding: 0; border-radius: 0; background: transparent; object-fit: cover; object-position: center; mix-blend-mode: multiply; }
.auth-brand img { width: 250px; height: 132px; }
.auth-brand strong, .brand strong { display: block; font-size: 19px; letter-spacing: -.02em; }
.auth-brand small, .brand small { display: block; margin-top: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.auth-card { width: min(100%, 560px); max-width: none; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-card h1 { margin: 5px 0 8px; font-size: 34px; font-size: clamp(31px, 2.4vw, 44px); line-height: 1.08; letter-spacing: -.04em; }
.muted { color: var(--ink-soft); }
.eyebrow { margin: 0 0 7px; color: var(--brand-blue); font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.form-stack { display: grid; gap: 20px; margin-top: 27px; }
.form-stack label, .filter-card label, .view-heading > label, .grade-quick { display: grid; gap: 7px; color: #344b68; font-size: 14px; font-weight: 650; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: 11px; background: #fff; color: var(--ink); outline: none; }
input, select { min-height: 49px; padding: 10px 13px; }
textarea { min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px rgba(0, 174, 230, .14); }
.auth-links { display: flex; justify-content: space-between; margin-top: 18px; font-size: 14px; }

.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 680; text-decoration: none; transition: transform .14s ease, background .14s ease, border-color .14s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.button.primary { border-color: #0e5fae; color: #fff; background: linear-gradient(135deg, #0e5fae, #1749a1); }
.button.primary:hover { border-color: #0a376b; background: linear-gradient(135deg, #0a376b, #123c86); }
.button.secondary { border-color: #75c9a9; color: #145b47; background: #e6f8ef; }
.button.secondary:hover { border-color: #3cae84; background: #d0f2e1; }
.button.subtle { border-color: #c7b9ed; color: #5a408f; background: #f6f2ff; }
.button.subtle:hover { border-color: #a78bdf; background: #eee7ff; }
.status { min-height: 18px; margin: 8px 0; color: var(--ink-soft); font-size: 13px; }
.auth-card .status:empty { display: none; }
.status.is-error { color: var(--error); }
.status.is-warning { color: #8a5d00; }
.status.is-success { color: var(--brand-navy); }
.processing-indicator { position: sticky; z-index: 8; top: 8px; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 4px 10px; width: min(360px, 100%); margin: 0 0 12px auto; padding: 14px 16px; border: 1px solid #9dc8f2; border-radius: 14px; color: #082a59; background: #fff; box-shadow: 0 12px 36px rgb(4 37 78 / 20%); font-size: 14px; font-weight: 750; }
.processing-indicator[hidden] { display: none; }
.processing-indicator-spinner { width: 19px; height: 19px; border: 3px solid #c8e7fa; border-top-color: var(--brand-blue); border-radius: 50%; animation: processing-spin var(--processing-spin-duration) linear infinite; }
.processing-indicator-track { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: #e4f1fb; }
.processing-indicator-track span { display: block; width: 35%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0e5fae, #13b6e8); animation: processing-sweep var(--processing-progress-duration) ease-in-out infinite; }
@keyframes processing-spin { to { transform: rotate(360deg); } }
@keyframes processing-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }

.workspace { min-height: var(--app-viewport-height); display: grid; grid-template-rows: 68px minmax(0, 1fr); }
.topbar { z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; padding: 0 clamp(15px, 3vw, 38px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); }
.topbar-tools { display: flex; align-items: center; gap: 16px; }
.grade-quick { display: flex; align-items: center; gap: 8px; }
.grade-quick select { width: 78px; min-height: 36px; padding: 5px 9px; }
.account-label { max-width: 190px; overflow: hidden; color: var(--ink-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ai-credit-balance { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid #b8d8f3; border-radius: 999px; color: var(--brand-navy); background: #eff8ff; font-size: 12px; white-space: nowrap; }
.ai-credit-icon { color: var(--brand-blue); font-size: 14px; }
.ai-credit-balance strong { color: #062c58; font-size: 13px; font-variant-numeric: tabular-nums; }
.ai-credit-balance.is-loading strong { color: var(--ink-soft); font-weight: 600; }
.ai-credit-balance.is-error { border-color: #e7b5b1; color: var(--error); background: #fff7f6; }
.workspace-grid { min-height: 0; display: grid; grid-template-columns: 228px minmax(0, 1fr); }
.side-nav { position: sticky; top: 0; height: calc(var(--app-viewport-height) - 68px); display: flex; flex-direction: column; gap: 7px; padding: 25px 14px 17px; border-right: 1px solid var(--line); background: #f8fbff; }
.nav-label { margin: 0 0 8px 11px; color: #7186a0; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.nav-item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 0; border-radius: 12px; color: #435a73; background: transparent; text-align: left; font-size: 13px; font-weight: 650; }
.nav-item span { width: 22px; color: var(--brand-blue); text-align: center; font-size: 18px; }
.nav-item:hover, .nav-item.is-active { color: var(--brand-navy); background: #eaf4ff; }
.nav-bottom { margin-top: auto; padding: 14px 9px 0; border-top: 1px solid var(--line); font-size: 12px; }
.nav-bottom a { text-decoration: none; }
.main-panel { min-width: 0; min-height: 0; height: calc(var(--app-viewport-height) - 68px); overflow: auto; overscroll-behavior: contain; padding: 28px; padding: clamp(18px, 3vw, 34px); }
.view { width: 100%; max-width: 1320px; width: min(100%, 1320px); min-height: 100%; margin: 0 auto; }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.view-heading h1 { margin: 0 0 7px; font-size: 32px; font-size: clamp(25px, 3vw, 36px); line-height: 1.13; letter-spacing: -.04em; }
.view-heading .muted { max-width: 720px; margin: 0; font-size: 14px; line-height: 1.55; }
.ask-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: start; gap: 20px; }
.conversation-column { min-width: 0; height: auto; min-height: max(480px, calc(var(--app-viewport-height) - 180px)); display: grid; grid-template-rows: minmax(180px, 1fr) auto auto; overflow: visible; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 20px rgba(10,35,68,.04); }
.chat-messages { min-height: 0; overflow-y: auto; padding: 22px; scroll-behavior: smooth; }
.message { width: fit-content; max-width: 780px; max-width: min(82%, 780px); margin: 0 0 14px; padding: 13px 16px; border-radius: 15px; white-space: pre-wrap; line-height: 1.55; overflow: hidden; overflow-wrap: anywhere; touch-action: pan-y; }
.message[data-zoomed="true"] { touch-action: none; }
.assistant-message { border: 1px solid #d5e2ef; background: #eef7ff; }
.user-message { margin-left: auto; color: #fff; background: var(--brand-blue); }
.message-kind { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 750; opacity: .78; }
.message-zoom-content { min-width: 0; transform-origin: 0 0; }
.message[data-zoomed="true"] .message-zoom-content { will-change: transform; }
.message p { margin: 0; }
.message .textbook-response-paragraph { display: block; margin: 0 0 10px; }
.message .textbook-response-section { display: block; margin: 12px 0; }
.message .textbook-response-heading { display: block; margin: 0 0 4px; color: #123b63; }
.message .textbook-response-content { display: block; }
.message .textbook-response-list { display: block; margin: 2px 0 10px 12px; }
.message .textbook-response-list-item { display: block; margin: 3px 0; }
.message mjx-container { max-width: 100%; }
.message mjx-container svg { max-width: 100%; height: auto; }
.message mjx-container:not([display="true"]), .hint-content mjx-container:not([display="true"]) { margin-inline: .12em; }
.message strong, .hint-content strong { color: #123b63; }
.welcome-audio-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.welcome-audio-controls .button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
#welcomeAudioStatus { color: var(--ink-soft); font-size: 11px; line-height: 1.35; }
.message .message-image { display: block; width: 100%; max-width: 460px; max-height: 320px; margin-top: 10px; border-radius: 9px; object-fit: contain; background: white; }
.message-actions { display: flex; gap: 8px; margin-top: 10px; }
.message-actions .button { min-height: 33px; padding: 6px 9px; font-size: 11px; }
.composer { position: relative; z-index: 1; min-width: 0; padding: 13px 16px 13px; padding: 13px 16px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
.composer-tools { min-width: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; padding-bottom: 10px; overflow: visible; }
.composer-tools .tool-button { flex: 1 1 92px; max-width: 170px; white-space: normal; text-align: center; }
.tool-button { flex: 0 0 auto; min-width: 70px; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 9px; border: 1px solid #f0cf98; border-radius: 11px; color: #79450f; background: #fff8eb; font-size: 16px; }
.tool-button span { font-size: 10px; font-weight: 650; overflow-wrap: anywhere; }
.tool-button:hover { border-color: #e9ad50; background: #fff0d2; }
.tool-button.is-recording { color: #003b73; background: #d7f5ff; border-color: #00a6da; box-shadow: 0 0 0 2px rgb(0 166 218 / 18%); }
.tool-button.voice-attention { position: relative; z-index: 2; border-color: #ef8b20; color: #713600; background: #fff0d4; box-shadow: 0 0 0 3px rgb(239 139 32 / 26%); animation: voice-attention-pulse .82s ease-in-out 3; }
@keyframes voice-attention-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(239 139 32 / 24%); } 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgb(239 139 32 / 20%); } }
@media (prefers-reduced-motion: reduce) { .tool-button.voice-attention { animation: none; } }
.live-tutor-launch { border-color: #a5b4fc; color: #3730a3; background: #eef2ff; font-weight: 750; }
.live-tutor-launch:hover { border-color: #818cf8; background: #e0e7ff; }
.human-tutor-check { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; margin: 0; color: var(--brand-navy); font-size: 14px; font-weight: 650; line-height: 1.45; cursor: pointer; }
.human-tutor-check input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin: 2px 0 0; padding: 0; accent-color: var(--brand-blue); }
.human-tutor-schedule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); gap: 12px; margin: 12px 0 6px; }
.human-tutor-schedule-grid label { display: grid; gap: 6px; color: #344b68; font-size: 13px; font-weight: 650; }
.human-tutor-tutor-email { grid-column: 1 / -1; }
.human-tutor-calendar-note { margin: 6px 0 14px; font-size: 12px; line-height: 1.5; }
.human-tutor-setup #humanTutorScheduleButton { margin: 8px 0 0 8px; }
.human-tutor-schedule-result { display: grid; gap: 7px; margin: 14px 0; padding: 14px; border: 1px solid #b9d8f1; border-radius: 13px; background: #f2f8ff; }
.human-tutor-schedule-result > strong { color: var(--brand-navy); font-size: 14px; }
.human-tutor-schedule-result > p { margin: 0; }
.human-tutor-schedule-result > code { display: block; max-width: 100%; overflow-wrap: anywhere; color: #244563; font-size: 12px; line-height: 1.5; }
.human-tutor-schedule-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
  .human-tutor-schedule-grid { grid-template-columns: minmax(0, 1fr); }
  .human-tutor-tutor-email { grid-column: auto; }
  .human-tutor-setup #humanTutorScheduleButton { margin: 8px 0 0; }
  .human-tutor-schedule-actions .button { flex: 1 1 190px; }
}
  .live-tutor-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) minmax(180px, 250px); align-items: center; gap: 10px 14px; margin: 0 0 12px; padding: 12px; border: 1px solid #bfd6ef; border-radius: 13px; background: #f0f7ff; }
.live-tutor-session-copy { display: grid; gap: 3px; min-width: 0; }
.live-tutor-session-copy strong { color: var(--brand-navy); font-size: 13px; }
.live-tutor-session-copy span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
  .live-tutor-language-label, .live-tutor-voice-label { display: grid; gap: 4px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
  .live-tutor-language-label select, .live-tutor-voice-label select { min-height: 36px; margin: 0; padding: 6px 9px; font-size: 12px; }
.live-tutor-voice-label small { color: var(--ink-soft); font-size: 10px; font-weight: 500; line-height: 1.35; }
.live-tutor-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.live-tutor-actions .button { min-height: 35px; padding: 7px 10px; font-size: 11px; }
.live-tutor-note { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.practice-live-tutor-panel { margin: 0 0 15px; }
.page-tutor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 14px; padding: 10px 12px; border: 1px solid #bfd6ef; border-radius: 13px; background: #f0f7ff; }
.page-tutor-copy { display: grid; flex: 1 1 240px; gap: 2px; min-width: 0; }
.page-tutor-copy strong { color: var(--brand-navy); font-size: 13px; }
.page-tutor-copy span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.page-tutor-tools > .button { min-height: 40px; padding: 8px 12px; }
.page-tutor-tools > .tool-button { min-width: 62px; min-height: 40px; }
.page-tutor-tools > .status { flex: 1 1 100%; margin: 0; }
.page-live-tutor-panel { margin: 0 0 14px; }
.live-tutor-transcript { grid-column: 1 / -1; display: grid; gap: 7px; max-height: 220px; overflow-y: auto; }
.live-tutor-transcript:empty { display: none; }
.live-tutor-transcript-item { padding: 9px 11px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.live-tutor-transcript-item strong { display: block; margin-bottom: 3px; color: var(--brand-navy); font-size: 10px; }
.live-tutor-transcript-item p { margin: 0; }
.composer-label { display: block; margin: 0 0 5px 2px; color: #53677e; font-size: 11px; font-weight: 700; }
.composer textarea { min-height: 88px; max-height: 240px; border: 2px solid var(--line-strong); padding: 10px 12px; border-radius: 11px; background: #fff; font-size: 15px; resize: vertical; }
.composer textarea:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px rgba(0,174,230,.14); }
.composer .math-keyboard-mount { margin-bottom: 10px; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-footer .status { margin: 0; }
.send-button { min-width: 106px; }
.paper-tools { margin: 12px 15px 0; padding: 13px; border: 1px solid #d2dfed; border-radius: 14px; background: #f8fbff; }
.paper-tools-heading, .snapshot-heading, .question-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.paper-tools-heading strong { display: block; font-size: 13px; }
.paper-tools-heading small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.paper-question-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 11px; }
.paper-question-row label { display: grid; gap: 5px; font-size: 12px; font-weight: 650; }
.paper-snapshot-card { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.paper-snapshot-card > img { width: 100%; max-height: 240px; margin-top: 9px; border: 1px solid var(--line); border-radius: 9px; object-fit: contain; cursor: zoom-in; background: white; }
.paper-question-text { max-height: 150px; overflow: auto; white-space: pre-wrap; font-family: Georgia, "Times New Roman", serif; line-height: 1.45; }
.ask-help-panel { display: grid; gap: 12px; }
.help-card { padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.help-icon { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--brand-navy); background: var(--brand-pale); font-size: 11px; font-weight: 800; }
.help-card h2 { margin: 13px 0 5px; font-size: 15px; }
.help-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.source-note { color: #60738a; font-size: 12px; line-height: 1.6; }

.filter-card { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.filter-card label { flex: 1 1 180px; }
.filter-card label select { margin-top: 2px; }
.practice-layout { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
.question-list { display: grid; gap: 8px; max-height: calc(var(--app-viewport-height) - 280px); overflow: auto; }
.question-list:empty { display: none; }
.question-list-button { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; text-align: left; }
.question-list-button:hover, .question-list-button.is-active { border-color: var(--brand-blue); background: #eef7ff; }
.question-list-button strong { display: block; margin-bottom: 4px; color: var(--brand-navy); font-size: 12px; }
.question-list-button span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #53677e; font-size: 12px; line-height: 1.4; }
.question-card { min-width: 0; padding: 24px; padding: clamp(17px, 2.4vw, 28px); border: 1px solid #bfd6ef; border-radius: 19px; background: #fff; box-shadow: 0 7px 22px rgba(10,35,68,.05); }
.question-card h2 { margin: 10px 0 14px; font-size: 20px; }
.question-card-top .eyebrow { margin: 0; }
.math-content { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-size: clamp(17px, 2vw, 22px); line-height: 1.48; }
.math-content p { margin: 0 0 .7em; }
.question-visuals { display: grid; gap: 10px; margin: 14px 0; }
.ask-solution-visuals { margin-top: 18px; padding-top: 12px; border-top: 1px solid #d6e2ef; }
.ask-solution-visuals h4 { margin: 0; color: #123d70; font-size: 14px; }
.visual-review-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px 12px; padding: 13px 15px; border: 1px solid #bfd6ef; border-radius: 12px; color: #244c72; background: #f0f7ff; font-size: 13px; }
.visual-review-hourglass { display: inline-block; font-size: 24px; animation: visual-review-spin var(--processing-spin-duration) linear infinite; }
.visual-review-copy { display: grid; gap: 3px; }
.visual-review-copy strong { color: var(--brand-navy); }
.visual-review-copy span { color: var(--ink-soft); font-size: 12px; line-height: 1.4; }
.visual-review-progress-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: #d9e8f5; }
.visual-review-progress-track span { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--brand-blue); animation: visual-review-progress var(--processing-progress-duration) ease-in-out infinite; }
@keyframes visual-review-spin { to { transform: rotate(360deg); } }
@keyframes visual-review-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
.question-visuals img, .question-visuals svg { display: block; max-width: 100%; max-height: 380px; margin: auto; border: 1px solid #e0e8f1; border-radius: 10px; background: white; object-fit: contain; cursor: zoom-in; }
.question-visuals .visual-description { padding: 10px 12px; border-radius: 9px; color: #50647c; background: #f4f8fd; font-size: 12px; line-height: 1.5; }
.question-video-preview { display: grid; gap: 8px; margin: 14px 0; color: var(--ink-soft); font-size: 13px; }
.question-video-preview:empty { display: none; }
.question-video-preview-status { margin: 0; }
.question-video-preview-status.is-error { color: #a91e12; }
.question-video-link { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 8px; border: 1px solid #bfd6ef; border-radius: 12px; color: var(--brand-navy); background: #f5faff; text-decoration: none; }
.question-video-link:hover, .question-video-link:focus-visible { border-color: var(--brand-blue); outline: 3px solid #8adfff; outline-offset: 2px; }
.question-video-link img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #e8f1fb; object-fit: cover; }
.question-video-link span { display: grid; gap: 4px; }
.question-video-link strong { font-size: 13px; }
.question-video-link small { color: var(--ink-soft); font-size: 12px; }
.question-video-thumbnail-unavailable { display: grid; min-height: 90px; place-items: center; border-radius: 8px; color: var(--ink-soft); background: #e8f1fb; font-size: 12px; }
.hint-actions, .answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 16px 0; }
.hint-content { margin: 12px 0; padding: 13px 15px; border-left: 3px solid #e3a03c; border-radius: 0 11px 11px 0; background: #fff8ea; white-space: pre-wrap; font-family: Georgia, "Times New Roman", serif; line-height: 1.55; }
.answer-label { display: grid; gap: 7px; margin-top: 18px; color: #3b526e; font-size: 13px; font-weight: 700; }
.practice-response { display: grid; gap: 9px; margin-top: 18px; color: #3b526e; font-size: 13px; }
.practice-response-heading { display: grid; gap: 3px; }
.practice-response-heading strong { color: #3b526e; }
.practice-response-heading .muted { font-size: 11px; font-weight: 450; }
.practice-response-tools { display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; }
.practice-response-tools .tool-button { min-width: 67px; min-height: 49px; }
.practice-response .status { min-height: 0; margin: 0; }
.math-editor-frame { min-width: 0; height: 190px; overflow: hidden; border: 2px solid var(--brand-blue); border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(14,95,174,.10); transition: border-color .14s ease, box-shadow .14s ease; }
.math-editor-frame:focus-within { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px rgba(0,174,230,.18); }
.math-editor-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ask-math-editor-frame { height: 126px; }
.voice-math-editor-frame { height: 116px; }
.canvas-math-editor-frame { height: 108px; }
.math-keyboard-mount:empty { display: none; }
.math-keyboard-mount:not(:empty) { min-width: 0; margin-top: 9px; }
.practice-answer-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.practice-attachment { position: relative; width: 82px; height: 82px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.practice-attachment img { width: 100%; height: 100%; object-fit: cover; }
.practice-attachment button { position: absolute; top: 3px; right: 3px; width: 23px; height: 23px; border: 0; border-radius: 50%; color: #fff; background: rgba(10,35,68,.78); }
.voice-review { display: grid; gap: 9px; padding: 11px; border: 1px solid #bfd6ef; border-radius: 12px; background: #eef7ff; }
.voice-review label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.voice-review .voice-math-field { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.voice-review textarea { min-height: 54px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.voice-math-keyboard-toggle { justify-self: start; min-height: 40px; }
.voice-review-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.voice-review-actions .button { min-height: 35px; padding: 7px 10px; font-size: 11px; }
.math-keyboard { min-width: 0; display: grid; gap: 8px; padding: 10px; border: 1px solid #8dbbe1; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #0b3766, #082b50); box-shadow: 0 7px 20px rgba(8,43,80,.14); }
.math-keyboard-preview { min-width: 0; display: grid; gap: 4px; padding: 6px 9px; border: 1px solid rgba(174,207,234,.55); border-radius: 9px; background: rgba(4,30,58,.35); }
.math-keyboard-preview > span { color: #bcd3e9; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.math-keyboard-preview-content { min-width: 0; max-height: 38px; overflow: auto; color: #fff; font-family: "Cambria Math", Georgia, serif; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.math-keyboard-tabs { min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.math-keyboard-tabs button, .math-keyboard-actions button, .math-keyboard-footer button { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid #b9d5ec; border-radius: 8px; color: var(--brand-navy); background: #f4f9ff; font-size: 11px; font-weight: 700; }
.math-keyboard-tabs button[aria-selected="true"] { border-color: #00aee6; color: #052e55; background: #bcefff; }
.math-keyboard-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.math-keyboard-body.has-numeric { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
.math-key-grid { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); align-content: start; gap: 5px; max-height: 196px; overflow: auto; }
.math-key-grid button, .math-numeric-grid button, .math-key-shift { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; overflow: hidden; padding: 4px 3px; border: 1px solid #c4d9eb; border-radius: 9px; color: #15385b; background: #f9fcff; font-family: "Cambria Math", Georgia, serif; font-size: 14px; line-height: 1; white-space: nowrap; }
.math-key-grid button { font-size: clamp(11px, 1vw, 14px); }
.math-key-grid button .math-key-label { display: inline; white-space: nowrap; }
.math-key-grid button .math-key-label sup, .math-key-grid button .math-key-label sub { position: relative; font-size: .72em; line-height: 0; vertical-align: baseline; }
.math-key-grid button .math-key-label sup { top: -.42em; }
.math-key-grid button .math-key-label sub { top: .24em; }
.math-key-grid button.is-long-label { font-size: 11px; font-size: clamp(10px, .85vw, 11px); letter-spacing: -.03em; }
.math-key-grid button.is-extra-long-label { font-size: 10px; font-size: clamp(9px, .8vw, 10px); letter-spacing: -.045em; }
.math-key-grid button:hover, .math-numeric-grid button:hover, .math-key-shift:hover, .math-keyboard-actions button:hover, .math-keyboard-footer button:hover { border-color: var(--brand-cyan); background: #dff6ff; }
.math-key-grid.is-alphabet { grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: none; }
.math-alphabet-row { display: flex; gap: 4px; }
.math-alphabet-row button { flex: 1 1 0; min-height: 34px; font-family: inherit; font-size: 13px; }
.math-alphabet-row-2 { padding-inline: 5%; }
.math-alphabet-row-3 .math-key-shift { flex: 0 0 44px; font-family: inherit; }
.math-alphabet-punctuation button { font-size: 12px; }
.math-numeric-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 4px; max-height: 196px; overflow: auto; padding: 5px; border: 1px solid rgba(174,207,234,.65); border-radius: 11px; background: rgba(4,30,58,.35); }
.math-numeric-grid button { min-height: 34px; border-radius: 8px; }
.math-numeric-grid button.is-operator { color: #073d70; background: #d9f5ff; font-weight: 750; }
.math-keyboard-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.math-keyboard-actions button { min-width: 36px; padding-inline: 8px; }
.math-keyboard-footer { display: grid; grid-template-columns: minmax(0, 1fr) 90px 68px; gap: 6px; }
.math-keyboard-footer button { min-height: 40px; }
.math-keyboard-footer .math-key-space { font-family: inherit; }
.math-keyboard-footer .math-key-enter { background: #bcefff; }
.math-keyboard-footer .math-key-hide { color: #fff; border-color: #5593c5; background: #124d82; }
.math-keyboard-footer .math-key-hide:hover { color: #052e55; }
.math-keyboard[hidden], .voice-review[hidden] { display: none; }
.feedback-card { margin-top: 17px; padding: 17px; border: 1px solid #bfd5ec; border-radius: 14px; background: #f0f7ff; white-space: pre-wrap; line-height: 1.55; }
.feedback-card h3 { margin: 0 0 9px; }
.question-meta { color: var(--ink-soft); font-size: 12px; }
.topic-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; margin-top: 15px; }
.topic-choice { display: flex; align-items: flex-start; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 12px; line-height: 1.4; }
.topic-choice input { width: 17px; min-height: 17px; margin: 1px 0 0; accent-color: var(--brand-blue); }
.topic-choice small { display: block; margin-top: 3px; color: var(--ink-soft); }
.exam-workspace { margin-top: 18px; }
.answer-label { display: grid; gap: 7px; color: var(--brand-navy); font-size: 13px; font-weight: 750; }
.exam-math-editor-frame { height: 220px; }
.exam-answer-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 9px; }
.exam-answer-tools .tool-button { min-width: 112px; }
.exam-workspace .math-keyboard-mount { margin: 9px 0 12px; }
.exam-guidance { margin-top: 15px; }
.lesson-picker { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(190px, 1fr) minmax(240px, 1.35fr); gap: 12px; margin: 8px 0 14px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.lesson-picker label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.lesson-picker select { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #cbd8e7; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.lesson-picker select:disabled { color: #718096; background: #f3f6fa; }
.lesson-player { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.lesson-player h2 { margin: 0 0 12px; font-size: 18px; }
.lesson-player video, .lesson-player iframe { display: block; width: 100%; max-height: 72vh; min-height: 320px; border: 0; border-radius: 11px; background: #081212; }
.lesson-player video { object-fit: contain; }
.report-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.report-item + .report-item { margin-top: 9px; }
.report-item strong { display: block; }
.report-item small { display: block; margin-top: 4px; color: var(--ink-soft); }
.report-empty { padding: 30px; border: 1px dashed #c5d4e5; border-radius: 16px; color: var(--ink-soft); background: #fff; text-align: center; }

.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #d7e2ef; border-radius: 10px; color: #3b5068; background: white; font-size: 21px; line-height: 1; }
.mobile-nav { display: none; }

.paper-source-links { min-width: 0; max-width: 100%; margin: 0 18px 12px; }
.paper-source-links .source-note { min-width: 0; margin: 0 0 8px; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.source-link-list, .saved-report-actions { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.source-link-list .button { max-width: 100%; min-height: 38px; padding: 8px 12px; font-size: 12px; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.topic-choice-card { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.topic-choice-card legend { max-width: 100%; padding: 0 4px; }
.topic-choice-heading, .topic-subtopic-choices label { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); font-size: 13px; line-height: 1.4; }
.topic-choice-heading { font-weight: 700; }
.topic-choice-heading input, .topic-subtopic-choices input { width: 17px; min-height: 17px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--brand-blue); }
.topic-subtopic-details { margin-top: 8px; border-top: 1px solid #edf2f8; }
.topic-subtopic-details > summary { padding: 8px 4px 2px; color: var(--brand-blue); font-size: 12px; font-weight: 700; cursor: pointer; }
.topic-subtopic-choices { display: grid; gap: 7px; max-height: 220px; overflow-y: auto; padding: 8px 4px 2px; border-top: 1px solid #edf2f8; }
.topic-subtopic-choices label { color: var(--ink-soft); font-size: 12px; }
.exam-source-section { min-width: 0; margin: 12px 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.exam-source-section > h2 { margin: 0 0 6px; color: var(--ink); font-size: 18px; }
.exam-source-section .source-note { margin: 0 0 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.exam-paper-term-groups { display: grid; gap: 8px; }
.exam-term-group { min-width: 0; overflow: hidden; border: 1px solid #d5e2f0; border-radius: 11px; background: #f9fbfe; }
.exam-term-group > summary { padding: 11px 13px; color: var(--brand-navy); font-size: 13px; font-weight: 750; cursor: pointer; }
.exam-term-group[open] > summary { border-bottom: 1px solid #d5e2f0; background: #edf6ff; }
.exam-source-group { display: grid; gap: 7px; padding: 9px 10px 11px; }
.exam-source-group + .exam-source-group { border-top: 1px solid #e3ebf5; }
.exam-source-group h3 { margin: 0; color: var(--ink-soft); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.exam-paper-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.exam-paper-kind { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; color: var(--brand-blue); background: #eaf4ff; font-size: 10px; font-weight: 700; }
.exam-source-empty { margin: 0; padding: 10px 13px; color: var(--ink-soft); font-size: 12px; }
.exam-upload-panel { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid #d5e2f0; border-radius: 11px; background: #f5f9ff; }
.exam-upload-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-upload-actions .button { flex: 1 1 180px; }
.exam-upload-panel .status { margin: 0; font-size: 12px; line-height: 1.45; }
.exam-upload-panel > #startUploadedExam { justify-self: start; }
.exam-source-snapshot { min-width: 0; margin: 12px 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fc; }
.exam-source-snapshot img { display: block; width: 100%; max-height: min(68vh, 900px); object-fit: contain; object-position: top center; background: #fff; }
.exam-source-snapshot img[hidden] { display: none !important; }
.exam-source-snapshot figcaption { margin-top: 6px; color: var(--ink-soft); font-size: 11px; }
.exam-snapshot-loading, .exam-snapshot-unavailable { margin: 10px 2px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.exam-snapshot-unavailable { color: #8b2d20; }
.exam-source-snapshot[hidden] { display: none !important; }
.exam-plan-note, .exam-target-note { margin: 8px 0; padding: 10px 12px; border-radius: 10px; color: #244c72; background: #eef6ff; font-size: 12px; line-height: 1.5; }
.exam-target-note:empty { display: none; }
.exam-strict-page { display: grid; gap: 12px; margin-top: 10px; }
.exam-strict-page[hidden], .strict-mock-active[hidden], .strict-mock-result[hidden], #strictMockUploads[hidden] { display: none !important; }
.exam-strict-page > #closeStrictMockExam { justify-self: start; }
.strict-mock-heading { padding: 16px; border: 1px solid #c9dced; border-radius: 14px; background: linear-gradient(135deg, #eef7ff, #fff); }
.strict-mock-heading .eyebrow { margin: 0 0 4px; }
.strict-mock-heading h2 { margin: 0 0 7px; color: var(--brand-navy); font-size: 22px; }
.strict-mock-heading p:last-child { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.strict-mock-filters { display: grid; grid-template-columns: minmax(100px, .55fr) minmax(220px, 1.4fr) minmax(130px, .7fr); gap: 10px; }
.strict-mock-filters label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.strict-mock-filters select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #cbd8e7; border-radius: 9px; color: var(--ink); background: #fff; font: inherit; }
.strict-mock-uploads h3, .strict-mock-active h3 { margin: 0; color: var(--brand-navy); font-size: 16px; }
.strict-mock-active { display: grid; gap: 12px; padding: 14px; border: 1px solid #cddced; border-radius: 14px; background: #f8fbff; }
.strict-mock-timer-card { display: grid; justify-items: center; gap: 5px; padding: 16px; border: 1px solid #c2d8ee; border-radius: 13px; color: #fff; background: #0e3558; text-align: center; }
.strict-mock-timer-card .eyebrow { color: #c9def2; }
.strict-mock-timer { font-variant-numeric: tabular-nums; font-size: clamp(36px, 10vw, 58px); font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
.strict-mock-timer-card .status { margin: 4px 0 0; color: #e6f2ff; font-size: 12px; }
.strict-mock-active > .source-note { margin: -7px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.strict-mock-answer-files { display: grid; gap: 6px; }
.strict-mock-answer-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid #d5e2f0; border-radius: 9px; color: var(--ink); background: #fff; font-size: 12px; }
.strict-mock-answer-file span { min-width: 0; overflow-wrap: anywhere; }
.strict-mock-answer-file .button { flex: 0 0 auto; min-height: 32px; padding: 5px 9px; }
.strict-mock-result { display: grid; gap: 12px; }
.strict-mock-result h2 { margin: 0; }
@media (max-width: 600px) {
  .strict-mock-filters { grid-template-columns: minmax(0, 1fr); }
  .strict-mock-filters label { min-width: 0; }
  .strict-mock-timer-card { padding: 13px 9px; }
}
.exam-answer-attachments { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 12px; }
.exam-answer-attachment { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.exam-answer-attachments button { min-height: 30px; padding: 4px 9px; }
#examTutorTools[hidden], #examLiveTutorPanel[hidden] { display: none !important; }
html.strict-mock-exam-active #examTutorTools,
html.strict-mock-exam-active [data-live-start],
html.strict-mock-exam-active [data-live-panel],
html.strict-mock-exam-active [aria-label^="Speak to"] { display: none !important; }
#examGuidanceButton[hidden], #examFormulaButton[hidden], #examFormulaText[hidden], #examVideoPreview[hidden] { display: none !important; }
.paper-summary { margin: 12px 0; padding: 12px 14px; border-radius: 11px; color: #244c72; background: #eaf5ff; line-height: 1.5; }
.exam-setup > #startExamSession { margin: 2px 0 14px; }
.lesson-picker { align-items: end; }
.lesson-player video, .lesson-player iframe { height: min(72vh, 760px); }
.saved-reports { display: grid; gap: 10px; }
.saved-report-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.saved-report-card > div:first-child { display: grid; gap: 5px; min-width: 0; }
.saved-report-card strong { overflow-wrap: anywhere; }
.saved-report-card small { color: var(--ink-soft); }
.saved-report-actions { flex: 0 0 auto; }
.saved-report-actions .button { min-height: 36px; padding: 7px 10px; }
.empty-state { padding: 24px; border: 1px dashed #c5d4e5; border-radius: 13px; color: var(--ink-soft); text-align: center; }
.image-viewport img { max-width: 100%; max-height: 100%; touch-action: none; }
.canvas-question-sidebar[hidden] { display: none; }
#workingCanvas { touch-action: none; }
html.canvas-dialog-open, body.canvas-dialog-open { overflow: hidden; overscroll-behavior: none; }
.image-dialog, .canvas-dialog { width: 96vw; max-width: 1240px; max-height: 94vh; width: min(96vw, 1240px); max-height: min(calc(var(--app-viewport-height) * .94), 980px); padding: 0; border: 1px solid #cad8e8; border-radius: 18px; background: #f8faff; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.image-dialog::backdrop, .canvas-dialog::backdrop, .voice-review-dialog::backdrop { background: rgba(6, 20, 42, .68); backdrop-filter: blur(2px); }
.voice-review-dialog { width: min(96vw, 780px); max-height: min(calc(var(--app-viewport-height) * .92), 920px); padding: 0; overflow: auto; border: 1px solid #cad8e8; border-radius: 18px; color: var(--ink); background: #f8faff; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.voice-review-dialog .voice-review { margin: 0; border: 0; border-radius: 0; background: #f8faff; }
.voice-review-dialog .voice-review-guidance { margin: 0; }
.voice-review-dialog .voice-review-actions { align-items: center; }
.voice-review-dialog .voice-review-actions .status { flex: 1 1 100%; }
.exam-handwriting-review-dialog { width: min(96vw, 760px); max-height: min(calc(var(--app-viewport-height) * .92), 900px); padding: 0; overflow: auto; border: 1px solid #cad8e8; border-radius: 18px; color: var(--ink); background: #f8faff; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.exam-handwriting-review-dialog::backdrop { background: rgba(6, 20, 42, .68); backdrop-filter: blur(2px); }
.canvas-prompt-dialog { position: fixed; inset: auto; top: var(--canvas-prompt-center-y, 50%); left: 50%; transform: translate(-50%, -50%); width: min(92vw, 460px); max-width: 460px; max-height: var(--canvas-prompt-max-height, min(calc(var(--app-viewport-height) * .86), 720px)); margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #cad8e8; border-radius: 18px; color: var(--ink); background: #f8faff; box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.canvas-prompt-dialog::backdrop { background: rgba(6, 20, 42, .68); backdrop-filter: blur(2px); }
.canvas-prompt-content { display: grid; gap: 14px; padding: 22px; }
.canvas-prompt-content h2 { margin: 0; color: var(--brand-navy); font-size: 20px; line-height: 1.25; }
.canvas-prompt-content p { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.canvas-prompt-content > label { color: var(--brand-navy); font-size: 13px; font-weight: 750; }
.canvas-prompt-input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #a9bfd7; border-radius: 10px; color: var(--ink); background: white; font: inherit; font-size: 18px; }
.canvas-prompt-input:focus { outline: 2px solid #3c8fe8; outline-offset: 2px; }
.canvas-prompt-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 8px 0 2px; background: #f8faff; }
.canvas-prompt-actions .button { min-width: 82px; }
@media (max-height: 600px) {
  .canvas-prompt-content { gap: 10px; padding: 16px; }
  .canvas-prompt-content h2 { font-size: 18px; }
  .canvas-prompt-content p { line-height: 1.4; }
  .canvas-prompt-input { min-height: 44px; }
}
.exam-handwriting-review { display: grid; gap: 12px; padding: 16px; }
.exam-handwriting-review > p { margin: 0; }
.exam-handwriting-review > img { display: block; width: 100%; max-height: 30vh; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: white; }
.exam-handwriting-review > label { display: grid; gap: 6px; font-weight: 750; }
.exam-handwriting-review textarea { width: 100%; min-height: 92px; padding: 10px; border: 1px solid #9eb5cc; border-radius: 10px; color: var(--ink); background: white; font: inherit; line-height: 1.5; }
.exam-handwriting-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.exam-handwriting-review-actions .button { flex: 1 1 180px; }
.answer-actions #examSaveStatus { flex: 1 1 100%; margin: 0; }
.dialog-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: white; }
.dialog-toolbar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewport { height: 78vh; max-height: 830px; height: min(calc(var(--app-viewport-height) * .78), 830px); overflow: hidden; touch-action: none; display: grid; place-items: center; background: #f4f8fd; }
.image-viewport img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; -webkit-user-drag: none; }
.image-help { margin: 0; padding: 12px 16px 12px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); color: var(--ink-soft); font-size: 12px; text-align: center; }
.canvas-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: var(--app-viewport-height); max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; display: none; grid-template-rows: auto auto auto auto minmax(0,1fr) auto; align-content: start; overflow: hidden; }
.canvas-dialog[open] { display: grid; }
/* Hidden panels leave grid auto-placement gaps; pin the drawing area to the flexible row. */
.canvas-dialog > .canvas-toolbar { grid-row: 1; }
.canvas-dialog > #phoneCanvasPairPanel { grid-row: 2; }
.canvas-dialog > #canvasReadingReview { grid-row: 3; }
.canvas-dialog > #canvasGraphCountPanel { grid-row: 4; }
.canvas-dialog > .canvas-layout { grid-row: 5; min-height: 0; }
.canvas-dialog > #canvasHelpText { grid-row: 6; }
.canvas-toolbar { min-width: 0; min-height: 42px; flex-wrap: nowrap; gap: 8px; padding: 4px 8px; }
.canvas-toolbar > strong { flex: 0 0 auto; max-width: 170px; font-size: 14px; }
.canvas-actions { min-width: 0; display: flex; flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.canvas-actions .button { flex: 0 0 auto; min-height: 32px; padding: 4px 8px; font-size: 11px; line-height: 1.1; }
.canvas-answer-label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding: 0 4px; color: #31516f; font-size: 10px; font-weight: 800; white-space: nowrap; }
.canvas-answer-label input { width: 66px; min-width: 58px; min-height: 32px; padding: 4px 6px; border: 1px solid #b9cce2; border-radius: 8px; color: #123a66; background: #fff; font: inherit; font-size: 11px; }
.canvas-answer-label input:focus { outline: 2px solid #3c8fe8; outline-offset: 1px; }
.phone-pan-control { gap: 7px; }
.pan-hand-badge { width: 22px; height: 22px; display: inline-grid; flex: 0 0 auto; place-items: center; border-radius: 7px; background: var(--brand-blue); }
.pan-hand-icon { width: 17px; height: 17px; display: block; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canvas-actions .button[aria-pressed="true"] { border-color: var(--brand-blue); color: var(--brand-navy); background: var(--brand-pale); }
.phone-canvas-pair-panel { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: #f2f8ff; }
.phone-canvas-pair-panel.is-connected { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 5px 12px; }
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-qr,
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-details > p,
.phone-canvas-pair-panel.is-connected .phone-canvas-code,
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-details > a { display: none; }
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-details { width: 100%; grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-details > strong { flex: 0 0 auto; font-size: 13px; }
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-details .status { min-width: min(100%, 260px); flex: 1 1 420px; margin: 0; line-height: 1.3; }
.phone-canvas-pair-panel.is-connected .phone-canvas-pair-details .button { flex: 0 0 auto; }
.phone-canvas-pair-qr { width: 72px; height: 72px; display: grid; place-items: center; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.phone-canvas-pair-qr svg { width: 100%; height: 100%; }
.phone-canvas-pair-details { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.phone-canvas-pair-details > strong { color: var(--brand-navy); font-size: 13px; }
.phone-canvas-pair-details p { flex: 1 1 100%; display: block; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.phone-canvas-server-address { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; color: var(--ink-soft); font-size: 12px; }
.phone-canvas-pair-panel.is-connected .phone-canvas-server-address { min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap; }
.phone-canvas-server-address code { color: var(--brand-navy); font-weight: 800; }
.phone-canvas-server-address .button { flex: 0 0 auto; }
.phone-canvas-pair-details > a { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; }
.phone-canvas-pair-details .status { flex: 1 1 100%; min-height: 0; margin: 0; }
.phone-canvas-code { color: var(--ink-soft); font-size: 12px; }
.phone-canvas-code strong { margin-left: 5px; color: var(--ink); font-size: 19px; letter-spacing: .15em; }
.phone-canvas-pair-details .button { min-height: 33px; padding: 6px 9px; font-size: 11px; }
.canvas-transcription-panel { min-width: 0; display: grid; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f2f8ff; }
.canvas-transcription-panel[hidden] { display: none; }
.canvas-transcription-label { color: var(--brand-navy); font-size: 13px; font-weight: 750; }
.canvas-transcription-panel textarea { min-height: 64px; max-height: 120px; resize: vertical; font-size: 15px; }
.canvas-reading-review { max-height: 38vh; overflow: auto; }
.canvas-review-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #dce8f5; }
.canvas-review-progress[hidden] { display: none; }
.canvas-review-progress > span { width: 36%; height: 100%; display: block; border-radius: inherit; background: var(--brand-blue); animation: canvas-progress-slide var(--processing-progress-duration) ease-in-out infinite; }
.canvas-graph-count-panel { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f2f8ff; }
.canvas-graph-count-panel[hidden] { display: none; }
.canvas-graph-count-panel > label { flex: 1 0 100%; color: var(--brand-navy); font-size: 13px; font-weight: 700; }
.canvas-graph-count-panel > p { flex: 1 0 100%; margin: -6px 0 0; font-size: 12px; }
.canvas-graph-count-controls { display: flex; flex: 1 1 280px; align-items: center; gap: 8px; }
.canvas-graph-count-controls input { width: min(160px, 42vw); min-height: 40px; }
@keyframes canvas-progress-slide { from { transform: translateX(-105%); } to { transform: translateX(285%); } }
#canvasReadingStatus[data-loading="true"]::before { content: ""; width: 12px; height: 12px; display: inline-block; margin-right: 7px; vertical-align: -2px; border: 2px solid var(--line-strong); border-top-color: var(--brand-blue); border-radius: 50%; animation: canvas-wait-spin var(--processing-spin-duration) linear infinite; }
.canvas-reading-review > p { margin: 0; font-size: 12px; line-height: 1.45; }
.canvas-reading-review > label { color: var(--brand-navy); font-size: 12px; font-weight: 700; }
.canvas-reading-review textarea { width: 100%; max-height: 100px; }
.canvas-reading-review input { width: 100%; min-height: 38px; }
.canvas-reading-alternatives { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.canvas-reading-alternatives[hidden] { display: none; }
.canvas-reading-alternatives-label { flex: 1 0 100%; color: var(--ink-soft); font-size: 11px; }
.canvas-reading-alternative { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--brand-navy); background: var(--brand-pale); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.canvas-reading-alternative:hover, .canvas-reading-alternative:focus-visible { border-color: var(--brand-blue); outline: 2px solid transparent; }
#canvasGraphReviewFields { display: grid; gap: 7px; }
#canvasGraphReviewFields[hidden] { display: none; }
.canvas-graph-entry-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.canvas-graph-entry-row > input { min-width: 0; }
.canvas-graph-inline-action { display: flex; align-items: center; justify-content: flex-start; gap: 6px; }
.canvas-graph-inline-action:empty { display: none; }
.canvas-graph-inline-action .button { min-height: 36px; padding: 6px 11px; font-size: 12px; white-space: nowrap; }
.canvas-graph-guided-panel, .canvas-graph-preview-panel { display: grid; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.canvas-graph-guided-panel[hidden], .canvas-graph-preview-panel[hidden] { display: none; }
.canvas-graph-guided-panel h3, .canvas-graph-preview-panel h3 { margin: 0; color: var(--brand-navy); font-size: 13px; }
.canvas-graph-guided-panel p, .canvas-graph-preview-panel p { margin: 0; font-size: 12px; line-height: 1.4; }
.canvas-graph-point-history { display: flex; flex-wrap: wrap; gap: 5px; }
.canvas-graph-point-history:empty { display: none; }
.canvas-graph-point-history span { padding: 4px 7px; border-radius: 7px; color: var(--ink-soft); background: #edf4fc; font-size: 11px; }
.canvas-graph-point-prompt { color: var(--brand-navy); font-weight: 700; }
.canvas-graph-preview { width: 100%; min-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.canvas-graph-preview svg { display: block; width: 100%; min-width: 360px; height: auto; }
.canvas-transcription-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.canvas-transcription-footer > div { display: flex; flex: 0 0 auto; gap: 6px; }
.canvas-transcription-footer .button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
@media (max-width: 520px) { .canvas-graph-entry-row { grid-template-columns: minmax(0, 1fr); } }
#canvasTranscriptionStatus[data-loading="true"]::before { content: ""; width: 12px; height: 12px; display: inline-block; margin-right: 7px; vertical-align: -2px; border: 2px solid var(--line-strong); border-top-color: var(--brand-blue); border-radius: 50%; animation: canvas-wait-spin var(--processing-spin-duration) linear infinite; }
@keyframes canvas-wait-spin { to { transform: rotate(360deg); } }
.canvas-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 0; gap: 0; overflow: hidden; transition: grid-template-columns .18s ease; }
.canvas-layout[hidden], .image-help[hidden] { display: none; }
.canvas-layout.has-question { grid-template-columns: minmax(0, 1fr) minmax(230px, 31%); }
.drawing-surface { position: relative; min-width: 0; min-height: 0; margin: 12px; overflow: hidden; border: 1px solid #bfd0e2; border-radius: 13px; background-color: #fff; background-image: radial-gradient(#dce6f0 .8px, transparent .8px); background-size: 18px 18px; touch-action: none; }
.canvas-dialog.canvas-composite-layout .drawing-surface { overflow: auto; overscroll-behavior: contain; }
.canvas-dialog.canvas-composite-layout.canvas-fit-all .drawing-surface { overflow: hidden; }
#workingCanvas { width: 100%; height: 100%; display: block; touch-action: none; }
#canvasRegionOverlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canvas-phone-only-notice { position: absolute; inset: 16px; display: grid; align-content: center; justify-items: center; gap: 9px; padding: 20px; border: 1px solid #bfd0e2; border-radius: 12px; color: var(--brand-navy); background: rgba(247,250,255,.96); text-align: center; pointer-events: auto; }
.canvas-phone-only-notice[hidden] { display: none; }
.canvas-phone-only-notice strong { font-size: clamp(18px, 2.4vw, 26px); }
.canvas-phone-only-notice p { max-width: 480px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.canvas-dialog.phone-pairing-required #workingCanvas { pointer-events: none; opacity: .14; }
.canvas-question-sidebar { position: relative; min-width: 0; min-height: 0; margin: 12px 12px 12px 0; overflow-y: auto; padding: 14px; border: 1px solid #bfd0e2; border-radius: 13px; background: #fff; }
.canvas-question-sidebar .icon-button { position: absolute; top: 9px; right: 9px; }
.canvas-question-sidebar h2 { margin: 0 36px 10px 0; color: var(--brand-navy); font-size: 15px; }
.canvas-question-sidebar .math-content { font-size: 17px; }
.canvas-question-sidebar img { width: 100%; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.toast { position: fixed; z-index: 30; bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; width: 90vw; max-width: 500px; padding: 11px 15px; border-radius: 12px; color: white; background: #122d4a; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s ease, transform .18s ease; font-size: 13px; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: 74px minmax(0, 1fr); }
  .side-nav { align-items: center; padding-inline: 8px; }
  .side-nav .nav-label, .nav-bottom { display: none; }
  .nav-item { width: 52px; height: 50px; justify-content: center; padding: 4px; font-size: 0; }
  .nav-item span { font-size: 20px; }
  .ask-layout { grid-template-columns: minmax(0, 1fr); }
  .ask-help-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .source-note { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .auth-screen { gap: 8px; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); }
  .auth-brand { top: auto; left: auto; }
  .auth-brand img { width: min(210px, 72vw); height: min(111px, 38vw); }
  .topbar .brand img { width: 98px; height: 52px; padding: 0; }
  .auth-brand strong, .brand strong { font-size: 15px; }
  .auth-brand small, .brand small { display: none; }
  .auth-card { width: 100%; max-width: 560px; padding: 8px 0; }
  .auth-card h1 { font-size: 31px; font-size: clamp(27px, 7vw, 34px); }
  .form-stack { gap: 14px; margin-top: 19px; }
  .form-stack label { font-size: 13px; }
  .form-stack input { min-height: 48px; font-size: 16px; }
  .auth-card .button { min-height: 48px; font-size: 15px; }
  .workspace { grid-template-rows: 58px minmax(0, 1fr) 62px; min-height: var(--app-viewport-height); }
  .topbar { min-height: 58px; padding: 0 13px; }
  .topbar .brand img { width: 98px; height: 52px; }
  .account-label, .grade-quick { display: none; }
  .topbar-tools { gap: 8px; }
  .topbar-tools .button { min-height: 34px; padding: 6px 10px; }
  .ai-credit-balance { min-height: 32px; gap: 4px; padding: 5px 8px; font-size: 0; }
  .ai-credit-label { display: none; }
  .ai-credit-balance strong { font-size: 11px; }
  .device-type-status { display: none; }
  .workspace-grid { display: block; min-height: 0; }
  .side-nav { display: none; }
  .main-panel { height: calc(var(--app-viewport-height) - 120px); padding: 16px 12px 20px; scroll-padding-bottom: 28px; }
  .view-heading { align-items: flex-start; margin-bottom: 16px; }
  .view-heading h1 { font-size: 25px; }
  .view-heading .muted { font-size: 13px; }
  .conversation-column { height: auto; min-height: max(330px, calc(var(--app-viewport-height) - 245px)); grid-template-rows: minmax(150px, 1fr) auto auto; overflow: visible; }
  .chat-messages { padding: 14px 11px; }
  .message { max-width: 94%; padding: 11px 12px; font-size: 14px; }
  .composer { padding: 8px 9px 9px; padding: 8px 9px max(9px, env(safe-area-inset-bottom)); }
  .composer-tools { gap: 5px; padding-bottom: 6px; }
  .tool-button { min-width: 54px; min-height: 42px; padding: 4px 6px; font-size: 15px; }
  .tool-button span { font-size: 9px; }
  .live-tutor-panel { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; }
  .live-tutor-actions { grid-column: 1; }
  .live-tutor-note, .live-tutor-transcript { grid-column: 1; }
  .page-tutor-tools { gap: 6px; padding: 9px; }
  .page-tutor-copy { flex-basis: 100%; }
  .page-tutor-tools > .button { flex: 1 1 145px; }
  .page-tutor-tools > .tool-button { flex: 0 0 64px; }
  .composer textarea { min-height: 58px; font-size: 15px; }
  .ask-help-panel { display: none; }
  .paper-tools { margin: 8px 8px 0; padding: 10px; }
  .paper-question-row { grid-template-columns: minmax(0, 1fr) auto; }
  .paper-question-row .button { padding-inline: 10px; }
  .paper-snapshot-card > img { max-height: 180px; }
  .mobile-nav { position: sticky; bottom: 0; z-index: 12; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 62px; padding: 5px 4px 5px; padding: 5px 4px max(5px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
  .mobile-nav button { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 3px 1px; border: 0; border-radius: 10px; color: #60738a; background: transparent; font-size: 9px; font-weight: 650; }
  .mobile-nav button span { font-size: 17px; line-height: 1.1; }
  .mobile-nav button.is-active { color: var(--brand-navy); background: var(--brand-pale); }
  .practice-layout { grid-template-columns: minmax(0, 1fr); }
  .question-list { max-height: 220px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .question-card { padding: 15px; }
  .filter-card { gap: 9px; padding: 12px; }
  .filter-card label { flex-basis: 100%; }
  .filter-card > .button { flex: 1; }
  .topic-choice-grid { grid-template-columns: 1fr; }
  .lesson-picker { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 12px; }
  .lesson-player { padding: 11px; }
  .lesson-player video, .lesson-player iframe { min-height: min(260px, 38vh); height: min(58vh, 520px); }
  .view-heading > label { min-width: 90px; }
  .image-dialog, .canvas-dialog, .voice-review-dialog, .exam-handwriting-review-dialog { width: 100vw; max-width: none; max-height: var(--app-viewport-height); height: var(--app-viewport-height); border: 0; border-radius: 0; }
  .image-viewport { height: calc(var(--app-viewport-height) - 118px); }
  .dialog-toolbar { min-height: 56px; padding: 7px 9px; }
  .canvas-toolbar { align-items: stretch; flex-wrap: wrap; gap: 3px 6px; padding: 4px 8px; }
  .canvas-toolbar > strong { width: 100%; max-width: none; min-height: 16px; font-size: 11px; line-height: 1.2; }
  .canvas-actions { width: 100%; flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 4px; overflow: visible; }
  .canvas-actions .canvas-answer-label { grid-column: span 2; min-width: 0; }
  .canvas-actions .button { min-width: 0; min-height: 30px; padding: 4px 5px; font-size: 10px; line-height: 1.05; white-space: normal; }
  .phone-canvas-pair-panel { grid-template-columns: 78px minmax(0,1fr); gap: 8px; padding: 8px; }
  .phone-canvas-pair-qr { width: 74px; height: 74px; }
  .phone-canvas-pair-details p { font-size: 11px; }
  .phone-canvas-code strong { font-size: 17px; }
  .canvas-layout.has-question { grid-template-columns: minmax(0, 1fr) minmax(155px, 42%); }
  .canvas-question-sidebar { margin: 8px 8px 8px 0; padding: 9px; }
  .canvas-question-sidebar .math-content { font-size: 14px; }
  .drawing-surface { width: auto; height: auto; min-height: 0; margin: 6px; }
  .canvas-dialog > .image-help { font-size: 11px; }
  .saved-report-card { align-items: flex-start; flex-direction: column; }
  .saved-report-actions { width: 100%; }
  .saved-report-actions .button { flex: 1 1 auto; }
  .paper-source-links { margin-inline: 10px; }
  .source-link-list .button { flex: 1 1 130px; }
}

/* Keep the compact landscape-tablet layout separate from the phone layout.
   Narrow desktop windows can report landscape orientation below 700 CSS px. */
@media (orientation: landscape) and (max-width: 900px) and (min-width: 701px) {
  .auth-screen { gap: 4px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .auth-brand img { width: 150px; height: 79px; }
  .auth-card { width: min(100%, 520px); }
  .auth-card h1 { margin-top: 2px; font-size: 28px; }
  .auth-card .form-stack { gap: 8px; margin-top: 12px; }
  .auth-card .form-stack label { gap: 4px; font-size: 12px; }
  .auth-card .form-stack input { min-height: 38px; padding-block: 7px; }
  .auth-card .button { min-height: 38px; }
  .auth-card .status { min-height: 0; margin: 0; font-size: 12px; }
  .auth-card > .auth-links { margin-top: 8px; }
  .workspace { grid-template-rows: 52px minmax(0, 1fr); }
  .topbar { min-height: 52px; }
  .workspace-grid { grid-template-columns: 62px minmax(0, 1fr); }
  .side-nav { display: flex; height: calc(var(--app-viewport-height) - 52px); }
  .nav-item { width: 46px; height: 44px; }
  .main-panel { height: calc(var(--app-viewport-height) - 52px); padding: 12px; }
  .view-heading { margin-bottom: 10px; }
  .view-heading h1 { font-size: 23px; }
  .view-heading .muted { display: none; }
  .ask-layout { height: auto; min-height: calc(var(--app-viewport-height) - 100px); grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; }
  .conversation-column { height: auto; min-height: calc(var(--app-viewport-height) - 120px); }
  .ask-help-panel { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .help-card { padding: 10px; }
  .help-card h2 { margin-top: 5px; }
  .help-card p { font-size: 11px; }
  .source-note { grid-column: auto; margin: 0; }
  .mobile-nav { display: none; }
}

@media (min-width: 1200px) {
  .auth-card h1 { font-size: 46px; font-size: clamp(38px, 2.4vw, 46px); }
  .auth-card .eyebrow { font-size: 13px; }
  .form-stack label { font-size: 16px; font-size: clamp(14px, .9vw, 16px); }
  .form-stack input { min-height: 54px; font-size: 16px; }
  .auth-card .button { min-height: 50px; font-size: 15px; }
}

@media (min-width: 900px) and (min-height: 600px) {
  .workspace { grid-template-rows: 76px minmax(0, 1fr); }
  .topbar { min-height: 76px; padding-right: 30px; padding-left: 30px; }
  .topbar .brand img { width: 138px; height: 73px; }
  .topbar .brand strong { font-size: 20px; }
  .topbar .brand small { font-size: 13px; }
  .workspace-grid { grid-template-columns: 248px minmax(0, 1fr); }
  .nav-item { min-height: 52px; font-size: 15px; }
  .nav-item span { font-size: 21px; }
  .main-panel { height: calc(var(--app-viewport-height) - 76px); padding: 28px; }
  .view-heading h1 { font-size: 36px; }
  .view-heading .muted { font-size: 16px; }
  .button { min-height: 48px; padding: 12px 17px; font-size: 15px; }
  .auth-screen { padding-top: max(20px, env(safe-area-inset-top)); }
  .auth-brand img { width: 250px; height: 132px; }
  .auth-card { padding: 8px 0; }
  .auth-card h1 { font-size: 42px; }
  .form-stack label { font-size: 16px; }
  .form-stack input { min-height: 58px; font-size: 17px; }
  .auth-card .button { min-height: 56px; font-size: 17px; }
  .question-card { padding: 30px; }
  .math-content { font-size: 24px; }
  .practice-response { font-size: 16px; }
  .practice-response-heading .muted { font-size: 14px; }
  .status { font-size: 15px; }
}

@media (min-width: 701px) and (max-width: 899px) {
  .workspace { grid-template-rows: 70px minmax(0, 1fr); }
  .topbar { min-height: 70px; padding-right: 18px; padding-left: 18px; }
  .topbar .brand img { width: 118px; height: 62px; }
  .topbar .brand strong { font-size: 18px; }
  .topbar .brand small { font-size: 12px; }
  .workspace-grid { grid-template-columns: 78px minmax(0, 1fr); }
  .nav-item { width: 58px; height: 56px; }
  .nav-item span { font-size: 23px; }
  .main-panel { height: calc(var(--app-viewport-height) - 70px); padding: 22px; }
  .view-heading h1 { font-size: 30px; }
  .button { min-height: 46px; font-size: 14px; }
  .auth-screen { padding-top: max(20px, env(safe-area-inset-top)); }
  .auth-card { width: min(100%, 560px); max-width: 560px; padding: 8px 0; }
  .auth-card h1 { font-size: 38px; }
  .auth-brand { top: auto; left: auto; }
  .auth-brand img { width: 210px; height: 111px; }
}

@media (min-width: 1500px) and (min-height: 800px) {
  .workspace { grid-template-rows: 84px minmax(0, 1fr); }
  .topbar { min-height: 84px; padding-right: 42px; padding-left: 42px; }
  .topbar .brand img { width: 150px; height: 79px; }
  .topbar .brand strong { font-size: 22px; }
  .topbar .brand small { font-size: 14px; }
  .workspace-grid { grid-template-columns: 276px minmax(0, 1fr); }
  .nav-item { min-height: 58px; font-size: 17px; }
  .nav-item span { font-size: 23px; }
  .main-panel { height: calc(var(--app-viewport-height) - 84px); padding: 36px; }
  .view { max-width: 1600px; }
  .view-heading h1 { font-size: 42px; }
  .view-heading .muted { font-size: 18px; }
  .auth-brand { padding: 0; }
  .auth-brand img { width: 250px; height: 132px; }
  .auth-screen { padding-top: max(24px, env(safe-area-inset-top)); }
  .auth-card { max-width: 560px; padding: 8px 0; }
  .auth-card h1 { font-size: 48px; }
}

@media (max-width: 700px) and (max-height: 640px) {
  .auth-screen { justify-content: flex-start; gap: 2px; padding-top: max(8px, env(safe-area-inset-top)); }
  .auth-brand img { width: 150px; height: 79px; }
  .auth-card { padding-block: 4px; }
  .auth-card h1 { font-size: 27px; }
  .form-stack { gap: 11px; margin-top: 16px; }
  .auth-links { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .processing-indicator-spinner, .visual-review-hourglass, #canvasReadingStatus[data-loading="true"]::before, #canvasTranscriptionStatus[data-loading="true"]::before { animation-duration: var(--processing-spin-duration) !important; animation-iteration-count: infinite !important; }
  .processing-indicator-track span, .visual-review-progress-track span, .canvas-review-progress > span { animation-duration: var(--processing-progress-duration) !important; animation-iteration-count: infinite !important; }
}

.device-type-status { padding: 7px 10px; border: 1px solid #c6d8eb; border-radius: 999px; color: var(--brand-navy); background: var(--brand-pale); font-size: 12px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.primary-session-status { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 1px solid #b8dfcd; border-radius: 999px; color: #176444; background: #effaf4; font-size: 12px; font-weight: 750; white-space: nowrap; }
.primary-session-status::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #21a366; box-shadow: 0 0 0 3px rgb(33 163 102 / 13%); }
.primary-session-status.is-error { border-color: #e7b5b1; color: var(--error); background: #fff7f6; }
.primary-session-status.is-error::before { background: var(--error); box-shadow: 0 0 0 3px rgb(180 35 24 / 12%); }
.device-remote-launch { min-height: 44px; padding-inline: 15px; border-color: #0e5fae; background: #0e5fae; color: #fff; font-size: 14px; font-weight: 800; white-space: nowrap; }
.device-remote-launch:hover { background: #0a376b; }
.device-remote-dialog { width: min(94vw, 780px); max-height: min(calc(var(--app-viewport-height) * .92), 780px); padding: 22px; border: 1px solid #cad8e8; border-radius: 18px; background: #f8faff; color: var(--ink); box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.device-remote-dialog::backdrop { background: rgba(6, 20, 42, .68); backdrop-filter: blur(2px); }
body.device-remote-fallback-open::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: rgba(6, 20, 42, .68); }
.device-remote-dialog.device-remote-fallback-open[open] { position: fixed; z-index: 9999; top: 50%; left: 50%; display: block; overflow: auto; transform: translate(-50%, -50%); }
.device-remote-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.device-remote-heading h2 { margin: 2px 0 0; font-size: clamp(22px, 3vw, 30px); }
.device-remote-pair-panel { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.device-remote-qr { display: grid; place-items: center; width: min(100%, 230px); aspect-ratio: 1; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.device-remote-qr svg { display: block; width: 100%; height: 100%; }
.device-remote-pair-details { display: grid; justify-items: start; gap: 12px; }
.device-remote-pair-details p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.device-remote-pair-details .status { margin: 0; }
.device-remote-note { margin: 14px 0 0; font-size: 13px; }
.device-remote-cursor { position: fixed; z-index: 2147483000; width: 24px; height: 32px; pointer-events: none; display: none; }
.device-remote-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }

/* Keep dense learning views readable when titles, buttons, or long formulas wrap. */
.view h1, .view h2, .view h3, .view p, .view strong, .view label { min-width: 0; overflow-wrap: anywhere; }
.view-heading { flex-wrap: wrap; }
.report-item { flex-wrap: wrap; align-items: flex-start; }
.report-item > * { min-width: 0; }
.saved-report-actions { flex-wrap: wrap; }
@media (max-width: 480px) {
  .paper-question-row { grid-template-columns: minmax(0, 1fr); }
  .paper-question-row > .button { width: 100%; }
  .filter-card > .button { flex-basis: 100%; }
  .view-heading { gap: 10px; }
  .view-heading > label { min-width: 0; }
  .report-item { padding: 12px; }
  .device-remote-dialog { width: 100vw; max-width: none; max-height: var(--app-viewport-height); height: var(--app-viewport-height); padding: 15px; border-radius: 0; }
}
.device-remote-cursor.is-visible { display: block; }
html.device-tv .topbar-tools { gap: clamp(8px, 1.2vw, 20px); }
html.device-tv .device-remote-launch { min-height: 52px; padding-inline: 20px; font-size: 16px; }
.paper-catalog-dialog { width: min(94vw, 860px); max-height: min(calc(var(--app-viewport-height) * .92), 900px); padding: 0; overflow: hidden; border: 1px solid #cad8e8; border-radius: 18px; color: var(--ink); background: #f8faff; box-shadow: 0 24px 80px rgba(0,0,0,.28); }
.paper-catalog-dialog::backdrop { background: rgba(6, 20, 42, .68); backdrop-filter: blur(2px); }
.paper-catalog-toolbar { position: sticky; top: 0; z-index: 1; }
.paper-catalog-toolbar > div { min-width: 0; }
.paper-catalog-toolbar .eyebrow { margin: 0 0 2px; }
.paper-catalog-toolbar strong { display: block; white-space: normal; }
.paper-catalog-content { display: grid; gap: 10px; max-height: calc(min(var(--app-viewport-height) * .92, 900px) - 60px); padding: 18px; overflow: auto; }
.paper-catalog-content > .muted { margin: 0; line-height: 1.5; }
.paper-catalog-search-label { font-size: 13px; font-weight: 800; }
.paper-catalog-controls { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
.paper-catalog-controls input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 10px 13px; border: 1px solid #b7cee7; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.paper-catalog-controls > .button { flex: 0 0 auto; white-space: nowrap; }
.paper-catalog-content input[type="search"]:focus-visible { outline: 3px solid #00a9e8; outline-offset: 2px; }
.paper-catalog-count { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.paper-catalog-items { display: grid; gap: 7px; }
.paper-catalog-link { display: block; min-width: 0; padding: 11px 13px; border: 1px solid #cfdeef; border-radius: 10px; color: var(--brand-navy); background: #fff; text-decoration: none; overflow-wrap: anywhere; }
.paper-catalog-link:hover, .paper-catalog-link:focus-visible { border-color: #1688cb; background: #eaf6ff; text-decoration: underline; }
.paper-catalog-empty { margin: 0; padding: 18px; border: 1px dashed #b7cee7; border-radius: 10px; color: var(--ink-soft); text-align: center; }
@media (max-width: 700px) {
  .primary-session-status { width: 20px; min-width: 20px; height: 20px; justify-content: center; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .primary-session-status::before { width: 8px; height: 8px; margin: 0; }
}
@media (max-width: 900px) {
  .device-remote-pair-panel { grid-template-columns: minmax(130px, 180px) minmax(0, 1fr); gap: 14px; padding: 12px; }
  .device-remote-qr { width: min(100%, 180px); }
}
@media (max-width: 620px) {
  .device-remote-dialog, .paper-catalog-dialog { width: 100vw; max-width: none; max-height: var(--app-viewport-height); height: var(--app-viewport-height); border: 0; border-radius: 0; }
  .device-remote-dialog { padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
  .paper-catalog-content { max-height: calc(var(--app-viewport-height) - 60px); padding: 14px; }
  .device-remote-pair-panel { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr); gap: 10px; padding: 10px; }
  .device-remote-qr { width: 120px; padding: 5px; }
  .device-remote-pair-details { gap: 8px; font-size: 13px; }
  .device-remote-pair-details .button { min-height: 40px; }
  .device-remote-dialog.device-remote-fallback-open[open] { top: 0; left: 0; transform: none; }
}

/* Keep the desktop workspace usable at normal browser zoom on laptop-sized screens. */
@media (min-width: 1200px) and (max-width: 1499px) {
  .workspace { grid-template-rows: 76px minmax(0, 1fr); }
  .topbar { min-width: 0; min-height: 76px; gap: 12px; padding-inline: 18px; }
  .topbar .brand { flex: 0 0 auto; min-width: 0; gap: 7px; }
  .topbar .brand img { width: 108px; height: 57px; }
  .topbar .brand strong { font-size: 16px; }
  .topbar .brand small { font-size: 11px; }
  .topbar-tools { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: clamp(5px, .55vw, 8px); }
  .topbar-tools .device-type-status { display: none; }
  .topbar-tools .grade-quick { gap: 4px; font-size: 12px; }
  .topbar-tools .grade-quick select { width: 64px; min-height: 34px; padding-inline: 6px; }
  .topbar-tools .ai-credit-balance { min-height: 32px; gap: 5px; padding: 5px 8px; font-size: 10px; }
  .topbar-tools .ai-credit-balance strong { font-size: 11px; }
  .topbar-tools .primary-session-status { min-height: 32px; gap: 5px; padding: 5px 8px; font-size: 10px; }
  .topbar-tools .button { min-height: 38px; padding: 7px 9px; font-size: 12px; }
  .topbar-tools .device-remote-launch { padding-inline: 10px; font-size: 12px; }
  .topbar-tools .account-label { max-width: 76px; font-size: 11px; }
  .main-panel, .side-nav { height: calc(var(--app-viewport-height) - 76px); }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .workspace { grid-template-rows: 116px minmax(0, 1fr); }
  .topbar { min-width: 0; min-height: 116px; flex-wrap: wrap; align-content: center; gap: 6px 12px; padding: 7px 14px; }
  .topbar .brand { flex: 0 0 auto; min-width: 0; gap: 7px; }
  .topbar .brand img { width: 108px; height: 57px; }
  .topbar .brand small { display: none; }
  .topbar-tools { flex: 1 1 100%; min-width: 0; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .topbar-tools .device-type-status { display: none; }
  .topbar-tools .grade-quick { gap: 4px; font-size: 12px; }
  .topbar-tools .grade-quick select { width: 64px; min-height: 34px; padding-inline: 6px; }
  .topbar-tools .ai-credit-balance { min-height: 32px; gap: 5px; padding: 5px 8px; font-size: 10px; }
  .topbar-tools .ai-credit-balance strong { font-size: 11px; }
  .topbar-tools .primary-session-status { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .topbar-tools .button { min-height: 36px; padding: 6px 9px; font-size: 12px; }
  .topbar-tools .device-remote-launch { padding-inline: 10px; font-size: 12px; }
  .topbar-tools .account-label { max-width: 76px; font-size: 11px; }
  .workspace-grid { grid-template-columns: 78px minmax(0, 1fr); }
  .side-nav { height: calc(var(--app-viewport-height) - 116px); align-items: center; padding: 14px 8px; }
  .nav-label, .nav-item strong, .nav-bottom { display: none; }
  .nav-item { width: 54px; height: 48px; justify-content: center; padding: 8px; }
  .main-panel { height: calc(var(--app-viewport-height) - 116px); padding: 18px; }
}


/* Keep desktop layouts compact at real 100% browser zoom. Avoid CSS zoom on
   the workspace: it changes fixed-dialog geometry and makes canvas input
   coordinates jump when the browser crosses a width breakpoint. */
@media (min-width: 701px) {
  .workspace { grid-template-rows: 68px minmax(0, 1fr); }
  .topbar { min-height: 68px; gap: 10px; padding-inline: clamp(12px, 1.6vw, 26px); }
  .topbar .brand { flex: 0 0 auto; gap: 8px; }
  .topbar .brand img { width: clamp(100px, 8vw, 132px); height: auto; max-height: 68px; }
  .topbar .brand small { display: block; font-size: 12px; }
  .topbar-tools { flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .topbar-tools .device-type-status { display: none; }
  .topbar-tools .grade-quick { gap: 5px; font-size: 12px; }
  .topbar-tools .grade-quick select { width: 68px; min-height: 34px; padding: 5px 7px; }
  .topbar-tools .ai-credit-balance { min-height: 32px; gap: 5px; padding: 5px 8px; font-size: 11px; }
  .topbar-tools .ai-credit-balance strong { font-size: 12px; }
  .topbar-tools .primary-session-status { min-height: 32px; padding: 5px 8px; font-size: 11px; }
  .topbar-tools .button, .button { min-height: 40px; padding: 8px 12px; font-size: 13px; }
  .topbar-tools .device-remote-launch { min-height: 40px; padding-inline: 12px; font-size: 13px; }
  .topbar-tools .account-label { max-width: 110px; font-size: 12px; }
  .workspace-grid { grid-template-columns: clamp(176px, 15vw, 232px) minmax(0, 1fr); }
  .side-nav { height: calc(var(--app-viewport-height) - 68px); align-items: stretch; gap: 4px; padding: 17px 10px 12px; }
  .nav-label, .nav-bottom { display: block; }
  .nav-item strong { display: inline; }
  .nav-item { width: auto; min-height: 42px; height: auto; justify-content: flex-start; gap: 8px; padding: 7px 9px; font-size: 13px; }
  .nav-item span { width: 20px; font-size: 18px; }
  .main-panel { height: calc(var(--app-viewport-height) - 68px); padding: clamp(14px, 1.5vw, 24px); }
  .view { max-width: 1400px; }
  .view-heading { gap: 12px; margin-bottom: 15px; }
  .view-heading h1 { font-size: clamp(25px, 2.2vw, 32px); }
  .view-heading .muted { font-size: clamp(13px, .95vw, 15px); }
  .conversation-column { min-height: max(430px, calc(var(--app-viewport-height) - 190px)); }
  .message { padding: 11px 13px; }
  .composer { padding: 10px 12px; }
  .composer-tools { gap: 6px; padding-bottom: 8px; }
  .composer-tools .tool-button { flex: 1 1 84px; max-width: 150px; min-height: 42px; font-size: 14px; }
  .canvas-dialog { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  .canvas-toolbar { min-height: 42px; gap: 5px; padding: 4px 8px; }
  .canvas-toolbar > strong { max-width: 145px; font-size: 13px; }
  .canvas-actions { gap: 4px; }
  .canvas-actions .button { min-height: 34px; padding: 5px 8px; font-size: 11px; }
  .phone-canvas-pair-panel { padding-block: 5px; }
  .drawing-surface { margin: 8px; }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .workspace { grid-template-rows: 62px minmax(0, 1fr); }
  .topbar { min-height: 62px; padding-inline: 12px; }
  .topbar .brand img { width: 100px; max-height: 58px; }
  .topbar .brand small { display: none; }
  .topbar-tools { gap: 4px; }
  .topbar-tools .account-label { max-width: 66px; }
  .workspace-grid { grid-template-columns: 176px minmax(0, 1fr); }
  .side-nav { height: calc(var(--app-viewport-height) - 62px); padding: 13px 8px; }
  .main-panel { height: calc(var(--app-viewport-height) - 62px); padding: 13px; }
  .ask-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ask-help-panel { display: none; }
  .conversation-column { min-height: max(400px, calc(var(--app-viewport-height) - 110px)); }
}

/* Keep the phone layout stable in portrait and landscape, with scrolling
   confined to the page content above the bottom navigation. */
html[data-device-type="mobile"] .workspace {
  width: 100%;
  min-width: 0;
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 42px minmax(0, 1fr) 44px;
}
html[data-device-type="mobile"] .topbar {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  gap: 4px;
  padding-inline: 6px;
}
html[data-device-type="mobile"] .topbar .brand { min-width: 0; flex: 0 0 82px; }
html[data-device-type="mobile"] .topbar .brand img { width: 82px; height: 34px; }
html[data-device-type="mobile"] .topbar .brand small,
html[data-device-type="mobile"] .account-label,
html[data-device-type="mobile"] .grade-quick,
html[data-device-type="mobile"] .device-type-status { display: none; }
html[data-device-type="mobile"] .topbar-tools { min-width: 0; flex: 1 1 auto; gap: 4px; }
html[data-device-type="mobile"] .topbar-tools .button { min-height: 34px; padding: 6px 10px; }
html[data-device-type="mobile"] .topbar-tools > * { min-width: 0; }
html[data-device-type="mobile"] .ai-credit-balance { min-height: 30px; gap: 3px; padding: 4px 5px; font-size: 0; }
html[data-device-type="mobile"] .ai-credit-label { display: none; }
html[data-device-type="mobile"] .ai-credit-icon { font-size: 11px; }
html[data-device-type="mobile"] .ai-credit-balance strong { font-size: 9px; }
html[data-device-type="mobile"] .primary-session-status { width: 16px; min-width: 16px; height: 16px; justify-content: center; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
html[data-device-type="mobile"] .primary-session-status::before { width: 8px; height: 8px; margin: 0; }
html[data-device-type="mobile"] .topbar-tools .device-remote-launch { min-height: 32px; padding: 5px 6px; font-size: 11px; white-space: nowrap; }
html[data-device-type="mobile"] .topbar-tools .button.subtle { min-height: 32px; padding: 5px 7px; font-size: 11px; white-space: nowrap; }
html[data-device-type="mobile"] .workspace-grid { display: block; width: 100%; min-width: 0; height: 100%; min-height: 0; overflow: hidden; }
html[data-device-type="mobile"] .side-nav { display: none; }
html[data-device-type="mobile"] .main-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  scroll-padding-block: 12px;
}
html[data-device-type="mobile"] .view-heading { align-items: flex-start; margin-bottom: 10px; }
html[data-device-type="mobile"] .view-heading h1 { font-size: 18px; line-height: 1.2; }
html[data-device-type="mobile"] .view-heading .muted { font-size: 11px; line-height: 1.4; }
html[data-device-type="mobile"] .eyebrow { font-size: 9px; }
html[data-device-type="mobile"] .ask-layout,
html[data-device-type="mobile"] .practice-layout { grid-template-columns: minmax(0, 1fr); }
html[data-device-type="mobile"] .ask-help-panel { display: none; }
html[data-device-type="mobile"] .conversation-column { min-height: 0; grid-template-rows: auto auto auto; }
html[data-device-type="mobile"] .chat-messages { padding: 8px; }
html[data-device-type="mobile"] .message { max-width: 96%; margin-bottom: 8px; padding: 7px 8px; font-size: 11px; line-height: 1.4; }
html[data-device-type="mobile"] .message-kind { margin-bottom: 3px; font-size: 9px; }
html[data-device-type="mobile"] .welcome-audio-controls { gap: 6px; margin-top: 6px; }
html[data-device-type="mobile"] .welcome-audio-controls .button { min-height: 28px; padding: 4px 7px; font-size: 9px; }
html[data-device-type="mobile"] .paper-source-links { margin: 0 8px 8px; }
html[data-device-type="mobile"] .paper-source-links .source-note { margin-bottom: 6px; font-size: 10px; line-height: 1.35; }
html[data-device-type="mobile"] .source-link-list { gap: 6px; }
html[data-device-type="mobile"] .source-link-list .button { min-height: 34px; padding: 6px 7px; font-size: 10px; }
html[data-device-type="mobile"] .composer { padding: 6px 8px max(8px, env(safe-area-inset-bottom)); }
html[data-device-type="mobile"] .composer-tools { gap: 4px; padding-bottom: 4px; }
html[data-device-type="mobile"] .composer-tools .tool-button { flex: 1 1 65px; max-width: none; }
html[data-device-type="mobile"] .tool-button { min-width: 0; min-height: 34px; padding: 3px; font-size: 12px; }
html[data-device-type="mobile"] .tool-button span { font-size: 8px; }
html[data-device-type="mobile"] .composer-label { margin-bottom: 4px; font-size: 10px; }
html[data-device-type="mobile"] .ask-math-editor-frame { height: 132px; }
html[data-device-type="mobile"] .mobile-nav {
  width: 100%;
  min-width: 0;
  position: relative;
  inset: auto;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 44px;
  padding: 3px 4px max(3px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.98);
}
html[data-device-type="mobile"] .mobile-nav button {
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 3px 1px;
  border: 0;
  border-radius: 10px;
  color: #60738a;
  background: transparent;
  font-size: 8px;
  font-weight: 650;
}
html[data-device-type="mobile"] .mobile-nav button span { font-size: 15px; line-height: 1.1; }
html[data-device-type="mobile"] .mobile-nav button.is-active { color: var(--brand-navy); background: var(--brand-pale); }

@media (orientation: landscape) and (max-height: 560px) {
  html[data-device-type="mobile"] .workspace { grid-template-rows: 48px minmax(0, 1fr) 50px; }
  html[data-device-type="mobile"] .topbar { min-height: 48px; padding-inline: 10px; }
  html[data-device-type="mobile"] .topbar .brand img { width: 82px; height: 44px; }
  html[data-device-type="mobile"] .topbar-tools { gap: 5px; }
  html[data-device-type="mobile"] .topbar-tools .button { min-height: 30px; padding: 4px 7px; font-size: 11px; }
  html[data-device-type="mobile"] .ai-credit-balance { min-height: 28px; padding: 4px 7px; }
  html[data-device-type="mobile"] .main-panel { padding: 10px 12px 14px; }
  html[data-device-type="mobile"] .view-heading { margin-bottom: 9px; }
  html[data-device-type="mobile"] .view-heading h1 { font-size: 21px; }
  html[data-device-type="mobile"] .view-heading .muted { font-size: 12px; }
  html[data-device-type="mobile"] .mobile-nav { min-height: 50px; padding: 3px 4px max(3px, env(safe-area-inset-bottom)); }
  html[data-device-type="mobile"] .mobile-nav button { gap: 1px; padding-block: 2px; font-size: 8px; }
  html[data-device-type="mobile"] .mobile-nav button span { font-size: 15px; }
  html[data-device-type="mobile"] .canvas-dialog { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
  html[data-device-type="mobile"] .canvas-toolbar { min-height: 34px; align-items: center; flex-wrap: nowrap; gap: 4px; padding: 2px 5px; }
  html[data-device-type="mobile"] .canvas-toolbar > strong { width: auto; flex: 0 0 auto; max-width: 92px; min-height: 0; font-size: 10px; white-space: nowrap; }
  html[data-device-type="mobile"] .canvas-actions { width: auto; min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: nowrap; gap: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  html[data-device-type="mobile"] .canvas-actions .button { flex: 0 0 auto; min-height: 27px; padding: 3px 5px; font-size: 9px; line-height: 1; white-space: nowrap; }
  html[data-device-type="mobile"] .canvas-answer-label { gap: 3px; font-size: 9px; }
  html[data-device-type="mobile"] .canvas-answer-label input { width: 48px; min-width: 44px; min-height: 26px; padding: 3px 4px; font-size: 10px; }
  html[data-device-type="mobile"] .canvas-layout.has-question { grid-template-columns: minmax(0, 1fr) minmax(148px, 34%); }
  html[data-device-type="mobile"] .drawing-surface { margin: 3px; border-radius: 8px; }
  html[data-device-type="mobile"] .canvas-question-sidebar { margin: 3px 3px 3px 0; padding: 6px; }
  html[data-device-type="mobile"] .canvas-question-sidebar .math-content { font-size: 12px; }
  html[data-device-type="mobile"] .canvas-dialog > #canvasHelpText { padding: 3px 6px max(3px, env(safe-area-inset-bottom)); font-size: 9px; line-height: 1.15; }
  html[data-device-type="mobile"] .canvas-graph-count-panel { gap: 4px 8px; padding: 5px 8px; }
  html[data-device-type="mobile"] .canvas-graph-count-panel > label { font-size: 11px; }
  html[data-device-type="mobile"] .canvas-graph-count-panel > p { margin: 0; font-size: 9px; line-height: 1.2; }
  html[data-device-type="mobile"] .canvas-graph-count-controls input { min-height: 34px; padding-block: 5px; }
  html[data-device-type="mobile"] .canvas-graph-count-controls .button { min-height: 34px; padding: 5px 8px; }
  html[data-device-type="mobile"] .phone-canvas-pair-panel { grid-template-columns: 44px minmax(0, 1fr); gap: 4px; padding: 3px 6px; }
  html[data-device-type="mobile"] .phone-canvas-pair-qr { width: 40px; height: 40px; }
  html[data-device-type="mobile"] .canvas-dialog #canvasReadingReview:not([hidden]) { max-height: 24vh; overflow: auto; }
}

/* Phone math entry uses the whole browser viewport. Chrome fullscreen is
   requested by the editor gesture; these rules still work if it is denied. */
html[data-phone-typing-mode="ask"],
html[data-phone-typing-mode="ask"] body {
  width: 100%;
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
}
html[data-phone-typing-mode="ask"] #workspace {
  width: 100%;
  height: var(--app-viewport-height);
  min-height: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
html[data-phone-typing-mode="ask"] .topbar,
html[data-phone-typing-mode="ask"] .mobile-nav,
html[data-phone-typing-mode="ask"] #processingIndicator,
html[data-phone-typing-mode="ask"] .view-heading,
html[data-phone-typing-mode="ask"] .chat-messages,
html[data-phone-typing-mode="ask"] #paperTools,
html[data-phone-typing-mode="ask"] .paper-source-links,
html[data-phone-typing-mode="ask"] .ask-help-panel,
html[data-phone-typing-mode="ask"] #askForm > .composer-tools,
html[data-phone-typing-mode="ask"] #askForm > .live-tutor-panel,
html[data-phone-typing-mode="ask"] #askForm > .composer-label,
html[data-phone-typing-mode="ask"] #askForm > .composer-footer {
  display: none !important;
}
html[data-phone-typing-mode="ask"] .workspace-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html[data-phone-typing-mode="ask"] .main-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
html[data-phone-typing-mode="ask"] .view[data-view-panel="ask"],
html[data-phone-typing-mode="ask"] .ask-layout,
html[data-phone-typing-mode="ask"] .conversation-column,
html[data-phone-typing-mode="ask"] #askForm {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
}
html[data-phone-typing-mode="ask"] .view[data-view-panel="ask"] { padding: 0; }
html[data-phone-typing-mode="ask"] .ask-layout { display: block; }
html[data-phone-typing-mode="ask"] .conversation-column {
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-phone-typing-mode="ask"] #askForm {
  display: grid;
  grid-template-rows: clamp(116px, 22dvh, 180px) minmax(0, 1fr);
  align-content: stretch;
  gap: 8px;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
}
html[data-phone-typing-mode="ask"] .ask-math-editor-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount > .math-keyboard {
  width: 100%;
  min-height: 100%;
  max-height: none;
  align-content: start;
  overflow: visible;
  margin: 0;
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount .math-key-grid,
html[data-phone-typing-mode="ask"] #askMathKeyboardMount .math-numeric-grid {
  max-height: none;
  overflow: visible;
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount .math-keyboard-body.has-numeric {
  grid-template-columns: minmax(0, 1fr);
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount #mathKeyboardNumericKeys {
  grid-row: 1;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount #mathKeyboardKeys {
  grid-row: 2;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
}
html[data-phone-typing-mode="ask"] #askMathKeyboardMount .math-keyboard-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-block: 5px;
  background: linear-gradient(180deg, rgba(8,43,80,.9), #082b50 42%);
}

.app-update-notice {
  position: fixed;
  z-index: 10000;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(34rem, calc(100vw - 1.5rem));
  padding: 0.75rem;
  color: #fff;
  background: #082b50;
  border: 1px solid #6da9de;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 24, 55, 0.28);
  transform: translateX(-50%);
}
.app-update-notice[hidden] { display: none; }
.app-update-notice span { flex: 1; font-weight: 650; }
.app-update-notice button {
  min-height: 2.5rem;
  padding: 0.4rem 0.75rem;
  color: #082b50;
  background: #fff;
  border: 1px solid #c2d8ed;
  border-radius: 0.55rem;
  font: inherit;
  font-weight: 700;
}
.app-update-notice button:last-child { padding-inline: 0.65rem; }
@media (max-width: 420px) {
  .app-update-notice { gap: 0.45rem; padding: 0.55rem; font-size: 0.88rem; }
  .app-update-notice button { padding-inline: 0.55rem; }
}