/* Commercial game skin shared with the public landing. Loaded last on purpose. */
body { background: var(--lq-ivory) !important; color: var(--lq-navy) !important; }
body.editorial-shell-active #app > .screen { background: var(--lq-ivory) !important; }

.screen-header,
.home-header,
.quiz-header,
.qb-header {
  min-height: 82px !important;
  height: auto !important;
  max-height: none !important;
  padding-block: 14px !important;
  background: rgba(255,253,248,.97) !important;
  border-bottom: 1px solid var(--lq-line) !important;
  color: var(--lq-navy) !important;
  box-shadow: none !important;
}
.screen-title-group { min-width: 0; flex: 1; }
.screen-title-group h2 { margin: 0 !important; color: var(--lq-navy) !important; }
.screen-description {
  margin: 4px 0 0 !important;
  color: var(--lq-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  letter-spacing: 0 !important;
}
.screen-content { color: var(--lq-navy); }
.card, .stat-card, .instruction-card, .achievement-card, .shop-item-card, .scenario-card {
  border-color: var(--lq-line) !important;
  border-radius: 8px !important;
  background: var(--lq-paper) !important;
  box-shadow: none !important;
}
.primary-btn, .secondary-btn, .qb-btn, .menu-btn, .shop-buy-btn {
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Pixel-safe icon geometry: no inherited tint, gradient or optical drift. */
.lq-generated-icon,
.bnav-icon,
.menu-btn-icon > img,
.qb-btn > img,
.back-btn-float > img,
.activation-logo .logo-icon,
.role-icon > img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

#home-screen .menu-btn-icon {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f1ebdf !important;
  background-image: none !important;
  box-shadow: none !important;
  line-height: 0 !important;
}
#home-screen .menu-btn-icon::before,
#home-screen .menu-btn-icon::after { display: none !important; content: none !important; }
#home-screen .menu-btn-icon > img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}

#teacher-auth-screen .activation-logo,
#student-auth-screen .activation-logo {
  display: flex !important;
  width: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  text-align: center !important;
}
#teacher-auth-screen .activation-logo .logo-icon,
#student-auth-screen .activation-logo .logo-icon {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto !important;
  background-position: 50% 50% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
#teacher-auth-screen .activation-logo h2,
#student-auth-screen .activation-logo h2 { width: 100%; margin: 0 !important; text-align: center !important; }
.back-btn-float {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;
}
.back-btn-float > img { display: block; width: 24px; height: 24px; margin: 0; }

.qb-list-header .qb-btn {
  display: inline-flex !important;
  min-height: 44px;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 1px solid var(--lq-navy) !important;
  background: var(--lq-navy) !important;
  background-image: none !important;
  color: #fff !important;
  filter: none !important;
}
.qb-list-header .qb-btn:hover { background: var(--lq-cobalt) !important; filter: none !important; }
.qb-list-header .qb-btn > img {
  display: block !important;
  box-sizing: content-box;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 4px !important;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--lq-paper) !important;
  background-image: none !important;
}
.qb-list-header .shio-trigger-btn { border-color: var(--lq-orange) !important; background: var(--lq-orange) !important; }
.qb-list-header .shio-trigger-btn:hover { background: #c9492e !important; }

#role-selection-screen .activation-content {
  width: min(920px, calc(100% - 32px));
  padding: clamp(30px, 5vw, 64px) !important;
  border: 1px solid var(--lq-line);
  border-radius: 10px !important;
  background: var(--lq-paper) !important;
  box-shadow: 0 24px 70px rgba(16,43,80,.09) !important;
}
#role-selection-screen .activation-logo h1 {
  margin: 14px 0 8px !important;
  color: var(--lq-navy) !important;
  font: 700 clamp(34px, 5vw, 56px)/1.05 var(--lq-serif) !important;
}
#role-selection-screen .activation-logo { display: flex !important; flex-direction: column; align-items: center; }
.role-selection-intro { max-width: 620px; margin: 0 auto 26px; color: var(--lq-muted); font-size: 16px; }
#role-selection-screen .logo-badge {
  margin-top: 12px !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; color: var(--lq-orange) !important;
  font-size: 11px !important; letter-spacing: .13em; text-transform: uppercase; box-shadow: none !important;
}
#role-selection-screen .role-card {
  padding: 28px !important;
  border: 1px solid var(--lq-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
}
#role-selection-screen .role-card:hover { border-color: var(--lq-cobalt) !important; transform: translateY(-2px); }
#role-selection-screen .role-icon { height: 62px; background: none !important; }
#role-selection-screen .role-icon img { width: 56px; height: 56px; object-fit: contain; }
#role-selection-screen .role-name { font: 700 22px/1.2 var(--lq-serif) !important; color: var(--lq-navy) !important; }
#role-selection-screen .role-desc { color: var(--lq-muted) !important; }

/* Short and landscape viewports must scroll from the real top of the screen.
   Centering an oversized flex child placed the brand above the viewport. */
#role-selection-screen.screen.active {
  justify-content: flex-start !important;
  overflow-y: auto !important;
  padding-block: 16px;
}
#role-selection-screen .activation-content {
  flex: 0 0 auto;
  margin: 0 auto;
}

