@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');

:root {
  --table-row-padding-y: 6px;
  --table-row-padding-x: 10px;
  --table-header-padding-y: 7px;
  --table-control-height: 32px;
  --table-control-padding-y: 4px;
  --table-control-padding-x: 8px;
  --table-control-font-size: var(--text-xs);
  --table-control-line-height: 18px;
  --ink: #173b3a;
  --teal: #0b746d;
  --teal-dark: #075c57;
  --coral: #d76551;
  --coral-dark: #bd4f3f;
  --gold: #b98525;
  --muted: #687d78;
  --line: #d6e6e1;
  --line-soft: #eaf2ef;
  --paper: #f5faf8;
  --surface: #fff;
  --surface-soft: #f8fcfa;
  --mint: #dff2eb;
  --shadow: 0 12px 30px rgba(23, 59, 58, .07);
  --shadow-hover: 0 16px 34px rgba(23, 59, 58, .11);
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --font-size-12px: 12px;
  --font-size-15px: 15px;
  --font-size-17px: 17px;
  --font-size-19px: 19px;
  --font-size-21px: 21px;
  --font-size-22px: 22px;
  --font-size-26px: 26px;
  --font-size-28px: 28px;
  --font-size-32px: 32px;
  --font-size-34px: 34px;
  --font-size-37px: 37px;
  --font-size-38px: 38px;
  --font-size-40px: 40px;
  --font-size-42px: 42px;
  --font-size-44px: 44px;
  --font-size-54px: 54px;
  --font-size-1rem: 1rem;
  --font-size-2-35rem: 2.35rem;
  --font-size-hero: clamp(2.2rem, 5vw, 3.8rem);
  --font-size-certificate: clamp(var(--font-size-28px), 5vw, var(--font-size-42px));
  --blue: #236c8a;
  --yellow: #e4a72d;
  --green-soft: #edf8f0;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--text-md); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: var(--text-md); line-height: 1.45; }
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  width: 95%;
  max-width: 95%;
}
small { font-size: var(--text-xs); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(11, 116, 109, .24); outline-offset: 2px; }