/* Shio: one mature, readable component for creator, tutor and roleplay. */
.shio-modal { padding: 20px !important; background: rgba(16,43,80,.42) !important; backdrop-filter: blur(8px) !important; }
.shio-container {
  width: min(620px, 100%) !important;
  height: min(720px, calc(100dvh - 40px)) !important;
  overflow: hidden;
  border: 1px solid var(--lq-line) !important;
  border-radius: 10px !important;
  background: var(--lq-paper) !important;
  box-shadow: 0 28px 80px rgba(16,43,80,.22) !important;
}
.shio-header {
  min-height: 88px !important;
  padding: 16px 20px !important;
  background: var(--lq-paper) !important;
  border-bottom: 1px solid var(--lq-line) !important;
  color: var(--lq-navy) !important;
}
.shio-header .shio-logo {
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
}
.shio-header .shio-title { color: var(--lq-navy) !important; font: 700 20px/1.15 var(--lq-serif) !important; }
.shio-header .shio-subtitle { color: var(--lq-muted) !important; opacity: 1 !important; }
.shio-header .shio-close-btn {
  width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
  border: 1px solid var(--lq-line) !important; border-radius: 50% !important;
  background: transparent !important; color: var(--lq-navy) !important; box-shadow: none !important;
}
.shio-messages { background: #f5f1e8 !important; }
.shio-avatar {
  width: 38px !important; height: 38px !important; flex: 0 0 38px !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
.shio-bubble-bot, .shio-message.bot .shio-bubble, .shio-message.assistant .shio-bubble {
  border: 1px solid var(--lq-line) !important; border-radius: 8px 8px 8px 2px !important;
  background: var(--lq-paper) !important; color: var(--lq-navy) !important; box-shadow: none !important;
}
.shio-bubble-user, .shio-message.user .shio-bubble { border-radius: 8px 8px 2px 8px !important; background: var(--lq-navy) !important; color: #fff !important; }
.shio-input-bar { gap: 10px !important; padding: 14px 16px !important; background: #fff !important; border-top: 1px solid var(--lq-line) !important; }
.shio-input {
  height: 46px !important; padding: 0 15px !important; border: 1px solid var(--lq-line) !important;
  border-radius: 5px !important; background: var(--lq-paper) !important; color: var(--lq-navy) !important; box-shadow: none !important;
}
.shio-input:focus { border-color: var(--lq-cobalt) !important; box-shadow: 0 0 0 3px rgba(18,75,154,.10) !important; }
.shio-send-btn {
  display: grid !important; width: 46px !important; height: 46px !important; flex: 0 0 46px !important;
  place-items: center; padding: 0 !important; border: 1px solid var(--lq-navy) !important;
  border-radius: 50% !important; background: var(--lq-navy) !important; color: #fff !important; box-shadow: none !important;
}
.shio-send-btn:hover { background: var(--lq-orange) !important; transform: translateY(-1px) !important; }
.shio-send-btn img { width: 18px; height: 18px; object-fit: contain; }

/* Shio creator: high contrast conversation and a human-readable quiz draft. */
#shio-modal .shio-bubble-user {
  background: #124b9a !important;
  color: #fff !important;
  border: 1px solid #0d3a78 !important;
}
#shio-modal .shio-bubble-user,
#shio-modal .shio-bubble-user * { color: #fff !important; opacity: 1 !important; }
#shio-modal .shio-bubble-bot { max-width: min(88%, 500px) !important; overflow: hidden; }
#shio-modal .shio-bubble-bot > p:first-child { margin-top: 0; }
#shio-modal .shio-bubble-bot > p:last-child { margin-bottom: 0; }
#shio-modal .shio-send-btn {
  background: #124b9a !important;
  border-color: #124b9a !important;
  box-shadow: 0 5px 14px rgba(18,75,154,.22) !important;
}
#shio-modal .shio-send-btn:hover,
#shio-modal .shio-send-btn:focus-visible { background: #ec5b35 !important; border-color: #ec5b35 !important; }
#shio-modal .shio-send-btn img { filter: brightness(0) invert(1); }
.shio-quiz-preview {
  margin-top: 14px; padding: 16px; border: 1px solid #cfc5b4; border-left: 4px solid #124b9a;
  border-radius: 7px; background: #fffdf8; color: #102b50;
}
.shio-quiz-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shio-quiz-preview-head span { display: block; margin-bottom: 3px; color: #176340; font: 800 10px/1.2 var(--lq-sans); letter-spacing: .11em; text-transform: uppercase; }
.shio-quiz-preview-head h4 { margin: 0; color: #102b50; font: 700 19px/1.18 var(--lq-serif); }
.shio-quiz-preview-head > b { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #edf3fb; color: #124b9a; font-size: 11px; }
.shio-quiz-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0; }
.shio-quiz-meta span { padding: 4px 7px; border: 1px solid #d9d0c0; border-radius: 999px; color: #485c78; font-size: 11px; }
.shio-quiz-preview > p { margin: 8px 0; color: #485c78; font-size: 13px; }
.shio-quiz-preview ol { margin: 12px 0 6px; padding: 10px 12px; list-style: none; border-top: 1px solid #e4ddcf; border-bottom: 1px solid #e4ddcf; }
.shio-quiz-preview li { margin: 7px 0; color: #344a67; font-size: 12px; line-height: 1.4; }
.shio-quiz-preview small { display: block; color: #64748b; font-size: 11px; }
.shio-quiz-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: 14px; }
.shio-quiz-actions button { min-height: 40px; padding: 8px 10px; border-radius: 5px; font: 800 12px/1.2 var(--lq-sans); cursor: pointer; }
.shio-quiz-edit { border: 1px solid #cfc5b4; background: #fff; color: #124b9a; }
.shio-quiz-apply { border: 1px solid #124b9a; background: #124b9a; color: #fff; }
.shio-quiz-edit:hover { border-color: #124b9a; background: #edf3fb; }
.shio-quiz-apply:hover { border-color: #ec5b35; background: #ec5b35; }

@media (max-width: 520px) {
  .shio-quiz-actions { grid-template-columns: 1fr; }
  #shio-modal .shio-bubble-bot { max-width: calc(100% - 48px) !important; }
}

.live-final-message { padding-block: clamp(24px, 5vh, 52px) !important; }
.live-final-message h3 { margin-bottom: 10px !important; }
.live-final-podium { margin-top: 18px; }
.live-student-final-score { display: inline-flex; align-items: baseline; gap: 8px; margin: 12px 0 4px; color: var(--lq-navy); }
.live-student-final-score strong { font: 700 clamp(44px, 8vw, 72px)/1 var(--lq-serif); }
.live-student-final-score span { color: var(--lq-muted); font-weight: 800; }
.live-final-rank { display: inline-block; margin: 8px 0 !important; padding: 6px 12px; border: 1px solid var(--lq-line); border-radius: 999px; color: var(--lq-cobalt) !important; font-weight: 800; }

/* The teacher home is a workbench, not a student learning route. */
.editorial-student-home[hidden], .editorial-teacher-home[hidden],
#home-screen .home-menu[hidden], #home-screen .home-stats-bar[hidden] { display: none !important; }
.editorial-teacher-home { display: grid; gap: 22px; width: 100%; }
.teacher-home-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: clamp(24px, 4vw, 42px); border: 1px solid var(--lq-line); border-top: 3px solid var(--lq-cobalt); background: var(--lq-paper);
}
.teacher-home-hero h2 { margin: 5px 0 8px; color: var(--lq-navy); font: 700 clamp(30px, 4vw, 48px)/1.05 var(--lq-serif); }
.teacher-home-hero p { max-width: 660px; margin: 0; color: var(--lq-muted); }
.teacher-home-hero .editorial-primary-action { flex: 0 0 auto; }
.teacher-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.teacher-home-card {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; min-height: 104px; padding: 18px;
  border: 1px solid var(--lq-line); border-radius: 7px; background: rgba(255,253,248,.78); color: var(--lq-navy); text-align: left; cursor: pointer;
}
.teacher-home-card:hover { border-color: #98a8ba; background: #fffdf8; transform: translateY(-1px); }
.teacher-home-card img { width: 46px; height: 46px; object-fit: contain; }
.teacher-home-card span { display: grid; gap: 4px; }
.teacher-home-card b { font: 700 20px/1.15 var(--lq-serif); }
.teacher-home-card small { color: var(--lq-muted); font: 600 12px/1.35 var(--lq-sans); }
.teacher-home-card i { color: var(--lq-cobalt); font-size: 21px; font-style: normal; }
.teacher-home-shio {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px; padding: 22px 24px;
  border: 1px solid var(--lq-line); border-left: 4px solid var(--lq-orange); background: #f6f1e7;
}
.teacher-home-shio > img { width: 54px; height: 54px; object-fit: contain; }
.teacher-home-shio h3 { margin: 4px 0; color: var(--lq-navy); font: 700 24px/1.15 var(--lq-serif); }
.teacher-home-shio p { margin: 0; color: var(--lq-muted); font-size: 13px; }
.teacher-home-shio > button { min-height: 42px; padding: 0 18px; border: 1px solid var(--lq-navy); border-radius: 5px; background: var(--lq-navy); color: #fff; font-weight: 800; cursor: pointer; }
.teacher-home-shio > button:hover { border-color: var(--lq-orange); background: var(--lq-orange); }
body.home-role-teacher #home-screen .welcome-title { font-size: clamp(34px, 4vw, 56px) !important; }

.teacher-home-summary { display: grid; grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr); min-height: 300px; overflow: hidden; border: 1px solid var(--lq-line); border-top: 3px solid var(--lq-cobalt); background: var(--lq-paper); }
.teacher-home-summary > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.teacher-home-summary__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 46px); }
.teacher-home-summary h2 { margin: 6px 0 10px; color: var(--lq-navy); font: 700 clamp(30px, 4vw, 46px)/1.06 var(--lq-serif); }
.teacher-home-summary p { margin: 0; color: var(--lq-muted); }
.teacher-home-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 28px; border: 1px solid var(--lq-line); background: var(--lq-line); }
.teacher-home-metrics > div { display: grid; gap: 4px; padding: 14px 12px; background: #fffdf8; }
.teacher-home-metrics strong { color: var(--lq-navy); font: 700 28px/1 var(--lq-serif); }
.teacher-home-metrics span { color: var(--lq-muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.teacher-home-content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); gap: 14px; }
.teacher-home-library, .teacher-home-insight { border: 1px solid var(--lq-line); background: rgba(255,253,248,.82); }
.teacher-home-library { padding: 22px; }
.teacher-home-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--lq-line); }
.teacher-home-section-head h3, .teacher-home-insight h3, .teacher-home-roleplays h3 { margin: 4px 0 0; color: var(--lq-navy); font: 700 26px/1.15 var(--lq-serif); }
.teacher-home-section-head > button { padding: 8px 12px; border: 1px solid var(--lq-cobalt); border-radius: 4px; background: transparent; color: var(--lq-cobalt); font-weight: 800; cursor: pointer; }
.teacher-home-list { display: grid; }
.teacher-home-list > button { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 4px; border: 0; border-bottom: 1px solid #e6dfd3; background: transparent; color: var(--lq-navy); text-align: left; cursor: pointer; }
.teacher-home-list > button span { display: grid; gap: 3px; }
.teacher-home-list > button b { font: 700 16px/1.2 var(--lq-serif); }
.teacher-home-list > button small { color: var(--lq-muted); }
.teacher-home-list > button i { padding: 4px 7px; border: 1px solid #d5ccbd; border-radius: 999px; color: var(--lq-muted); font-size: 10px; font-style: normal; }
.teacher-home-list > button:hover b { color: var(--lq-cobalt); }
.teacher-home-empty { display: grid; gap: 7px; padding: 22px 2px 4px; color: var(--lq-muted); }
.teacher-home-empty b { color: var(--lq-navy); font: 700 18px var(--lq-serif); }
.teacher-home-empty button { justify-self: start; margin-top: 5px; padding: 8px 12px; border: 1px solid var(--lq-navy); border-radius: 4px; background: var(--lq-navy); color: white; font-weight: 800; cursor: pointer; }
.teacher-home-insight { display: grid; align-content: start; gap: 16px; padding: 24px; border-left: 4px solid var(--lq-orange); background: #f3eee4; }
.teacher-home-insight > img { width: 52px; height: 52px; object-fit: contain; }
.teacher-home-insight p { margin: 12px 0 0; color: var(--lq-muted); line-height: 1.6; }
.teacher-home-roleplays { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid var(--lq-line); background: var(--lq-paper); }
.teacher-home-roleplays > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.teacher-home-roleplays > div { align-self: center; padding: clamp(24px, 4vw, 42px); }
.teacher-home-roleplays p { color: var(--lq-muted); line-height: 1.55; }
.teacher-home-inline-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.teacher-home-inline-list > button { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #d8cfbf; border-radius: 5px; background: #fffdf8; color: var(--lq-navy); text-align: left; cursor: pointer; }
.teacher-home-inline-list > button span, .teacher-home-inline-list > span { color: var(--lq-muted); font-size: 11px; }
.teacher-home-roleplay-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.teacher-home-roleplay-actions button { min-height: 40px; padding: 0 14px; border: 1px solid var(--lq-navy); border-radius: 4px; background: var(--lq-navy); color: #fff; font-weight: 800; cursor: pointer; }
.teacher-home-roleplay-actions button + button { background: transparent; color: var(--lq-navy); }

/* Teacher decision workspace v2 */
.teacher-home-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, .9fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--lq-line);
  border-top: 3px solid var(--lq-cobalt);
  background: #fffdf8;
}
.teacher-home-command h2 { margin: 6px 0 10px; color: var(--lq-navy); font: 700 clamp(30px, 4vw, 46px)/1.06 var(--lq-serif); }
.teacher-home-command p { max-width: 620px; margin: 0; color: var(--lq-muted); }
.teacher-home-command .teacher-home-metrics { margin: 0; }
.teacher-home-decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.teacher-home-decision,
.teacher-home-performance { padding: 22px; border: 1px solid var(--lq-line); background: rgba(255,253,248,.86); }
.teacher-home-decision-list { display: grid; }
.teacher-home-decision-list > button,
.teacher-decision-list > button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: 0; padding: 13px 3px; border: 0; border-bottom: 1px solid #e6dfd3;
  background: transparent; color: var(--lq-navy); text-align: left; cursor: pointer;
}
.teacher-home-decision-list > button span,
.teacher-decision-list > button span { display: grid; min-width: 0; gap: 3px; }
.teacher-home-decision-list b,
.teacher-decision-list b { overflow: hidden; font: 700 15px/1.25 var(--lq-serif); text-overflow: ellipsis; white-space: nowrap; }
.teacher-home-decision-list small,
.teacher-decision-list small { color: var(--lq-muted); }
.teacher-home-decision-list i,
.teacher-decision-list > button i { flex: 0 0 auto; color: var(--lq-cobalt); font-size: 11px; font-style: normal; font-weight: 800; }
.teacher-home-positive,
.teacher-positive-state { display: grid; gap: 5px; padding: 18px 2px 4px; color: var(--lq-muted); }
.teacher-home-positive b,
.teacher-positive-state b { color: var(--lq-navy); font: 700 16px/1.3 var(--lq-serif); }
.teacher-home-performance .teacher-home-section-head { margin-bottom: 16px; }
.teacher-skill-compact { display: grid; gap: 11px; }
.teacher-skill-row { display: grid; grid-template-columns: minmax(92px, .55fr) minmax(120px, 1.45fr) 42px; gap: 12px; align-items: center; }
.teacher-skill-row > span { color: var(--lq-navy); font-size: 13px; font-weight: 750; }
.teacher-skill-row > div { height: 7px; overflow: hidden; background: #e5ded2; }
.teacher-skill-row > div > i { display: block; height: 100%; background: var(--lq-cobalt); }
.teacher-skill-row > strong { color: var(--lq-navy); font-size: 12px; text-align: right; }
.teacher-home-insight small { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ddd3c4; color: var(--lq-navy); font-size: 11px; font-weight: 750; }

#teacher-dashboard-screen .screen-content { width: min(1180px, calc(100% - 36px)); padding-bottom: 60px; }
#teacher-dashboard-screen .teacher-tabs {
  position: sticky; z-index: 12; top: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 0 0 22px; padding: 5px; border: 1px solid var(--lq-line); border-radius: 8px;
  background: rgba(250,247,239,.96); backdrop-filter: blur(8px);
}
#teacher-dashboard-screen .teacher-tab { display: inline-flex; min-width: 0; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border-radius: 5px; }
#teacher-dashboard-screen .teacher-tab img { width: 17px !important; height: 17px !important; margin: 0 !important; }
#teacher-dashboard-screen .teacher-tab.active { background: var(--lq-navy); color: #fff; }
#teacher-dashboard-screen .teacher-tab.active img { filter: brightness(0) invert(1); }
.teacher-overview-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 0 20px; }
.teacher-overview-intro h3 { margin: 5px 0 7px; color: var(--lq-navy); font: 700 clamp(26px, 3vw, 36px)/1.1 var(--lq-serif); }
.teacher-overview-intro p { max-width: 720px; margin: 0; color: var(--lq-muted); }
.teacher-overview-updated { flex: 0 0 auto; color: var(--lq-muted); font-size: 11px; font-weight: 700; }
.teacher-decision-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; border: 1px solid var(--lq-line); background: var(--lq-line); }
.teacher-decision-metrics > div { display: grid; min-height: 112px; align-content: center; gap: 4px; padding: 16px; background: #fffdf8; }
.teacher-decision-metrics strong { color: var(--lq-navy); font: 700 30px/1 var(--lq-serif); }
.teacher-decision-metrics span { color: var(--lq-navy); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.teacher-decision-metrics small { color: var(--lq-muted); font-size: 11px; }
.teacher-metric-skeleton { min-height: 112px; background: linear-gradient(90deg, #f1ebdf 25%, #fffdf8 50%, #f1ebdf 75%) !important; background-size: 200% 100% !important; animation: teacherSkeleton 1.3s linear infinite; }
.teacher-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.teacher-decision-card { min-width: 0; padding: 20px; border: 1px solid var(--lq-line); background: #fffdf8; }
.teacher-decision-card--shio { border-left: 4px solid var(--lq-orange); background: #f5efe5; }
.teacher-decision-card__head { padding-bottom: 14px; border-bottom: 1px solid var(--lq-line); }
.teacher-decision-card__head h3 { margin: 4px 0 0; color: var(--lq-navy); font: 700 22px/1.2 var(--lq-serif); }
.teacher-decision-list { display: grid; }
.teacher-shio-review { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ded5c7; }
.teacher-shio-review > span { display: grid; min-width: 0; gap: 3px; }
.teacher-shio-review b { color: var(--lq-navy); font: 700 15px var(--lq-serif); }
.teacher-shio-review small { color: var(--lq-muted); }
.teacher-shio-review > div { display: flex; gap: 6px; }
.teacher-shio-review button { min-height: 32px; padding: 0 9px; border: 1px solid var(--lq-navy); border-radius: 4px; background: transparent; color: var(--lq-navy); font-size: 11px; font-weight: 800; cursor: pointer; }
.teacher-shio-review button:first-child { background: var(--lq-navy); color: #fff; }
.teacher-overview-utility-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 14px; }
.teacher-class-code-card { display: grid; align-content: start; gap: 16px; padding: 22px; border: 1px solid var(--lq-line); background: #f2ede3; }
.teacher-class-code-card h3 { margin: 4px 0; color: var(--lq-navy); font: 700 24px var(--lq-serif); }
.teacher-class-code-card p { margin: 0; color: var(--lq-muted); }
.teacher-class-code-card .teacher-code-copy-row { justify-content: flex-start; }
.teacher-class-code-card .big-code { min-width: 190px; padding: 12px 16px; font-size: 26px; letter-spacing: .16em; }
.teacher-code-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--lq-muted); font-size: 12px; }
.teacher-code-actions .activation-btn { width: auto; margin: 0; }
@keyframes teacherSkeleton { to { background-position: -200% 0; } }

.account-sync-detail { display: block; margin-top: 8px; color: var(--lq-muted); font-size: 11px; line-height: 1.4; }
.account-sync-detail[data-state="syncing"] { color: var(--lq-blue); }
.account-sync-detail[data-state="pending"] { color: #9a4c36; }
.account-sync-now { width: 100%; min-height: 42px; margin: 0 0 10px; border: 1px solid var(--lq-navy); border-radius: 5px; background: transparent; color: var(--lq-navy); font-weight: 800; cursor: pointer; }
.account-sync-now:hover { background: #f2ede3; }
.account-sync-now:disabled { cursor: wait; opacity: .55; }
.profile-actions--account { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 25px auto 0 !important; padding: 0 10px; }
.profile-actions--account .menu-btn { width: 100%; min-width: 0; margin: 0; justify-content: center; border: 1px solid var(--lq-line); background: #fffdf8; }
@media (max-width: 560px) { .profile-actions--account { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  .teacher-home-hero { align-items: flex-start; flex-direction: column; }
  .teacher-home-grid { grid-template-columns: 1fr; }
  .teacher-home-shio { grid-template-columns: 48px 1fr; }
  .teacher-home-shio > button { grid-column: 1 / -1; }
  .teacher-home-summary, .teacher-home-roleplays { grid-template-columns: 1fr; }
  .teacher-home-summary > img, .teacher-home-roleplays > img { min-height: 210px; max-height: 260px; }
  .teacher-home-content-grid { grid-template-columns: 1fr; }
  .teacher-home-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-home-command { grid-template-columns: 1fr; align-items: start; }
  .teacher-home-decision-grid,
  .teacher-overview-grid,
  .teacher-overview-utility-grid { grid-template-columns: 1fr; }
  .teacher-decision-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-overview-intro { align-items: flex-start; flex-direction: column; }
  .teacher-shio-review { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  #teacher-dashboard-screen .screen-content { width: calc(100% - 20px); }
  #teacher-dashboard-screen .teacher-tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(112px, 1fr)); }
  .teacher-home-command { padding: 22px 18px; }
  .teacher-home-decision,
  .teacher-home-performance,
  .teacher-decision-card { padding: 17px; }
  .teacher-decision-metrics { grid-template-columns: 1fr 1fr; }
  .teacher-decision-metrics > div { min-height: 96px; padding: 13px; }
  .teacher-skill-row { grid-template-columns: 78px minmax(90px, 1fr) 38px; gap: 8px; }
  .teacher-code-copy-row { align-items: stretch; flex-direction: column; }
  .teacher-class-code-card .big-code { width: 100%; min-width: 0; }
  .teacher-code-actions { align-items: stretch; flex-direction: column; }
}

#roleplay-chat-screen > .screen-header { background: var(--lq-paper) !important; color: var(--lq-navy) !important; }
#roleplay-chat-screen #rp-header-info { min-width: 0; }
#roleplay-chat-screen #rp-header-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  overflow: visible;
}
#roleplay-chat-screen .rp-header-scene {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: 50% 50%;
}
#roleplay-chat-screen .roleplay-speaker-avatar {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--lq-line) !important;
  border-radius: 50% !important;
  background: #f1ece2 !important;
}
#roleplay-chat-screen .roleplay-speaker-avatar img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: 50% 50%;
  transform: scale(1.38) translateY(4px);
  transform-origin: center center;
}
#roleplay-chat-screen > .screen-header .back-btn,
#roleplay-chat-screen #rp-header-name,
#roleplay-chat-screen #rp-header-goal { color: var(--lq-navy) !important; }
#roleplay-chat-screen .rp-chat-notice { background: #f0eade !important; border-color: var(--lq-line) !important; color: var(--lq-muted) !important; }

@media (max-width: 700px) {
  .screen-header, .home-header, .quiz-header, .qb-header { min-height: 72px !important; padding-block: 10px !important; }
  #roleplay-chat-screen > .screen-header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    min-height: 82px !important;
  }
  #roleplay-chat-screen #rp-header-info {
    grid-column: 2;
    width: 100%;
    max-width: none !important;
    min-width: 0;
    justify-content: center;
    justify-self: stretch;
    overflow: hidden;
  }
  #roleplay-chat-screen #rp-header-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  #roleplay-chat-screen .rp-header-scene { width: 42px; height: 42px; }
  #roleplay-chat-screen #rp-header-info > div:last-child { min-width: 0; }
  #roleplay-chat-screen #rp-header-name,
  #roleplay-chat-screen #rp-header-goal {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #roleplay-chat-screen #rp-header-name { white-space: nowrap; }
  #roleplay-chat-screen #rp-header-goal {
    display: -webkit-box;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .screen-description { display: none; }
  .shio-modal { padding: 0 !important; }
  .shio-container { width: 100% !important; height: 100dvh !important; border: 0 !important; border-radius: 0 !important; }
  #role-selection-screen .activation-content { width: calc(100% - 20px); padding: 26px 18px !important; }
}

/* Desktop uses the persistent sidebar; repeating the same routes in the home
   content adds noise. Mobile keeps the cards because the sidebar is collapsed. */
@media (min-width: 901px) {
  body.editorial-shell-active #home-screen .home-menu {
    display: none !important;
  }

  body.editorial-shell-active #home-screen .home-content {
    padding-bottom: 48px !important;
  }
}

/* Teacher evidence history: restrained, readable and based on recorded attempts. */
.teacher-report-summary--evidence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  border: 1px solid var(--lq-line);
  background: var(--lq-line);
}
.teacher-report-summary--evidence > div {
  display: grid;
  min-height: 96px;
  align-content: center;
  gap: 5px;
  padding: 16px;
  background: #fffdf8;
}
.teacher-report-summary--evidence strong { color: var(--lq-navy); font: 700 28px/1 var(--lq-serif); }
.teacher-report-summary--evidence span { color: var(--lq-muted); font-size: 11px; font-weight: 750; }
.teacher-evidence-section,
.teacher-next-step {
  margin-top: 14px;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--lq-line);
  background: #fffdf8;
}
.teacher-evidence-heading,
.teacher-next-step {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.teacher-evidence-heading { margin-bottom: 18px; }
.teacher-evidence-heading h3,
.teacher-next-step h3 { margin: 4px 0 0; color: var(--lq-navy); font: 700 23px/1.2 var(--lq-serif); }
.teacher-evidence-heading > small { max-width: 360px; color: var(--lq-muted); text-align: right; }
.teacher-next-step { border-left: 4px solid var(--lq-cobalt); background: #f2ede3; }
.teacher-next-step > div:first-child { max-width: 720px; }
.teacher-next-step p { margin: 10px 0; color: var(--lq-navy); line-height: 1.55; }
.teacher-next-step small { color: var(--lq-muted); line-height: 1.45; }
.teacher-next-step.is-waiting { border-left-color: #9a8f7e; }
.teacher-next-step-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.teacher-review-state { padding: 8px 11px; border: 1px solid #1f6b52; color: #1f6b52; font-size: 11px; font-weight: 800; }
.teacher-review-state.is-dismissed { border-color: #8e8170; color: #6f6455; }
.teacher-skill-history { display: grid; }
.teacher-skill-history-row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(150px, 1.4fr) 48px 130px;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #e5ded2;
}
.teacher-skill-history-row:last-child { border-bottom: 0; }
.teacher-skill-history-row > div:first-child { display: grid; gap: 3px; }
.teacher-skill-history-row strong { color: var(--lq-navy); }
.teacher-skill-history-row small { color: var(--lq-muted); font-size: 11px; }
.teacher-skill-history-row > b { color: var(--lq-navy); text-align: right; }
.teacher-skill-history-bar { height: 8px; overflow: hidden; background: #e7dfd3; }
.teacher-skill-history-bar i { display: block; height: 100%; background: var(--lq-cobalt); }
.teacher-trend { font-size: 11px; font-style: normal; font-weight: 750; text-align: right; }
.teacher-trend.is-up { color: #1f6b52; }
.teacher-trend.is-down { color: #9a3f32; }
.teacher-trend.is-neutral { color: var(--lq-muted); }
.teacher-error-table { display: grid; }
.teacher-error-table > div {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 90px 110px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e5ded2;
}
.teacher-error-table > div:last-child { border-bottom: 0; }
.teacher-error-table span { display: grid; gap: 2px; }
.teacher-error-table b { color: var(--lq-navy); }
.teacher-error-table small,
.teacher-error-table em { color: var(--lq-muted); font-size: 11px; font-style: normal; }
.teacher-activity-bars { display: grid; grid-template-columns: repeat(7, minmax(36px, 1fr)); gap: 10px; min-height: 150px; }
.teacher-activity-bars > div { display: grid; grid-template-rows: 20px 1fr 18px; gap: 5px; text-align: center; }
.teacher-activity-bars span,
.teacher-activity-bars small { color: var(--lq-muted); font-size: 10px; font-weight: 750; text-transform: capitalize; }
.teacher-activity-bars i { position: relative; display: block; overflow: hidden; background: #f0eadf; }
.teacher-activity-bars b { position: absolute; right: 0; bottom: 0; left: 0; background: var(--lq-cobalt); }
.teacher-evidence-supplemental { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; background: var(--lq-line); }
.teacher-evidence-supplemental > div { display: grid; gap: 5px; padding: 20px; background: #fffdf8; }
.teacher-evidence-supplemental strong { color: var(--lq-navy); font: 700 26px var(--lq-serif); }
.teacher-evidence-supplemental small { color: var(--lq-muted); }
.teacher-evidence-empty { display: grid; gap: 5px; margin-top: 14px; padding: 22px; border: 1px dashed #bdb2a2; color: var(--lq-muted); }
.teacher-evidence-empty b { color: var(--lq-navy); font: 700 18px var(--lq-serif); }
.qb-recommendation-origin {
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid var(--lq-line);
  border-left: 4px solid var(--lq-cobalt);
  background: #f2ede3;
}
.qb-recommendation-origin > div { display: grid; gap: 4px; min-width: 0; }
.qb-recommendation-origin strong { color: var(--lq-navy); font: 700 18px var(--lq-serif); }
.qb-recommendation-origin span { color: var(--lq-navy); font-size: 12px; line-height: 1.45; }
.qb-recommendation-origin small { color: var(--lq-muted); font-size: 11px; }
.qb-recommendation-origin .qb-btn { flex: 0 0 auto; }

@media (max-width: 720px) {
  .teacher-report-summary--evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-evidence-heading,
  .teacher-next-step { flex-direction: column; }
  .teacher-evidence-heading > small { text-align: left; }
  .teacher-next-step-actions { justify-content: flex-start; }
  .teacher-skill-history-row { grid-template-columns: minmax(110px, 1fr) 46px 115px; }
  .teacher-skill-history-row .teacher-skill-history-bar { grid-column: 1 / -1; grid-row: 2; }
  .teacher-error-table > div { grid-template-columns: 1fr auto; }
  .teacher-error-table em { grid-column: 1 / -1; }
  .teacher-evidence-supplemental { grid-template-columns: 1fr; }
  .qb-recommendation-origin { align-items: stretch; flex-direction: column; }
}
/* Learning platform: teacher trial journey and detailed reports */
.teacher-trial-journey {
  margin-top: 22px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border, #d9cfbf);
  background: #fffdf8;
}

.trial-journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.trial-journey-head h3 { margin: 3px 0 0; font-size: clamp(24px, 3vw, 34px); }
.trial-kicker { color: var(--primary, #0e4f9c); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.trial-state { padding: 6px 10px; border: 1px solid #bcb19f; border-radius: 999px; font-size: 11px; font-weight: 800; }
.trial-state-active { border-color: #1f6b52; color: #1f6b52; background: #edf7f1; }
.trial-state-paid { border-color: #145c46; color: #145c46; background: #e8f5ee; }
.trial-state-read_only { border-color: #9a6b1f; color: #7b5111; background: #fff7e8; }
.teacher-trial-journey > p { color: var(--text-muted); }
.trial-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.trial-day { min-height: 118px; padding: 15px; border: 1px solid #ded6c9; background: #f7f3eb; display: flex; flex-direction: column; gap: 5px; }
.trial-day > span { color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trial-day strong { color: var(--text); }
.trial-day small { color: var(--text-muted); line-height: 1.45; }
.trial-day.is-active { border-color: var(--primary, #0e4f9c); box-shadow: inset 4px 0 0 var(--primary, #0e4f9c); background: #f4f8fd; }
.trial-day.is-done { background: #eef6f1; }

.student-learning-report { margin-top: 22px; display: grid; gap: 18px; }
.student-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.student-skill-card { padding: 14px; border: 1px solid var(--border, #d9cfbf); background: #fffdf8; }
.student-skill-card strong { display: block; font-size: 22px; }
.student-skill-card span { color: var(--text-muted); font-size: 12px; }
.attempt-history-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) 90px 90px 130px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border, #e2dacd); }
.attempt-history-row:last-child { border-bottom: 0; }
.attempt-history-row small { color: var(--text-muted); }

@media (max-width: 720px) {
  .trial-days, .student-skill-grid { grid-template-columns: 1fr; }
  .attempt-history-row { grid-template-columns: 1fr 1fr; }
}

/* Teacher dashboard: keep the tab bar readable above the scrolling panels. */
#teacher-dashboard-screen .screen-content {
  position: relative;
  isolation: isolate;
}

#teacher-dashboard-screen .teacher-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  min-height: 58px;
  padding: 6px !important;
  margin: 0 0 24px !important;
  overflow: visible !important;
  border: 1px solid var(--lq-line) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  box-shadow: 0 8px 18px rgba(13, 45, 82, .08) !important;
}

#teacher-dashboard-screen .teacher-tab {
  display: flex;
  min-width: 0 !important;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px !important;
  overflow: visible;
  border-radius: 5px !important;
  color: var(--lq-muted) !important;
  background: transparent !important;
}

#teacher-dashboard-screen .teacher-tab.active {
  color: #fff !important;
  background: var(--lq-cobalt) !important;
}

#teacher-dashboard-screen .teacher-tab img {
  flex: 0 0 14px;
  margin: 0 !important;
  opacity: 1 !important;
}

.roleplay-teacher-actions,
.roleplay-library-actions,
.scenario-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.roleplay-library-row { align-items: center; }
.roleplay-library-copy { flex: 1 1 220px; min-width: 0; }
.roleplay-library-copy > div { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.roleplay-delete-btn,
.scenario-manage-delete { border-color: #a74335 !important; color: #8d3026 !important; }
.roleplay-delete-btn:hover,
.scenario-manage-delete:hover { background: #fff0ed !important; }

.scenario-card { position: relative; }
.scenario-manage-actions {
  position: static;
  grid-column: 2;
  align-self: end;
  justify-content: flex-end;
  margin: 0 22px 18px;
  z-index: 4;
}
.scenario-manage-btn {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--lq-line);
  border-radius: 4px;
  background: #fffdf8;
  color: var(--lq-navy);
  font: 700 11px/1 var(--font-body, sans-serif);
  cursor: pointer;
}
.scenario-manage-btn:hover { border-color: var(--lq-cobalt); background: #f2f6fb; }

@media (max-width: 640px) {
  #teacher-dashboard-screen .teacher-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 106px;
  }
  #teacher-dashboard-screen .teacher-tab { white-space: normal !important; }
  .roleplay-teacher-actions { justify-content: stretch !important; }
  .roleplay-teacher-actions .qb-btn { flex: 1 1 180px; }
  .scenario-manage-actions { grid-column: 1 / -1; margin: 0 16px 16px; }
  .scenario-manage-btn { flex: 1; }
}

/* Reusable teacher quiz libraries */
.quiz-library-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 24px;
  padding: 6px;
  border: 1px solid var(--lq-line);
  border-radius: 8px;
  background: #f2ede3;
}
.quiz-library-tab {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--lq-muted);
  font: 800 12px/1.2 var(--font-body, sans-serif);
  cursor: pointer;
}
.quiz-library-tab.is-active { background: var(--lq-navy); color: #fff; }
.community-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.community-library-head h3 { margin: 4px 0 5px; font-size: clamp(23px, 3vw, 34px); }
.community-library-head p { margin: 0; color: var(--lq-muted); }
.community-library-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 10px;
  margin-bottom: 18px;
}
.community-quiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.community-quiz-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--lq-line);
  border-radius: 8px;
  background: #fffdf8;
}
.community-quiz-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.community-quiz-card__meta span {
  padding: 4px 7px;
  border: 1px solid #c8bda9;
  border-radius: 999px;
  color: var(--lq-muted);
  font-size: 10px;
  font-weight: 800;
}
.community-quiz-card h4 { margin: 14px 0 6px; font: 700 22px/1.15 var(--lq-serif); }
.community-quiz-card > p { flex: 1; margin: 0 0 15px; color: var(--lq-muted); line-height: 1.5; }
.community-quiz-card__author { margin-bottom: 14px; color: var(--lq-muted); font-size: 11px; }
.community-quiz-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.community-library-locked {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--lq-line);
  background: #fffdf8;
}
.community-library-locked img { width: 50px; height: 50px; object-fit: contain; }
.community-library-locked strong { display: block; margin-bottom: 6px; font: 700 21px/1.25 var(--lq-serif); }
.community-library-locked p { margin: 0; color: var(--lq-muted); line-height: 1.5; }

@media (max-width: 720px) {
  .community-library-head { align-items: stretch; flex-direction: column; }
  .community-library-filters, .community-quiz-grid { grid-template-columns: 1fr; }
  .community-library-locked { align-items: flex-start; }
}

/* Classroom live quiz */
.live-quiz-shell { max-width: 1180px !important; }
.live-quiz-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--lq-line);
  background: #fffdf8;
}
.live-room-code { margin: 5px 0; color: var(--lq-navy); font: 800 clamp(38px, 7vw, 68px)/1 var(--font-head, monospace); letter-spacing: .16em; }
.live-room-code--small { margin-top: 22px; font-size: 30px; }
.live-quiz-hero p { margin: 7px 0 0; color: var(--lq-muted); }
.live-host-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.live-quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 14px; }
.live-quiz-stage, .live-quiz-players {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--lq-line);
  background: #fffdf8;
}
.live-quiz-stage { min-height: 430px; }
.live-quiz-players h3 { display: flex; justify-content: space-between; margin: 0 0 15px; font-size: 17px; }
.live-player-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e7dfd2; }
.live-player-row > span { color: var(--lq-muted); font-size: 11px; }
.live-player-row > b { color: var(--lq-cobalt); font-size: 12px; }
.live-stage-message { display: grid; min-height: 190px; place-content: center; text-align: center; }
.live-stage-message > span, .live-question-count { color: var(--lq-cobalt); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.live-stage-message h3 { margin: 8px 0; font-size: clamp(30px, 5vw, 52px); }
.live-stage-message p { margin: 0; color: var(--lq-muted); }
.live-question-title { max-width: 820px; margin: 18px auto 26px; text-align: center; font-size: clamp(25px, 4vw, 42px); line-height: 1.15; }
.live-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live-answer-option {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid #c9bda9;
  border-radius: 7px;
  background: #f7f2e8;
  color: var(--lq-navy);
  font: 700 16px/1.35 var(--font-body, sans-serif);
  text-align: left;
}
.live-answer-option > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--lq-navy); color: #fff; }
button.live-answer-option { cursor: pointer; }
button.live-answer-option:hover { border-color: var(--lq-cobalt); transform: translateY(-1px); }
button.live-answer-option:disabled { cursor: default; opacity: .58; transform: none; }
.live-answer-0 { border-left: 5px solid #b3473e; }
.live-answer-1 { border-left: 5px solid #2e6194; }
.live-answer-2 { border-left: 5px solid #977228; }
.live-answer-3 { border-left: 5px solid #39725b; }
.live-leaderboard { max-width: 680px; margin: 0 auto; }
.live-leader-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 5px; border-bottom: 1px solid #ddd3c3; }
.live-leader-row > b { font-size: 20px; }
.live-leader-row > strong { color: var(--lq-cobalt); }
.live-join-card {
  display: flex;
  width: min(100%, 470px);
  margin: 5vh auto 0;
  padding: clamp(24px, 5vw, 42px);
  flex-direction: column;
  gap: 11px;
  border: 1px solid var(--lq-line);
  background: #fffdf8;
}
.live-join-card > img { width: 64px; height: 64px; object-fit: contain; }
.live-join-card h3 { margin: 0 0 12px; font-size: 34px; }
.live-code-input { font-size: 28px !important; font-weight: 800 !important; letter-spacing: .16em; text-align: center; }
.live-student-stage { width: min(100%, 880px); margin: 2vh auto 0; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--lq-line); background: #fffdf8; }
.live-answer-sent { margin: 18px 0 0; color: var(--lq-muted); text-align: center; }
.live-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  background: #e9e1d5;
  box-shadow: 0 0 0 1px var(--lq-line), 0 5px 12px rgba(15, 43, 78, .12);
}
.live-avatar img { width: 100%; height: 100%; object-fit: cover; }
.live-avatar { position: relative; font-size: 21px; line-height: 1; }
.live-avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; }
.live-avatar img { position: absolute; inset: 0; z-index: 1; display: block; border-radius: inherit; }
.teacher-student-avatar {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--lq-line);
  border-radius: 50%;
  background: #f2ece1;
  font-size: 20px;
  line-height: 1;
}
.teacher-student-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center; }
.teacher-student-avatar--detail { width: 68px; height: 68px; flex-basis: 68px; border: 3px solid var(--lq-cobalt); font-size: 32px; }
.live-player-row {
  grid-template-columns: 42px minmax(0, 1fr) 24px 30px;
  min-height: 56px;
  animation: livePlayerArrive .42s cubic-bezier(.2,.8,.2,1) both;
}
.live-player-row > span:nth-child(2) { display: grid; gap: 2px; }
.live-player-row > span:nth-child(2) strong { overflow: hidden; color: var(--lq-navy); text-overflow: ellipsis; white-space: nowrap; }
.live-player-row > span:nth-child(2) small { color: var(--lq-muted); font-size: 10px; }
.live-player-row > b { text-align: right; }
.live-remove-player { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #8c7e6c; font-size: 18px; cursor: pointer; }
.live-remove-player:hover { border-color: #b55a4d; background: #fff0ed; color: #8d3026; }
.live-lobby-avatars {
  display: flex;
  max-width: 820px;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin: 8px auto 22px;
}
.live-lobby-avatars > div {
  display: grid;
  width: 82px;
  justify-items: center;
  gap: 7px;
  animation: liveAvatarJoin .58s cubic-bezier(.22,1.35,.45,1) both;
  animation-delay: calc(var(--join-order, 0) * 55ms);
}
.live-lobby-avatars > div > span { max-width: 82px; overflow: hidden; color: var(--lq-navy); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.live-avatar.is-lobby { width: 58px; height: 58px; flex-basis: 58px; animation: liveAvatarFloat 2.8s ease-in-out infinite; }
.live-avatar.is-student-waiting { width: 88px; height: 88px; margin: 0 auto 12px; animation: liveAvatarFloat 2.8s ease-in-out infinite; }
.live-response-count { display: block; margin-top: 4px; color: var(--lq-muted); font-size: 11px; font-weight: 700; }
.live-stage-message--compact { min-height: 135px; }
.live-stage-message--compact h3 { font-size: clamp(27px, 4vw, 42px); }
.live-answer-distribution { display: grid; gap: 9px; max-width: 760px; margin: 0 auto 28px; }
.live-answer-distribution > div { display: grid; grid-template-columns: 32px minmax(80px, 1fr) 30px minmax(120px, .9fr); gap: 10px; align-items: center; }
.live-answer-distribution > div > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e9e1d5; color: var(--lq-navy); font-size: 11px; font-weight: 800; }
.live-answer-distribution i { height: 11px; overflow: hidden; border-radius: 999px; background: #eee7db; }
.live-answer-distribution i b { display: block; height: 100%; border-radius: inherit; background: #9aa9b8; animation: liveBarGrow .65s ease-out both; }
.live-answer-distribution > div.is-correct > span { background: #1f6b52; color: #fff; }
.live-answer-distribution > div.is-correct i b { background: #1f6b52; }
.live-answer-distribution strong { color: var(--lq-navy); text-align: center; }
.live-answer-distribution small { overflow: hidden; color: var(--lq-muted); text-overflow: ellipsis; white-space: nowrap; }
.live-ranking-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 14px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lq-line); }
.live-ranking-title span { color: var(--lq-navy); font: 700 22px var(--lq-serif); }
.live-ranking-title small { color: var(--lq-muted); }
.live-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; max-width: 650px; min-height: 230px; margin: 24px auto 16px; }
.live-podium-place {
  position: relative;
  display: grid;
  min-height: 155px;
  align-content: end;
  justify-items: center;
  gap: 5px;
  padding: 52px 12px 17px;
  overflow: visible;
  border: 1px solid var(--lq-line);
  background: #f2ece1;
  animation: livePodiumRise .72s cubic-bezier(.2,.85,.22,1) both;
}
.live-podium-place .live-avatar { position: absolute; top: -31px; width: 70px; height: 70px; }
.live-podium-place > b { color: var(--lq-navy); font: 700 33px var(--lq-serif); }
.live-podium-place > strong { max-width: 100%; overflow: hidden; color: var(--lq-navy); text-overflow: ellipsis; white-space: nowrap; }
.live-podium-place > span { color: var(--lq-cobalt); font-size: 12px; font-weight: 800; }
.live-podium-1 { grid-column: 2; grid-row: 1; min-height: 205px; border-top: 4px solid #b98b2e; background: #f6eedb; animation-delay: .15s; }
.live-podium-2 { grid-column: 1; grid-row: 1; min-height: 175px; border-top: 4px solid #82909e; animation-delay: .28s; }
.live-podium-3 { grid-column: 3; grid-row: 1; min-height: 155px; border-top: 4px solid #9b6945; animation-delay: .4s; }
.live-ranking-list { display: grid; }
.live-leader-row {
  grid-template-columns: 34px 42px minmax(0, 1fr) 42px auto;
  min-height: 64px;
  padding: 9px 8px;
  animation: liveRankSettle .48s cubic-bezier(.2,.8,.2,1) both;
}
.live-leader-row.is-me { border-left: 4px solid var(--lq-cobalt); background: #edf3f8; }
.live-leader-row > span:nth-child(3) { display: grid; gap: 2px; }
.live-leader-row > span:nth-child(3) > strong { color: var(--lq-navy); }
.live-leader-row > span:nth-child(3) small { color: var(--lq-muted); font-size: 10px; }
.live-leader-row em { font-size: 10px; font-style: normal; font-weight: 850; text-align: center; }
.live-leader-row .rank-up { color: #1f6b52; }
.live-leader-row .rank-down { color: #9a3f32; }
.live-leader-row .rank-still { color: #a69a89; }
.live-final-podium { padding-bottom: 18px; }
.live-student-final-score { display: grid; justify-items: center; margin: 12px 0; }
.live-student-final-score strong { color: var(--lq-navy); font: 700 clamp(44px, 8vw, 72px)/1 var(--lq-serif); }
.live-student-final-score span { color: var(--lq-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
@keyframes livePlayerArrive { from { opacity: 0; transform: translateX(14px); } }
@keyframes liveAvatarJoin { from { opacity: 0; transform: translateY(18px) scale(.7); } }
@keyframes liveAvatarFloat { 50% { transform: translateY(-5px); } }
@keyframes liveBarGrow { from { width: 0; } }
@keyframes livePodiumRise { from { opacity: 0; transform: translateY(70px); } }
@keyframes liveRankSettle { from { opacity: 0; transform: translateY(15px); } }

@media (max-width: 760px) {
  .live-quiz-hero { align-items: stretch; flex-direction: column; }
  .live-quiz-layout, .live-answer-grid { grid-template-columns: 1fr; }
  .live-quiz-stage { min-height: 360px; }
  .live-room-code { font-size: 40px; }
  .live-answer-option { min-height: 76px; }
  .live-answer-distribution > div { grid-template-columns: 28px 1fr 28px; }
  .live-answer-distribution small { grid-column: 2 / -1; }
  .live-podium { gap: 5px; min-height: 200px; }
  .live-podium-place { padding-inline: 6px; }
  .live-podium-place .live-avatar { width: 58px; height: 58px; }
  .live-leader-row { grid-template-columns: 30px 38px minmax(0, 1fr) auto; }
  .live-leader-row > em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .live-player-row, .live-lobby-avatars > div, .live-avatar.is-lobby,
  .live-avatar.is-student-waiting, .live-answer-distribution i b,
  .live-podium-place, .live-leader-row { animation: none !important; }
}

/* Role-safe navigation: the desktop flex rule must never override hidden. */
.editorial-sidebar__item[hidden] { display: none !important; }

.roleplay-mic-btn {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #d9cfbe;
  border-radius: 50%;
  background: #fffdf8;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  transform: none !important;
  animation: none;
  touch-action: manipulation;
  isolation: isolate;
}
.roleplay-mic-btn > img {
  display: block;
  width: 29px;
  height: 29px;
  margin: 0;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
  transform: none;
  position: relative;
  z-index: 1;
}
.roleplay-mic-btn:hover { border-color: #12345f; box-shadow: 0 3px 12px rgba(16,43,80,.12); }
.roleplay-mic-btn:hover,
.roleplay-mic-btn:active,
.roleplay-mic-btn:focus-visible { transform: none !important; }
.roleplay-mic-btn.is-requesting,
.roleplay-mic-btn.is-processing { cursor: progress; background: #f3eee5; border-color: #9a8d79; }
.roleplay-mic-btn.is-listening { position: relative; background: #fce9e3; border-color: #b7503d; }
.roleplay-mic-btn.is-listening::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border: 2px solid rgba(183,80,61,.34);
  border-radius: inherit;
  animation: lqVoiceRing 1.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.roleplay-mic-btn.is-listening > img { filter: drop-shadow(0 0 5px rgba(166,64,48,.28)); }
.roleplay-mic-btn.has-error { border-color: #a64b3c; background: #fff4f0; }
@keyframes lqVoiceRing {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.22); }
}
.roleplay-voice-status {
  min-height: 22px;
  padding: 3px 18px 1px;
  background: #faf7ef;
  color: #526278;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.roleplay-voice-status:empty { min-height: 0; padding-block: 0; }
.roleplay-voice-status[data-state="permission_denied"],
.roleplay-voice-status[data-state="error"] { color: #8f392d; }
@media (prefers-reduced-motion: reduce) {
  .roleplay-mic-btn.is-listening::after { animation: none; opacity: .45; transform: none; }
}

@media (min-width: 960px) {
  body.editorial-shell-active .editorial-sidebar { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
  .editorial-teacher-resources { display: grid; gap: 8px; }
  .editorial-teacher-resources[hidden] { display: none !important; }
  .editorial-resource-menu { border: 1px solid var(--lq-line); border-radius: 5px; background: #fffdf8; }
  .editorial-resource-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; color: var(--lq-navy); font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
  .editorial-resource-menu summary::-webkit-details-marker { display: none; }
  .editorial-resource-menu summary span { color: var(--lq-cobalt); transition: transform .18s ease; }
  .editorial-resource-menu:not([open]) summary span { transform: rotate(-90deg); }
  .editorial-resource-menu__items { display: grid; gap: 1px; padding: 0 5px 6px; border-top: 1px solid #e8e1d6; }
  .editorial-sidebar__resource { min-height: 34px !important; padding: 7px 9px !important; font-size: 12px !important; }
  .editorial-sidebar__footer { flex: 0 0 auto; }
}

/* Clear classroom controls */
.teacher-code-copy-row, .live-code-copy-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.code-copy-btn {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #b9ad9a;
  border-radius: 6px;
  background: #fffdf8;
  color: var(--lq-navy);
  font: 800 12px/1 var(--font-body, sans-serif);
  cursor: pointer;
}
.code-copy-btn:hover { border-color: var(--lq-cobalt); background: #f3eee5; }

/* Mobile geometry and readable labels — v137 */
.shio-send-btn img,
#roleplay-chat-screen .shio-send-btn img {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

.teacher-student-avatar__fallback {
  z-index: 1;
  width: 72% !important;
  height: 72% !important;
  inset: 14% !important;
  object-fit: contain !important;
}

.teacher-student-avatar__photo {
  z-index: 2;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 700px) {
  .screen-header:not(.roleplay-chat-header),
  #profile-screen .screen-header,
  #teacher-dashboard-screen .screen-header,
  #quiz-builder-screen .screen-header {
    position: sticky !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    column-gap: 8px !important;
    min-height: 76px !important;
    height: auto !important;
    padding: 10px 14px !important;
    align-items: center !important;
  }

  .screen-header:not(.roleplay-chat-header) > .back-btn,
  #profile-screen .screen-header > .back-btn,
  #teacher-dashboard-screen .screen-header > .back-btn,
  #quiz-builder-screen .screen-header > .back-btn {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }

  .screen-header:not(.roleplay-chat-header) > h2,
  #profile-screen .screen-header > h2,
  #teacher-dashboard-screen .screen-header > h2,
  #quiz-builder-screen .screen-header > h2 {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    color: var(--lq-navy) !important;
    font-size: clamp(20px, 6.4vw, 28px) !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .screen-header:not(.roleplay-chat-header) > .header-spacer,
  #profile-screen .screen-header > .header-spacer,
  #teacher-dashboard-screen .screen-header > .header-spacer,
  #quiz-builder-screen .screen-header > .header-spacer {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    transform: none !important;
  }

  .bottom-nav .bnav-item {
    min-width: 0;
    padding: 6px 2px max(4px, env(safe-area-inset-bottom)) !important;
    gap: 5px !important;
  }

  .bottom-nav .bnav-icon {
    display: block !important;
    width: 27px !important;
    height: 27px !important;
    margin: 0 auto !important;
    object-position: center !important;
  }

  .bottom-nav .bnav-label {
    width: 100%;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.05 !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #teacher-dashboard-screen .teacher-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #teacher-dashboard-screen .teacher-tab {
    min-width: 0 !important;
    min-height: 58px !important;
    gap: 9px !important;
    padding: 10px 8px !important;
    overflow: visible !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #teacher-dashboard-screen .teacher-tab img {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    flex: 0 0 23px !important;
    margin: 0 !important;
    object-position: center !important;
  }

  #teacher-students-list .teacher-student-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    width: 100% !important;
    padding: 16px !important;
    align-items: center !important;
    overflow: hidden !important;
    font-size: 13px !important;
  }

  #teacher-students-list .teacher-student-avatar {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
    width: 58px !important;
    height: 58px !important;
    align-self: start;
  }

  #teacher-students-list .teacher-student-name,
  #teacher-students-list .teacher-student-row > span:not(.teacher-student-avatar) {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: visible !important;
    line-height: 1.35 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #teacher-students-list .teacher-student-name {
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  #teacher-students-list .teacher-student-activity {
    color: var(--lq-muted);
  }

  #teacher-students-list .teacher-remove-student {
    grid-column: 2 !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 10px 13px !important;
    white-space: normal !important;
  }

  .level-card .level-header {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
  }

  .level-card .level-icon {
    display: grid !important;
    width: 68px !important;
    height: 68px !important;
    padding: 7px !important;
    place-items: center !important;
    justify-self: center !important;
    overflow: hidden !important;
  }

  .level-card .level-icon > img,
  .level-card .generated-level-icon {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
  }

  .level-card .level-name {
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: 1.1 !important;
  }

  #quiz-builder-screen .qb-quiz-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px !important;
    overflow: hidden !important;
  }

  #quiz-builder-screen .qb-quiz-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  #quiz-builder-screen .qb-quiz-card-actions .qb-btn,
  #quiz-builder-screen .qb-quiz-card-actions .qb-btn-sm {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 9px 7px !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #quiz-builder-screen .qb-quiz-card-actions .qb-icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    justify-self: start;
  }

  .trial-journey-head,
  .teacher-home-section-head,
  .teacher-evidence-heading,
  .teacher-overview-intro,
  .community-library-head {
    min-width: 0;
  }

  .trial-journey-head > div,
  .teacher-home-section-head > div,
  .teacher-evidence-heading > div {
    min-width: 0;
  }

  .trial-state,
  .teacher-review-state {
    width: max-content !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .teacher-home-section-head > button,
  .teacher-evidence-heading > button,
  .teacher-home-performance button,
  .teacher-decision-list button,
  .teacher-next-step-actions button {
    min-width: max-content !important;
    max-width: 100% !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .teacher-activity-bars {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .teacher-activity-bars > div {
    min-width: 0 !important;
  }

  .teacher-activity-bars span,
  .teacher-activity-bars small {
    min-width: 0;
    overflow: hidden;
    font-size: 9px !important;
    text-overflow: clip;
  }
}

@media (max-width: 380px) {
  #quiz-builder-screen .qb-quiz-card-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .trial-journey-head,
  .teacher-home-section-head,
  .teacher-evidence-heading {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}
.teacher-code-copy-row .big-code { margin-inline: 0 !important; }
.teacher-student-row { grid-template-columns: 40px minmax(120px, 1fr) auto auto auto auto !important; }
.teacher-remove-student {
  width: auto !important;
  min-width: 108px;
  min-height: 34px;
  margin: 0 0 0 8px !important;
  padding: 7px 10px !important;
  border: 1px solid #d4a99f;
  border-radius: 5px;
  background: #fff5f2;
  color: #8e3729;
  font: 800 11px/1.1 var(--font-body, sans-serif);
  cursor: pointer;
}
.teacher-remove-student:hover { border-color: #a84838; background: #fbe6e0; }
.live-time-setting { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--lq-muted); font-size: 12px; font-weight: 750; }
.live-time-setting select { min-height: 36px; padding: 6px 30px 6px 9px; border: 1px solid #c9bda9; border-radius: 5px; background: #fffdf8; color: var(--lq-navy); }
.live-question-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.live-countdown { display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; min-width: 130px; padding: 9px 11px; border: 1px solid #c9bda9; border-radius: 6px; background: #f3eee5; }
.live-countdown strong { color: var(--lq-navy); font-size: 22px; }
.live-countdown span { color: var(--lq-muted); font-size: 10px; }
.live-countdown i { grid-column: 1 / -1; display: block; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: #d8d0c3; }
.live-countdown i b { display: block; width: 100%; height: 100%; background: var(--lq-cobalt); transition: width .25s linear; }
.live-finish-btn { width: min(100%, 300px); margin: 22px auto 0; }

/* Quiz is one full workspace, not a card inside another screen. */
body.quiz-session-active { overflow: hidden !important; }
body.quiz-session-active #quiz-screen { overflow: hidden !important; overscroll-behavior: none; }
body.quiz-session-active #quiz-screen .quiz-content {
  width: 100% !important;
  max-width: 1120px !important;
  height: calc(100dvh - 66px) !important;
  margin: 0 auto !important;
  padding: clamp(16px, 3vw, 34px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
#quiz-question-container-inner {
  padding: clamp(10px, 2vw, 22px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#quiz-screen .quiz-feedback {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: quizCleanSwap .16s ease both !important;
}
#quiz-screen .feedback-scroll-content { padding: clamp(20px, 4vw, 36px) !important; background: transparent !important; }
#quiz-screen .feedback-footer { background: transparent !important; border-top: 1px solid var(--lq-line) !important; }
@keyframes quizCleanSwap { from { opacity: 0; } to { opacity: 1; } }

/* Final rewards remain visible at ordinary laptop heights. */
#results-screen { justify-content: flex-start !important; overflow-x: hidden !important; overflow-y: auto !important; }
#results-screen .results-content {
  width: min(960px, 100%) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: clamp(18px, 3vw, 34px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#results-screen .results-stats { flex: 0 0 auto !important; }
@media (min-width: 701px) and (max-height: 860px) {
  #results-screen { padding: 10px 24px !important; }
  #results-screen .results-content { padding-block: 12px !important; }
  #results-screen .results-header { margin-bottom: 12px !important; }
  #results-screen .results-icon { width: 58px !important; height: 58px !important; margin-bottom: 8px !important; }
  #results-screen .results-outcome-icon { width: 42px !important; height: 42px !important; }
  #results-screen #results-title { font-size: 32px !important; }
  #results-screen #results-subtitle { font-size: 13px; line-height: 1.35; }
  #results-screen .result-stat { padding: 10px 8px !important; }
  #results-screen .result-stat-value { font-size: 23px !important; }
  #results-screen .results-chart-section { margin-block: 8px !important; }
  #results-screen .results-failed-section { margin-top: 7px !important; }
  #results-screen .results-buttons { margin-top: 10px !important; }
}

@media (max-width: 760px) {
  .teacher-student-row { grid-template-columns: 34px minmax(0, 1fr) !important; }
  .teacher-student-row > span:not(.teacher-student-name) { grid-column: 2; }
  .teacher-remove-student { grid-column: 2; justify-self: start; margin-left: 0 !important; }
  .live-question-toolbar { align-items: flex-start; flex-direction: column; }
}
/* Quiz assignments now originate from Mis quizzes. */
.assignment-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-left: 4px solid #174f91;
}

.assignment-source-card h3 { margin: 4px 0 6px; font-family: Georgia, 'Times New Roman', serif; color: #12345d; }
.assignment-source-card p { margin: 0; color: #5d7088; max-width: 620px; }

.quiz-assignment-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 25, 48, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.quiz-assignment-modal[hidden] { display: none; }
.quiz-assignment-modal.is-open { opacity: 1; pointer-events: auto; }

.quiz-assignment-dialog {
  position: relative;
  width: min(100%, 620px);
  padding: 26px;
  border: 1px solid #d8cdbb;
  border-radius: 16px;
  background: #fbf8f1;
  box-shadow: 0 28px 70px rgba(4, 18, 36, .28);
  transform: translateY(12px);
  transition: transform .18s ease;
}

.quiz-assignment-modal.is-open .quiz-assignment-dialog { transform: translateY(0); }
.quiz-assignment-dialog > .share-modal-close { position: absolute; top: 16px; right: 16px; }
.quiz-assignment-dialog h3 { margin: 6px 48px 4px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; color: #12345d; }
.quiz-assignment-options { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0; }
.quiz-assignment-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 650px) {
  .assignment-source-card { align-items: stretch; flex-direction: column; }
  .quiz-assignment-modal { align-items: end; padding: 0; }
  .quiz-assignment-dialog { border-radius: 16px 16px 0 0; padding: 22px 18px; }
}

/* Final mobile containment pass — v138. Keep this last so legacy rules cannot
   reintroduce ellipsis, undersized artwork or overflowing controls. */
@media (max-width: 700px) {
  .screen-header:not(.roleplay-chat-header) > .screen-title-group,
  #profile-screen .screen-header > .screen-title-group,
  #teacher-dashboard-screen .screen-header > .screen-title-group,
  #quiz-builder-screen .screen-header > .screen-title-group {
    grid-column: 2;
    width: 100%;
    max-width: none !important;
    min-width: 0;
    text-align: center;
  }

  #teacher-dashboard-screen .teacher-tabs {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 130px !important;
    align-content: stretch !important;
  }

  .screen-header:not(.roleplay-chat-header) h2,
  #profile-screen .screen-header h2,
  #teacher-dashboard-screen .screen-header h2,
  #quiz-builder-screen .screen-header h2 {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    color: var(--lq-navy) !important;
    font-size: clamp(23px, 6.4vw, 30px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .screen-header .screen-title-group .screen-description {
    width: 100%;
    margin: 6px auto 0;
    text-align: center;
  }

  #teacher-students-list .teacher-student-row {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 9px 14px !important;
    align-items: center !important;
  }

  #teacher-students-list .teacher-student-avatar {
    grid-column: 1 !important;
    grid-row: 1 / span 5 !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
  }

  #teacher-students-list .teacher-student-avatar img,
  #teacher-students-list .teacher-student-avatar__fallback,
  #teacher-students-list .teacher-student-avatar__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  #teacher-students-list .teacher-student-name,
  #teacher-students-list .teacher-student-row > span:not(.teacher-student-avatar) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #teacher-students-list .teacher-remove-student {
    grid-column: 2 !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #level-select-screen .level-icon-wrap,
  #level-select-screen .level-small-icon,
  #level-select-screen .level-icon-small {
    display: grid !important;
    place-items: center !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;
    padding: 4px !important;
  }

  #level-select-screen .level-icon-wrap img,
  #level-select-screen .level-small-icon img,
  #level-select-screen .level-icon-small img {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  #quiz-builder-screen .qb-quiz-card,
  #quiz-builder-screen .qb-quiz-card-actions,
  #quiz-builder-screen .qb-quiz-card-actions > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #quiz-builder-screen .qb-quiz-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #quiz-builder-screen .qb-quiz-card-actions button {
    width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .teacher-activity-bars {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 380px) {
  #quiz-builder-screen .qb-quiz-card-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}