header { background: rgba(247, 250, 248, .97); }
.navbar { min-height: 70px; margin: 0; }
.global-page-zoom-controls { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; min-height: 38px; margin: 6px 0; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.global-page-zoom-control-container { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 16px; }
.global-page-zoom-control-container.has-back-link { justify-content: space-between; }
.global-page-zoom-back-link { color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.global-page-zoom-back-link.back-link { margin: 0; color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; }
.global-page-zoom-back-link:hover { color: var(--coral-dark); }
.global-page-zoom-controls .button { display: grid; place-items: center; width: 30px; min-width: 30px; height: 28px; min-height: 28px; padding: 0; font-size: var(--text-md); line-height: 1; }
.global-page-zoom-controls output { min-width: 42px; color: var(--ink); font-weight: 700; text-align: center; }
.global-page-zoom-controls .button:disabled { cursor: default; opacity: .45; }
.global-page-zoom-shell { zoom: var(--page-zoom, 100%); }
.brand-mark { color: var(--ink) !important; font-size: var(--font-size-19px); font-weight: 700; }
.brand-mark span { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 6px; border-radius: 8px; background: var(--coral); color: #fff; font-size: var(--text-xs); }
.navbar-nav { gap: 4px; }
.nav-link { padding: 9px 13px !important; color: var(--muted) !important; font-size: var(--text-sm); }
.nav-link:hover, .nav-link.active { color: var(--ink) !important; font-weight: 700; }
.account-nav { display: flex; align-items: center; gap: 14px; }
.student-learning-assistant-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 1px solid #b9ddd3; border-radius: 999px; background: #eff9f5; color: var(--teal-dark); font: 600 var(--text-xs) 'Segoe UI', Tahoma, sans-serif; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.student-learning-assistant-trigger:hover { transform: translateY(-1px); border-color: var(--teal); background: #e3f4ed; }
.student-learning-assistant-trigger svg { width: 17px; height: 17px; color: var(--teal); }
.student-learning-assistant-trigger strong { padding: 2px 5px; border-radius: 999px; background: var(--teal); color: #fff; font-size: var(--text-xs); }
.student-mobile-actions { display: none; }
.student-learning-assistant-mobile-trigger { display: none; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; margin-left: 8px; border: 1px solid #b9ddd3; border-radius: 50%; background: #eff9f5; color: var(--teal); cursor: pointer; }
.student-learning-assistant-mobile-trigger svg { width: 20px; height: 20px; }
.student-learning-assistant-mobile-trigger:hover { border-color: var(--teal); background: #e3f4ed; }
.student-class-chat-mobile-trigger { display: none; place-items: center; width: 40px; height: 40px; border: 1px solid #c7dce6; border-radius: 50%; background: #f0f7fa; color: var(--blue); }
.student-class-chat-mobile-trigger svg { width: 20px; height: 20px; }
.student-class-chat-mobile-trigger:hover, .student-class-chat-mobile-trigger.is-active { border-color: var(--blue); background: #e3f1f6; }
.mentor-ai-mobile-trigger { display: none; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #b9ddd3; border-radius: 50%; background: #eff9f5; color: var(--teal); }
.mentor-ai-mobile-trigger svg { width: 20px; height: 20px; }
.mentor-ai-mobile-trigger:hover, .mentor-ai-mobile-trigger.is-active { border-color: var(--teal); background: #e3f4ed; }
.student-class-chat-mobile-trigger.has-lecturer { border-color: var(--coral); background: #fff4ef; color: var(--coral-dark); }
.student-class-chat-mobile-trigger.has-lecturer svg { animation: student-chat-lecturer-alert 1s ease-in-out infinite; }
.student-class-chat-nav-trigger { position: relative; padding-right: 26px !important; }
.student-class-chat-nav-trigger.has-lecturer::after { position: absolute; top: 50%; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); content: ""; transform: translateY(-50%); animation: student-chat-lecturer-alert 1s ease-in-out infinite; }
@keyframes student-chat-lecturer-alert { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .student-class-chat-mobile-trigger.has-lecturer svg, .student-class-chat-nav-trigger.has-lecturer::after { animation: none; } }
.account-greeting { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; text-align: right; }
.account-greeting-copy { display: inline-flex; flex-direction: column; align-items: flex-end; }
.account-greeting small { display: block; margin-top: -2px; color: var(--muted); font-size: var(--text-xs); font-weight: 400; line-height: 1; }
.account-profile-gear,
.account-heading-gear { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(44, 97, 84, .18); border-radius: 50%; background: #eef8f4; color: var(--teal); box-shadow: 0 5px 12px rgba(35, 85, 76, .08); font-size: var(--font-size-15px); }
.account-heading-title-wrap { display: flex; align-items: center; gap: 12px; }
.account-heading-gear { width: 32px; height: 32px; font-size: var(--text-md); }
.terms-consent { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.terms-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--teal); }
.terms-consent a { color: var(--teal); font-weight: 700; text-decoration: underline; }
.legal-page { max-width: 760px; padding: 52px 0 80px; }
.legal-page h1 { margin: 10px 0 20px; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-34px); font-weight: 400; }
.legal-page h2 { margin: 28px 0 8px; font-size: var(--font-size-19px); }
.legal-page p { color: var(--muted); font-size: var(--font-size-15px); line-height: 1.75; }
.wallet-balance { display: inline-flex; align-items: center; gap: 9px; min-width: 142px; min-height: 44px; padding: 6px 10px; border: 1px solid #cfe2d9; border-radius: 8px; background: #f3f9f4; color: var(--teal-dark); box-shadow: 0 3px 10px rgba(23, 59, 58, .045); transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.wallet-balance:hover { transform: translateY(-1px); border-color: #9dc8b4; background: #edf6ef; box-shadow: 0 6px 14px rgba(23, 59, 58, .09); }
.wallet-balance-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--teal); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wallet-balance-copy { display: grid; min-width: 0; gap: 2px; line-height: 1.1; }
.wallet-balance-copy small { color: var(--muted); font-size: 10px; font-weight: 600; }
.wallet-balance-copy strong { overflow: hidden; color: var(--ink); font-size: var(--text-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.wallet-balance-arrow { width: 13px; height: 13px; flex: 0 0 13px; margin-left: auto; color: #78968a; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease, color .16s ease; }
.wallet-balance:hover .wallet-balance-arrow { transform: translate(1px, -1px); color: var(--teal); }
.wallet-balance.wallet-empty { border-color: #eed1c9; background: #fff6f1; }
.wallet-balance.wallet-empty .wallet-balance-icon { color: var(--coral); }
.wallet-balance.wallet-empty .wallet-balance-copy strong { color: var(--coral-dark); }
.wallet-balance.wallet-error .wallet-balance-copy strong { max-width: 170px; color: var(--coral-dark); font-size: 10px; }
.nav-login, .nav-logout { border: 0; background: transparent; color: var(--muted); font: 600 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; cursor: pointer; }
.nav-login:hover, .nav-logout:hover { color: var(--coral); }
.nav-logout-icon { display: none; }
.nav-register { padding: 9px 13px; border-radius: 7px; background: var(--ink); color: #fff; font-size: var(--text-xs); font-weight: 700; }
.nav-register:hover { background: var(--teal); color: #fff; }

.dashboard { padding: 42px 0 80px; }
.hero-panel { display: flex; min-height: 285px; padding: 50px 60px; overflow: hidden; border: 1px solid #b9ddd3; border-radius: 16px; background: #d8f0e8; }
.hero-copy { max-width: 680px; }
.eyebrow { color: var(--teal); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.2px; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
.hero-panel h1 { margin: 16px 0; font-size: var(--font-size-44px); line-height: 1.08; letter-spacing: -1.2px; }
.hero-panel h1 em, .account-intro h1 em { color: var(--coral); font-family: Merriweather, Georgia, serif; font-weight: 700; }
.hero-panel p { max-width: 500px; color: #55726e; font-size: var(--text-md); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 42px; padding: 11px 17px; border: 0; border-radius: var(--radius-sm); cursor: pointer; font: 600 var(--font-size-15px) 'Segoe UI', Tahoma, sans-serif; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.button span, .btn span { font-size: var(--font-size-17px); line-height: 10px; }
.button:hover, .btn:hover { transform: translateY(-1px); }
.button:disabled, .btn:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.button-primary, .btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 14px rgba(215, 101, 81, .2); }
.button-primary:hover, .btn-primary:hover { background: var(--coral-dark); color: #fff; }
.button-secondary, .btn-secondary { background: var(--ink); color: #fff; }
.button-secondary:hover, .btn-secondary:hover { background: var(--teal); color: #fff; }
.button-dark, .btn-dark { margin-top: 14px; background: var(--ink); color: #fff; }
.button-dark:hover, .btn-dark:hover { background: var(--teal); }
.text-link { font-size: var(--text-xs); font-weight: 600; }
.text-link span { margin-left: 6px; color: var(--coral); font-size: var(--font-size-17px); }
.hero-orbit { display: none; }

.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 16px 0 68px; }
.metric { display: flex; align-items: center; gap: 11px; min-height: 67px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.metric-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; font-size: var(--text-xl); }
.mint { background: var(--mint); color: var(--teal); }
.coral { background: #fae1db; color: var(--coral); }
.gold { background: #f8eaca; color: var(--gold); }
.metric strong, .metric small { display: block; }
.metric strong { font-size: var(--font-size-17px); }
.metric small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.metric-tip { border: 0; background: transparent; }
.tip-mark { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #a8c9c1; border-radius: 50%; color: var(--teal); font-size: var(--text-xs); }
.metric-tip strong { font-size: var(--text-xs); }

.section-block { margin-bottom: 64px; }
.section-heading, .panel-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.section-heading h2, .panel-heading h2 { margin: 7px 0 0; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-26px); font-weight: 400; letter-spacing: 0; }
.section-count, .topic-total { color: var(--muted); font-size: var(--text-xs); }
.subject-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 0 auto; }
.subject-card { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.subject-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.subject-card:hover, .subject-card.selected { border-color: #9acfc1; box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-top { display: flex; justify-content: space-between; }
.subject-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 10px; font-size: var(--font-size-22px); }
.subject-icon.teal { background: var(--mint); color: var(--teal); }
.subject-icon.coral { background: #fae1db; color: var(--coral); }
.status-dot { color: #8bcabc; font-size: var(--text-sm); }
.subject-code { display: block; margin-top: 21px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.1px; }
.subject-card h3 { margin: 5px 0 8px; font-size: var(--text-lg); font-weight: 600; }
.subject-card p { min-height: 39px; margin-bottom: 17px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.subject-description-text { white-space: pre-wrap; }
.card-meta { display: flex; gap: 13px; padding: 11px 0; border-top: 1px solid #edf3f0; color: var(--muted); font-size: var(--text-xs); }
.subject-card-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }

.workspace-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 17px; margin-bottom: 68px; }
.workflow-panel, .topic-panel, .exam-section, .result-section { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 4px 14px rgba(23, 59, 58, .03); }
.pill { display: inline-block; padding: 5px 9px; border-radius: 20px; font-size: var(--text-xs); font-weight: 700; }
.pill-green { background: var(--mint); color: var(--teal); }
.pill-gold { background: #f8eaca; color: #916714; }
.pill-red { background: #fff0ed; color: #a94c3e; }
.steps { margin: 8px 0 23px; }
.step { display: grid; grid-template-columns: 31px 1fr 18px; align-items: center; gap: 12px; min-height: 59px; border-bottom: 1px solid #edf3f0; }
.step > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #f1f5f3; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.step.current > span { background: #fae1db; color: var(--coral); }
.step.done > span { background: var(--mint); color: var(--teal); }
.step strong, .step small { display: block; }
.step strong { font-size: var(--text-xs); }
.step small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.step b { color: var(--muted); font-size: var(--text-sm); }
.step.done b { color: var(--teal); }
.payment-box, .paid-box { display: flex; align-items: center; gap: 17px; padding: 16px; border-radius: 9px; background: #f4faf7; }
.payment-box strong, .payment-box small, .paid-box strong, .paid-box small { display: block; font-size: var(--text-sm); }
.payment-box small, .paid-box small { margin-top: 5px; color: var(--muted); font-size: var(--text-xs); }
.payment-box small b { color: var(--ink); }
.fake-qr { display: grid; grid-template-columns: repeat(3, 8px); gap: 3px; padding: 8px; border: 1px solid var(--line); background: #fff; }
.fake-qr i { height: 8px; background: var(--ink); }
.fake-qr i:nth-child(2n), .fake-qr i:nth-child(5), .fake-qr i:nth-child(7) { background: var(--coral); }
.paid-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: var(--mint); color: var(--teal); font-weight: 700; }
.paid-box .button { margin-left: auto; }
.topic-total { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--mint); color: var(--teal); }
.topic-item { display: grid; grid-template-columns: 32px 1fr 17px; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #edf3f0; }
.topic-number { color: var(--coral); font: 600 var(--text-xs) Merriweather, Georgia, serif; }
.topic-item strong, .topic-item small { display: block; }
.topic-item strong { font-size: var(--text-xs); }
.topic-item small { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.topic-arrow { color: var(--muted); }

.exam-section { margin-bottom: 68px; }
.question-card { margin: 15px 0; padding: 20px; border: 1px solid var(--line); border-radius: 9px; }
.question-diagram-board { width: 100%; max-width: 620px; height: clamp(170px, 28vw, 260px); margin: 14px auto; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 6px; background: #fff; cursor: default !important; }
.question-diagram-board * { cursor: default !important; }
.question-diagram-board[data-diagram-rendered="loading"] { display: grid; place-items: center; color: var(--muted); font-size: var(--text-xs); }
.question-diagram-board[data-diagram-rendered="error"] { display: grid; place-items: center; color: var(--muted); font-size: var(--text-xs); }
.question-number { color: var(--coral); font-size: var(--text-xs); font-weight: 700; }
.question-number span { float: right; color: var(--muted); font-weight: 400; }
.question-card h3 { margin: 13px 0 18px; font-size: var(--text-lg); font-weight: 600; line-height: 1.5; }
.question-materials { display: flex; flex-wrap: wrap; gap: 8px; margin: -5px 0 17px; }
.question-materials .button { padding: 8px 11px; font-size: var(--text-xs); }
.question-bank-status { margin: 4px 0 12px; color: var(--teal); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
.question-bank-visibility { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; }
.question-bank-status-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 5px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.question-bank-status-badge.is-visible { background: var(--mint); color: var(--teal); }
.question-bank-status-badge.is-excluded { background: #fff0ed; color: #a94c3e; }
.question-bank-visibility small { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.exam-action-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.exam-material-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; order: 2; margin-left: auto; }
.exam-material-actions .question-materials { margin: 0; }
.exam-action-row .submit-exam { order: 1; margin-top: 0; }
#material-dialog { z-index: 1200; }
#question-preview-dialog { z-index: 1100; }
.material-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(100%, 1500px); max-width: 100%; height: min(94vh, 960px); max-height: 100%; min-width: 0; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 50px rgba(23, 59, 58, .18); }
.material-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 10px; }
.material-dialog-heading h2 { margin: 0; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-21px); font-weight: 400; }
.material-dialog iframe { display: block; width: 100%; max-width: 100%; height: 100%; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 6px; background: #f4f8f6; }
.material-dialog-status,
.question-preview-content { min-width: 0; max-width: 100%; overflow: auto; }
.question-preview-content { padding: 0; }
.question-preview-card { width: 100%; max-width: none; margin: 0; overflow-wrap: anywhere; }
.question-preview-card .options { min-width: 0; }
.question-preview-card .question-preview-option { min-width: 0; }
.question-preview-card .question-preview-option span { min-width: 0; overflow-wrap: anywhere; }
.material-status { display: grid; place-items: center; min-height: 180px; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbfa; color: var(--muted); font-size: var(--font-size-15px); line-height: 1.6; text-align: center; }
@media (max-width: 520px) {
  .app-dialog-backdrop.material-dialog-backdrop { padding: 1%; }
  .material-dialog { width: 100%; height: 100%; padding: 1%; border-radius: 0; }
  .material-dialog-heading { padding-bottom: 8px; }
  .material-dialog-heading h2 { font-size: var(--text-lg); }
}

@media (max-width: 575.98px) {
  .navbar > .container { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .navbar-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .navbar-toggler { grid-column: 4; grid-row: 1; justify-self: end; margin-left: 0; }
  .student-learning-assistant-mobile-trigger { grid-column: 2; grid-row: 1; justify-self: center; margin-left: 0; }
  .student-class-chat-mobile-trigger { display: grid; grid-column: 3; grid-row: 1; justify-self: center; }
  .navbar-student-mobile > .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; column-gap: 8px; }
  .navbar-student-mobile .student-mobile-actions { display: flex; grid-column: 2; grid-row: 1; align-items: center; justify-self: center; gap: 2px; padding: 3px; border: 1px solid #dce8df; border-radius: 999px; background: #f7faf8; }
  .navbar-student-mobile .student-mobile-actions .student-learning-assistant-mobile-trigger,
  .navbar-student-mobile .student-mobile-actions .student-class-chat-mobile-trigger,
  .navbar-student-mobile .student-mobile-actions .mentor-ai-mobile-trigger { display: grid; grid-column: auto; grid-row: auto; width: 36px; height: 36px; flex-basis: 36px; justify-self: auto; margin: 0; border-color: transparent; border-radius: 50%; background: transparent; transition: background-color .16s ease, transform .16s ease; }
  .navbar-student-mobile .student-mobile-actions .student-learning-assistant-mobile-trigger:hover,
  .navbar-student-mobile .student-mobile-actions .student-class-chat-mobile-trigger:hover,
  .navbar-student-mobile .student-mobile-actions .mentor-ai-mobile-trigger:hover { transform: translateY(-1px); background: #e3f4ed; }
  .navbar-student-mobile .student-mobile-actions .student-class-chat-mobile-trigger.is-active { background: #e3f1f6; }
  .navbar-student-mobile .navbar-toggler { grid-column: 3; }
  .navbar:not(.navbar-student-mobile) > .container { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .navbar:not(.navbar-student-mobile) .mentor-ai-mobile-trigger { position: static; display: grid; grid-column: 2; grid-row: 1; justify-self: center; margin: 0; transform: none; }
  .navbar:not(.navbar-student-mobile) .navbar-toggler { grid-column: 3; grid-row: 1; }
  .navbar-collapse { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .student-learning-assistant-mobile-trigger { display: grid; }
  .account-nav .student-learning-assistant-trigger { display: none; }
  .account-nav .mentor-ai-trigger { display: none; }
  .account-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; width: 100%; }
  .account-nav > .account-greeting { grid-column: 1; justify-self: start; min-width: 0; max-width: 100%; text-align: left; }
  .account-nav > .account-greeting .account-greeting-copy { min-width: 0; overflow: hidden; align-items: flex-start; }
  .account-nav > .wallet-balance { grid-column: 2; justify-self: end; min-width: 0; max-width: 100%; gap: 5px; padding: 5px 7px; }
  .account-nav > .wallet-balance .wallet-balance-arrow { display: none; }
  .account-nav > .wallet-balance .wallet-balance-copy strong { max-width: 100%; font-size: 11px; }
  .account-nav > form { grid-column: 3; justify-self: end; margin: 0; }
  .account-nav > form .nav-logout { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--teal-dark); }
  .account-nav > form .nav-logout:hover { border-color: var(--teal); background: var(--surface-soft); color: var(--teal-dark); }
  .account-nav > form .nav-logout-icon { display: block; width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .account-nav > form .nav-logout span { display: none; }
}
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.options label { cursor: pointer; }
.options input { position: absolute; opacity: 0; }
.options label > span { display: block; min-height: 24px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: var(--text-md); line-height: 1.5; }
.options label > span > b { margin-right: 8px; color: var(--teal); }
.options input:checked + span { border-color: var(--coral); background: #fff5f2; color: var(--ink); }
.submit-exam { margin-top: 9px; }
.learning-intro { margin: -4px 0 16px; padding: 12px 14px; border-left: 3px solid var(--teal); background: #f4faf7; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.learning-question { display: none; }
.learning-question.is-active { display: block; }
.learning-question .button-check { margin-top: 16px; background: var(--ink); color: #fff; }
.learning-question .button-check:hover { background: var(--teal); }
.answer-feedback { display: none; margin: 15px 0; padding: 20px; border: 1px solid var(--line); border-radius: 9px; font-size: var(--text-lg); line-height: 1.5; }
.answer-feedback[hidden] { display: none; }
.answer-feedback strong, .answer-feedback span { display: block; }
.answer-feedback span { margin-top: 4px; }
.answer-feedback.is-warning { display: block; background: #fff7e5; color: #8a6418; }
.answer-feedback.is-wrong { display: block; border-left: 3px solid var(--coral); background: #fff1ee; color: #9c4d40; }
.answer-feedback.is-correct { display: block; border-left: 3px solid var(--teal); background: var(--mint); color: var(--teal); }
.ai-followup { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(138, 100, 24, .2); }
.ai-followup label { display: block; margin-bottom: 7px; font-weight: 600; }
.ai-followup-composer, .student-learning-assistant-composer { position: relative; }
.ai-followup textarea { box-sizing: border-box; width: 100%; resize: vertical; padding: 10px 50px 10px 12px; border: 1px solid #e7d49d; border-radius: 6px; background: #fffdf7; color: var(--ink); font: inherit; font-size: var(--text-md); line-height: 1.45; }
.ai-followup textarea:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px #f8eaca; }
.ai-followup .button { margin-top: 9px; padding: 9px 13px; font-size: var(--text-md); }
.ai-chat-attachment-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.ai-chat-attach-button { appearance: none; -webkit-appearance: none; position: absolute; right: 7px; bottom: 7px; z-index: 2; display: inline-grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #71827d; font: inherit; cursor: pointer; transition: color .16s ease, transform .16s ease; }
.ai-chat-attach-button:hover { border: 0; border-radius: 0; background: transparent; color: var(--teal-dark); }
.ai-chat-attach-button:focus-visible { outline: 2px solid rgba(50, 134, 108, .35); outline-offset: 2px; }
.ai-chat-attach-button:active svg { transform: scale(.94); }
.ai-chat-attach-button svg { width: 16px; height: 16px; transition: transform .16s ease; }
.ai-chat-attachment-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ai-chat-attachment-list[hidden] { display: none; }
.ai-chat-attachment-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 7px 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: #f7faf8; color: var(--ink); font-size: var(--text-xs); }
.ai-chat-attachment-chip span { min-width: 0; overflow-wrap: anywhere; }
.ai-chat-attachment-remove { flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: var(--font-size-18px); line-height: 1; cursor: pointer; }
.ai-chat-attachment-remove:hover { background: #eaf2ee; color: var(--ink); }
.ai-chat-attachment-hint { color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.ai-followup-answer { margin: 12px 0 0; padding: 14px 16px; border-left: 3px solid var(--teal); background: #f4faf7; color: var(--ink); font-size: var(--text-md); line-height: 1.55; }
.ai-provider-signature { font-size: inherit; font-weight: inherit; vertical-align: baseline; }
.ai-followup-answer p { margin: 0 0 12px; }
.ai-followup-answer p:last-child { margin-bottom: 0; }
.ai-followup-answer .ai-answer-heading { margin-bottom: 3px; }
.ai-followup-answer .ai-answer-dash { margin-left: 8px; }
.ai-followup-answer h4 { margin: 16px 0 7px; color: var(--teal-dark); font-size: var(--font-size-17px); line-height: 1.35; }
.ai-followup-answer h4:first-child { margin-top: 0; }
.ai-followup-answer ol, .ai-followup-answer ul { margin: 8px 0 14px; padding-left: 25px; }
.ai-followup-answer li { margin: 6px 0; padding-left: 3px; }
.ai-followup-answer strong { color: var(--teal); font-weight: 700; }
.ai-followup-answer code { padding: 1px 5px; border-radius: 4px; background: #e5f1ed; color: var(--ink); font-family: inherit; }
.ai-source { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.ai-source.is-online { background: #e7f5ed; color: #19724c; }
.ai-source.is-offline { background: #fff3d8; color: #8a6418; }

.result-section { display: grid; grid-template-columns: 220px 1fr; gap: 35px; margin-bottom: 24px; border: 0; background: var(--ink); color: #fff; }
.result-score { padding-right: 28px; border-right: 1px solid rgba(255, 255, 255, .14); }
.result-score .eyebrow { color: #94d2c3; }
.result-score > strong { display: block; margin: 16px 0; font-size: var(--font-size-54px); letter-spacing: -2px; }
.result-score > strong small { color: #83a59f; font-size: var(--text-lg); }
.result-content h2 { margin-bottom: 8px; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-26px); font-weight: 400; }
.result-content > p { color: #aec4bf; font-size: var(--text-xs); line-height: 1.6; }
.topic-results { display: flex; gap: 9px; margin: 21px 0; }
.topic-results div { min-width: 100px; padding: 11px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; background: rgba(255, 255, 255, .05); }
.topic-results span, .topic-results strong { display: block; font-size: var(--text-xs); }
.topic-results strong { margin-top: 5px; color: #94d2c3; font-size: var(--font-size-15px); }
.recommendation { display: flex; gap: 11px; padding: 13px; border-left: 3px solid var(--coral); background: rgba(255, 255, 255, .05); }
.recommendation > span { color: #f0bd55; }
.recommendation strong { font-size: var(--text-xs); }
.recommendation p { margin: 5px 0 0; color: #aec4bf; font-size: var(--text-xs); }
.level-page { width: 100%; max-width: none; margin: 0; padding: 42px 0 80px; }
.back-link { display: inline-block; margin-bottom: 22px; color: var(--teal); font-size: var(--text-sm); font-weight: 600; }
.level-header { padding: 34px 38px; border: 1px solid #b9ddd3; border-radius: 14px; background: var(--mint); }
.level-header h1 { margin: 10px 0 8px; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-32px); font-weight: 400; }
.level-header p { max-width: 620px; margin-bottom: 18px; color: #55726e; font-size: var(--text-md); }
.level-content { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; margin-top: 22px; }
.level-content > div, .level-next { padding: 25px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.level-content h2 { margin: 8px 0 17px; font-family: Merriweather, Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
.level-topic { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 15px 0; border-bottom: 1px solid #edf3f0; }
.level-topic > span { display: block; color: var(--coral); font-family: Merriweather, Georgia, serif; font-size: var(--text-sm); }
.level-topic strong, .level-topic small { display: block; }
.level-topic strong { font-size: var(--font-size-15px); }
.level-topic small { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.learning-objective { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; white-space: pre-line; word-break: break-word; }
.learning-objective-label { font-weight: 700; color: var(--ink); }
.curriculum-chapter { align-items: flex-start; }
.curriculum-chapter > span { min-width: 0; }
.curriculum-chapter p { margin: 10px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.65; white-space: normal; }
.level-next { align-self: start; background: #fffaf0; border-color: #ecdcae; }
.level-next h2 { font-size: var(--font-size-22px); }
.level-next p { color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.level-next > strong { display: block; margin: 18px 0; color: var(--coral); font-size: var(--text-xl); }
.student-history-panel { margin-top: 22px; padding: 25px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.student-history-panel h2 { margin: 8px 0 0; font-family: Merriweather, Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
.student-history-list { display: grid; gap: 0; margin-top: 16px; }
.student-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid #edf3f0; }
.student-history-row:last-child { border-bottom: 0; }
.student-history-row strong, .student-history-row small { display: block; }
.student-history-row strong { font-size: var(--font-size-15px); }
.student-history-row small { margin-top: 5px; color: var(--muted); font-size: var(--text-xs); }
.student-history-score { min-width: 110px; text-align: right; }
.student-history-score b, .student-history-score span { display: block; }
.student-history-score b { color: var(--teal); font-size: var(--text-lg); }
.student-history-score span { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.student-history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.student-history-actions .button { padding: 8px 11px; font-size: var(--text-xs); }
.student-history-empty { margin: 16px 0 0; color: var(--muted); font-size: var(--text-sm); }
.history-copy-status { display: block; min-height: 18px; margin-top: 10px; color: var(--teal); font-size: var(--text-xs); }
.student-class-chat { padding: 34px 0 60px; }
.class-chat-heading { margin: 16px 0 20px; }
.class-chat-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); min-height: min(720px, calc(100vh - 260px)); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.class-chat-room-panel { min-width: 0; border-right: 1px solid var(--line); background: var(--surface-soft); }
.class-chat-panel-heading { padding: 19px 18px 15px; border-bottom: 1px solid var(--line-soft); }
.class-chat-panel-heading h2, .class-chat-thread-header h2 { margin: 6px 0 0; font-family: Merriweather, Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
.class-chat-room-list { display: grid; gap: 3px; padding: 8px; }
.class-chat-room { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; }
.class-chat-room:hover, .class-chat-room.is-active { border-color: var(--line); background: var(--surface); }
.class-chat-room.is-active { box-shadow: inset 3px 0 var(--teal); }
.class-chat-room-icon { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 6px; background: var(--mint); color: var(--teal-dark); font-weight: 700; }
.class-chat-room-copy { min-width: 0; }
.class-chat-room-copy strong, .class-chat-room-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-chat-room-copy strong { font-size: var(--text-sm); }
.class-chat-room-copy small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.class-chat-thread { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.class-chat-thread-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.class-chat-thread-header .eyebrow { color: var(--muted); }
.class-chat-connection { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xs); }
.class-chat-connection[data-state="connected"] { color: var(--teal); }
.class-chat-connection[data-state="error"], .class-chat-connection[data-state="reconnecting"] { color: var(--coral-dark); }
.class-chat-messages { display: flex; flex-direction: column; gap: 10px; min-height: 320px; max-height: 100%; overflow-y: auto; margin: 0; padding: 20px; list-style: none; }
.class-chat-empty-thread { margin: auto; color: var(--muted); font-size: var(--text-sm); text-align: center; }
.class-chat-message { position: relative; align-self: flex-start; width: fit-content; max-width: min(78%, 620px); padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--surface-soft); overflow-wrap: anywhere; }
.class-chat-message.is-mine { align-self: flex-end; border-color: #c8e8de; background: #eff9f5; }
.class-chat-message-meta { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: var(--text-xs); }
.class-chat-message-meta strong { color: var(--teal-dark); }
.class-chat-message p { margin: 4px 0 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; }
.class-chat-delete { display: block; margin: 5px 0 -3px auto; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.class-chat-delete:hover { color: var(--coral-dark); text-decoration: underline; }
.class-chat-composer { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.class-chat-composer textarea { display: block; width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.class-chat-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; color: var(--muted); font-size: var(--text-xs); }
.class-chat-empty { padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.class-chat-empty h2 { margin: 0; font-family: Merriweather, Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
.class-chat-empty p { margin: 8px 0 0; color: var(--muted); font-size: var(--text-sm); }
.class-voice-moderator { margin: 18px 0 24px; }
.class-voice-moderator-heading { display: grid; grid-template-columns: auto minmax(180px, 340px); align-items: center; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: var(--text-sm); }
.class-voice-moderator-heading select { width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.class-voice-panel { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: #f7fbf9; }
.class-voice-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.class-voice-controls > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.class-voice-controls .button { padding: 7px 10px; font-size: var(--text-xs); }
.class-voice-join { display: inline-flex; align-items: center; gap: 7px; }
.class-voice-join-icon { color: var(--coral-dark); font-size: 16px; line-height: 1; animation: class-voice-attention 1.4s ease-in-out infinite; }
@keyframes class-voice-attention { 0%, 100% { opacity: .45; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .class-voice-join-icon { animation: none; } }
.class-voice-status { color: var(--muted); font-size: var(--text-xs); }
.class-voice-status[data-state="connected"], .class-voice-status[data-state="speaking"] { color: var(--teal); }
.class-voice-status[data-state="error"], .class-voice-status[data-state="reconnecting"] { color: var(--coral-dark); }
.class-voice-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.class-voice-participants { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.class-voice-participants > li { color: var(--muted); font-size: var(--text-xs); }
.class-voice-participant { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink) !important; }
.class-voice-participant strong { font-size: var(--text-xs); }
.class-voice-participant span { color: var(--muted); }
.class-voice-participant span::before { content: "· "; }
.class-voice-permission { padding: 2px 0; border: 0; background: transparent; color: var(--teal-dark); font-size: 11px; font-weight: 700; }
.class-voice-permission:hover { color: var(--coral-dark); text-decoration: underline; }
.class-voice-audio { display: none; }
.quiz-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 22px; align-items: start; }
.quiz-layout-video { grid-template-columns: minmax(0, 1fr); }
.chapter-menu, .quiz-guide, .quiz-layout .exam-section { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.chapter-menu { position: sticky; top: 20px; overflow: hidden; }
.chapter-menu-heading { padding: 20px 18px 14px; border-bottom: 1px solid #edf3f0; }
.chapter-menu-heading h2 { margin: 7px 0 0; font-family: Merriweather, Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
.chapter-menu-list { display: grid; }
.chapter-menu-item { display: grid; grid-template-columns: 32px 1fr 16px; align-items: center; gap: 8px; width: 100%; padding: 13px 15px; border: 0; border-bottom: 1px solid #edf3f0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.chapter-menu-item:hover, .chapter-menu-item:focus-visible { background: #f4faf7; outline: 0; }
.chapter-menu-item:last-child { border-bottom: 0; }
.chapter-menu-number { color: var(--coral); font: 600 var(--text-xs) Merriweather, Georgia, serif; }
.chapter-menu-title { color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.chapter-menu-item:hover .chapter-menu-title, .chapter-menu-item:focus-visible .chapter-menu-title { color: var(--ink); }
.chapter-menu-arrow { color: var(--teal); font-size: var(--text-md); opacity: .65; }
.chapter-progress { border-top: 1px solid #edf3f0; padding: 15px; }
.chapter-progress-heading { color: var(--teal); font-size: var(--text-xs); font-weight: 700; letter-spacing: 1px; }
.chapter-progress-summary { margin: 7px 0 10px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.chapter-progress-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.chapter-progress-row { display: grid; grid-template-columns: 20px 1fr; gap: 6px; padding: 6px 0; border-bottom: 1px solid #edf3f0; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.chapter-progress-row span:first-child { color: var(--coral); font-weight: 700; }
.chapter-progress-row b { grid-column: 2; color: var(--teal); font-size: var(--text-xs); }
.chapter-progress-empty { color: var(--muted); font-size: var(--text-xs); }
.quiz-workspace { display: grid; gap: 17px; min-width: 0; }
.quiz-workspace .level-header { margin: 0; }
.quiz-guide { margin-bottom: 17px; padding: 20px 22px; background: #fffaf0; border-color: #ecdcae; }
.quiz-guide h2 { margin: 7px 0 6px; font-family: Merriweather, Georgia, serif; font-size: var(--text-xl); font-weight: 400; }
.quiz-guide p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.quiz-layout .exam-section { margin-bottom: 0; }
.video-quiz-workspace .exam-section { grid-row: 2; width: 100%; box-sizing: border-box; }
.video-quiz-workspace .quiz-guide { grid-row: 3; }

.account-page { display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 82px; max-width: 880px; min-height: 680px; margin: 0 auto; }
.account-intro h1 { margin: 16px 0; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-40px); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.account-intro p { max-width: 300px; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.account-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.account-heading h2 { margin: 7px 0 5px; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-26px); font-weight: 400; }
.account-heading p { color: var(--muted); font-size: var(--text-sm); }
.wallet-card { position: relative; overflow: hidden; }
.wallet-card::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--coral); content: ''; }
.wallet-heading { padding-bottom: 18px; border-bottom: 1px solid #edf3f0; }
.wallet-balance-display { display: flex; align-items: baseline; gap: 7px; margin: 8px 0 4px; }
.wallet-balance-display strong { color: var(--teal); font-size: var(--font-size-34px); font-weight: 700; letter-spacing: 0; }
.wallet-balance-display span { color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.wallet-heading p { margin-bottom: 0; }
.wallet-transfer-section { margin-top: 18px; padding: 17px 0 8px; border-bottom: 1px solid #edf3f0; }
.wallet-transfer-section h2 { margin: 0 0 5px; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-19px); font-weight: 400; }
.wallet-transfer-section > p, .wallet-transfer-empty { margin: 0 0 10px; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.wallet-transfer-section .wallet-form { padding-top: 0; }
.wallet-transfer-section .wallet-form > label:first-child { margin-top: 8px; }
.wallet-transfer-section .account-submit { margin-top: 14px; }
.wallet-transfer-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.wallet-transfer-history h3 { margin: 0 0 8px; color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.wallet-transfer-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #edf3f0; font-size: var(--text-xs); }
.wallet-transfer-history-item span { min-width: 0; }
.wallet-transfer-history-item small { display: block; margin-top: 3px; color: var(--muted); }
.wallet-transfer-history-item strong { flex: 0 0 auto; color: var(--coral-dark); }
.wallet-transfer-history-item.is-collapsed { display: none; }
.wallet-transfer-history-toggle { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--teal); font: 600 var(--text-xs) 'Segoe UI', Tahoma, sans-serif; cursor: pointer; }
.wallet-transfer-history-toggle:hover { color: var(--coral-dark); text-decoration: underline; }
.wallet-form { padding-top: 6px; }
.wallet-form > label:first-child { margin-top: 14px; }
.wallet-minimum { margin: 8px 0 17px; color: var(--muted); font-size: var(--text-xs); }
.wallet-minimum strong { color: var(--teal); }
.wallet-payment-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 5px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfa; color: var(--muted); font-size: var(--text-xs); }
.wallet-payment-total strong { color: var(--ink); font-size: var(--text-md); }
.account-card .wallet-consent { display: flex; margin: 17px 0 4px; color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.wallet-consent input { margin-top: 1px; }
.wallet-consent span { flex: 1; }
.wallet-back-link { padding-top: 16px; border-top: 1px solid #edf3f0; }
.account-card form > label { display: block; margin: 15px 0 6px; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.account-input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: 0; background: var(--surface); color: var(--ink); font-size: var(--text-xs); transition: border-color .18s ease, box-shadow .18s ease; }
.account-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--mint); }
.profile-birth-date-control { position: relative; }
.profile-birth-date-control .account-input { padding-right: 50px; }
.profile-birth-date-picker { position: absolute; top: 0; right: 0; z-index: 1; width: 44px; height: 100%; opacity: 0; cursor: pointer; }
.profile-birth-date-calendar { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 40px; height: calc(100% - 4px); padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--teal); cursor: pointer; }
.profile-birth-date-calendar svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profile-birth-date-calendar:hover { background: var(--mint); }
.role-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.role-options label { margin: 0 !important; cursor: pointer; }
.role-options input { position: absolute; opacity: 0; }
.role-options label span { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.role-options input:checked + span { border-color: var(--coral); background: #fff5f2; }
.role-options b { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 5px; border-radius: 5px; background: var(--mint); color: var(--teal); font-size: var(--text-xs); }
.role-options strong, .role-options small { display: block; }
.role-options strong { margin-top: 7px; font-size: var(--text-sm); }
.role-options small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); line-height: 1.3; }
.account-submit { width: 100%; margin-top: 21px; }
.account-switch { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: var(--text-xs); }
.account-switch a { color: var(--teal); font-weight: 700; }
.form-alert, .form-success { margin: 12px 0; padding: 11px 13px; border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.5; }
.form-alert { color: #a94c3e; background: #fff0ed; }
.form-success { color: var(--teal); background: var(--mint); }
.field-error { display: block; margin-top: 4px; color: var(--coral); font-size: var(--text-xs); }
.profile-email-note { display: block; margin: -4px 0 12px; color: var(--muted); font-size: var(--text-xs); }
.functional-page, .lecturer-page { width: 100%; margin: 0; padding: 42px 0 80px; }
.question-bank-page { width: 100%; max-width: none; }
.functional-header, .lecturer-header { margin-bottom: 22px; }
.functional-header h1, .lecturer-header h1 { margin-bottom: 8px; }
.functional-panel, .lecturer-panel { padding: 26px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.functional-table-wrap, .admin-curriculum-table-wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.functional-table, .admin-table, .student-progress-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; color: var(--ink); font-size: var(--text-sm); }
.functional-table th, .functional-table td, .admin-table th, .admin-table td, .student-progress-table th, .student-progress-table td { padding: 12px 10px; }
.functional-table th, .admin-table th, .student-progress-table th { border-bottom: 2px solid var(--line); color: var(--muted); font-size: var(--text-xs); text-align: left; white-space: nowrap; }
.functional-table td, .admin-table td { border-bottom: 1px solid #edf3f0; vertical-align: middle; word-break: break-word; overflow-wrap: anywhere; }
.functional-table .table-number, .admin-table .table-number, .student-progress-table .table-number { text-align: center; font-variant-numeric: tabular-nums; }
.table-number-input { text-align: center; font-variant-numeric: tabular-nums; }
.functional-table tbody tr:last-child td, .admin-table tbody tr:last-child td { border-bottom: 0; }
.functional-table tbody tr:hover, .admin-table tbody tr:hover { background: #f8fbfa; }
.functional-action-group, .admin-curriculum-action-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
.functional-action-form, .admin-curriculum-action-form { display: inline-flex; margin: 0; }
.functional-action-chip, .admin-curriculum-action-chip { min-height: 28px; padding: 6px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.lecturer-empty { padding: 28px; border: 1px dashed #b9ddd3; border-radius: 8px; background: #f4faf7; color: var(--muted); text-align: center; font-size: var(--font-size-15px); }
.student-progress-table-wrap { max-height: 620px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.admin-table-wrap, .student-progress-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.student-progress-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.student-progress-heading-actions { display: inline-flex; align-items: center; gap: 10px; }
.student-progress-expand { display: inline-grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); color: var(--muted); cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.student-progress-expand:hover { border-color: #a7d7ba; background: var(--mint); color: var(--teal); transform: translateY(-1px); }
.student-progress-expand span { font-size: var(--text-md); line-height: 1; }
.student-progress-panel.is-expanded { position: fixed; z-index: 1050; inset: 0; overflow: auto; margin: 0; padding: 24px; border: 0; border-radius: 0; background: var(--surface); }
.student-progress-panel.is-expanded .student-progress-table-wrap { max-height: calc(100vh - 130px); }
.student-progress-table { width: 100%; min-width: 900px; border-collapse: collapse; color: var(--ink); font-size: var(--text-sm); }
.student-progress-table th { padding: 12px 13px; border-bottom: 2px solid var(--line); color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-align: left; white-space: nowrap; }
.student-progress-sort-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.student-progress-sort-link:hover { color: var(--teal); }
.student-progress-sort-link::after { color: #9bb5ad; content: ''; }
.student-progress-table td { padding: 16px 13px; border-bottom: 1px solid #edf3f0; vertical-align: middle; }
.student-progress-table tbody tr:hover { background: #f8fbfa; }
.student-progress-table td strong, .student-progress-table td small { display: block; }
.student-progress-table td small { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.student-graded-form { margin-top: 6px; }
.student-graded-form label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.student-graded-form input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.admin-user-edit-form, .admin-user-action-form, .admin-user-approve-form { display: grid; gap: 8px; min-width: 180px; }
.admin-user-edit-cell { min-width: 180px; }
.admin-user-actions-cell { min-width: 180px; vertical-align: top !important; }
.admin-user-wallet-form { min-width: 210px; max-width: 300px; }
.admin-user-wallet-form > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-user-wallet-form .admin-note-input { flex: 1 1 110px; min-width: 90px; max-width: 140px; }
.admin-user-wallet-form button { flex: 0 0 auto; }
.admin-user-edit-form .admin-note-input, .admin-user-action-form .admin-note-input { min-height: 32px; padding: 7px 9px; font-size: var(--text-xs); }
.admin-user-edit-form .button, .admin-user-action-form .button, .admin-user-approve-form .button,
.admin-user-wallet-form button, .admin-user-edit-trigger {
    display: inline-flex;
    width: auto;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
.admin-user-actions-cell > form + form { margin-top: 2px; }
.admin-user-wallet-form button { padding: 6px 9px; }
.admin-user-filter-panel { margin-bottom: 22px; }
.admin-user-filter-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.admin-user-filter-form > div { display: grid; gap: 6px; }
.admin-user-filter-form label { display: grid; gap: 6px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; }
.admin-user-filter-form .admin-user-search-field { flex: 1 1 260px; min-width: 180px; }
.admin-user-filter-form .admin-user-class-field { flex: 0 1 180px; min-width: 140px; }
.admin-user-filter-form .admin-user-role-field { flex: 0 1 160px; min-width: 120px; }
.admin-user-filter-form .account-input { width: 100%; min-width: 0; }
.student-progress-panel .student-progress-select-filter { flex: 0 0 140px; min-width: 140px; }
.admin-user-edit-trigger { min-width: 110px; }

@media (max-width: 700px) {
    .admin-user-filter-form { align-items: stretch; }
    .admin-user-filter-form > div,
  .solar-inspired-hero h1 { font-size: 36px; }
    .admin-user-filter-form .admin-user-class-field,
    .admin-user-filter-form .admin-user-role-field {

@media (max-width: 380px) {
  .solar-inspired-hero h1 { font-size: 32px; }
}
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
    }
}
.admin-user-edit-dialog { width: min(560px, 100%); }
.admin-user-edit-form-full { display: grid; gap: 12px; }
.admin-user-edit-form-full label { display: grid; gap: 6px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; }
.admin-user-edit-form-full .account-input { min-height: 40px; }
.admin-sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.admin-sort-link:hover { color: var(--teal); }
.admin-note-input { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font-size: var(--text-xs); }
.button-danger, .btn-danger { border: 1px solid #edc4bd; background: #fff2ef; color: #a94c3e; }
.button-danger:hover, .btn-danger:hover { background: #ffe4df; color: #8f392d; }
.lecturer-exam-history { display: grid; gap: 10px; min-width: 300px; }
.lecturer-exam-history-item { padding-bottom: 10px; border-bottom: 1px solid #edf3f0; }
.lecturer-exam-history-item:last-child { padding-bottom: 0; border-bottom: 0; }
.lecturer-exam-history-item strong, .lecturer-exam-history-item small { display: block; }
.lecturer-exam-history-item strong { font-size: var(--text-xs); }
.lecturer-exam-history-item small { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.lecturer-exam-history-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: var(--text-xs); }
.lecturer-exam-history-actions a, .lecturer-exam-history-actions button { padding: 0; border: 0; background: transparent; color: var(--teal); font: inherit; cursor: pointer; }
.lecturer-exam-history-actions a:hover, .lecturer-exam-history-actions button:hover { color: var(--coral); text-decoration: underline; }
.progress-value { display: flex; align-items: baseline; gap: 8px; }
.progress-value strong { color: var(--teal); font-size: var(--text-md); }
.progress-value span { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.progress-track { width: 150px; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 10px; background: #e8f1ee; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.chapter-settings-panel { margin-top: 22px; }
.assessment-subject-groups { display: grid; gap: 20px; }
.assessment-subject-group { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #f8fbfa; box-shadow: 0 2px 10px rgba(20, 70, 55, .03); }
.assessment-subject-group[open] { border-color: #a7d7ba; }
.assessment-subject-group summary { list-style: none; cursor: pointer; }
.assessment-subject-group summary::-webkit-details-marker { display: none; }
.assessment-subject-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f2faf6 0%, #eef9f3 100%); }
.assessment-subject-group:not([open]) .assessment-subject-header { border-bottom: 0; }
.assessment-subject-group summary::after { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 8px; border: 1px solid #b9ddd3; border-radius: 50%; background: rgba(255,255,255,.8); color: var(--teal); content: '+'; font-size: var(--text-md); font-weight: 700; transition: transform .18s ease; }
.assessment-subject-group[open] summary::after { content: '–'; }
.assessment-subject-pill { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid #9acfc1; border-radius: 999px; background: rgba(150, 207, 191, .15); color: var(--teal); font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.assessment-subject-meta { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.assessment-subject-meta strong { display: block; color: var(--ink); font-size: var(--text-xl); }
.assessment-subject-meta span { color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.assessment-subject-header small { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.assessment-chapter-list { display: grid; gap: 14px; padding: 16px; }
.assessment-subject-group:not([open]) .assessment-chapter-list { display: none; }
.assessment-chapter-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.assessment-chapter-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.assessment-chapter-header h3 { min-width: 0; overflow-wrap: anywhere; }
.assessment-chapter-badge { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid #b9ddd3; border-radius: 999px; background: #eef9f4; color: var(--teal); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.assessment-chapter-header h3 { margin: 0; color: var(--ink); font-size: var(--text-md); line-height: 1.4; }
.chapter-setting-form { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto; align-items: end; gap: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f7faf9; }
.chapter-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto; align-items: end; gap: 16px; padding: 12px 14px; border: 1px solid #dfeae6; border-radius: 10px; background: #f7faf9; }
.chapter-setting-name strong, .chapter-setting-name span { display: block; }
.chapter-setting-name strong { font-size: var(--text-sm); }
.chapter-setting-name span { margin-top: 5px; color: var(--muted); font-size: var(--text-xs); }
.chapter-setting-form label,
.chapter-setting-row label,
.chapter-score-formula label { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.chapter-setting-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; }
.chapter-setting-toggle input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.chapter-limit-input,
.chapter-score-formula input { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.chapter-limit-input:focus,
.chapter-score-formula input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--mint); outline: none; }
.chapter-setting-form .button,
.chapter-setting-row .button { padding: 9px 12px; font-size: var(--text-xs); white-space: nowrap; }
.chapter-score-formula { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
.chapter-score-formula label { display: grid; gap: 4px; }
.chapter-score-formula input { min-height: 38px; }
@media (max-width: 980px) {
    .chapter-setting-form { grid-template-columns: minmax(0, 1fr) 1fr 1fr; }
    .chapter-score-formula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chapter-setting-form .button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 700px) {
    .chapter-setting-form,
    .chapter-setting-row { grid-template-columns: 1fr; }
    .chapter-setting-form .button,
    .chapter-setting-row .button { width: 100%; justify-self: stretch; }
    .chapter-score-formula { grid-template-columns: 1fr; }
    .assessment-subject-header { align-items: flex-start; flex-wrap: wrap; }
    .assessment-subject-header small { flex-basis: 100%; }
    .admin-question-row { grid-template-columns: 1fr; }
    .admin-question-row .chapter-setting-name,
    .admin-question-row .admin-generation-progress { grid-column: 1; }
    .admin-question-row .button { width: 100%; }
}
.question-bank-panel { margin-top: 22px; }
.question-bank-program-select { display: grid; grid-template-columns: 150px minmax(240px, 560px) minmax(190px, 1fr); align-items: center; gap: 12px; margin: 3px 0 16px; }
.question-bank-program-select label { color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.question-bank-program-select select { width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.question-bank-admin-controls { --admin-program-dropdown-width: min(560px, calc(100% - 190px)); display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 12px; margin: 2px 0 12px; padding: 2px 0 12px; border-bottom: 1px solid var(--line-soft); }
.question-bank-admin-controls > label { color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.question-bank-admin-controls > form { min-width: 0; margin: 0; }
.question-bank-admin-controls > form > select { width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.question-bank-admin-program-form { display: grid; grid-template-columns: var(--admin-program-dropdown-width) auto; align-items: center; gap: 10px; }
.question-bank-admin-program-form .question-bank-bulk-review-toolbar { display: grid; justify-items: end; gap: 6px; }
.question-bank-admin-program-form .question-bank-bulk-review-toolbar progress { width: min(100%, 240px); }
.question-bank-admin-controls > form:not(.question-bank-admin-program-form) > select { width: var(--admin-program-dropdown-width); }
.question-bank-admin-controls .admin-question-bank-bulk-controls { display: flex; gap: 8px; }
.question-bank-admin-controls .admin-question-bank-bulk-controls select { flex: 1; min-width: 0; min-height: 40px; padding: 7px 10px; }
.question-bank-exclusion-control.is-context-required { color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 575.98px) {
  .question-bank-program-select { grid-template-columns: 1fr; gap: 6px; }
  .question-bank-admin-controls { --admin-program-dropdown-width: 100%; grid-template-columns: 1fr; gap: 4px; }
  .question-bank-admin-program-form { grid-template-columns: 1fr; }
  .question-bank-admin-program-form .question-bank-bulk-review-toolbar { grid-column: 1; justify-items: start; }
  .question-bank-admin-controls > form { margin-bottom: 4px; }
  .question-bank-admin-controls .admin-question-bank-bulk-controls { flex-direction: column; }
}
.question-bank-bulk-review-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; margin: 0; }
.question-bank-program-select .question-bank-bulk-review-toolbar { display: grid; justify-items: end; gap: 6px; }
.question-bank-program-select .question-bank-bulk-review-toolbar progress { width: min(100%, 240px); }
.question-bank-bulk-review-toolbar small { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.question-bank-bulk-review-toolbar.is-loading small { color: #b42318; font-weight: 700; }
.question-bank-bulk-review-toolbar.is-loading small::before,
.question-bank-gemini-loading::before { content: ''; flex: 0 0 15px; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: question-bank-review-spin .75s linear infinite; }
.question-bank-bulk-review-toolbar.is-loading small { display: inline-flex; align-items: center; gap: 8px; }
.question-bank-bulk-review-toolbar progress { appearance: none; flex: 0 1 240px; width: min(240px, 100%); height: 14px; overflow: hidden; border: 0; border-radius: 999px; background: #e8efed; }
.question-bank-bulk-review-toolbar progress::-webkit-progress-bar { border-radius: 999px; background: #e8efed; }
.question-bank-bulk-review-toolbar progress::-webkit-progress-value { border-radius: 999px; background: #b42318; transition: width .2s ease; }
.question-bank-bulk-review-toolbar progress::-moz-progress-bar { border-radius: 999px; background: #b42318; }
.question-bank-gemini-loading { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 7px 10px; border-left: 3px solid #b42318; border-radius: 3px; background: #fff2ef; color: #b42318; font-weight: 700; }
@keyframes question-bank-review-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .question-bank-bulk-review-toolbar.is-loading small::before, .question-bank-gemini-loading::before { animation: none; border-right-color: currentColor; } }
.admin-question-bank-list { display: grid; gap: 16px; }
.admin-question-bank-subject { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.admin-question-bank-subject > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; color: var(--ink); cursor: pointer; list-style: none; }
.admin-question-bank-subject > summary::-webkit-details-marker { display: none; }
.admin-question-bank-subject > summary span { display: grid; gap: 4px; min-width: 0; }
.admin-question-bank-subject > summary small { color: var(--muted); font-size: var(--text-xs); }
.admin-question-bank-subject > summary b { flex: 0 0 auto; color: var(--teal); font-size: var(--text-xs); white-space: nowrap; }
.admin-question-bank-subject > .question-bank-chapters { padding: 0 12px 12px; }
.admin-question-bank-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 14px; color: var(--muted); font-size: var(--text-xs); }
.admin-question-bank-meta a { color: var(--teal); font-weight: 700; }
.admin-question-bank-warning { display: inline-flex; align-items: center; gap: 4px; color: #a94c3e; font-weight: 700; }
.admin-question-bank-bulk { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 4px 0 20px; padding: 16px 0; border-block: 1px solid var(--line-soft); }
.admin-question-bank-bulk-copy { min-width: 200px; }
.admin-question-bank-bulk-copy strong { color: var(--ink); }
.admin-question-bank-bulk-copy p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-sm); }
.admin-question-bank-bulk form { display: grid; gap: 6px; width: min(100%, 520px); }
.admin-question-bank-bulk form > label { color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.admin-question-bank-bulk-controls { display: flex; gap: 8px; }
.admin-question-bank-bulk-controls select { flex: 1; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.admin-question-bank-bulk-controls button { flex: 0 0 auto; }
.admin-question-bank-bulk-controls button:disabled { cursor: not-allowed; opacity: .55; }
.admin-question-bank-bulk form > small { color: var(--muted); font-size: var(--text-xs); }
.admin-question-bank-item .question-bank-item-header { padding-right: 48px; }
.admin-question-bank-item .question-bank-delete-form { top: 0; right: 0; }
.admin-question-bank-item .question-bank-delete-button { display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid #f0c5c0; border-radius: 50%; background: #fff1ef; color: #bd4f3f; box-shadow: 0 3px 8px rgba(189, 79, 63, .08); font-size: var(--text-md); line-height: 1; }
.admin-question-bank-item .question-bank-delete-button:hover { border-color: #e5a29a; background: #ffe4df; color: #a33f32; box-shadow: 0 5px 12px rgba(189, 79, 63, .14); transform: translateY(-1px); }
.admin-question-bank-item .question-bank-delete-button:focus-visible { outline: 3px solid rgba(215, 101, 81, .22); outline-offset: 2px; }
.question-bank-list { display: grid; gap: 14px; max-width: 100%; min-width: 0; overflow-x: auto; }
.question-authoring-panel { margin-top: 20px; border-top: 1px solid var(--line); }
.question-authoring-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 10px 4px; cursor: pointer; list-style: none; }
.question-authoring-summary::-webkit-details-marker { display: none; }
.question-authoring-summary::after { flex: 0 0 9px; width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); content: ''; transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; }
.question-authoring-panel[open] > .question-authoring-summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.question-authoring-summary-copy { display: grid; gap: 4px; }
.question-authoring-summary-copy strong { color: var(--ink); font-size: var(--text-lg); }
.question-authoring-summary .section-count { margin-left: auto; }
.question-authoring-content { padding: 4px 0 16px; }
.question-authoring-ai-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px 14px; }
.question-authoring-graph-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.question-authoring-graph-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.question-authoring-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.question-authoring-ai-tools > small { grid-column: 1 / -1; min-height: 1.25em; color: var(--muted); }
.question-authoring-form { display: grid; gap: 12px; margin-top: 18px; }
.question-authoring-form > .video-quiz-field,
.question-authoring-form > .question-diagram-json-editor { max-width: 100%; }
.question-authoring-form textarea.account-input { min-height: 78px; }
.question-authoring-form .question-diagram-json-editor textarea.account-input { min-height: 150px; font-family: Consolas, "Courier New", monospace; font-size: var(--text-xs); tab-size: 2; }
.question-authoring-preview { margin-top: 4px; }
.question-authoring-preview pre { max-width: 100%; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f7faf9; font-size: var(--text-xs); white-space: pre-wrap; }
.question-bank-chapter-filters { display: flex; align-items: end; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px 2px; }
.question-bank-chapter-filters label { display: grid; gap: 4px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.question-bank-chapter-filters select { min-width: 150px; min-height: 32px; padding: 5px 26px 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; font-weight: 500; }
.question-bank-chapter-filters [data-question-filter-count] { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.question-bank-item { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.question-bank-font-controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; margin-left: auto; }
.question-bank-font-controls .button { min-width: 34px; min-height: 30px; padding: 4px 7px; font-size: var(--text-sm); line-height: 1; }
.question-bank-font-controls output { min-width: 42px; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.question-bank-item-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-right: 76px; }
.question-bank-editable-header { align-items: center; padding-right: 0; }
.question-bank-editable-header > .question-bank-meta { flex: 1; }
.question-bank-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.question-bank-header-actions .question-exclusion-form,
.question-bank-header-actions .question-bank-delete-form,
.question-bank-header-actions .question-bank-gemini-form { position: static; margin: 0; }
.question-bank-header-actions .question-bank-edit-toggle { position: static; margin: 0; }
.question-bank-exclusion-control { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; color: var(--ink); cursor: pointer; font-size: var(--font-size-12px); font-weight: 600; white-space: nowrap; }
.question-bank-exclusion-control input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.question-bank-edit-form [data-question-edit-control]:disabled { cursor: default; }
.question-bank-edit-form textarea[data-question-edit-control]:disabled,
.question-bank-edit-form select[data-question-edit-control]:disabled,
.video-quiz-question-form textarea[data-question-edit-control]:disabled,
.video-quiz-question-form select[data-question-edit-control]:disabled { border-color: #a9c4bb; background: #e8f0ed; color: #244944; -webkit-text-fill-color: #244944; opacity: 1; }
.question-bank-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--text-xs); }
.question-bank-new-badge { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid #e9c47b; border-radius: 999px; background: #fff5dc; color: #70500e; font-size: 11px; font-weight: 800; }
.question-bank-delete-form { position: absolute; top: 0; right: 0; margin: 0; }
.question-bank-delete-button { min-height: 24px; padding: 5px 10px; border-radius: 999px; border-color: rgba(122, 139, 136, .18); background: rgba(17, 121, 100, .04); color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
.question-bank-delete-button:hover { border-color: rgba(17, 121, 100, .2); background: rgba(17, 121, 100, .08); }
.question-bank-header-actions .question-bank-delete-button { display: grid; place-items: center; flex: 0 0 26px; width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; border: 1px solid #f0c5c0; border-radius: 5px; background: #fff1ef; color: #bd4f3f; font-size: 0; }
.question-bank-header-actions .question-bank-delete-button:hover { border-color: #e5a29a; background: #ffe4df; color: #a33f32; }
.question-bank-header-actions .question-bank-delete-button svg { width: 14px; height: 14px; }
.question-bank-item h3 { margin: 10px 0 14px; font-size: var(--text-md); line-height: 1.5; }
.question-bank-gemini-review { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid #cfe3d8; border-radius: 6px; background: #f5faf7; color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }
.question-bank-gemini-review[hidden] { display: none; }
.question-bank-gemini-loading { color: #b42318; font-weight: 700; }
.question-bank-gemini-review h4, .question-bank-gemini-review p, .question-bank-gemini-review ul { margin: 0; }
.question-bank-gemini-review h4 { color: var(--teal-dark); font-size: var(--text-sm); }
.question-bank-gemini-review ul { display: grid; gap: 4px; padding-left: 20px; }
.question-bank-gemini-review .gemini-review-label { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.question-bank-gemini-review .gemini-review-suggestion { padding-top: 8px; border-top: 1px solid var(--line-soft); }
.question-bank-gemini-review .gemini-review-confidence { color: var(--muted); font-size: var(--text-xs); }
.question-bank-gemini-review .gemini-review-copy-button { display: none; place-items: center; box-sizing: border-box; flex: 0 0 16px; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin-top: 2px; padding: 0; }
.question-bank-gemini-review .gemini-review-copy-button svg { width: 12px; height: 12px; }
.question-bank-item.is-editing .gemini-review-copy-button { display: inline-grid; }
.question-bank-gemini-review li .gemini-review-copy-button { margin-left: 6px; vertical-align: middle; }
.question-bank-gemini-status { display: inline-flex; align-items: center; min-height: 19px; padding: 2px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.question-bank-gemini-status.is-current { border-color: #c6e1d2; background: #eaf6ef; color: #286b50; }
.question-bank-gemini-status.is-stale { border-color: #ead6a9; background: #fff7e5; color: #7a5a16; }
.question-bank-header-actions .question-bank-gemini-button { display: grid; place-items: center; flex: 0 0 26px; width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; gap: 0; border-radius: 5px; }
.question-bank-gemini-button svg { width: 14px; height: 14px; }
.question-bank-gemini-button:disabled { cursor: wait; opacity: .65; }
.question-bank-gemini-button[aria-busy="true"] svg { animation: question-bank-gemini-pulse .8s ease-in-out infinite alternate; }
@keyframes question-bank-gemini-pulse { to { opacity: .35; transform: scale(.8); } }
.question-bank-header-actions .question-bank-gemini-history-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: auto; min-width: 30px; min-height: 26px; height: 26px; padding: 0 4px; font-size: 10px; line-height: 1; }
.question-bank-gemini-history-button[hidden] { display: none; }
.question-bank-gemini-history-button svg { width: 13px; height: 13px; }
.question-bank-gemini-history { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: #fbfdfc; color: var(--ink); font-size: var(--text-sm); }
.question-bank-gemini-history[hidden] { display: none; }
.question-bank-gemini-history h4, .question-bank-gemini-history p { margin: 0; }
.question-bank-gemini-history h4 { color: var(--teal-dark); font-size: var(--text-sm); }
.question-bank-gemini-history .gemini-review-history-note { color: var(--muted); font-size: var(--text-xs); }
.question-bank-gemini-history-entry { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.question-bank-chapter .question-bank-gemini-history-entry summary { color: var(--muted); font-size: var(--font-size-12px); font-weight: 500; line-height: 1.45; cursor: pointer; }
.question-bank-gemini-history-entry-content { display: grid; gap: 8px; padding: 8px 0; }
.question-bank-gemini-snapshot { display: grid; gap: 5px; }
.question-bank-gemini-snapshot p, .question-bank-gemini-snapshot ul { margin: 0; }
.question-bank-gemini-snapshot ul { padding-left: 20px; }
.question-bank-gemini-history .question-bank-gemini-review { margin: 0; padding: 8px 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.question-bank-content-zoom { min-width: 0; zoom: var(--question-bank-content-zoom, 100%); }
.question-bank-options { display: grid; gap: 7px; }
.question-bank-option { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: var(--text-sm); }
.question-bank-option b { color: var(--teal); }
.question-bank-diagram { max-width: 500px; height: clamp(150px, 35vw, 230px); margin: 10px 0 16px; }

@media (max-width: 680px) {
  .admin-question-bank-bulk { align-items: stretch; flex-direction: column; gap: 12px; }
  .admin-question-bank-bulk-controls { flex-direction: column; }
  .question-authoring-summary { flex-wrap: wrap; gap: 8px 12px; }
  .question-authoring-summary .section-count { flex: 1; text-align: right; }
  .question-authoring-ai-tools { grid-template-columns: minmax(0, 1fr); }
  .question-authoring-ai-tools > small { grid-column: 1; }
  .question-authoring-ai-actions .button { flex: 1 1 190px; }
  .question-bank-chapter-filters { align-items: stretch; }
  .question-bank-chapter-filters label { flex: 1 1 145px; }
  .question-bank-chapter-filters select { width: 100%; }
  .question-bank-chapter-filters [data-question-filter-count] { flex-basis: 100%; margin: 0; }
}
.question-bank-option strong { color: var(--teal); font-size: var(--text-xs); white-space: nowrap; }
.question-bank-option.is-correct { border-color: #9acfc1; background: var(--mint); color: var(--ink); }
.video-quiz-question-panel { display: grid; gap: 12px; }
.video-quiz-question-panel > .section-heading { margin-bottom: 0; }
.video-quiz-version-note, .video-quiz-ready-note { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.video-quiz-generate-form { display: flex; align-items: center; gap: 12px; margin: 0; }
.video-quiz-generate-form span { color: var(--muted); font-size: var(--text-xs); }
.video-quiz-question-list { display: grid; gap: 10px; }
.video-quiz-question-item { display: grid; gap: 10px; }
.video-quiz-question-meta { align-items: center; }
.video-quiz-edit-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--teal-dark); cursor: pointer; font-size: var(--font-size-12px); font-weight: 700; white-space: nowrap; }
.video-quiz-edit-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--teal); }
.video-quiz-question-form [data-question-edit-control]:disabled { cursor: not-allowed; }
.video-quiz-question-form { display: grid; gap: 10px; margin: 0; }
.video-quiz-field { display: grid; gap: 4px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; }
.video-quiz-field textarea, .video-quiz-option-editor textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-weight: 400; line-height: 1.35; resize: vertical; }
.question-diagram-json-editor textarea { min-height: 110px; font-family: Consolas, "Courier New", monospace; font-size: var(--text-xs); tab-size: 2; }
.question-editor-explanation-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: start; gap: 10px; }
.question-editor-explanation-row .video-quiz-difficulty { gap: 4px; }
.question-editor-explanation-row .video-quiz-field textarea { box-sizing: border-box; height: 36px; min-height: 36px; }
.question-editor-explanation-row .video-quiz-difficulty select { box-sizing: border-box; width: 100%; }
.video-quiz-options-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.video-quiz-option-editor { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr); align-items: start; gap: 6px; min-width: 0; padding: 7px 8px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--surface-soft); }
.video-quiz-option-editor > strong { padding-top: 5px; color: var(--teal); font-size: var(--text-xs); }
.video-quiz-correct-choice { margin: 8px 0 0; accent-color: var(--teal); }
.video-quiz-question-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.video-quiz-difficulty { display: grid; gap: 6px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; }
.video-quiz-difficulty select { min-width: 84px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.video-quiz-enabled-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; color: var(--ink); font-size: var(--text-sm); }
.video-quiz-enabled-toggle input { accent-color: var(--teal); }
.video-quiz-question-controls .button { min-height: 36px; margin: 6px 0 6px auto; }
.question-bank-tab-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.question-bank-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--muted); cursor: pointer; font-size: var(--text-sm); font-weight: 700; }
.question-bank-tab span { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--teal); font-size: var(--text-xs); }
.question-bank-tab:hover, .question-bank-tab.is-active { border-color: #a7d7ba; background: #eaf7ee; color: #174b43; }
.question-bank-subject { display: none; }
.question-bank-subject.is-active { display: block; }
.question-bank-chapters { display: grid; gap: 12px; }
.question-bank-chapter { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); }
.question-bank-chapter summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 17px; color: #174b43; cursor: pointer; list-style: none; font-size: var(--text-md); font-weight: 700; }
.question-bank-chapter summary::-webkit-details-marker { display: none; }
.question-bank-chapter summary::before { width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); content: ''; }
.question-bank-chapter[open] summary::before { transform: rotate(45deg); }
.question-bank-chapter summary span { flex: 1; }
.question-bank-chapter summary b { color: var(--muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.question-bank-chapter > .question-bank-list { padding: 0 14px 14px; }
.question-bank-chapter .question-bank-item { background: var(--surface); }
.question-attachment-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto auto auto; align-items: end; gap: 10px; margin: 0 0 16px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-soft); }
.question-attachment-form > * { min-width: 0; }
.question-attachment-form > label { display: block; min-width: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.35; }
.question-attachment-form .account-input { box-sizing: border-box; margin-top: 6px; min-height: 42px; font-size: var(--text-sm); }
.question-attachment-form .question-pdf-input { margin-top: 6px; font-size: var(--text-sm); line-height: 42px; white-space: nowrap; }
.question-attachment-form .question-pdf-input::file-selector-button { font-size: var(--text-sm); }
.question-attachment-form .question-attachment-check { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; white-space: nowrap; }
.question-attachment-form .question-attachment-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.question-attachment-form .button { min-height: 42px; padding: 10px 14px; font-size: var(--text-sm); white-space: nowrap; }
.question-attachment-form small { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-sm); line-height: 1.35; }
.chapter-settings-note { margin: 0 0 12px; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.chapter-settings-list { display: grid; gap: 10px; }
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab-button { padding: 10px 13px; border: 1px solid var(--line); border-radius: 7px; background: #f8fbfa; color: var(--muted); cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.tab-button:hover, .tab-button.is-active { border-color: #9acfc1; background: var(--mint); color: var(--ink); }
.tab-list-chapters { margin-bottom: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chapter-tab-button { border-radius: 6px; font-size: var(--text-xs); font-weight: 500; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.subject-tab-panel { padding-top: 6px; }
.chapter-tab-panel { padding: 18px 0 4px; }
.chapter-tab-panel .chapter-setting-name { margin-bottom: 14px; }
.chapter-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto; align-items: end; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfa; }
.chapter-setting-name strong, .chapter-setting-name span { display: block; }
.chapter-setting-name strong { font-size: var(--text-sm); }
.chapter-setting-name span { margin-top: 5px; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.chapter-setting-row label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.chapter-limit-input { display: block; box-sizing: border-box; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.chapter-setting-row .button { padding: 9px 12px; font-size: var(--text-xs); white-space: nowrap; }
.admin-message { margin: 18px 0; font-size: var(--text-sm); }
.admin-question-list { display: grid; gap: 10px; }
.admin-subject-tab-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.admin-subject-tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); cursor: pointer; text-align: left; }
.admin-subject-tab:hover, .admin-subject-tab.is-active { border-color: #a7d7ba; background: #eaf7ee; }
.admin-subject-tab span { display: grid; gap: 4px; min-width: 0; }
.admin-subject-tab strong { font-size: var(--text-md); }
.admin-subject-tab small { color: var(--muted); font-size: var(--text-xs); }
.admin-subject-tab b { flex: 0 0 auto; color: var(--teal); font-size: var(--text-xs); white-space: nowrap; }
.admin-subject-panel { display: none; }
.admin-subject-panel.is-active { display: block; }
.admin-subject-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0 2px; color: var(--muted); font-size: var(--text-sm); }
.admin-subject-summary strong { color: var(--teal-dark); font-size: var(--text-md); }
.admin-subject-summary span { overflow-wrap: anywhere; }
.admin-question-row { display: grid; grid-template-columns: minmax(220px, 1.9fr) minmax(110px, 0.7fr) minmax(150px, 0.9fr) minmax(170px, 1fr) minmax(150px, 0.9fr) auto; align-items: end; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfa; }
.admin-question-row > label, .chapter-setting-name, .admin-question-count { min-width: 0; }
.admin-question-row > label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.admin-question-diagram-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; color: var(--ink) !important; white-space: nowrap; }
.admin-question-diagram-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.admin-question-count strong, .admin-question-count span, .admin-question-count small { display: block; }
.admin-question-count strong { color: var(--teal); font-size: var(--text-xl); }
.admin-question-count span { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); }
.admin-question-count small { margin-top: 6px; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; overflow-wrap: anywhere; }
.admin-question-row .button { padding: 9px 12px; font-size: var(--text-xs); white-space: nowrap; }
.admin-generation-progress { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid #cfe5d7; border-radius: 8px; background: #f3faf5; color: var(--teal-dark); }
.admin-generation-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--text-sm); }
.admin-generation-track { height: 6px; margin: 9px 0 7px; overflow: hidden; border-radius: 999px; background: #dceee3; }
.admin-generation-track span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--teal); animation: admin-generation-progress 1.35s ease-in-out infinite; }
.admin-generation-steps { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: var(--text-xs); }
.admin-generation-steps span.is-active { color: var(--teal); font-weight: 700; }
.admin-generation-spinner, .admin-generation-button-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: admin-generation-spin .7s linear infinite; }
.admin-generation-button-spinner { width: 12px; height: 12px; margin-left: 3px; vertical-align: -1px; }
@keyframes admin-generation-progress { 0% { transform: translateX(-130%); } 100% { transform: translateX(330%); } }
@keyframes admin-generation-spin { to { transform: rotate(360deg); } }
.admin-rate-panel { margin-top: 22px; }
.wallet-settings-panel .wallet-settings-grid,
.question-bank-settings-panel .settings-card-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.wallet-settings-panel .wallet-settings-item,
.question-bank-settings-panel .settings-card-item {
  padding: 16px 16px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbfa;
}
.wallet-settings-panel .wallet-settings-item h3,
.question-bank-settings-panel .settings-card-item h3 {
  margin: 0 0 8px;
  font-family: Merriweather, Georgia, serif;
  font-size: var(--font-size-19px);
  font-weight: 400;
}
.wallet-settings-panel .wallet-settings-item .chapter-settings-note,
.question-bank-settings-panel .settings-card-item .chapter-settings-note {
  margin-bottom: 12px;
}
.mentor-ai-suggestion-list { display: grid; gap: 12px; }
.mentor-ai-suggestion-item { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.mentor-ai-suggestion-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mentor-ai-suggestion-row-actions { display: inline-flex; align-items: center; gap: 7px; }
.mentor-ai-suggestion-active { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.mentor-ai-suggestion-active input { width: 17px; height: 17px; accent-color: var(--teal); }
.mentor-ai-suggestion-delete { min-height: 32px; padding: 6px 10px; color: var(--coral-dark); }
.mentor-ai-suggestion-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .22fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mentor-ai-suggestion-fields label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-suggestion-fields input, .mentor-ai-suggestion-fields select, .mentor-ai-suggestion-fields textarea { width: 100%; min-width: 0; }
.mentor-ai-suggestion-fields .mentor-ai-suggestion-prompt { grid-column: 1 / -1; }
.mentor-ai-suggestion-fields textarea { min-height: 84px; resize: vertical; }
.mentor-ai-suggestion-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.mentor-ai-suggestion-actions button { min-height: 40px; }
@media (max-width: 700px) {
  .mentor-ai-suggestion-fields { grid-template-columns: minmax(0, 1fr) minmax(92px, .35fr); }
  .mentor-ai-suggestion-fields .mentor-ai-suggestion-prompt { grid-column: 1 / -1; }
  .mentor-ai-suggestion-actions { align-items: stretch; flex-direction: column-reverse; }
}
.admin-rate-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  min-height: 52px;
}
.admin-rate-form label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}
.admin-rate-form .chapter-limit-input {
  width: 180px;
  min-height: 42px;
  margin: 0;
}
.admin-rate-form .button {
  min-width: 110px;
  min-height: 42px;
  padding: 10px 16px;
  white-space: nowrap;
}
.mentor-ai-pricing-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px; margin: 0 0 16px; }
.mentor-ai-pricing-controls form { display: grid; grid-template-columns: max-content 150px max-content; align-items: center; gap: 7px 8px; width: max-content; max-width: 100%; }
.mentor-ai-pricing-controls label { color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.mentor-ai-pricing-controls .chapter-limit-input { width: 100%; min-width: 0; min-height: 40px; margin: 0; }
.mentor-ai-pricing-controls small { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: var(--text-xs); }
.mentor-ai-pricing-controls .button { grid-column: 3; grid-row: 1; min-height: 40px; padding-inline: 12px; white-space: nowrap; }
.admin-rate-unit {
  min-width: 42px;
  padding-bottom: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}
.admin-curriculum-form-panel, .admin-curriculum-list-panel { margin-top: 18px; }
.admin-curriculum-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-curriculum-description { display: block; margin-top: 18px; }
.admin-curriculum-chapter-list { display: grid; gap: 16px; margin-top: 20px; }
.admin-curriculum-chapter { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfa; }
.admin-curriculum-chapter-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.admin-curriculum-chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-curriculum-wide { grid-column: 1 / -1; }
.admin-curriculum-list-panel .admin-curriculum-table-wrap { margin-top: 16px; }
.admin-curriculum-table-wrap .admin-table { min-width: 100%; width: max-content; table-layout: auto; }
.admin-curriculum-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.admin-page { padding: 42px 0 80px; }
.admin-sharing-form { display: inline-flex; margin: 0; }
.program-sharing-badge { min-height: 28px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: var(--text-xs); font-weight: 700; }
.program-sharing-badge.is-shared { border-color: #b9ddd3; background: var(--mint); color: var(--teal-dark); }
.program-sharing-badge.is-private { border-color: #ecdcae; background: #fffaf0; color: #8a6418; }
.program-sharing-badge.is-owner { display: inline-block; border-color: var(--line); background: var(--surface-soft); color: var(--muted); }
.admin-page h1 { margin: 7px 0 0; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-28px); font-weight: 400; }
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.admin-table colgroup { display: none; }
.admin-note-input { box-sizing: border-box; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.ai-model-settings-table { min-width: 1000px; table-layout: fixed; }
.ai-model-settings-table th:nth-child(1), .ai-model-settings-table td:nth-child(1) { width: 6%; text-align: center; }
.ai-model-settings-table th:nth-child(2), .ai-model-settings-table td:nth-child(2) { width: 13%; }
.ai-model-settings-table th:nth-child(3), .ai-model-settings-table td:nth-child(3) { width: 24%; }
.ai-model-settings-table th:nth-child(4), .ai-model-settings-table td:nth-child(4) { width: 27%; }
.ai-model-settings-table th:nth-child(5), .ai-model-settings-table td:nth-child(5) { width: 14%; }
.ai-model-settings-table th:nth-child(6), .ai-model-settings-table td:nth-child(6) { width: 16%; }
.ai-model-settings-table .chapter-limit-input { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; }
.ai-provider-settings-form { display: flex; align-items: center; gap: 8px; width: 100%; }
.ai-provider-settings-form .chapter-limit-input { flex: 1 1 auto; min-width: 0; }
.ai-provider-settings-form .button { flex: 0 0 auto; white-space: nowrap; }
.model-select-inline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.model-select-inline .chapter-limit-input { flex: 1 1 auto; min-width: 0; }
.model-add-custom { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; min-width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; font-weight: 700; box-shadow: none; }
.model-add-custom:hover { background: #f4faf7; border-color: #b9ddd3; color: var(--teal-dark); }
.ai-model-key-status { color: var(--muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.ai-model-settings-table td:last-child { text-align: center; vertical-align: middle; }
.ai-model-settings-table td:last-child .button { width: auto; min-width: 110px; white-space: nowrap; }
.ai-task-routing-table { min-width: 720px; table-layout: fixed; }
.ai-task-routing-table th:nth-child(1), .ai-task-routing-table td:nth-child(1) { width: 7%; text-align: center; }
.ai-task-routing-table th:nth-child(2), .ai-task-routing-table td:nth-child(2) { width: 49%; }
.ai-task-routing-table th:nth-child(3), .ai-task-routing-table td:nth-child(3) { width: 26%; }
.ai-task-routing-table th:nth-child(4), .ai-task-routing-table td:nth-child(4) { width: 18%; }
.ai-task-routing-table .chapter-limit-input { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; }
.ai-task-routing-table td:last-child { text-align: center; vertical-align: middle; }
.ai-task-routing-table td:last-child .button { width: auto; min-width: 110px; white-space: nowrap; }
.wallet-minimum-settings { margin: 22px 0; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: #f8fbfa; }
.wallet-minimum-settings h2 { margin: 7px 0 0; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-21px); font-weight: 400; }
.wallet-minimum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wallet-minimum-grid .admin-rate-form { max-width: none; }
.ai-toggle-form { margin-top: 16px; }
.ai-subject-table-wrap { margin-top: 18px; }
.ai-subject-table { min-width: 620px; }
.ai-operation-rate-table-wrap { margin-top: 16px; }
.ai-operation-rate-table { min-width: 760px; table-layout: fixed; }
.ai-operation-rate-table th:nth-child(1), .ai-operation-rate-table td:nth-child(1) { width: 30%; }
.ai-operation-rate-table th:nth-child(2), .ai-operation-rate-table td:nth-child(2) { width: 16%; }
.ai-operation-rate-table th:nth-child(3), .ai-operation-rate-table td:nth-child(3) { width: 18%; }
.ai-operation-rate-table th:nth-child(4), .ai-operation-rate-table td:nth-child(4) { width: 36%; }
.ai-operation-rate-table td small { display: block; margin-top: 3px; color: var(--muted); }
.ai-operation-rate-status { white-space: nowrap; }
.ai-operation-rate-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ai-operation-rate-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.ai-operation-rate-form .chapter-limit-input { width: 100%; min-width: 0; margin-top: 0; }
.ai-operation-rate-reset-form { margin: 0; }
.ai-operation-rate-reset-form .button { white-space: nowrap; }
.ai-subject-mode-form { display: flex; justify-content: flex-start; }
.ai-mode-select { min-width: 150px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: var(--text-sm); }
.ai-status-badge { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; }
.ai-status-on { border: 1px solid rgba(17, 121, 100, .18); background: rgba(17, 121, 100, .08); color: #0a6d63; }
.ai-status-off { border: 1px solid rgba(109, 120, 117, .2); background: rgba(109, 120, 117, .06); color: #4d5f5a; }
.ai-toggle-control { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.ai-toggle-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ai-toggle-slider { position: relative; width: 54px; height: 30px; border: 1px solid #c6d8d1; border-radius: 999px; background: #dfeae5; transition: background .18s ease, border-color .18s ease; }
.ai-toggle-slider::after { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(23, 59, 58, .18); content: ''; transition: transform .18s ease; }
.ai-toggle-control input:checked + .ai-toggle-slider { border-color: var(--teal); background: var(--teal); }
.ai-toggle-control input:checked + .ai-toggle-slider::after { transform: translateX(24px); }
.ai-toggle-control input:focus-visible + .ai-toggle-slider { outline: 3px solid rgba(11, 116, 109, .24); outline-offset: 3px; }
.ai-toggle-copy { display: grid; gap: 2px; }
.ai-toggle-copy strong { color: var(--teal-dark); font-size: var(--text-md); }
.ai-toggle-copy small { color: var(--muted); font-size: var(--text-xs); }
.button-light, .btn-light { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.button-light:hover, .btn-light:hover { background: #f4faf7; color: var(--teal); }
.question-pdf-input { display: block; width: 100%; margin-top: 6px; color: var(--muted); font-size: var(--text-sm); }
.question-pdf-input::file-selector-button { min-height: 42px; margin-right: 10px; padding: 11px 17px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink); cursor: pointer; font: 600 var(--font-size-15px) 'Segoe UI', Tahoma, sans-serif; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.question-pdf-input::file-selector-button:hover { background: #f4faf7; border-color: #b9ddd3; color: var(--teal); }
.app-dialog-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(23, 59, 58, .28); }
.app-dialog-backdrop[hidden] { display: none; }
.app-dialog { display: flex; align-items: flex-start; gap: 16px; width: min(460px, 100%); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 50px rgba(23, 59, 58, .18); }
.app-dialog-icon { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff4d8; color: var(--gold); font-weight: 700; }
.app-dialog-content { min-width: 0; flex: 1; }
.app-dialog h2 { margin: 7px 0 8px; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-21px); font-weight: 400; }
.app-dialog p { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.app-dialog-actions .button { padding: 10px 14px; font-size: var(--text-xs); }
.student-learning-assistant-dialog { box-sizing: border-box; width: min(540px, calc(100vw - 24px)); height: min(640px, calc(100vh - 24px)); height: min(640px, calc(100dvh - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(23, 59, 58, .18); }
.student-learning-assistant-dialog::backdrop { background: rgba(23, 59, 58, .38); }
.student-learning-assistant-dialog.is-docked { position: fixed; inset: 78px max(12px, calc((100vw - 1280px) / 2)) auto auto; width: 340px; height: min(650px, calc(100vh - 94px)); max-height: none; margin: 0; border-radius: 8px; box-shadow: 0 10px 32px rgba(23, 59, 58, .2); }
.student-learning-assistant-dialog.is-expanded { width: min(960px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); }
.student-learning-assistant-panel { box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; height: 100%; min-height: 0; gap: 12px; padding: 20px; }
.student-learning-assistant-dialog.is-docked .student-learning-assistant-panel { padding: 14px; }
.student-learning-assistant-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: transparent; }
.student-learning-assistant-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.student-learning-assistant-panel > header { cursor: grab; user-select: none; }
.student-learning-assistant-panel > header:active, .student-learning-assistant-dialog.is-dragging .student-learning-assistant-panel > header { cursor: grabbing; }
.student-learning-assistant-panel > header button { cursor: pointer; }
.student-learning-assistant-expand { display: none; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); }
.student-learning-assistant-dialog .student-learning-assistant-expand { display: grid; }
.student-learning-assistant-expand svg { width: 16px; height: 16px; }
.student-learning-assistant-panel h2 { margin: 5px 0 0; color: var(--ink); font-size: var(--text-xl); line-height: 1.3; }
.student-learning-assistant-close { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: var(--font-size-22px); line-height: 1; cursor: pointer; }
.student-learning-assistant-intro { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.student-learning-assistant-messages { display: grid; align-content: start; gap: 9px; min-height: 0; max-height: none; overflow-y: auto; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fbfdfc; }
.student-learning-assistant-message { max-width: 94%; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 8px; overflow-wrap: anywhere; }
.student-learning-assistant-message.is-assistant { justify-self: start; background: #f0f8f4; }
.student-learning-assistant-message.is-user { justify-self: end; border-color: #d4e6eb; background: #f1f8fa; }
.student-learning-assistant-message > strong { display: block; margin-bottom: 4px; color: var(--teal-dark); font-size: var(--text-xs); }
.student-learning-assistant-message-body { color: var(--ink); font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; }
.student-learning-assistant-message-body p { margin: 0; }
.student-learning-assistant-message-body ul, .student-learning-assistant-message-body ol { margin: 4px 0; padding-left: 21px; }
.student-learning-assistant-message-body li + li { margin-top: 3px; }
.student-learning-assistant-charge-note { display: block; margin-top: 6px; color: var(--muted); font-size: var(--text-xs); }
.student-learning-assistant-message.is-pending .student-learning-assistant-message-body { color: var(--muted); }
.student-learning-assistant-form { display: grid; gap: 8px; }
.student-learning-assistant-form textarea { box-sizing: border-box; width: 100%; height: 82px; min-height: 82px; max-height: 82px; padding: 10px 50px 10px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: 1.45; resize: none; overflow-y: auto; }
.student-learning-assistant-form textarea:focus { border-color: #82b9a8; outline: 2px solid rgba(50, 134, 108, .14); }
.student-learning-assistant-attachment-toolbar { display: grid; gap: 6px; }
.student-learning-assistant-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.student-learning-assistant-form-footer small { color: var(--muted); font-size: var(--text-xs); }
.student-learning-assistant-form-footer .button { min-height: 36px; padding: 8px 12px; font-size: var(--text-xs); }
.student-learning-assistant-wallet { display: none; color: var(--teal); font-size: var(--text-xs); font-weight: 700; }
.student-learning-assistant-wallet:not([hidden]) { display: inline-block; }
.mentor-ai-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 6px 12px; border: 1px solid #b9ddd3; border-radius: 6px; background: #eff9f5; color: var(--teal-dark); font: 700 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; cursor: pointer; }
.mentor-ai-trigger svg { width: 17px; height: 17px; flex: 0 0 17px; }
.mentor-ai-trigger:hover { border-color: var(--teal); background: #e3f4ed; }
.mentor-ai-page,
.mentor-ai-overview-hero,
.mentor-ai-export-dialog {
  /* Use these scoped tokens for MentorAI text and surfaces; keep borders on the site defaults. */
  --mentor-ai-text: #173b3a;
  --mentor-ai-muted: #465c53;
  --mentor-ai-placeholder: #52665d;
  --mentor-ai-surface: #fff;
  --mentor-ai-surface-soft: #edf3ee;
  --ink: var(--mentor-ai-text);
  --muted: var(--mentor-ai-muted);
  --surface: var(--mentor-ai-surface);
  --surface-soft: var(--mentor-ai-surface-soft);
  color-scheme: light;
}
.mentor-ai-page { width: min(1440px, 100%); margin: 0 auto; padding: 16px 0 28px; }
.mentor-ai-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 12px; }
.mentor-ai-topbar .back-link { color: var(--muted); font-size: var(--text-sm); }
.mentor-ai-game-market-link { margin-left: auto; margin-right: 14px; color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-game-market-link:hover { color: var(--coral-dark); }
.mentor-ai-account-label, .mentor-ai-mode-label, .mentor-ai-history-heading { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-workspace { position: relative; display: grid; grid-template-columns: var(--mentor-ai-sidebar-width, 276px) 18px minmax(0, 1fr); min-height: min(880px, calc(100vh - 128px)); min-height: min(880px, calc(100dvh - 128px)); overflow: hidden; border: 1px solid #d5e4de; border-radius: 12px; background: #fffefa; box-shadow: 0 16px 40px rgba(23, 59, 58, .09); }
.mentor-ai-sidebar { display: flex; min-width: 0; flex-direction: column; padding: 20px 14px 14px; background: #183f3b; color: #f5faf6; }
.mentor-ai-resize-handle { position: relative; z-index: 2; display: grid; place-items: center; border: 0; background: #e5eee8; cursor: col-resize; touch-action: none; user-select: none; }
.mentor-ai-resize-handle::after { width: 4px; height: 42px; border-right: 1px solid #82998b; border-left: 1px solid #82998b; content: ''; }
.mentor-ai-resize-handle:hover, .mentor-ai-resize-handle:focus-visible, .mentor-ai-workspace.is-resizing .mentor-ai-resize-handle { background: #dcebe1; }
.mentor-ai-resize-handle:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.mentor-ai-workspace.is-resizing, .mentor-ai-workspace.is-resizing * { cursor: col-resize !important; user-select: none !important; }
.mentor-ai-sidebar-heading { display: flex; align-items: center; gap: 11px; padding: 0 6px 18px; }
.mentor-ai-monogram { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: #f0ad79; color: #183f3b; font: 700 22px Merriweather, Georgia, serif; }
.mentor-ai-sidebar-heading .eyebrow { color: #a7c7bc; font-size: 11px; }
.mentor-ai-sidebar-heading h1 { margin: 2px 0 0; color: #fff; font: 400 20px Merriweather, Georgia, serif; }
.mentor-ai-new-button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; background: rgba(255,255,255,.08); color: #fff; font: 600 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; text-align: left; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; }
.mentor-ai-new-button:hover { border-color: #e8aa78; background: rgba(255,255,255,.14); }
.mentor-ai-new-button > span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 5px; background: #e8aa78; color: #183f3b; font-size: 20px; line-height: 1; }
.mentor-ai-history-heading { display: flex; justify-content: space-between; margin: 24px 7px 9px; color: #a7c7bc; }
.mentor-ai-history-heading > span:last-child { color: #d3e2dd; font-weight: 400; }
.mentor-ai-search { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(5,34,32,.22); }
.mentor-ai-search svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: #b7d0c8; stroke-width: 1.7; }
.mentor-ai-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 400 var(--text-xs) 'Segoe UI', Tahoma, sans-serif; }
.mentor-ai-search input::placeholder { color: #b7d0c8; }
.mentor-ai-search input:focus-visible { outline: 0; }
.mentor-ai-conversation-list { display: grid; align-content: start; gap: 3px; min-height: 0; margin: 10px -5px 0; overflow-y: auto; }
.mentor-ai-conversation-item { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; min-width: 0; border-radius: 6px; }
.mentor-ai-conversation-item:hover, .mentor-ai-conversation-item.is-active { background: rgba(255,255,255,.11); }
.mentor-ai-conversation-open { display: grid; min-width: 0; gap: 4px; padding: 9px 9px; border: 0; background: transparent; color: #f5faf6; text-align: left; cursor: pointer; }
.mentor-ai-conversation-title { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.mentor-ai-conversation-open small { color: #a7c7bc; font-size: 11px; }
.mentor-ai-conversation-delete { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #c4d9d2; opacity: 0; cursor: pointer; }
.mentor-ai-conversation-item:hover .mentor-ai-conversation-delete, .mentor-ai-conversation-delete:focus-visible { opacity: 1; }
.mentor-ai-conversation-delete:hover { background: rgba(255,255,255,.12); color: #fff; }
.mentor-ai-conversation-delete svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mentor-ai-history-empty { margin: 16px 8px; color: #b7d0c8; font-size: var(--text-xs); }
.mentor-ai-sidebar-footer { display: grid; grid-template-columns: 8px 1fr; align-items: start; gap: 8px; margin-top: auto; padding: 16px 7px 4px; border-top: 1px solid rgba(255,255,255,.13); color: #b7d0c8; font-size: 11px; line-height: 1.5; }
.mentor-ai-sidebar-footer > a { grid-column: 2; justify-self: start; margin-top: 4px; color: #f0b184; font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-status-dot, .mentor-ai-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #a5ce8b; }
.mentor-ai-chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: #fffefa; }
.mentor-ai-chat-header { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 24px; border-bottom: 1px solid var(--line-soft); background: #fffefa; }
.mentor-ai-chat-heading { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.mentor-ai-chat-heading strong { color: var(--ink); font-size: var(--text-sm); }
.mentor-ai-live-dot { width: 7px; height: 7px; }
.mentor-ai-context-controls { display: flex; flex: 0 1 auto; align-items: center; gap: 6px; min-width: 0; }
.mentor-ai-context-controls select { box-sizing: border-box; flex: 0 1 auto; width: clamp(112px, 14vw, 165px); min-width: 0; height: 30px; min-height: 30px; padding: 3px 7px; border: 1px solid #dce7df; border-radius: 5px; background: var(--surface-soft); color: var(--ink); font: 600 11px/1.2 'Segoe UI', Tahoma, sans-serif; text-overflow: ellipsis; transition: border-color .16s ease, background-color .16s ease; }
.mentor-ai-context-controls select:hover:not(:disabled) { border-color: #aacbb7; background: #fff; }
.mentor-ai-context-controls select:focus-visible { outline: 2px solid rgba(50, 134, 108, .2); outline-offset: 1px; border-color: #82b9a8; }
.mentor-ai-context-controls select:disabled { background: #e4ebe6; color: var(--mentor-ai-muted); -webkit-text-fill-color: var(--mentor-ai-muted); opacity: 1; cursor: not-allowed; }
.mentor-ai-header-actions { display: flex; align-items: center; gap: 8px; }
.mentor-ai-mode-label { white-space: nowrap; }
.mentor-ai-mode-control { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.mentor-ai-mode-control button { min-height: 32px; padding: 5px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 600 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; cursor: pointer; }
.mentor-ai-mode-control button[aria-pressed="true"] { background: var(--teal-dark); color: #fff; }
.mentor-ai-price { min-width: 104px; color: var(--muted); font-size: 11px; text-align: right; }
.mentor-ai-history-toggle { display: none; }
.mentor-ai-conversation { grid-row: 3; display: flex; min-height: 0; flex-direction: column; overflow-y: auto; }
.mentor-ai-welcome { width: min(760px, 100%); margin: auto; padding: 44px 28px 38px; text-align: center; animation: mentor-ai-arrive .42s ease-out both; }
.mentor-ai-welcome-mark { display: flex; align-items: center; justify-content: center; gap: 5px; width: 52px; height: 52px; margin: 0 auto 20px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface-soft); transform: rotate(-5deg); }
.mentor-ai-welcome-mark span { width: 5px; border-radius: 4px; background: var(--teal); }
.mentor-ai-welcome-mark span:nth-child(1) { height: 15px; background: var(--coral); }
.mentor-ai-welcome-mark span:nth-child(2) { height: 24px; }
.mentor-ai-welcome-mark span:nth-child(3) { height: 19px; background: #9ab76f; }
.mentor-ai-welcome > .eyebrow { color: var(--coral-dark); }
.mentor-ai-welcome h2 { max-width: 580px; margin: 12px auto 10px; color: var(--ink); font: 400 29px/1.3 Merriweather, Georgia, serif; }
.mentor-ai-welcome > p { max-width: 510px; margin: 0 auto; color: var(--muted); font-size: var(--text-sm); line-height: 1.65; }
.mentor-ai-suggested-prompts { display: grid; gap: 5px; min-width: 0; margin-bottom: 8px; }
.mentor-ai-suggested-prompts-label { color: var(--mentor-ai-muted); font-size: 10px; font-weight: 700; }
.mentor-ai-suggested-prompts-list { display: flex; gap: 6px; min-width: 0; overflow-x: auto; padding: 1px 1px 3px; scrollbar-width: thin; }
.mentor-ai-suggested-prompts-list button { flex: 0 0 auto; max-width: min(250px, 68vw); min-height: 28px; padding: 5px 10px; overflow: hidden; border: 1px solid #e2eae4; border-radius: 999px; background: #f8fbf9; color: #536c64; font: 500 11px/1.3 'Segoe UI', Tahoma, sans-serif; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.mentor-ai-suggested-prompts-list button:hover { border-color: #b7d1c3; background: #fff; color: var(--teal-dark); }
.mentor-ai-suggested-prompts-list button:focus-visible { outline: 2px solid rgba(50, 134, 108, .25); outline-offset: 1px; }
.mentor-ai-messages { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; width: min(1120px, 100%); min-width: 0; min-height: 0; margin: 0 auto; padding: 30px 28px; }
.mentor-ai-message { min-width: 0; max-width: 94%; padding: 12px 15px; border: 1px solid var(--line-soft); border-radius: 7px; overflow-wrap: anywhere; }
.mentor-ai-message.is-assistant { box-sizing: border-box; width: min(100%, 900px); justify-self: start; padding: 17px 20px; border-color: var(--line-soft); border-radius: 4px 10px 10px; background: var(--surface); box-shadow: 0 3px 12px rgba(23, 59, 58, .035); }
.mentor-ai-message.is-user { justify-self: end; border-color: #d7e8df; border-radius: 10px 3px 10px 10px; background: #eaf4ed; }
.mentor-ai-message > strong { display: block; margin-bottom: 12px; color: var(--teal-dark); font-size: 11px; }
.mentor-ai-message.is-assistant > strong { display: flex; align-items: center; gap: 8px; }
.mentor-ai-message.is-assistant > strong::before { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 7px; background: #e8f2e9; color: var(--teal-dark); content: "M"; font: 700 12px Merriweather, Georgia, serif; }
.mentor-ai-message p { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; }
.mentor-ai-message-content { min-width: 0; color: var(--mentor-ai-text); font-size: var(--text-md); line-height: 1.75; overflow-wrap: anywhere; }
.mentor-ai-message-content > :first-child { margin-top: 0; }
.mentor-ai-message-content > :last-child { margin-bottom: 0; }
.mentor-ai-copy-region { position: relative; display: flow-root; }
.mentor-ai-message-content > .mentor-ai-copy-region:first-child > :first-child { margin-top: 0; }
.mentor-ai-message-content > .mentor-ai-copy-region:last-child > :first-child { margin-bottom: 0; }
.mentor-ai-copy-button { position: absolute; z-index: 1; top: 2px; right: 2px; display: grid; width: 23px; height: 23px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #355e50; opacity: 0; cursor: pointer; transition: opacity .15s ease, color .15s ease; }
.mentor-ai-copy-region:hover .mentor-ai-copy-button, .mentor-ai-copy-region:focus-within .mentor-ai-copy-button { opacity: 1; }
.mentor-ai-copy-button:hover { color: var(--teal-dark); }
.mentor-ai-copy-button svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mentor-ai-message-content p, .mentor-ai-message-content ul, .mentor-ai-message-content ol, .mentor-ai-message-content blockquote, .mentor-ai-message-content pre, .mentor-ai-message-content table, .mentor-ai-message-content hr { margin: 0 0 13px; }
.mentor-ai-message-content strong { color: #245d50; font-weight: 700; }
.mentor-ai-message-content h1, .mentor-ai-message-content h2, .mentor-ai-message-content h3, .mentor-ai-message-content h4, .mentor-ai-message-content h5, .mentor-ai-message-content h6 { margin: 14px 0 7px; color: var(--ink); font-weight: 700; line-height: 1.35; }
.mentor-ai-message-content h1, .mentor-ai-message-content h2 { padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); }
.mentor-ai-message-content h1 { font-size: 1.4em; }
.mentor-ai-message-content h2 { font-size: 1.25em; }
.mentor-ai-message-content h3, .mentor-ai-message-content h4, .mentor-ai-message-content h5, .mentor-ai-message-content h6 { font-size: 1.1em; }
.mentor-ai-message-content .mentor-ai-message-list { margin: 0 0 10px; }
.mentor-ai-message-content .mentor-ai-message-list > p { margin: 0; }
.mentor-ai-message-content .mentor-ai-message-list > p + p { margin-top: 5px; }
.mentor-ai-message-content blockquote { padding: 3px 0 3px 12px; border-left: 3px solid #668775; color: var(--mentor-ai-muted); }
.mentor-ai-message-content pre { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; padding: 11px 13px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-soft); }
.mentor-ai-message-content code { padding: 1px 4px; border-radius: 3px; background: #e3ebe5; color: var(--mentor-ai-text); font: 0.9em Consolas, 'Courier New', monospace; }
.mentor-ai-message-content pre code { padding: 0; background: transparent; }
.mentor-ai-message-content table { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.mentor-ai-message-content th, .mentor-ai-message-content td { padding: 6px 9px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.mentor-ai-message-content th { background: var(--surface-soft); font-weight: 700; }
.mentor-ai-message-content a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.mentor-ai-saved-game-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 12px; padding: 6px 10px; border: 1px solid #cfe2d7; border-radius: 6px; background: #f3faf5; color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.mentor-ai-saved-game-link:hover { border-color: #9dc8ae; background: #eaf6ee; }
.mentor-ai-form { grid-row: 2; display: grid; gap: 6px; width: min(1120px, 100%); margin: 0 auto; padding: 12px 28px 4px; }
.mentor-ai-file-input { display: none; }
.mentor-ai-attachment-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.mentor-ai-attachment-list[hidden] { display: none; }
.mentor-ai-attachment-item { display: flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 7px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-soft); color: var(--ink); font-size: 11px; }
.mentor-ai-attachment-item img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 4px; object-fit: cover; }
.mentor-ai-attachment-name { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mentor-ai-attachment-size { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.mentor-ai-attachment-remove { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; }
.mentor-ai-attachment-remove:hover { background: #fbece7; color: var(--coral-dark); }
.mentor-ai-composer { position: relative; padding: 11px 11px 8px 15px; border: 1px solid #d8e3dc; border-radius: 10px; background: var(--surface); box-shadow: 0 5px 18px rgba(23,59,58,.06); transition: border-color .16s ease, box-shadow .16s ease; }
.mentor-ai-composer:focus-within { border-color: #82b9a8; box-shadow: 0 0 0 3px rgba(50,134,108,.1), 0 5px 18px rgba(23,59,58,.06); }
.mentor-ai-input-area { position: relative; }
.mentor-ai-form textarea { display: block; box-sizing: border-box; width: 100%; min-height: 72px; max-height: min(45vh, 360px); max-height: min(45dvh, 360px); padding: 4px 2px 8px; overflow-y: auto; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 var(--text-md)/1.5 'Segoe UI', Tahoma, sans-serif; resize: vertical; }
.mentor-ai-form textarea::placeholder { color: var(--mentor-ai-placeholder); opacity: 1; }
.mentor-ai-form textarea:focus-visible { outline: 0; }
.mentor-ai-composer-footer { display: flex; align-items: center; gap: 10px; min-height: 38px; margin-top: 8px; }
.mentor-ai-composer-tools { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.mentor-ai-draft-button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 1px solid #e8d8c8; border-radius: 5px; background: #fff8f1; color: #70452d; font: 600 11px 'Segoe UI', Tahoma, sans-serif; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.mentor-ai-draft-button:hover { border-color: #d7ad87; background: #fff1e2; }
.mentor-ai-draft-button svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mentor-ai-attach-button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 7px; border: 1px solid #e1e9e2; border-radius: 5px; background: var(--surface-soft); color: var(--teal-dark); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mentor-ai-attach-button:hover { border-color: #aacbb7; background: var(--surface-soft); }
.mentor-ai-attach-button svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#mentor-ai-composer-hint { color: var(--mentor-ai-muted); font-size: 11px; }
.mentor-ai-composer-footer [data-mentor-ai-status] { color: var(--muted); font-size: 11px; }
.mentor-ai-thinking-status { display: none; }
.mentor-ai-composer.is-thinking textarea { visibility: hidden; }
.mentor-ai-composer.is-thinking .mentor-ai-thinking-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 12px; }
.mentor-ai-thinking-dots { display: inline-flex; align-items: center; gap: 3px; height: 12px; }
.mentor-ai-thinking-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: mentor-ai-thinking-dot 1s ease-in-out infinite; }
.mentor-ai-thinking-dots span:nth-child(2) { animation-delay: .14s; }
.mentor-ai-thinking-dots span:nth-child(3) { animation-delay: .28s; }
@keyframes mentor-ai-thinking-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mentor-ai-thinking-dots span { animation: none; opacity: 1; } }
.mentor-ai-send-button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 0; border-radius: 7px; background: var(--teal-dark); color: #fff; cursor: pointer; transition: background-color .16s ease, transform .16s ease; }
.mentor-ai-send-button:hover:not(:disabled) { transform: translateY(-1px); background: var(--coral-dark); }
.mentor-ai-send-button:disabled { background: var(--mentor-ai-muted); cursor: wait; opacity: 1; }
.mentor-ai-send-button svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mentor-ai-download-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 10px; border: 1px solid #cfe2d9; border-radius: 5px; background: var(--surface-soft); color: var(--teal-dark); font: 700 11px 'Segoe UI', Tahoma, sans-serif; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.mentor-ai-download-link:hover { border-color: #a4c9b4; background: var(--surface-soft); }
.mentor-ai-download-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mentor-ai-export-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 28px)); max-width: none; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 70px rgba(17, 47, 42, .24); }
.mentor-ai-export-dialog::backdrop { background: rgba(15, 35, 33, .48); backdrop-filter: blur(2px); }
.mentor-ai-export-panel { display: grid; gap: 14px; max-height: min(760px, calc(100dvh - 28px)); padding: 22px; overflow-y: auto; }
.mentor-ai-export-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mentor-ai-export-header .eyebrow { color: var(--coral-dark); font-size: 11px; }
.mentor-ai-export-header h2 { margin: 4px 0 0; color: var(--ink); font: 400 var(--font-size-22px)/1.3 Merriweather, Georgia, serif; }
.mentor-ai-export-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); font-size: 23px; line-height: 1; cursor: pointer; }
.mentor-ai-export-close:hover { border-color: #efc7bd; background: #fff6f1; color: var(--coral-dark); }
.mentor-ai-export-description { margin: -5px 0 0; color: var(--muted); font-size: var(--text-sm); }
.mentor-ai-draft-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.mentor-ai-draft-custom-type { grid-column: 1 / -1; display: grid; gap: 7px; }
.mentor-ai-draft-custom-type[hidden] { display: none; }
.mentor-ai-draft-template-hint { margin-top: -3px; color: var(--muted); font-size: 11px; }
.mentor-ai-draft-template-status { grid-column: 1 / -1; margin: -4px 0 0; color: var(--muted); font-size: 11px; }
.mentor-ai-draft-template-variables { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #f7faf8; }
.mentor-ai-draft-template-variables[hidden] { display: none; }
.mentor-ai-draft-template-variables > strong { color: var(--ink); font-size: var(--text-xs); }
.mentor-ai-draft-template-variable-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; }
.mentor-ai-draft-template-variable-fields > div { display: grid; gap: 5px; }
.mentor-ai-draft-template-variable-fields label { margin: 0; }
.mentor-ai-draft-template-variable-fields .account-input { width: 100%; min-width: 0; }
.mentor-ai-draft-template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.mentor-ai-draft-template-actions small { color: var(--muted); font-size: 11px; }
.mentor-ai-draft-fields label { margin-top: 3px; color: var(--ink); font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-draft-fields select { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: 400 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; }
.mentor-ai-draft-fields label[for="mentor-ai-draft-title-input"], .mentor-ai-draft-fields #mentor-ai-draft-title-input,
.mentor-ai-draft-fields label[for="mentor-ai-draft-recipient"], .mentor-ai-draft-fields #mentor-ai-draft-recipient,
.mentor-ai-draft-fields label[for="mentor-ai-draft-details"], .mentor-ai-draft-fields #mentor-ai-draft-details,
.mentor-ai-draft-fields label[for="mentor-ai-draft-source"], .mentor-ai-draft-fields #mentor-ai-draft-source { grid-column: 1 / -1; }
.mentor-ai-draft-fields .account-input { width: 100%; min-width: 0; }
.mentor-ai-draft-fields textarea { resize: vertical; }
.mentor-ai-draft-note { margin: -3px 0 0; color: var(--muted); font-size: 11px; }
.mentor-ai-draft-source-hint { grid-column: 1 / -1; margin-top: -3px; color: var(--muted); font-size: 11px; }
.mentor-ai-export-fields { display: grid; grid-template-columns: 1fr 150px; gap: 7px 12px; }
.mentor-ai-export-fields label { color: var(--ink); font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-export-fields label:first-child { grid-column: 1 / -1; }
.mentor-ai-export-filename { display: flex; min-width: 0; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.mentor-ai-export-filename:focus-within { border-color: #82b9a8; outline: 2px solid rgba(50,134,108,.12); }
.mentor-ai-export-filename input { width: 100%; min-width: 0; padding: 9px 10px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; }
.mentor-ai-export-filename span { padding: 0 9px 0 2px; color: var(--muted); font-size: var(--text-xs); }
.mentor-ai-export-fields select { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: 400 var(--text-sm) 'Segoe UI', Tahoma, sans-serif; }
.mentor-ai-export-preview-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.mentor-ai-export-preview-wrap > div { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; }
.mentor-ai-export-preview-wrap pre { max-height: 240px; margin: 0; padding: 12px; overflow: auto; color: #35544c; font: 400 12px/1.55 Consolas, 'Courier New', monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.mentor-ai-export-error { margin: -4px 0 0; color: var(--coral-dark); font-size: var(--text-xs); }
.mentor-ai-export-actions { display: flex; justify-content: flex-end; gap: 9px; }
.mentor-ai-export-actions .button { min-height: 40px; padding: 8px 13px; font-size: var(--text-xs); }
.mentor-ai-export-actions svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
  .mentor-ai-export-panel { gap: 12px; padding: 16px; }
  .mentor-ai-draft-fields { grid-template-columns: minmax(0, 1fr); }
  .mentor-ai-draft-fields label, .mentor-ai-draft-fields select, .mentor-ai-draft-fields .account-input { grid-column: 1; }
  .mentor-ai-export-fields { grid-template-columns: minmax(0, 1fr); }
  .mentor-ai-export-fields label:first-child { grid-column: auto; }
  .mentor-ai-export-preview-wrap pre { max-height: 32dvh; }
  .mentor-ai-export-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .mentor-ai-export-actions .button { width: 100%; }
}
.mentor-ai-wallet { color: var(--coral-dark); font-size: var(--text-xs); font-weight: 600; }
.mentor-ai-wallet:not([hidden]) { display: inline-block; }
.mentor-ai-privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px 15px; color: var(--mentor-ai-muted); font-size: 11px; text-align: center; }
.mentor-ai-privacy-note > span { color: #54713b; }
.mentor-ai-sidebar-scrim { display: none; }
body.mentor-ai-history-open { overflow: hidden; }
@keyframes mentor-ai-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mentor-ai-welcome, .mentor-ai-suggested-prompts-list button, .mentor-ai-new-button, .mentor-ai-conversation-delete, .mentor-ai-composer, .mentor-ai-send-button { animation: none; transition: none; } }
.app-toast-container { position: fixed; z-index: 1200; top: 50%; left: 50%; display: grid; place-items: center; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); transform: translate3d(-50%, -50%, 0); pointer-events: none; contain: layout style; }
.app-toast { position: relative; box-sizing: border-box; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; overflow-wrap: anywhere; padding: 13px 44px 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 30px rgba(23, 59, 58, .16); color: var(--ink); font-size: var(--text-sm); line-height: 1.45; pointer-events: auto; animation: app-toast-in .16s ease-out both; transition: opacity .18s ease; }
.app-toast-close { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.app-toast-close:hover { background: rgba(0, 0, 0, .07); }
.app-toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.app-toast.is-hiding { opacity: 0; }
.app-toast-error { border-color: #edc4bd; background: #fff2ef; color: #a94c3e; }
.app-toast-success { border-color: #b9ddd3; background: var(--mint); color: var(--teal-dark); }
@keyframes app-toast-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-toast { animation: none; transition: none; } }

@media (max-width: 800px) {
  .container { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; padding-right: 2%; padding-left: 2%; }
  .functional-page, .lecturer-page, .level-page { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }
  .navbar { min-height: 62px; }
  .navbar-collapse { padding: 12px 0 4px; }
  .navbar-nav { gap: 2px; }
  .nav-link { padding: 9px 0 !important; }
  .account-nav { flex-wrap: wrap; gap: 10px; }
  .hero-panel { min-height: 300px; padding: 38px 30px; }
  .hero-panel h1 { font-size: var(--font-size-37px); }
  .mentor-ai-overview-hero { grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: 22px; min-height: 340px; padding: 38px 30px; }
  .mentor-ai-overview-copy h1 { font-size: var(--font-size-37px); }
  .mentor-ai-overview-visual { min-height: 210px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-grid, .result-section, .account-page { grid-template-columns: 1fr; }
  .result-score { padding: 0 0 20px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .account-page { gap: 25px; min-height: 0; padding: 45px 0; }
  .account-intro h1 { font-size: var(--font-size-38px); }
  .options { grid-template-columns: 1fr; }
  .level-content, .quiz-layout { grid-template-columns: 1fr; }
  .student-history-row { grid-template-columns: 1fr auto; gap: 12px; }
  .student-history-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .chapter-menu { position: static; }
  .admin-subject-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .admin-question-row { grid-template-columns: 1fr 1fr; }
  .admin-question-row .chapter-setting-name { grid-column: 1 / -1; }
  .admin-question-row .admin-question-diagram-toggle { justify-self: start; }
  .chapter-setting-row { grid-template-columns: 1fr 1fr; }
  .chapter-setting-row .chapter-setting-toggle { grid-column: 1 / -1; }
  .chapter-setting-row .button { grid-column: 1 / -1; }
  .section-heading { align-items: flex-start; gap: 12px; }
  .section-heading h2, .panel-heading h2 { font-size: var(--font-size-22px); }
  .wallet-minimum-grid { grid-template-columns: 1fr; }
  .mentor-ai-pricing-controls { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .mentor-ai-pricing-controls form { grid-template-columns: max-content minmax(90px, 135px) max-content; gap: 7px; width: 100%; }
  .mentor-ai-pricing-controls label { font-size: var(--text-xs); white-space: nowrap; }
  .mentor-ai-pricing-controls .button { padding-inline: 9px; font-size: var(--text-xs); }
  .admin-rate-form { flex-wrap: wrap; }
  .admin-rate-form label { flex: 1 1 180px; }
  .admin-rate-form .chapter-limit-input { width: 100%; }
  .admin-curriculum-table-wrap .admin-table { min-width: 620px; }
  .admin-table, .student-progress-table { min-width: 680px; }
}

@media (max-width: 520px) {
  .student-learning-assistant-trigger { gap: 5px; padding: 6px 8px; font-size: var(--text-xs); }
  .student-learning-assistant-panel { gap: 10px; padding: 14px; }
  .student-learning-assistant-panel h2 { font-size: var(--text-lg); }
  .mentor-ai-page { padding: 12px 0 20px; }
  .mentor-ai-topbar { margin-bottom: 8px; }
  .mentor-ai-account-label { font-size: 10px; }
  .mentor-ai-workspace { min-height: min(820px, calc(100vh - 100px)); min-height: min(820px, calc(100dvh - 100px)); border-radius: 9px; }
  .mentor-ai-chat-header { min-height: 60px; padding: 10px 12px; }
  .mentor-ai-chat-heading { gap: 6px; font-size: 11px; }
  .mentor-ai-chat-heading strong { font-size: var(--text-xs); }
  .mentor-ai-header-actions { gap: 6px; }
  .mentor-ai-mode-control button { min-height: 30px; padding: 4px 9px; font-size: 11px; }
  .mentor-ai-price { min-width: 88px; font-size: 10px; }
  .mentor-ai-welcome { padding: 26px 13px 22px; }
  .mentor-ai-welcome-mark { width: 44px; height: 44px; margin-bottom: 15px; border-radius: 13px; }
  .mentor-ai-welcome h2 { font-size: 22px; }
  .mentor-ai-welcome > p { font-size: var(--text-xs); }
  .mentor-ai-messages { gap: 12px; padding: 18px 0; }
  .mentor-ai-message { max-width: 96%; }
  .mentor-ai-form { padding: 8px 0 2px; }
  .mentor-ai-composer { padding: 9px 9px 7px 12px; }
  .mentor-ai-composer-tools { flex-wrap: wrap; gap: 6px; }
  .mentor-ai-context-controls { flex: 1 1 100%; order: 2; }
  .mentor-ai-context-controls select { flex: 1 1 0; width: auto; }
  #mentor-ai-composer-hint { order: 3; }
  #mentor-ai-composer-hint { max-width: 170px; font-size: 10px; }
  .mentor-ai-privacy-note { padding: 8px 12px 12px; font-size: 10px; }
}

@media (max-width: 760px) {
  .mentor-ai-message-content pre { padding: 10px; border-color: #e3e9e2; background: #e4ede6; }
  .mentor-ai-message-content pre code { color: #14251d; font-size: 12px; font-weight: 600; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .mentor-ai-copy-button { opacity: 1; }
  .mentor-ai-chat { background: var(--surface-soft); }
  .mentor-ai-chat-header { border-bottom-color: #e8ece6; background: var(--surface); }
  .mentor-ai-message.is-assistant { border-color: #e2e9e1; background: var(--surface); }
  .mentor-ai-message.is-user { border-color: #d7e8df; background: #e0efe4; }
  .mentor-ai-message.is-assistant, .mentor-ai-message.is-user { box-sizing: border-box; width: 100%; max-width: 100%; justify-self: stretch; }
  .mentor-ai-message.is-assistant, .mentor-ai-message.is-user { padding: 6px 8px; }
  .mentor-ai-composer { border-color: #d8e3dc; background: var(--surface); }
  .mentor-ai-form textarea::placeholder { color: var(--mentor-ai-placeholder); }
  .mentor-ai-workspace { grid-template-columns: minmax(0, 1fr); }
  .mentor-ai-resize-handle { position: absolute; top: 50%; right: -12px; width: 24px; height: 58px; transform: translateY(-50%); border: 1px solid #8ca497; border-radius: 7px 0 0 7px; background: #dcebe1; box-shadow: 0 2px 8px rgba(23, 59, 58, .18); }
  .mentor-ai-resize-handle::after { width: auto; height: auto; border: 0; color: #35594d; content: '⋮'; font-size: 24px; font-weight: 700; line-height: 1; }
  .mentor-ai-workspace.is-resizing { overflow: visible; }
  .mentor-ai-sidebar { position: fixed; z-index: 1301; top: 0; bottom: 0; left: 0; width: min(310px, calc(100vw - 48px)); height: 100vh; height: 100dvh; transform: translateX(-105%); transition: transform .2s ease; }
  .mentor-ai-conversation-delete { opacity: 1; }
  .mentor-ai-page.is-history-open .mentor-ai-sidebar { transform: translateX(0); }
  .mentor-ai-sidebar-scrim { position: fixed; z-index: 1300; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(15, 35, 33, .38); }
  .mentor-ai-page.is-history-open .mentor-ai-sidebar-scrim { display: block; }
  .mentor-ai-history-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-size: var(--text-xs); cursor: pointer; }
  .mentor-ai-history-toggle > span { color: var(--teal); font-size: 16px; }
  .mentor-ai-chat-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; }
  .mentor-ai-chat-heading { grid-column: 2; min-width: 0; }
  .mentor-ai-context-controls { order: 3; flex: 1 0 100%; }
  .mentor-ai-context-controls select { max-width: none; }
  .mentor-ai-header-actions { grid-column: 1 / -1; width: 100%; justify-content: space-between; order: 0; }
}

@media (max-width: 520px) {
  .mentor-ai-resize-handle { display: none; }
}

@media (max-width: 800px) {
  .student-learning-assistant-dialog.is-docked { position: fixed; inset: auto; width: min(540px, calc(100vw - 24px)); height: min(640px, calc(100vh - 24px)); height: min(640px, calc(100dvh - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; }
  .student-learning-assistant-dialog .student-learning-assistant-expand { display: none; }
  .student-learning-assistant-form textarea { font-size: var(--text-md); }
}

@media (max-width: 960px) {
  .mentor-ai-composer-tools { flex: 1 1 0; flex-wrap: wrap; }
  .mentor-ai-context-controls { flex: 1 1 100%; order: 2; width: 100%; }
  .mentor-ai-context-controls select { flex: 1 1 0; width: 0; }
  #mentor-ai-composer-hint { order: 3; }
}

@media (max-height: 560px) {
  .student-learning-assistant-panel { gap: 8px; padding: 12px; }
  .student-learning-assistant-intro { display: none; }
}

@media (max-width: 520px) {
  .mentor-ai-context-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mentor-ai-context-controls select { width: 100%; min-width: 0; }
  .container,
  .admin-page {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 2%;
    padding-left: 2%;
    box-sizing: border-box;
  }
  .functional-page, .lecturer-page, .level-page { padding-right: 0; padding-left: 0; }
  .container { padding-right: 2%; padding-left: 2%; }
  .dashboard { padding-top: 25px; }
  .metric-row, .subject-grid { grid-template-columns: 1fr; }
  .metric-tip { display: none; }
  .hero-panel { min-height: 330px; padding: 30px 22px; }
  .hero-panel h1 { font-size: var(--font-size-32px); }
  .mentor-ai-overview-hero { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 30px 22px; }
  .mentor-ai-overview-copy h1 { font-size: var(--font-size-32px); }
  .mentor-ai-overview-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .mentor-ai-overview-actions .button { width: 100%; }
  .mentor-ai-overview-visual { grid-template-columns: auto 1fr auto; justify-items: start; gap: 12px; min-height: 90px; padding: 12px; border-top: 1px solid rgba(23,59,58,.12); border-left: 0; }
  .mentor-ai-visual-index { top: 10px; right: 12px; }
  .mentor-ai-overview-visual svg { width: 42px; height: 42px; margin: 0; }
  .mentor-ai-visual-word { font-size: 18px; text-align: left; }
  .mentor-ai-visual-caption { margin: 0; font-size: 9px; }
  .paid-box { flex-wrap: wrap; }
  .paid-box .button { margin-left: 0; }
  .account-nav { margin-top: 10px; }
  .topic-results { flex-wrap: wrap; }
  .level-page { padding: 25px 0 55px; }
  .level-header { padding: 26px 22px; }
  .level-header h1 { font-size: var(--font-size-26px); }
  .level-content > div, .level-next, .lecturer-panel, .workflow-panel, .topic-panel, .exam-section { padding: 1%; }
  .level-topic { gap: 8px; }
  .curriculum-chapter > span { min-width: 0; }
  .learning-objective { font-size: var(--text-xs); }
  .student-history-panel { padding: 1%; }
  .student-class-chat { padding-top: 20px; }
  .class-chat-layout { grid-template-columns: minmax(0, 1fr); min-height: min(760px, calc(100vh - 220px)); }
  .class-chat-room-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .class-chat-panel-heading { padding: 12px 14px 8px; }
  .class-chat-panel-heading h2 { font-size: var(--text-lg); }
  .class-chat-room-list { display: flex; overflow-x: auto; padding: 8px; }
  .class-chat-room { flex: 0 0 min(230px, 74vw); }
  .class-chat-thread-header { align-items: flex-start; padding: 13px; }
  .class-chat-thread-header h2 { font-size: var(--text-lg); }
  .class-chat-messages { min-height: 260px; padding: 12px; }
  .class-chat-message { max-width: 88%; }
  .class-chat-composer { padding: 10px; }
  .class-voice-panel { padding: 10px; }
  .class-voice-controls { align-items: flex-start; flex-direction: column; gap: 8px; }
  .class-voice-controls > div { justify-content: flex-start; }
  .class-voice-moderator-heading { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .student-history-score { min-width: 0; }
  .section-heading, .panel-heading { display: block; }
  .section-count, .topic-total { display: block; margin-top: 8px; }
  .options { gap: 7px; }
  .options label > span { padding: 11px 12px; font-size: var(--font-size-15px); }
  .account-page { padding: 30px 0 55px; }
  .account-card { padding: 22px 18px; }
  .account-intro h1 { font-size: var(--font-size-34px); }
  .wallet-payment-total { align-items: flex-start; flex-direction: column; gap: 4px; }
  .terms-consent { font-size: var(--text-xs); }
  .admin-table, .student-progress-table { min-width: 640px; }
  .question-bank-tab { width: 100%; justify-content: space-between; }
  .question-bank-chapter summary { align-items: flex-start; font-size: var(--text-sm); }
  .question-bank-chapter summary b { padding-top: 2px; }
}

.question-number,
.chapter-progress-heading,
.admin-message,
.admin-rate-form label,
.chapter-setting-row label,
.chapter-setting-name span,
.admin-table th,
.student-progress-table th { font-size: var(--text-xs); }
.question-card h3 { font-size: var(--font-size-19px); }
.learning-intro,
.level-header p,
.level-topic strong,
.student-progress-table,
.admin-table { font-size: var(--text-md); }
.level-topic small,
.level-next p,
.chapter-menu-title,
.student-progress-table td small,
.progress-value span,
.chapter-progress-summary { font-size: var(--text-sm); }
.chapter-progress-row { font-size: var(--text-xs); line-height: 1.45; }
.answer-feedback { font-size: var(--text-md); }
.button-light,
.chapter-setting-row .button,
.admin-question-row .button { font-size: var(--text-sm); }

.lecturer-hero { position: relative; overflow: hidden; background: linear-gradient(125deg, #edf8f0 0%, #f8fcf8 58%, #fff7e6 100%); }
.lecturer-hero::after { position: absolute; right: 7%; bottom: -92px; width: 220px; height: 220px; border: 1px solid rgba(228, 167, 45, .22); border-radius: 50%; box-shadow: 0 0 0 22px rgba(228, 167, 45, .06), 0 0 0 46px rgba(228, 167, 45, .035); content: ''; }
.lecturer-hero > * { position: relative; z-index: 1; }
.lecturer-hero p { max-width: 680px; }
.lecturer-hero-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lecturer-hero-summary span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #d5e7db; border-radius: 999px; background: rgba(255, 255, 255, .72); color: #58716a; font-size: var(--text-sm); }
.lecturer-hero-summary b { color: var(--teal); font-size: var(--font-size-17px); }
.student-progress-panel { padding-top: 24px; }
.student-progress-table tbody tr { transition: background-color .16s ease; }
.student-progress-table tbody tr:hover { background: #f4faf6; }
.student-progress-table td:first-child strong { color: #174b43; font-size: var(--text-md); }
.progress-track { background: #e5f0e9; }
.progress-track span { background: linear-gradient(90deg, var(--teal), #4caa7a); }

@media (max-width: 520px) {
  .lecturer-hero-summary { display: grid; }
  .lecturer-hero-summary span { justify-content: space-between; }
}

.solar-inspired-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 330px;
  margin-bottom: 54px;
  padding: 52px 58px;
  overflow: hidden;
  border: 1px solid #d4e8dc;
  border-radius: 20px;
  background: linear-gradient(125deg, #eff9f2 0%, #f8fcf8 56%, #fff7e6 100%);
  box-shadow: 0 18px 44px rgba(33, 79, 54, .08);
}
.solar-inspired-hero::after {
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(228, 167, 45, .25);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(228, 167, 45, .08), 0 0 0 58px rgba(228, 167, 45, .04);
  content: '';
}
.solar-inspired-hero .hero-copy { position: relative; z-index: 1; max-width: 620px; }
.solar-inspired-hero h1 { margin: 15px 0 15px; color: #164b55; font-family: Merriweather, Georgia, serif; font-size: var(--font-size-hero); font-weight: 400; line-height: 1.13; letter-spacing: 0; }
.solar-inspired-hero h1 .hero-title-lead { display: block; margin-bottom: .12em; color: #164b55; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: .78em; font-weight: 700; line-height: 1.2; }
.solar-inspired-hero h1 em { display: block; color: var(--teal); font-family: Merriweather, Georgia, serif; font-weight: 700; font-style: italic; }
.solar-inspired-hero p { max-width: 560px; margin-bottom: 0; color: #4c6d69; font-size: var(--text-md); line-height: 1.75; }
.solar-inspired-hero .hero-actions { margin-top: 28px; }
.mentor-ai-game-market-link { margin-left: auto; margin-right: 14px; color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; }
.mentor-ai-game-market-link:hover { color: var(--coral-dark); }
.mentor-ai-saved-game-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: 12px; padding: 6px 10px; border: 1px solid #cfe2d7; border-radius: 6px; background: #f3faf5; color: var(--teal-dark); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.mentor-ai-saved-game-link:hover { border-color: #9dc8ae; background: #eaf6ee; }
.game-market-page { width: 100%; max-width: none; margin: 0; padding: 16px 0 42px; }
.game-play-page { width: 100%; max-width: none; margin: 0; padding: 16px 0 42px; }
.game-market-hero { display: grid; justify-items: start; gap: 14px; margin: 18px 0 28px; padding: 30px 34px; border: 1px solid #d5e7db; border-radius: 12px; background: linear-gradient(120deg, #eff8f2, #fffdf6); }
.game-market-hero h1 { margin: 0; color: var(--ink); font: 400 var(--font-size-34px)/1.2 Merriweather, Georgia, serif; }
.game-market-hero p { max-width: 640px; margin: 0; color: var(--muted); line-height: 1.65; }
.game-market-list { margin-top: 26px; }
.game-market-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.game-market-list-heading { display: grid; justify-items: start; gap: 4px; }
.game-market-list-heading h2 { margin: 0; color: var(--ink); font: 400 var(--text-xl)/1.25 Merriweather, Georgia, serif; }
.game-market-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.game-market-sort label { color: var(--muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.game-market-sort select { min-width: 175px; min-height: 36px; padding: 6px 28px 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: var(--text-xs); }
.game-market-sort .button { min-height: 36px; padding: 6px 10px; font-size: var(--text-xs); }
.game-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.game-market-grid.is-reordering { grid-template-columns: minmax(0, 1fr); }
.game-market-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.game-market-item.is-dragging { border-color: var(--teal); opacity: .58; }
.game-market-actions, .game-play-actions { display: flex; align-items: center; gap: 7px; }
.game-market-actions form, .game-play-actions form { display: flex; margin: 0; }
.game-market-order-controls { display: flex; align-items: center; gap: 3px; }
.game-order-handle, .game-order-move { display: grid; width: 30px; min-width: 30px; height: 32px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--teal-dark); font-size: 15px; font-weight: 700; cursor: pointer; }
.game-order-handle { touch-action: none; cursor: grab; font-size: 18px; }
.game-order-handle:active { cursor: grabbing; }
.game-order-move:hover, .game-order-handle:hover { border-color: #9dc8ae; background: #f2faf4; }
.game-market-icon { position: relative; display: grid; width: 54px; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid transparent; border-radius: 8px; font-size: 27px; line-height: 1; }
.game-market-icon.is-racing { border-color: #f0cabb; background: #fff0e9; }
.game-market-icon.is-puzzle { border-color: #cbd9ed; background: #edf4ff; }
.game-market-icon.is-runner { border-color: #d3e5d6; background: #edf7ee; }
.game-market-icon.is-quiz { border-color: #eedfb2; background: #fff8df; }
.game-market-icon.is-sports { border-color: #c7e1d8; background: #e9f7f0; }
.game-market-icon.is-space { border-color: #d2d3e7; background: #efeffb; }
.game-market-icon.is-default { border-color: #d3e5d6; background: #edf7ee; }
.game-market-item-copy { min-width: 0; }
.game-market-item h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: var(--text-md); text-overflow: ellipsis; white-space: nowrap; }
.game-market-item p { margin: 4px 0; overflow: hidden; color: var(--muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.game-market-item small { color: var(--mentor-ai-muted); font-size: 11px; }
.game-market-item small strong, .game-play-header small strong { color: var(--teal-dark); font-weight: 700; }
.game-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin-top: 7px; }
.game-rating-average { color: var(--ink); font-size: 11px; font-weight: 700; }
.game-rating-count, .game-rating-login { color: var(--muted); font-size: 10px; }
.game-rating-login { text-decoration: underline; text-underline-offset: 2px; }
.game-rating-stars { display: inline-flex; align-items: center; gap: 1px; }
.game-rating-star, .game-rating-star-display { display: inline-grid; width: 20px; height: 22px; place-items: center; padding: 0; border: 0; background: transparent; color: #cbd4ce; font-size: 17px; line-height: 1; }
.game-rating-star { cursor: pointer; }
.game-rating-star.is-selected, .game-rating-star-display.is-filled { color: #e5a92f; }
.game-rating-star:hover, .game-rating-star:focus-visible { color: #c78312; outline: 0; }
.game-rating-star:focus-visible { border-radius: 3px; box-shadow: 0 0 0 2px rgba(199,131,18,.28); }
.game-market-empty { padding: 28px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; }
.game-market-empty strong { color: var(--ink); }
.game-market-empty p { margin: 6px 0 0; }
.game-play-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.game-play-header h1 { margin: 7px 0 3px; color: var(--ink); font: 400 var(--font-size-28px)/1.2 Merriweather, Georgia, serif; }
.game-play-header p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.game-play-header small { display: inline-block; margin-top: 6px; color: var(--mentor-ai-muted); font-size: 11px; }
.game-play-actions .button { box-sizing: border-box; height: 42px; min-height: 42px; padding: 0 12px; gap: 8px; font-size: var(--text-sm); line-height: 1.2; white-space: nowrap; }
.game-play-frame-toolbar { position: relative; z-index: 3; display: flex; flex: 0 0 42px; align-items: center; justify-content: flex-end; padding: 3px 7px; border-bottom: 1px solid var(--line); background: var(--surface); }
.game-fullscreen-toggle { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.game-fullscreen-toggle:hover, .game-fullscreen-toggle:focus-visible { background: var(--mint); color: var(--teal-dark); }
.game-fullscreen-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.game-fullscreen-toggle svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game-fullscreen-leave { display: none; }
.game-fullscreen-toggle.is-fullscreen .game-fullscreen-enter { display: none; }
.game-fullscreen-toggle.is-fullscreen .game-fullscreen-leave { display: block; }
.game-play-frame-wrap { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 462px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.game-play-frame-wrap iframe { display: block; flex: 1 1 auto; width: 100%; height: min(72vh, 760px); min-height: 420px; border: 0; background: #fff; }
.game-play-frame-wrap [data-game-status] { position: absolute; z-index: 2; inset: 42px 0 0; display: grid; place-items: center; margin: 0; background: #fff; color: var(--muted); }
.game-play-frame-wrap [data-game-status].is-error { color: var(--coral-dark); }
.game-play-frame-wrap:fullscreen, .game-play-frame-wrap.is-expanded { position: fixed; z-index: 1500; inset: 0; display: flex; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; border: 0; border-radius: 0; background: #000; }
.game-play-frame-wrap:fullscreen .game-play-frame-toolbar, .game-play-frame-wrap.is-expanded .game-play-frame-toolbar { flex-basis: 42px; border-color: rgba(255,255,255,.14); background: #101614; }
.game-play-frame-wrap:fullscreen .game-fullscreen-toggle, .game-play-frame-wrap.is-expanded .game-fullscreen-toggle { color: #fff; }
.game-play-frame-wrap:fullscreen .game-fullscreen-toggle:hover, .game-play-frame-wrap.is-expanded .game-fullscreen-toggle:hover { background: rgba(255,255,255,.12); }
.game-play-frame-wrap:fullscreen iframe, .game-play-frame-wrap.is-expanded iframe { width: 100%; height: auto; min-height: 0; }
.game-play-frame-wrap:fullscreen [data-game-status], .game-play-frame-wrap.is-expanded [data-game-status] { inset-block-start: 42px; }
body.game-fullscreen-open { overflow: hidden; }
.game-play-reward-status { margin: 8px 0 0; color: var(--teal-dark); font-size: var(--text-xs); }
.game-play-login-prompt { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid #d5e7db; border-radius: 8px; background: #f3faf5; }
.game-play-login-mark { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 8px; background: #e4f2e8; color: var(--teal-dark); font-size: 22px; }
.game-play-login-copy { min-width: 0; }
.game-play-login-copy strong { color: var(--ink); font-size: var(--text-sm); }
.game-play-login-copy p { margin: 3px 0 0; color: var(--muted); font-size: var(--text-xs); }
.game-play-login-actions { display: flex; flex: 0 0 auto; gap: 7px; margin-left: auto; }
.game-play-ad { min-height: 112px; margin-top: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.game-play-ad-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.game-play-ad .adsbygoogle { display: block; min-height: 90px; }
.game-play-reward-settings-form { display: grid; gap: 14px; }
.game-play-reward-toggle { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.game-play-reward-toggle input { width: 18px; height: 18px; accent-color: var(--teal-dark); }
.game-play-reward-settings-form .wallet-settings-item { display: grid; gap: 8px; }
.game-play-reward-settings-form .wallet-settings-item > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-xs); }
.game-play-reward-settings-form .chapter-limit-input { max-width: 180px; }
.mentor-ai-overview-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 42px; min-height: 380px; margin-bottom: 48px; padding: 48px 58px; overflow: hidden; border: 1px solid #d6e5d9; border-radius: 12px; background: linear-gradient(112deg, #f0f8f2 0%, #fffefa 58%, #fcf3e8 100%); }
.mentor-ai-overview-copy { position: relative; z-index: 1; max-width: 650px; }
.mentor-ai-overview-copy .eyebrow { color: var(--coral-dark); }
.mentor-ai-overview-copy h1 { margin: 15px 0; color: var(--ink); font: 400 var(--font-size-44px)/1.12 Merriweather, Georgia, serif; }
.mentor-ai-overview-copy h1 em { color: var(--teal); font-weight: 700; }
.mentor-ai-overview-copy > p { max-width: 520px; margin: 0; color: var(--mentor-ai-muted); font-size: var(--text-md); line-height: 1.7; }
.mentor-ai-overview-actions { display: flex; align-items: center; gap: 20px; margin-top: 25px; }
.mentor-ai-overview-actions .button { min-height: 46px; gap: 13px; }
.mentor-ai-overview-wallet { display: inline-flex; align-items: center; gap: 7px; color: var(--teal-dark); font-size: var(--text-sm); font-weight: 700; }
.mentor-ai-overview-wallet > span { color: var(--coral); font-size: 19px; }
.mentor-ai-overview-wallet:hover { color: var(--coral-dark); }
.mentor-ai-overview-note { display: flex; align-items: center; gap: 7px; margin-top: 23px; color: var(--mentor-ai-muted); font-size: var(--text-xs); }
.mentor-ai-overview-note > span { color: #54713b; }
.mentor-ai-overview-visual { position: relative; display: grid; min-height: 250px; align-content: center; justify-items: center; overflow: hidden; border-left: 1px solid rgba(23,59,58,.12); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(23,59,58,.035) 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(23,59,58,.035) 28px); }
.mentor-ai-visual-index { position: absolute; top: 5px; right: 7px; color: var(--mentor-ai-muted); font-size: 11px; font-weight: 700; }
.mentor-ai-overview-visual svg { width: 82px; height: 82px; margin-bottom: 11px; color: var(--coral-dark); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mentor-ai-visual-word { color: var(--ink); font: 700 28px/.95 Merriweather, Georgia, serif; text-align: center; }
.mentor-ai-visual-word em { color: var(--teal); font-style: normal; }
.mentor-ai-visual-caption { margin-top: 17px; color: var(--mentor-ai-muted); font-size: 10px; font-weight: 700; }
.hero-note { display: inline-flex; align-items: center; gap: 7px; color: #5e756f; font-size: var(--text-sm); }
.hero-note b { color: var(--yellow); font-size: var(--font-size-19px); }
.hero-signal { position: absolute; right: 13%; z-index: 1; display: grid; place-items: center; width: 128px; height: 128px; border: 1px solid rgba(35, 108, 138, .18); border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--blue); font-size: var(--font-size-28px); font-weight: 700; text-decoration: none; box-shadow: 0 12px 32px rgba(35, 108, 138, .1); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; }
.hero-signal:hover { transform: scale(1.05); border-color: rgba(11, 116, 109, .4); color: var(--teal-dark); box-shadow: 0 16px 36px rgba(23, 59, 58, .16); }
.hero-signal:focus-visible { outline: 3px solid rgba(11, 116, 109, .32); outline-offset: 7px; }
.hero-signal::before, .hero-signal::after { position: absolute; border: 1px solid rgba(35, 108, 138, .2); border-radius: 50%; content: ''; }
.hero-signal::before { inset: -18px; }
.hero-signal::after { inset: -38px; opacity: .5; }
.hero-signal i, .hero-signal b { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); content: ''; }
.hero-signal i { top: -13px; right: 14px; }
.hero-signal b { bottom: 3px; left: 1px; background: var(--teal); }
.subject-grid { max-width: 980px; gap: 20px; }
.subject-card { padding: 26px; border-radius: 14px; box-shadow: 0 5px 18px rgba(25, 70, 49, .035); }
.subject-card:hover, .subject-card.selected { border-color: #a7d7ba; box-shadow: 0 16px 34px rgba(25, 70, 49, .1); }
.subject-card h3 { color: #174b43; font-size: var(--text-xl); }
.subject-card p { min-height: 46px; font-size: var(--font-size-15px); line-height: 1.65; }
.card-meta { font-size: var(--text-xs); }
.section-block { margin-bottom: 78px; }
.section-heading h2, .panel-heading h2 { color: #174b43; }
.level-header { border-color: #cfe5d7; background: linear-gradient(135deg, #edf8f0, #f8fcf8); box-shadow: 0 10px 28px rgba(33, 79, 54, .05); }
.level-content > div, .level-next, .lecturer-panel, .account-card, .admin-table-wrap { box-shadow: 0 7px 22px rgba(25, 70, 49, .045); }
.level-next { border-color: #eadfbf; background: linear-gradient(145deg, #fffaf0, #fffdf8); }
.lecturer-panel { border-radius: 14px; }
.admin-page h1, .lecturer-header h1 { color: #174b43; }
.tab-button { border-radius: 999px; background: #f8fcfa; }
.tab-button:hover, .tab-button.is-active { border-color: #a7d7ba; background: #eaf7ee; color: #174b43; }
.wallet-minimum-settings { border-color: #d5e7db; background: linear-gradient(135deg, #f7fcf8, #fffdf5); }
.account-intro h1 { color: #174b43; }
.account-card { border-color: #d8e8df; }

@media (max-width: 800px) {
  .solar-inspired-hero { min-height: 360px; margin-bottom: 38px; padding: 34px 28px; }
  .solar-inspired-hero p { font-size: var(--text-md); }
  .hero-signal { right: 8%; bottom: 22px; width: 82px; height: 82px; font-size: var(--text-xl); }
  .hero-signal::before { inset: -12px; }
  .hero-signal::after { inset: -24px; }
}

@media (max-width: 520px) {
  .solar-inspired-hero { min-height: 430px; padding: 28px 21px; }
  .solar-inspired-hero h1 { font-size: var(--font-size-32px); }
  .solar-inspired-hero .hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .solar-inspired-hero .button { width: 100%; }
  .game-market-page, .game-play-page { padding: 12px 0 28px; }
  .game-market-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .game-market-sort { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .game-market-sort select { min-width: 0; width: 100%; }
  .game-play-page { padding-top: 4px; }
  .game-market-hero { gap: 11px; margin: 14px 0 22px; padding: 22px 18px; }
  .game-market-hero h1 { font-size: var(--font-size-28px); }
  .game-market-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .game-market-item { grid-template-columns: 44px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .game-market-actions { grid-column: 2; }
  .game-market-icon { width: 44px; font-size: 23px; }
  .game-market-item h3 { font-size: var(--text-sm); }
  .game-market-item p { font-size: 11px; }
  .game-market-item .button { min-height: 32px; padding: 6px 8px; font-size: 11px; }
  .game-play-header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-bottom: 10px; }
  .game-play-header > div:first-child { min-width: 0; }
  .game-play-header h1 { margin: 3px 0 2px; font-size: 18px; line-height: 1.15; }
  .game-play-header p { font-size: 12px; line-height: 1.35; }
  .game-play-header small { margin-top: 3px; }
  .game-play-actions { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
  .game-play-actions .button { height: 34px; min-height: 34px; padding: 0 10px; font-size: 12px; }
  .game-play-login-prompt { align-items: flex-start; flex-wrap: wrap; padding: 12px; }
  .game-play-login-copy { flex: 1 1 calc(100% - 52px); }
  .game-play-login-actions { width: 100%; margin-left: 0; }
  .game-play-login-actions .button { flex: 1 1 0; justify-content: center; }
  .game-play-frame-wrap { min-height: 0; }
  .game-play-frame-wrap iframe { min-height: 62vh; min-height: 62dvh; }
  .hero-signal { right: 35px; bottom: 28px; }
  .mentor-ai-overview-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; margin-bottom: 30px; padding: 26px 20px; }
  .mentor-ai-overview-copy { max-width: none; min-width: 0; }
  .mentor-ai-overview-copy .eyebrow { letter-spacing: .08em; overflow-wrap: normal; word-break: normal; }
  .mentor-ai-overview-copy h1 { font-size: 32px; line-height: 1.18; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
  .mentor-ai-overview-copy > p { font-size: 15px; line-height: 1.55; }
  .mentor-ai-overview-actions { align-items: stretch; flex-direction: column; gap: 12px; margin-top: 20px; }
  .mentor-ai-overview-actions .button { width: 100%; }
  .mentor-ai-overview-note { align-items: flex-start; margin-top: 18px; }
  .mentor-ai-overview-visual { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 7px; min-height: 112px; padding: 16px 0 0; border-top: 1px solid rgba(23,59,58,.12); border-left: 0; text-align: center; }
  .mentor-ai-overview-visual svg { width: 38px; height: 38px; margin: 0; stroke-width: 1.9; }
  .mentor-ai-visual-index { top: 10px; right: 4px; }
  .mentor-ai-visual-word { font-size: 18px; text-align: center; }
  .mentor-ai-visual-caption { grid-column: 1; margin: 0; font-size: 12px; line-height: 1.35; letter-spacing: .04em; text-align: center; }
}

/* Typography scale follows the reference school portal: readable body, restrained headings. */
.hero-panel h1 { font-family: Merriweather, Georgia, serif; font-size: var(--font-size-40px); font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.hero-panel p { font-size: var(--text-md); }
.eyebrow { font-size: var(--text-xs); letter-spacing: 1px; }
.subject-card p, .topic-item small, .step small, .payment-box small, .paid-box small, .result-content > p { font-size: var(--text-sm); }
.card-meta, .section-count, .topic-total, .question-number { font-size: var(--text-xs); }
.nav-link, .nav-register, .account-greeting, .account-greeting small { font-size: var(--text-sm); }

.shared-report-page { display: grid; min-height: calc(100vh - 70px); place-items: center; padding: 48px 20px 64px; background: radial-gradient(circle at 50% 0%, #fffdf4 0, var(--paper) 48%, #eaf4ef 100%); }
.shared-report-card { width: min(100%, 760px); }
.certificate-card { padding: 10px; border: 1px solid #d8b85a; border-radius: 8px; background: #fffdf5; box-shadow: 0 20px 50px rgba(23, 59, 58, .12); }
.certificate-frame { position: relative; overflow: hidden; padding: 40px 48px 36px; border: 1px solid rgba(185, 133, 37, .55); background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 250, 228, .82)); text-align: center; }
.certificate-frame::before, .certificate-frame::after { position: absolute; z-index: 0; width: 26px; height: 26px; border-color: var(--gold); content: ''; pointer-events: none; }
.certificate-frame::before { top: 18px; left: 18px; border-top: 2px solid; border-left: 2px solid; }
.certificate-frame::after { right: 18px; bottom: 18px; border-right: 2px solid; border-bottom: 2px solid; }
.certificate-frame > * { position: relative; z-index: 1; }
.certificate-frame > .eyebrow { color: var(--gold); font-weight: 700; }
.certificate-rule { width: 100px; height: 2px; margin: 18px auto 22px; background: var(--gold); }
.certificate-kicker { margin: 0; color: var(--teal-dark); font-family: Merriweather, Georgia, serif; font-size: var(--text-lg); font-weight: 700; }
.certificate-frame h1 { margin: 16px 0 4px; color: var(--ink); font-family: Merriweather, Georgia, serif; font-size: clamp(22px, 3.2vw, 32px); font-weight: 400; line-height: 1.25; }
.shared-report-level { margin: 0; color: var(--muted); }
.shared-report-lesson { margin: 6px 0 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; }
.certificate-student { display: grid; gap: 6px; margin: 28px auto 0; }
.certificate-student p { display: flex; justify-content: center; gap: 8px; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.certificate-student span { color: var(--muted); }
.certificate-student strong { color: var(--ink); font-weight: 700; }
.shared-report-score { display: grid; width: 128px; height: 128px; place-content: center; margin: 24px auto 20px; border: 2px solid var(--gold); border-radius: 50%; background: #fffaf0; box-shadow: 0 0 0 7px rgba(185, 133, 37, .12); }
.shared-report-score strong { color: var(--teal-dark); font-size: 36px; line-height: 1; }
.shared-report-score span { margin-top: 5px; color: var(--muted); font-size: var(--text-sm); }
.shared-report-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); justify-content: center; gap: 14px; }
.shared-report-stats div { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .75); }
.shared-report-stats b { color: var(--teal-dark); font-size: var(--text-lg); line-height: 1.1; }
.shared-report-stats span { color: var(--muted); font-size: var(--text-sm); }
.shared-report-date { margin: 26px 0 0; color: var(--muted); font-size: var(--text-sm); }
.shared-report-note { margin: 26px 0 0; color: var(--teal-dark); font-size: var(--text-sm); }
.shared-report-empty { padding: 48px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }

@media (max-width: 520px) {
  .shared-report-page { padding: 24px 12px 36px; }
  .certificate-frame { padding: 30px 16px 24px; }
  .certificate-frame::before, .certificate-frame::after { width: 18px; height: 18px; }
  .certificate-frame::before { top: 10px; left: 10px; }
  .certificate-frame::after { right: 10px; bottom: 10px; }
  .certificate-student p { display: grid; gap: 2px; }
  .shared-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shared-report-stats div { padding: 12px 8px; }
}

.exam-share-box { display: grid; gap: 12px; margin-top: 18px; padding: 20px; border: 1px solid #cfe5d7; border-radius: var(--radius-md); background: #f8fcfa; }
.exam-share-heading { display: grid; gap: 3px; }
.exam-share-heading strong { color: var(--teal-dark); font-size: var(--text-lg); }
.exam-share-box p { margin: 0; color: var(--muted); font-size: var(--font-size-15px); }
.exam-share-link { display: flex; gap: 8px; }
.exam-share-link input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: var(--text-sm); }
.exam-share-box .button { justify-self: start; }
.exam-share-status { min-height: 20px; color: var(--teal-dark); font-size: var(--text-sm); }

@media (max-width: 520px) {
  .exam-share-link { align-items: stretch; flex-direction: column; }
  .exam-share-link .button { width: 100%; }
  .exam-share-box .button { width: 100%; }
}

/* Shared typography scale: equal semantic elements use equal sizes across pages. */
body { font-size: var(--text-md); line-height: 1.55; }
button, input, select, textarea { font-size: var(--text-sm); }
.button { min-height: 42px; font-size: var(--text-sm); }
.level-header h1, .lecturer-header h1, .admin-page h1 { font-size: var(--font-size-32px); line-height: 1.2; }
.section-heading h2, .panel-heading h2, .level-content h2, .student-history-panel h2, .account-heading h2 { font-size: var(--text-xl); line-height: 1.3; }
.subject-card h3, .question-card h3, .question-bank-item h3 { font-size: var(--text-lg); line-height: 1.5; }
.level-header p, .level-content p, .lecturer-header p, .chapter-settings-note, .admin-table, .student-progress-table { font-size: var(--text-md); }
.account-card form > label, .admin-user-filter-form label, .question-attachment-form > label, .admin-rate-form label { font-size: var(--text-sm); }
.account-input, .admin-note-input, .chapter-limit-input, .exam-share-link input { font-size: var(--text-sm); }
.admin-table th, .student-progress-table th, .question-number, .question-bank-meta, .card-meta, .section-count, .topic-total { font-size: var(--text-xs); }
.admin-table td, .student-progress-table td, .question-bank-option, .options label > span { font-size: var(--text-md); }
.admin-table td small, .student-progress-table td small, .question-bank-option strong, .form-alert, .form-success, .field-error { font-size: var(--text-xs); }
.question-materials .button, .student-history-actions .button, .admin-user-edit-form .button, .admin-user-action-form .button, .admin-user-approve-form .button { font-size: var(--text-sm); }

@media (max-width: 520px) {
  .level-header h1, .lecturer-header h1, .admin-page h1 { font-size: var(--font-size-28px); }
  .section-heading h2, .panel-heading h2, .level-content h2, .student-history-panel h2, .account-heading h2 { font-size: var(--font-size-22px); }
  .question-card { padding: 16px; }
  .answer-feedback { padding: 16px; }
  .ai-followup-answer { padding: 14px; }
}

@media (max-width: 520px) {
  .hero-panel,
  .solar-inspired-hero,
  .level-header,
  .workflow-panel,
  .topic-panel,
  .exam-section,
  .result-section,
  .question-card,
  .answer-feedback,
  .learning-intro,
  .account-card,
  .functional-panel,
  .lecturer-panel,
  .student-history-panel,
  .wallet-minimum-settings,
  .question-bank-item,
  .admin-curriculum-chapter,
  .exam-share-box,
  .shared-report-empty,
  .certificate-frame { padding: 1%; }
  .video-quiz-generate-form { align-items: flex-start; flex-direction: column; }
  .question-editor-explanation-row { grid-template-columns: minmax(0, 1fr); }
  .video-quiz-options-editor { grid-template-columns: minmax(0, 1fr); }
  .video-quiz-question-controls .button { margin-left: 0; }
  .functional-table th,
  .functional-table td,
  .admin-table th,
  .admin-table td,
  .student-progress-table th,
  .student-progress-table td { padding: 1%; }
}

@media (max-width: 700px) {
  .question-attachment-form { grid-template-columns: 1fr; }
  .question-attachment-form .question-pdf-input { line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .question-bank-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .question-bank-actions .button { flex: 1 1 140px; }
}

@media (max-width: 520px) {
  .topic-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-results div { min-width: 0; }
  .chapter-menu-item { grid-template-columns: 32px minmax(0, 1fr) 16px; }
  .chapter-menu-title,
  .question-bank-chapter summary span { min-width: 0; overflow-wrap: anywhere; }
  .lecturer-exam-history { min-width: 0; }
  .progress-track { width: 100%; max-width: 150px; }
  .admin-subject-tab-list { grid-template-columns: 1fr; }
  .admin-subject-tab { min-width: 0; }
  .admin-subject-tab span { min-width: 0; overflow-wrap: anywhere; }
}

.functional-table thead th,
.admin-table thead th,
.student-progress-table thead th { padding: var(--table-header-padding-y) var(--table-row-padding-x); }
.functional-table tbody td,
.admin-table tbody td,
.student-progress-table tbody td { padding: var(--table-row-padding-y) var(--table-row-padding-x); }
.functional-table tbody .button,
.functional-table tbody button,
.functional-table tbody input[type="button"],
.functional-table tbody input[type="submit"],
.admin-table tbody .button,
.admin-table tbody button,
.admin-table tbody input[type="button"],
.admin-table tbody input[type="submit"],
.student-progress-table tbody button,
.student-progress-table tbody input[type="button"],
.student-progress-table tbody input[type="submit"],
.student-progress-table tbody .button { height: var(--table-control-height); min-height: var(--table-control-height); padding: var(--table-control-padding-y) var(--table-control-padding-x); font-size: var(--table-control-font-size); line-height: var(--table-control-line-height); }
.functional-table tbody input:not([type="hidden"]):not([type="checkbox"]),
.admin-table tbody input:not([type="hidden"]):not([type="checkbox"]),
.student-progress-table tbody input:not([type="hidden"]):not([type="checkbox"]),
.functional-table tbody select,
.admin-table tbody select,
.student-progress-table tbody select { box-sizing: border-box; height: var(--table-control-height); min-height: var(--table-control-height); padding: var(--table-control-padding-y) var(--table-control-padding-x); font-size: var(--table-control-font-size); line-height: var(--table-control-line-height); }

@media (min-width: 821px) {
  .container.video-page-container { width: min(1800px, calc(100% - 48px)); max-width: none; }
}

@media (min-width: 1200px) {
  .subject-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1280px; }
}

@media (max-width: 800px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
  select,
  textarea { font-size: var(--text-md); }
}