/* When an exercise is open, the exercise panel should take over the Side column */
body.exerciseOpen #audioSection,
body.exerciseOpen #videoSection,
body.exerciseOpen #detailsSection {
  display: none !important;
}

body.exerciseOpen #exercisePanel {
  display: block !important;
}

:root { --bg:#0b0f14; --panel:#121826; --text:#e6eef8; --muted:#93a4b8; --border:#253045; --accent:#6aa9ff; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.topbar { display:flex; gap:16px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); background:#0e1420; position:sticky; top:0; z-index:10; }
.topbar .auth { margin-left:auto; display:flex; gap:10px; align-items:center; }
.brand a { color: var(--text); text-decoration:none; font-weight:700; }
.crumb { font-weight:600; opacity:0.9; }
.hint { margin-left:auto; color: var(--muted); font-size:12px; }

.container { padding:16px; }
.card { background: var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; max-width: 900px; }
.list { padding-left: 18px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.grid { display:grid; grid-template-columns: 320px 1fr 360px; gap: 12px; padding: 12px; }
.panel { background: var(--panel); border:1px solid var(--border); border-radius:14px; overflow:hidden; min-height: calc(100vh - 70px); }
.panelHeader { padding:10px 12px; border-bottom:1px solid var(--border); font-weight:600; }
.content { padding: 12px; overflow:auto; max-height: calc(100vh - 140px); }
.section { padding: 12px; border-top:1px solid var(--border); }
.label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.input { width:100%; padding:10px 10px; border-radius:10px; border:1px solid var(--border); background:#0e1420; color: var(--text); }
.textarea { width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:#0e1420; color: var(--text); }
.btn { padding: 10px 12px; border-radius: 10px; border:1px solid var(--border); background:#0e1420; color: var(--text); cursor:pointer; }
.btn:hover { border-color: var(--accent); }

.form { display:flex; flex-direction:column; gap:10px; max-width:520px; }
.label { font-size: 0.9rem; color: var(--muted); margin-top: 6px; }
.hr { border:0; border-top:1px solid var(--border); margin: 18px 0; }
.flash { padding:10px 12px; border:1px solid var(--border); border-radius:12px; margin: 12px 0; }
.flash.info { border-color: rgba(85, 190, 255, 0.6); }
.flash.error { border-color: rgba(255, 90, 90, 0.7); }
.results { margin-top: 10px; display:flex; flex-direction:column; gap:8px; }
.resultItem { padding:8px; border-radius:10px; border:1px solid var(--border); text-decoration:none; }
.resultItem:hover { border-color: var(--accent); }
.preview { padding:10px; border:1px dashed var(--border); border-radius:10px; min-height:80px; white-space:pre-wrap; }

.player { width:100%; max-height: 240px; margin-top: 8px; }
@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
  .panel { min-height: auto; }
  .content { max-height: none; }
}

.indexSearch { display:flex; gap:8px; align-items:center; margin: 10px 0 14px; }
.indexSearch .input { flex: 1; }
.pager { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top: 14px; }
.btn.disabled { pointer-events:none; opacity:0.5; }
.sizeForm { display:flex; gap:8px; align-items:center; margin-left:auto; }
.select { width:auto; padding-right: 24px; }

/* Hierarchy tree (Volume → Lesson → Page) */
.tree { display:flex; flex-direction:column; gap:8px; max-height: 420px; overflow:auto; padding-right: 6px; }
.treeNode { border: 1px solid var(--border); border-radius: 12px; background:#0e1420; }
.treeNode[open] { border-color: #35527a; }
.treeSummary { cursor:pointer; padding: 10px 10px; user-select:none; }
.treeSummary.vol { font-weight: 700; }
.treeSummary.lesson { padding-left: 16px; font-weight: 600; color: var(--text); opacity: 0.95; }
.treeLeaves { display:flex; flex-direction:column; padding: 6px 8px 10px; gap:6px; }
.treeLeaf { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius: 10px; border:1px solid var(--border); text-decoration:none; }
.treeLeaf:hover { border-color: var(--accent); }
.treeLeaf.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(106,169,255,0.25) inset; }
.leafTitle { font-size: 13px; line-height: 1.2; }
.leafSlug { font-size: 11px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Search hits list scroll */
.resultsScroll { max-height: 180px; overflow:auto; padding-right: 6px; }

/* Tab links (generated when a page had tabs) */
.tabLinks { padding: 10px; border: 1px solid var(--border); border-radius: 12px; background:#0e1420; margin-bottom: 10px; }
.tabLinks ul { margin: 6px 0 0 18px; }
.tabLinks li { margin: 4px 0; }

.treeFolder{cursor:default;}
.treeFolder:hover{border-color:var(--border);} 

.videoBox { width: 100%; min-height: 160px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: #0e1420; }
.videoFrame { width: 100%; height: 220px; border: 0; border-radius: 12px; }
.scrollBox { max-height: 420px; overflow: auto; padding-right: 6px; }

/* Landing page (CC_Odyssey) volume cover grid */
.landingCovers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.landingCover {
  display: block;
  border: 1px solid #ddd;
  background: #fff;
  overflow: hidden;
}

.landingCover img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stroke order helper */
.strokePanel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.strokePanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.strokePanelTitle {
  font-weight: 700;
}

.strokePanelBody {
  padding: 10px;
}

.strokeWriter {
  width: 240px;
  height: 240px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.strokeControls {
  display: flex;
  gap: 8px;
}

.treeContainer summary{list-style:none;}
.treeContainer summary::-webkit-details-marker{display:none;}
.treeContainer .treeFolder{cursor:pointer;}

/* Ensure containers are clickable open/close */
.treeContainer > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.treeContainer > summary::marker { display:none; }
.treeContainer > summary::-webkit-details-marker { display:none; }
.treeContainer[open] > summary { border-color: var(--accent); }
.treeContainer .treeTabs { margin-top: 8px; }

.treeSectionSummary{opacity:.9; font-weight:600;}

.treeTabLeaf{display:block; padding:6px 8px; border:1px solid var(--border); border-radius:10px; margin:6px 0; text-decoration:none;}
.treeTabLeaf.active{border-color:var(--accent);}

.rowBetween{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chipBtn{border:1px solid var(--border); background:transparent; color:var(--text); padding:4px 10px; border-radius:999px; cursor:pointer;}
.chipBtn:hover{border-color:var(--accent);}

.searchResultsWrap{margin-top:8px; border:1px solid var(--border); border-radius:12px; padding:6px; max-height:220px; overflow:auto;}
.searchResultsWrap.collapsed{display:none;}

.searchResults{display:flex; flex-direction:column; gap:6px;}
.resultItem{display:block; padding:8px 10px; border:1px solid var(--border); border-radius:12px; text-decoration:none;}
.resultItem:hover{border-color:var(--accent);}
.resultTitle{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.resultSlug{opacity:.7; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.mediaPlayerBar{
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  position: sticky;
  bottom: 0;
  background: rgba(10,14,22,.95);
  backdrop-filter: blur(6px);
}
.mediaNow{display:flex; gap:10px; align-items:center; margin-bottom:8px;}
.mediaNowUrl{opacity:.8; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.mediaPlayerGrid{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.mediaCol{ flex:1; min-width: 280px; }
@media (max-width: 900px){
  .mediaPlayerGrid{ flex-direction:column; }
}
/* Make the sticky bar feel like the side panel controls */
.mediaPlayerBar{
  background: rgba(250,250,250,.95);
  backdrop-filter: blur(6px);
}
.mediaPlayerBar .sideMediaBox{ background:#fff; }
.mediaPlayerBar .btn{
  border:1px solid var(--border);
  background:#fff;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.mediaPlayerBar .btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
}





/* Main-panel media bar: frame the native audio/video controls like side panel */
.mediaPlayerBar .playerFramed{
  width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

/* Recorder header: Start button left, Upload top-right */
.mediaPlayerBar .recorderHeaderRow{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mediaPlayerBar .btnPrimary{
  border-width: 2px;
}

/* =====================================================================
   Classic Chinese Odyssey (ASP.NET) palette + styling
   - Derived from screenshot of the original site
   - Implemented as late-file overrides so existing layout fixes remain
   ===================================================================== */

:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#000000;
  --muted:#333333;
  --border:#002d96;   /* navy */
  --accent:#cd071e;   /* red */
  --steel:#73829f;    /* blue-grey */
  --lightblue:#a3b8d8;
  --beige:#f7e7c7;
}

body{background:var(--bg); color:var(--text);}
a{color:var(--border);} /* original site uses blue links */

/* Top app bar -> mimic original horizontal nav */
.topbar{
  background:var(--border);
  border-bottom:2px solid #001f66;
  color:#ffffff;
}
.brand a{color:#ffffff;}
.crumb{color:#ffffff;}
.hint{color:#e9eef9; opacity:.9;}

/* Panels -> square, blue borders */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:0;
}

.panelHeader{
  /* Use the same title strip color as the right "Side" panel */
  background:var(--beige);
  color:#000000;
  border-bottom:1px solid var(--border);
  font-weight:700;
}

/* Side remains beige (kept explicit for clarity) */
.panel.side .panelHeader{background:var(--beige);}

/* Inputs/buttons -> light UI */
.input, .textarea{
  background:#ffffff;
  color:#000000;
  border:1px solid var(--border);
  border-radius:0;
}
.btn, .chipBtn{
  background:#f2f2f2;
  color:#000000;
  border:1px solid var(--border);
  border-radius:0;
}
.btn:hover, .chipBtn:hover{border-color:var(--accent);}

/* Nav tree -> flatter + blue borders, red selection */
.treeNode{background:#ffffff; border-color:var(--border); border-radius:0;}
.treeNode[open]{border-color:var(--border);}
.treeSummary.vol{
  /* Volume titles (e.g., First Year Volume 1) match the "Side" title color */
  background:var(--beige);
  color:#000000;
}
.treeLeaf{border-radius:0; background:#ffffff;}
.treeLeaf:hover{border-color:var(--accent);}
.treeLeaf.active{border-color:var(--accent); box-shadow:none;}

/* Page title area -> red like original */
.pageNum{color:var(--accent);}
.pageCn{color:var(--accent);}
.pageTitleBar{border-radius:0; border-color:var(--border);}

/* Media bar -> beige strip */
.mediaPlayerBar{background:var(--beige); border-top:1px solid var(--border);}
.mediaLink{border-radius:0; border-color:var(--border); color:var(--border);} 
.mediaLink:hover{border-color:var(--accent); color:var(--accent);} 


/* === Panel layout fixes === */
.grid{display:grid; grid-template-columns: 320px 1fr 420px; gap:14px; align-items:start;}
.panel{min-height: calc(100vh - 64px);}

/* Main panel: scroll content, bar at bottom */
.panel.main{display:flex; flex-direction:column;}
.panel.main .content{flex:1; overflow:auto; padding-bottom:12px;}
.mediaPlayerBar{margin-top:0; border-top:1px solid var(--border); padding-top:10px; position:sticky; bottom:0;}
.player{width:100%;}

/* Side panel stays right and scrolls internally */
.panel.side{display:flex; flex-direction:column;}
.panel.side .section{flex:1; overflow:auto;}

.mediaLink{display:inline-block; padding:2px 6px; border:1px solid var(--border); border-radius:8px; text-decoration:none;}
.mediaLink:hover{border-color:var(--accent);}

.pageTitleBar{border:1px solid var(--border); border-radius:14px; padding:10px 12px; margin:10px 0;}
.pageTitleLine{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.pageNum{font-size:22px; font-weight:800;}
.pageCn{font-size:18px; font-weight:700;}
.pagePy{font-size:14px; opacity:.8;}
.pageEn{margin-top:4px; font-size:14px; opacity:.9;}

.sideTextSection{max-height:260px; overflow:auto;}
.sideText{padding:8px; border:1px solid var(--border); border-radius:12px;}

.treeContainerSummary{padding:8px 10px; border-radius:12px; cursor:pointer;}
.treeContainerSummary:hover{background:rgba(255,255,255,0.05);}

.treeSection .treeLeaves{margin-left:10px;}

/* ===========================
   OVERRIDES (2026-01-17)
   - Fixed-height panels aligned (Nav/Main/Side)
   - Nav tree fills remaining space
   - Main content scrolls; media bar fixed
   - Main scrollbar at right edge of main panel
   =========================== */

html, body { height: 100%; }
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar should not steal grid sizing; grid fills remaining viewport */
.topbar { flex: 0 0 auto; }

.grid {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

/* All panels share the same fixed height (grid height) */
.panel {
  height: 100% !important;
  min-height: 0 !important; /* override earlier calc() rules */
  display: flex;
  flex-direction: column;
}

/* Generic panel body becomes a flex column container */
.panel .panelBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------------- NAV ---------------- */
.panel.nav .section { flex: 0 0 auto; }
.panel.nav .section.tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none !important; /* override any legacy caps */
}

/* ---------------- MAIN ---------------- */
/* Make #mainContent the ONLY scroll container */
#mainContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

/* Prevent inner legacy wrappers from creating their own scrollbars */
#mainContent .content,
#mainContent .scrollBox,
#mainContent .content.scrollBox {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
  display: block !important;
}

/* Keep tables/images from overflowing and forcing odd scroll behavior */
#mainContent table { max-width: 100% !important; }
#mainContent img { max-width: 100% !important; height: auto; }

/* Media bar stays fixed within the panel (excluded from scrolling) */
#mediaPlayerBar {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* ---------------- SIDE ---------------- */
.panel.side .section { flex: 0 0 auto; }
/* Let the last section (Details/Instructions) expand and scroll */
.panel.side .section:last-child {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#sideText {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: none !important;
}

/* Video box: ensure the player fits */
#videoBox { min-height: 220px; }

/* ===========================
   Fix: legacy nested scroll boxes inside main content
   Many imported ASPX pages include inline styles like overflow:auto on a fixed 480px box,
   which creates a mid-column scrollbar. We disable those so #mainContent owns scrolling.
   =========================== */
#mainContent div[style*="overflow:auto"],
#mainContent div[style*="overflow: auto"],
#mainContent div[style*="overflow:scroll"],
#mainContent div[style*="overflow: scroll"]{
  overflow: visible !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =====================================================================
   Classic Chinese Odyssey (ASP.NET) palette + styling (FINAL OVERRIDES)
   - Derived from screenshot of the original site
   - Kept as end-of-file rules so they win over earlier theme/layout CSS
   ===================================================================== */

:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#000000;
  --muted:#333333;
  --border:#002d96;   /* navy */
  --accent:#cd071e;   /* red */
  --steel:#73829f;    /* blue-grey */
  --lightblue:#a3b8d8;
  --beige:#f7e7c7;
}

body{background:var(--bg); color:var(--text);} 
a{color:var(--border);} 

.topbar{
  background:var(--border);
  border-bottom:2px solid #001f66;
  color:#ffffff;
}
.brand a,.crumb{color:#ffffff;}
.hint{color:#e9eef9; opacity:.9;}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:0;}
.panelHeader{background:var(--beige); color:#000; border-bottom:1px solid var(--border); font-weight:700;}
.panel.side .panelHeader{background:var(--beige);} 

.input,.textarea{background:#fff; color:#000; border:1px solid var(--border); border-radius:0;}
.btn,.chipBtn{background:#f2f2f2; color:#000; border:1px solid var(--border); border-radius:0;}
.btn:hover,.chipBtn:hover{border-color:var(--accent);} 

.treeNode{background:#fff; border-color:var(--border); border-radius:0;}
.treeSummary.vol{background:var(--beige); color:#000;}
.treeLeaf{border-radius:0; background:#fff;}
.treeLeaf:hover{border-color:var(--accent);} 
.treeLeaf.active{border-color:var(--accent); box-shadow:none;}

.pageTitleBar{border-radius:0; border-color:var(--border);} 
.pageNum,.pageCn{color:var(--accent);} 

.mediaPlayerBar{background:var(--beige); border-top:1px solid var(--border);} 
.mediaLink{border-radius:0; border-color:var(--border); color:var(--border);} 
.mediaLink:hover{border-color:var(--accent); color:var(--accent);} 


/* When in stroke mode, hide regular side sections and let stroke panel take over */
.panel.side.strokeMode #videoSection,
.panel.side.strokeMode #detailsSection {
  display: none !important;
}

.panel.side.strokeMode #strokePanel {
  display: flex !important;
  flex-direction: column;
  height: calc(100% - 0px); /* side panel already excludes header in most layouts */
}

/* Make the writer area expand */
.panel.side.strokeMode .strokePanelBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.panel.side.strokeMode .strokeWriter {
  flex: 1;
  min-height: 260px; /* ensures it’s usable even on short viewports */
}

.strokeMeta {
  margin-top: 8px;
  font-size: 14px;
}

.strokeMetaLine {
  margin: 2px 0;
}

.strokeExamples {
  margin-top: 10px;
  font-size: 13px;
  color: #333;
}

.strokeExample {
  margin-bottom: 4px;
}

.strokePicture {
  max-width: 100%;
  margin-top: 6px;
}

.strokeButtons {
  display: none;
}

/* Interpret (vocabulary) card */
.interpretCard { padding: 10px; border: 1px solid var(--border); background: #fff; }
.interpretTop { display: flex; align-items: center; gap: 10px; }
.interpretChar { font-size: 28px; font-weight: 700; }
.interpretPic { width: 102px; height: 80px; object-fit: cover; border: 1px solid var(--border); }
.interpretLine { margin-top: 4px; }
.interpretComment { margin-top: 8px; }

/* Page modes: Volume index should dedicate side panel to Details/Instructions */
body.isVolumeIndex #audioSection,
body.isVolumeIndex #videoSection {
  display: none !important;
}

body.isVolumeIndex #mediaBar,
body.isVolumeIndex #mediaPlayerBar,
body.isVolumeIndex .mediaPlayerBar {
  display: none !important;
}


/* Side panel media boxes (Audio above Video) */
.sideSection { margin-bottom: 12px; }
.sideSectionTitle { font-weight: 600; margin: 6px 0; }
.sideMediaBox { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: #fff; }
.sideMediaBox.muted { color: #777; background: #fafafa; }
.sideMediaBox .player { width: 100%; }

/* Disabled media buttons */
.mediaLink.disabled{opacity:0.45; pointer-events:none; cursor:not-allowed;}

/* Make audio control bar match video framing */
.sideMediaBox audio {
  width: 100%;
  display: block;
}

.sideMediaBox {
  border-radius: 12px;
  padding: 10px;
}


/* Side audio player: give it the same framed feel as video */
#audioBox audio {
  width: 100%;
  display: block;
  margin-top: 0; /* avoid extra top gap vs video */
}


/* =========================================================
   FIX: Side panel should keep Audio/Video visible.
   Details/Instructions (#sideText) scrolls internally.
   Put this at END of site.css.
   ========================================================= */

/* Side panel is a constrained flex column */
.panel.side{
  display: flex;
  flex-direction: column;
  height: 100% !important;
  min-height: 0 !important;
}

/* Audio + Video sections do NOT grow */
#audioSection,
#videoSection{
  flex: 0 0 auto !important;
}

/* Details section grows and becomes the scroll container host */
#detailsSection{
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* critical: enables child scrolling */
  overflow: hidden !important;  /* prevent pushing other sections */
  display: flex;
  flex-direction: column;
}

/* sideText is the scrolling content */
#sideText{
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* critical: enables overflow scroll */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;
}

/* Remove any earlier caps that can fight this behavior */
.sideTextSection{
  max-height: none !important;
  overflow: visible !important;
}

/* === Media bar alignment tweaks (2026-01-30) === */
.mediaPlayerBar{
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 10px;
}

/* Match side-panel "Play Audio" text offset */
.mediaPlayerBar .nowPlayingRow{
  padding-left: 6px;
}

/* Playback area: no outer framing/border */
.mediaPlayerBar .playbackField{
  min-height: 54px;
  display:flex;
  align-items:center;
}

/* Recorder: header buttons outside bordered field, aligned to field edges */
.mediaPlayerBar .recorderHeaderRow{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.mediaPlayerBar .recorderField{
  width:100%;
  min-height: 54px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding: 0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
}

.mediaPlayerBar .recHint{
  font-size:12px;
  margin-top:6px;
}

/* Ensure native players fill available width (no extra border styles) */
.mediaPlayerBar .playbackField .player,
.mediaPlayerBar .recorderField .player{
  width:100%;
  display:block;
}

/* ===== Main panel media bar alignment fixes (v4) ===== */
.mediaPlayerBar{
  padding-left: 20px;
  padding-right: 20px;
}

/* Remove extra top spacing on players inside the sticky media bar */
.mediaPlayerBar .player{
  margin-top: 0 !important;
}

/* Keep playback + recorder fields aligned by matching control heights */
.mediaPlayerBar .playbackField .player{
  height: 54px;
}

/* Ensure header row spans same width as bordered field */
.mediaPlayerBar .recorderHeaderRow{
  width: 100%;
  margin-bottom: 8px;
}

/* Make playback field same vertical footprint as recorder field */
.mediaPlayerBar .playbackField{
  width: 100%;
  min-height: 54px;
}

/* Nav control bar (between Search and Tree) */
.navControlsSection{ padding-top:10px; padding-bottom:10px; }
.navControls{ display:flex; gap:6px; align-items:center; justify-content:space-between; }
.navBtn{
  background: var(--panel-bg, #fff);
  color: var(--link);
  border: 2px solid #2f5fd7;
}
.navBtn:hover{
  background: #eef3ff;
}
.navBtn:focus{ outline:2px solid rgba(106,169,255,0.35); outline-offset:2px; }

/* Vocabulary Index: keep columns aligned under header even with scrollbar */
.odVocabScroll{
  height: 620px;
  overflow-y: auto;
  overflow-x: hidden;
}

.odVocabTable{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.odVocabTable th,
.odVocabTable td{
  padding: 6px 6px;
  vertical-align: top;
  text-align: left;
}

.odVocabTable thead th{
  font-weight: bold;
  border-bottom: 2px solid #000;
  /* Avoid `position: sticky` for alignment.
     Sticky header cells can ignore colgroup widths in some browsers,
     which causes header/body misalignment. */
}




/* --- Vocab Index stability overrides --- */
.odVocabScroll{width:760px; max-width:760px; overflow-y:auto; overflow-x:hidden;}
.odVocabTable{width:100%; table-layout:fixed;}
.odVocabTable td.col-pos,.odVocabTable td.col-lesson{white-space:nowrap;}

.odVocabTable .col-vocab {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Pinyin column */
.odVocabTable .col-pinyin {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.odVocabTable td.col-def{white-space:normal; word-break:normal; overflow-wrap:break-word;}



/* -------------------------------------------------------------------------- */
/* Exercise side panel widget (matches legacy look)                            */
/* -------------------------------------------------------------------------- */
.exercisePanelBody{
  background:#fff;
  border:1px solid #bdbdbd;
  padding:10px;
  font-family: Arial, sans-serif;
  font-size:14px;
  color:#111;
}
.exercisePanelBody .exHeaderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.exercisePanelBody .exTitle{
  color:#c00;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}
.exercisePanelBody .exNav{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  font-size:13px;
}
.exercisePanelBody .exArrow{
  cursor:pointer;
  user-select:none;
  padding:2px 6px;
  border:1px solid #999;
  border-radius:3px;
  background:#f6f6f6;
}
.exercisePanelBody .exArrow[aria-disabled="true"]{
  opacity:.35;
  pointer-events:none;
}
.exercisePanelBody .exBtn{
  padding:4px 10px;
  border:1px solid #7f7f7f;
  border-radius:3px;
  background:#f2f2f2;
  cursor:pointer;
  font-size:13px;
}
.exercisePanelBody .exPrompt{
  margin:8px 0 10px 0;
  font-size:14px;
}
.exercisePanelBody .exOptions{
  margin:0 0 10px 0;
  padding-left:16px;
}
.exercisePanelBody .exOptionRow{
  display:flex;
  align-items:center;
  gap:6px;
  margin:4px 0;
}
.exercisePanelBody .exFooterRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  border-top:1px solid #d0d0d0;
  padding-top:10px;
}
.exercisePanelBody .exAnswerBlock{
  margin-top:12px;
  border-top:1px solid #d0d0d0;
  padding-top:10px;
}
.exercisePanelBody .exAnswerTitle{
  color:#c00;
  font-weight:700;
  margin-bottom:6px;
}
.exercisePanelBody .exAnswerHtml{
  color:#111;
}

/* Make legacy titles in side panel feel clickable */
#sideText .LessonHintText, #sideText .LessonTextTitle{
  cursor:pointer;
}
#sideText .LessonHintText:hover, #sideText .LessonTextTitle:hover{
  text-decoration: underline;
}


/* Exercise panel close button */
.exCloseBtn{float:right;border:1px solid #2f5fd3;background:#fff;color:#2f5fd3;border-radius:3px;line-height:18px;height:22px;width:22px;cursor:pointer;margin-left:8px;}
.exCloseBtn:hover{background:#f3f7ff;}


/* Exercise submit result */
.exResult{margin:10px 0;padding:8px 10px;border:1px solid #ccc;border-radius:4px;min-height:18px;font-size:13px;}
.exResult.ok{border-color:#4caf50;}
.exResult.bad{border-color:#e53935;}


/* Fill-in-the-blanks (drag/drop) */
.fillBank { margin: 6px 0 10px 0; display:flex; flex-wrap:wrap; gap:10px; }
.bankItem { display:inline-block; padding:2px 6px; border:1px solid #666; border-radius:3px; background:#fff; cursor:grab; user-select:none; }
.fillQuestions { font-size:14px; }
.fillRow { margin: 6px 0; }
.fillNum { display:inline-block; width: 28px; }
.dropTarget { display:inline-block; min-width:80px; border-bottom:2px solid #000; padding:0 4px; margin:0 2px; cursor:pointer; }
.dropHover { background: #eef; }


/* Bigger, easier drop zones */
.dropTarget,
.fillPrompt span.drop {
  display: inline-block;
  min-width: 50px;     /* wider target */
  height: 28px;         /* taller target */
  line-height: 28px;
  padding: 0 10px;      /* more hit area */
  margin: 0 6px;
  border: 1px solid #888;
  border-radius: 4px;
  background: #fff;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Keep the "blank" look (underline) but with a larger box */
.dropTarget:empty,
.fillPrompt span.drop:empty {
  border-style: solid;
}

/* Clear hover feedback */
.dropHover {
  background: #e8f0ff !important;
  border-color: #2b6cff !important;
}

/* Make each question line easier to interact with */
.fillRow {
  padding: 6px 2px;
}
.fillRow:hover .dropTarget {
  border-color: #555;
}


/* -------------------------------------------------------------------------- */
/* Vocab Exercise (Tab 3)                                                     */
/* -------------------------------------------------------------------------- */
.vocabExerciseRoot {
  padding: 8px;
}

.veMainHeader {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.veBlockTitle {
  font-weight: 700;
  margin-bottom: 8px;
}

.veModeLinks {
  font-weight: 400;
}

.veLink {
  border: none;
  background: none;
  color: #0b57d0;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  text-decoration: underline;
}

.veFunctions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.veGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

.veGroupLabel {
  min-width: 64px;
  font-weight: 700;
}

.veHint {
  max-width: 260px;
}

.veSideCard {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 12px;
  background: #fff;
}

/* Vocab exercise:
   - cards are always visible (headers)
   - active card shows paging + content + buttons
   - non-active cards show content ONLY if "revealed" via buttons on the active card
*/
.veSideCard:not(.active):not(.revealed) .veCardBody {
  display: none;
}

.veSideCard:not(.active) .veCardButtons,
.veSideCard:not(.active) .veCardCount,
.veSideCard:not(.active) .veArrow {
  display: none;
}

.veSideCard.active {
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.veCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.veCardTitle {
  font-weight: 700;
}

.veArrow {
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  background: #fff;
  padding: 4px 8px;
  cursor: pointer;
}

.veCardBody {
  padding: 10px 4px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.veCardText {
  font-size: 34px;
  text-align: center;
  word-break: break-word;
}

.veCardButtons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.veCardCount {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
}

.veSoundName {
  margin-top: 8px;
  font-size: 12px;
}

/* Sequential workbook audio-choice exercises */
.legacyAudioChoiceExercise input[type="checkbox"] {
  cursor: pointer;
}
.legacyAudioChoiceExercise .audioChoiceCurrent {
  outline: 1px dotted currentColor;
  outline-offset: -2px;
}

/* Workbook Task 1 sequential audio-choice exercise ------------------------ */
.workbookAudioContent { overflow: visible; }
.workbookAudioExerciseRoot {
  max-width: 760px;
  padding: 8px 6px 16px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.workbookAudioTitle {
  margin: 0 0 30px;
  font-size: 16px;
  font-weight: 500;
}
.workbookAudioToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 468px;
  margin-bottom: 8px;
}
.workbookAudioButton {
  min-width: 80px;
  height: 24px;
  padding: 1px 10px;
  border: 1px solid #888;
  border-radius: 2px;
  background: #f5f5f5;
  color: #111;
  cursor: pointer;
}
.workbookAudioSectionNav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.workbookAudioSectionCount { min-width: 42px; text-align: center; }
.workbookAudioArrow {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  font-size: 13px;
}
.workbookAudioArrow:disabled { visibility: hidden; }
.workbookAudioChoiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 468px;
  border-top: 2px solid #667700;
  border-left: 2px solid #667700;
}
.workbookAudioChoice {
  min-height: 28px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: stretch;
  border-right: 2px solid #667700;
  border-bottom: 2px solid #667700;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
}
.workbookAudioChoice.isUsed { background: #fafafa; cursor: default; }
.workbookAudioCheckCell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #777;
}
.workbookAudioChoiceText {
  display: flex;
  align-items: center;
  padding: 2px 5px;
  font-size: 16px;
}
.workbookAudioFooter {
  max-width: 468px;
  margin-top: 38px;
  display: flex;
  justify-content: space-between;
}
.workbookAudioResult {
  max-width: 468px;
  margin-top: 10px;
  min-height: 20px;
  font-size: 14px;
}
.workbookAudioVariants {
  max-width: 468px;
  margin: 0 0 8px;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.workbookAudioVariantBtn {
  border: 0;
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}
.workbookAudioVariantBtn.active { font-weight: bold; text-decoration: none; }
.workbookAudioInstructions {
  font-size: 15px;
  line-height: 1.45;
  padding: 4px 2px;
}
.workbookAudioInstructionTitle {
  color: #e00000;
  font-weight: bold;
  margin-bottom: 22px;
}
.workbookAudioInstructions ol { margin: 0; padding-left: 22px; }
.workbookAudioInstructions li { margin: 0 0 8px; padding-left: 2px; }
body.isWorkbookAudioExercise #exercisePanel { display: none !important; }

@media (max-width: 700px) {
  .workbookAudioChoiceGrid { grid-template-columns: 1fr; }
  .workbookAudioToolbar, .workbookAudioChoiceGrid, .workbookAudioFooter, .workbookAudioResult { max-width: 100%; }
}

/* Repository-backed pronunciation record / upload / compare exercise */
.pronRecordCompareContent{padding:14px 18px!important;}
.pronRecordCompareRoot{width:100%;max-width:none;font-size:16px;line-height:1.45;box-sizing:border-box;}
.pronRecordIntro{margin-bottom:18px;}
.pronRecordPageTitle{font-weight:700;font-size:18px;margin-bottom:8px;}
.pronRecordIntroText{width:100%;max-width:none;}
.pronRecordSection{border-top:1px solid #cfcfcf;padding:14px 0 18px;}
.pronRecordSection:first-of-type{border-top:0;}
.pronRecordHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;}
.pronRecordTitle{font-weight:700;}
.pronRecordNav{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.pronRecordArrow{border:0;background:transparent;cursor:pointer;font-size:14px;padding:3px 5px;}
.pronRecordArrow:disabled{visibility:hidden;}
.pronRecordPrompt{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:6px 4px;margin:0 0 8px;text-align:left;font:inherit;cursor:pointer;width:100%;box-sizing:border-box;}
.pronRecordPrompt:hover .pronRecordPromptText{text-decoration:underline;}
.pronRecordItemNo{min-width:28px;}
.pronRecordPromptText{font-size:17px;}
.pronRecordPlayIcon{font-size:12px;}
.pronRecordControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px 32px;width:calc(100% - 32px);box-sizing:border-box;}
.pronRecordStatus{font-size:13px;color:#666;}
.pronRecordPreview{display:block;width:calc(100% - 32px);max-width:none;margin-left:32px;height:34px;box-sizing:border-box;}
.pronRecordHint{min-height:20px;margin:5px 0 0 32px;font-size:13px;color:#555;}

/* Repository-backed sight-reading: record/upload one response per exercise; answers play reference audio in side panel. */
.sightReadingContent{padding:14px 18px!important;}
.sightReadingRoot{width:100%;max-width:none;font-size:16px;line-height:1.45;box-sizing:border-box;}
.sightReadingIntro{margin-bottom:18px;}
.sightReadingPageTitle{font-weight:700;font-size:18px;margin-bottom:8px;}
.sightReadingIntroText{width:100%;max-width:none;}
.sightReadingSection{padding:8px 0 18px;}
.sightReadingHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
.sightReadingSectionTitle{font-weight:700;}
.sightReadingNav{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.sightReadingArrow{border:0;background:transparent;cursor:pointer;font-size:14px;padding:3px 5px;}
.sightReadingArrow:disabled{visibility:hidden;}
.sightReadingItems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 28px;width:100%;max-width:none;margin:0 0 18px;}
.sightReadingItem{display:flex;align-items:baseline;gap:7px;min-height:26px;}
.sightReadingItemNo{min-width:28px;color:#444;}
.sightReadingItemText{font-size:17px;}
.sightReadingControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;}
.sightReadingStatus{font-size:13px;color:#666;}
.sightReadingPreview{display:block;width:100%;max-width:none;height:34px;margin-top:8px;box-sizing:border-box;}
.sightReadingHint{min-height:20px;margin-top:5px;font-size:13px;color:#555;}
.sightReadingAnswerTitle{font-weight:700;margin:0 0 10px;}
.sightReadingAnswerGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;width:100%;max-width:none;}
.sightReadingAnswerItem{display:flex;align-items:center;gap:5px;border:0;background:transparent;padding:4px 2px;text-align:left;font:inherit;cursor:pointer;}
.sightReadingAnswerItem:hover .sightReadingAnswerText{text-decoration:underline;}
.sightReadingAnswerNo{min-width:25px;color:#444;}
.sightReadingAnswerText{font-size:16px;}
.sightReadingAnswerPlay{font-size:10px;margin-left:2px;}
@media (max-width:760px){
  .sightReadingItems,.sightReadingAnswerGrid{grid-template-columns:1fr;}
}
.sightReadingAnswerStatus{min-height:18px;margin-top:8px;font-size:12px;color:#666;}

/* Stage 7: audio -> numbered-tone pinyin dictation */
.dictationExerciseRoot { width:100%; max-width:none; min-width:0; box-sizing:border-box; padding:8px 10px 24px; }
.dictationPageTitle { font-weight: 700; color: #c00; margin-bottom: 14px; }
.dictationIntroText { width:100%; max-width:none; box-sizing:border-box; line-height:1.45; margin-bottom:28px; }
.dictationExampleLink { border: 0; background: transparent; padding: 0; margin: 0 2px; color: #0645ad; text-decoration: underline; cursor: pointer; font: inherit; }
.dictationSection { width:100%; max-width:none; box-sizing:border-box; margin:0 0 38px; }
.dictationHeader { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.dictationNav { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.dictationArrow { border: 0; background: transparent; cursor: pointer; font-weight: 700; }
.dictationArrow:disabled { opacity: .35; cursor: default; }
.dictationEntryRow { width:100%; max-width:none; box-sizing:border-box; display:grid; grid-template-columns:90px minmax(0,1fr); gap:5px; align-items:center; }
.dictationInput { min-height: 26px; box-sizing: border-box; width: 100%; }
.dictationActionRow { width:100%; max-width:none; box-sizing:border-box; display:flex; justify-content:space-between; gap:12px; margin-top:6px; }
.dictationFeedback { min-height: 22px; margin-top: 7px; font-weight: 700; text-align: center; }
.dictationFeedback.ok, .dictationSideFeedback.ok { color: #c00; font-style: italic; }
.dictationFeedback.bad, .dictationSideFeedback.bad { color: #b00; }
.dictationSideTitle { color: #c00; font-weight: 700; margin-bottom: 12px; }
.dictationAnswerGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; row-gap: 12px; font-size: 16px; }
.dictationAnswerItem { white-space: nowrap; }
.dictationSideFeedback { border-top: 1px solid #bbb; margin-top: 28px; padding: 18px 0; text-align: center; font-size: 18px; }
.dictationHelp table { width: 100%; }

/* Lesson landing-page illustration restored from the legacy ASP.NET layout. */
.lessonIntroImageCell {
  vertical-align: top;
  padding-left: 18px;
}
.lessonIntroImage {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
  object-fit: contain;
}
@media (max-width: 760px) {
  .lessonIntroImageCell { padding-left: 10px; }
  .lessonIntroImage { max-width: 160px; }
}

/* Stage 8: scrambled sentence sequence */
.scrambledExerciseRoot{padding:8px 4px 28px;max-width:760px}.scrambledIntroTitle{font-weight:700;color:#c00;margin:3px 0 18px}.scrambledIntroText{line-height:1.55;margin-bottom:24px}.scrambledHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.scrambledNav{display:flex;align-items:center;gap:10px;white-space:nowrap}.scrambledArrow{border:0;background:transparent;cursor:pointer}.scrambledArrow:disabled{opacity:.25;cursor:default}.scrambledChoices{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:10px 18px;margin-bottom:18px}.scrambledChoice{display:flex;align-items:center;gap:7px;text-align:left;background:transparent;border:0;padding:3px;cursor:pointer;font:inherit}.scrambledChoice[disabled]{opacity:.5;cursor:default}.scrambledSentence{display:flex;gap:12px;min-height:70px;align-items:flex-start;padding:4px 0 12px}.scrambledSentenceValue{font-size:18px;min-height:24px}.scrambledActions{display:flex;justify-content:space-between;gap:12px}.scrambledFeedback{text-align:center;min-height:30px;font-size:20px;font-style:italic;font-weight:700;color:#c00;margin-top:14px}.scrambledFeedback.ok{color:#c00}.scrambledAnswerTitle{font-weight:700;color:#c00;margin-bottom:12px}.scrambledAnswerBody{font-size:18px;line-height:1.6}@media(max-width:700px){.scrambledChoices{grid-template-columns:repeat(2,minmax(100px,1fr))}}

/* Legacy phonetics tone grids ---------------------------------------------
   ASP.NET rendered these tables with cellspacing=1 on a black table
   background, which produced a full cell grid. Modernized page markup can
   lose that visual grid (and `display:block` on the visible table can also
   collapse the intrinsic table layout). Restore table semantics and grid
   lines for every pgN_tone* table used across the phonetics lessons. */
#mainContent table[id^="pg"][id*="_tone"] {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #000;
  background: #fff;
}

#mainContent table[id^="pg"][id*="_tone"] > tbody > tr > td,
#mainContent table[id^="pg"][id*="_tone"] > tr > td {
  border: 1px solid #000;
  box-sizing: border-box;
}

/* The legacy source marks the initially visible tone table display:block.
   Keep hidden tables hidden, but make a visible tone grid a real table so
   its 77px legacy columns and grid lines render correctly. */
#mainContent table[id^="pg"][id*="_tone"]:not([style*="display:none"]):not([style*="display: none"]) {
  display: table !important;
}

/* Stage 9 repository-backed multiple-choice sequence exercises */
.mcqSequenceRoot{width:100%;box-sizing:border-box;}
.mcqSequenceSection{min-height:320px;padding:4px 8px 12px;box-sizing:border-box;}
.mcqSequenceContent{font-size:16px;line-height:1.55;margin:0 0 16px;overflow-wrap:anywhere;}
.mcqSequenceContent .LessonTextTitle{display:inline;font-size:16px;font-weight:700;color:#c00;margin:0;}
.mcqSequenceContent table{max-width:100%;height:auto;}
/* Stage 21: keep legacy short-passage speaker labels on one line. */
.mcqSequenceContent table.mcqSequenceDialogue{width:100%;table-layout:auto;}
.mcqSequenceContent table.mcqSequenceDialogue col:first-child{width:34px!important;}
.mcqSequenceContent table.mcqSequenceDialogue td:first-child{width:34px;min-width:34px;white-space:nowrap;vertical-align:top;padding-left:0;padding-right:2px;}
.mcqSequenceContent table.mcqSequenceDialogue td:nth-child(2){padding-left:0;}
.mcqSequenceContent img{max-width:100%;height:auto;}
.mcqSequenceDivider{border-top:1px solid #bbb;margin:14px 0 14px;}
.mcqSequenceHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;margin-bottom:22px;}
.mcqSequenceNav{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:400;white-space:nowrap;}
.mcqSequenceNav button{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:2px 4px;}
.mcqSequenceNav button:disabled{visibility:hidden;}
.mcqSequencePrompt{font-size:16px;line-height:1.5;margin:0 0 18px;}
.mcqSequenceChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:14px;margin:8px 0 24px;}
.mcqSequenceChoice{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;padding:4px 6px;font:inherit;min-height:34px;}
.mcqSequenceChoice:hover{background:rgba(0,0,0,.035);}
.mcqSequenceChoice.selected{background:rgba(0,0,0,.06);}
.mcqSequenceCheck{font-size:18px;line-height:1;flex:0 0 auto;}
.mcqSequenceOption{line-height:1.3;max-width:100%;overflow-wrap:anywhere;}
.mcqSequenceChoice.isLarge .mcqSequenceOption{font-size:52px;line-height:1.1;}
.mcqSequenceOption img{max-width:100%;height:auto;vertical-align:middle;}
.mcqSequenceActions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.mcqSequenceActions button{min-width:80px;padding:5px 12px;}
.mcqSequenceFeedback{min-height:34px;text-align:center;padding-top:8px;font-size:18px;font-style:italic;font-weight:600;}
.mcqSequenceFeedback.ok{font-weight:700;}
.mcqAnswerPanel{padding:6px 2px;}
.mcqAnswerTitle{font-weight:700;margin-bottom:12px;}
.mcqAnswerValue{font-size:28px;line-height:1.4;}
.mcqAnswerOr{font-size:16px;font-weight:400;margin:0 6px;}
.mcqAnswerPanel img{max-width:100%;height:auto;}
@media(max-width:700px){.mcqSequenceChoices{grid-template-columns:1fr}.mcqSequenceChoice.isLarge .mcqSequenceOption{font-size:42px}.mcqSequenceHeader{align-items:flex-start}}

/* Stage 10: Flash-free stroke-order practice */
.strokeSequenceRoot{padding:22px 22px 40px;width:100%;max-width:none;box-sizing:border-box}
.strokeSequenceHeader{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;font-size:16px}
.strokeSequenceNav{display:flex;align-items:center;gap:8px;font-weight:400}
.strokeSequenceNav button{border:0;background:transparent;padding:2px 5px;font-size:16px;cursor:pointer}
.strokeSequenceNav button:disabled{opacity:.2;cursor:default}
.strokeSequenceInstruction{font-size:16px;line-height:1.45;margin:8px 0 18px;width:100%;max-width:none;box-sizing:border-box}
.strokePracticeWrap{display:flex;justify-content:center;margin:18px 0 28px}
.strokePracticeHost,.strokeAnswerAnimation{width:180px;height:180px;background:#fafafa;border:1px solid #eee}
.strokeSequenceSvg{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.strokeShape{fill:#d6d6d6;stroke:#bdbdbd;stroke-width:2;transition:fill .12s,opacity .2s}
.strokeShape.chosen{fill:#555;stroke:#444}
.strokeHit{fill:none;stroke:transparent;stroke-width:38;pointer-events:stroke;cursor:pointer}
.strokeOrderNumber{font:700 54px sans-serif;fill:#b00020;paint-order:stroke;stroke:#fff;stroke-width:10px;stroke-linejoin:round;text-anchor:middle}
.strokeSequenceActions{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-top:18px}
.strokeSequenceActions button{min-width:80px;justify-self:center}
.strokeSequenceActions button:first-child{justify-self:start}
.strokeSequenceActions button:last-child{justify-self:end}
.strokeSequenceFeedback{text-align:center;min-height:58px;padding-top:14px;font:italic 700 20px Georgia,serif;color:#c00}
.strokeSequenceFeedback.ok{color:#c00}
.strokeSequenceLoading,.strokeSequenceError{display:flex;align-items:center;justify-content:center;height:100%;padding:12px;text-align:center;color:#666}
.strokeAnswerPanel{padding:8px 4px}
.strokeAnswerTitle{font-weight:700;color:#d00;margin-bottom:16px}
.strokeAnswerChar{font-size:70px;line-height:1;text-align:center;margin:6px 0 14px}
.strokeAnswerAnimation{margin:0 auto;border:0;background:transparent}
.strokeAnswerAnimation .strokeShape{fill:#555;stroke:#555}
.strokeAnswerAnimation .strokeShape.answerHidden{opacity:.06}
.strokeCompositeChoices{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:8px 24px;margin:18px 0 28px}
.strokeCompositeChoice{border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:7px;cursor:pointer;padding:5px}
.strokeCompositeChoice .hanzi{font-size:54px;line-height:1.1}
.strokeCompositeChoice.selected{background:#f4f4f4}
.strokeMcqAnswer{font-size:58px;line-height:1.25}
body.isStrokeSequenceExercise #audioSection,body.isStrokeSequenceExercise #videoSection{display:none!important}
@media(max-width:720px){.strokeCompositeChoices{grid-template-columns:repeat(2,1fr)}.strokeSequenceRoot{padding:16px}.strokePracticeHost{width:160px;height:160px}}

/* Stage 11: persisted text + audio submission */
.textAudioSubmissionRoot{max-width:780px;padding:20px 22px 28px;box-sizing:border-box;}
.textAudioSubmissionMain{width:100%;max-width:none;min-width:0;}
.textAudioTitle{font-weight:700;font-size:18px;margin-bottom:16px;}
.textAudioPrompt{line-height:1.5;margin-bottom:22px;white-space:pre-wrap;}
.textAudioStep{margin:14px 0 8px;}
.textAudioInputLabel{display:block;font-weight:700;text-align:center;margin:6px 0;}
.textAudioResponse{display:block;width:100%;min-height:180px;box-sizing:border-box;font:inherit;padding:8px;resize:vertical;}
.textAudioActions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px;}
.textAudioActions button{min-width:84px;}
.textAudioSaveStatus{text-align:center;min-height:24px;margin-top:10px;font-weight:600;}
.textAudioSaveStatus.ok{color:#16732a;}.textAudioSaveStatus.bad{color:#b00020;}
.textAudioVoiceStep{margin-top:24px;border-top:1px solid #ddd;padding-top:16px;}
.textAudioVoiceNote{line-height:1.45;}
body.isTextAudioExercise #audioSection,body.isTextAudioExercise #videoSection{display:none!important;}

/* Stage 11 legacy side-panel writing layout.  When the ASP.NET source placed
   its textarea in the right column, keep the instructional main column intact. */
.textAudioSubmissionSide{max-width:none;padding:8px 6px 14px;}
.textAudioSubmissionSide .textAudioInputLabel{text-align:center;margin:0 0 8px;}
.textAudioSubmissionSide .textAudioResponse{width:100%;min-height:210px;}
.textAudioSubmissionSide .textAudioActions{justify-content:flex-end;}
body.isTextAudioExercise .textAudioSubmissionSide + *{clear:both;}

/* Stage 12: composite Grammar exercises rendered in the right panel. */
.compositeExerciseHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px;font-weight:700;color:#c00;}
.compositeExerciseNav{display:flex;align-items:center;gap:8px;font-weight:400;color:#111;flex:0 0 auto;white-space:nowrap;}
.compositeExerciseNav span{display:inline-block;white-space:nowrap;min-width:max-content;}
.compositeExerciseHeader>strong{min-width:0;}
.compositeExerciseNav button{border:0;background:transparent;cursor:pointer;padding:2px 4px;flex:0 0 auto;}
.compositeExerciseNav button:disabled{opacity:.3;cursor:default;}
.compositeExercisePrompt{padding:10px 8px;line-height:1.45;}

/* Stage 66: preserve the legacy two-column A:/B: layout for Grammar
   Paraphrasing prompts recovered as bare tbody/tr fragments. */
.grammarTextPromptTable{width:100%;border-collapse:collapse;table-layout:auto;}
.grammarTextPromptTable td{vertical-align:top;padding:4px 0;line-height:1.45;}
.grammarTextPromptTable td:first-child{width:24px;white-space:nowrap;padding-right:4px;}
.grammarTextPromptTable td:nth-child(2){width:auto;}
.compositeMcqChoices{padding:12px 16px;display:flex;flex-wrap:wrap;gap:18px 28px;}
.compositeMcqChoice{display:flex;align-items:center;gap:5px;cursor:pointer;}
.compositeExerciseActions{display:flex;justify-content:space-between;gap:12px;padding:12px 8px;}
.compositeExerciseFeedback{text-align:center;min-height:30px;padding:6px;font-size:18px;font-style:italic;}
.compositeExerciseFeedback.ok{color:#c00;font-weight:700;}
.compositeExerciseFeedback.bad{color:#c00;}
.compositeExerciseAnswer{border-top:1px solid #ccc;padding:10px 8px;line-height:1.4;}
.compositeTextLabel{display:block;text-align:center;font-weight:700;margin:4px 8px 6px;}
.compositeTextResponse{display:block;width:calc(100% - 16px);min-height:165px;box-sizing:border-box;margin:0 8px;resize:vertical;}
.compositeRecorderNote{padding:10px 8px;line-height:1.4;}
.compositeSubstitutionPrompt table{max-width:100%;}

/* Stage 13: Phonetics C/D record + compare exercise in side panel */
.pronRecordSideRoot { padding: 6px 4px 10px; }
.pronRecordSideRoot .pronRecordHeader { align-items: center; gap: 8px; }
.pronRecordSideRoot .pronRecordTitle { flex: 1; }
.pronRecordSideRoot .pronRecordPrompt { width: 100%; text-align: left; margin: 10px 0; }
.pronRecordSideRoot .pronRecordControls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pronRecordSideRoot .pronRecordPreview { width: 100%; margin-top: 8px; }
.pronRecordSideRoot .pronRecordInstruction { margin-top: 10px; font-size: 0.92em; line-height: 1.35; }

/* Stage 14: listening MCQ + answer/script */
.listeningMcqScriptRoot{padding:18px 12px 28px;max-width:760px}
.listeningMcqHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.listeningMcqHeader>strong{color:#d00;font-weight:700}
.listeningMcqNav{display:flex;align-items:center;gap:10px}
.listeningMcqNav button{border:0;background:transparent;cursor:pointer;font-size:15px}
.listeningMcqNav button:disabled{opacity:.25;cursor:default}
.listeningMcqInstruction{margin:0 0 14px;line-height:1.4}
.listeningMcqAudio{width:300px;max-width:100%;height:40px;margin:0 0 12px}
.listeningMcqPrompt{margin:6px 0 10px;line-height:1.45}
.listeningMcqNumber{margin-right:4px}
.listeningMcqChoices{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 24px 22px}
.listeningMcqChoice{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:2px 4px;cursor:pointer;text-align:left;font:inherit}
.listeningMcqChoice.selected{font-weight:600}
.listeningMcqActions{display:flex;justify-content:space-between;gap:18px;margin-top:18px}
.listeningMcqActions button{min-width:80px}
.listenSideStack{min-height:100%;display:flex;flex-direction:column}
.listenSideBlock{padding:8px 4px 16px}
.listenSideBlock+.listenSideBlock{border-top:1px solid #bbb}
.listenSideTitle{font-weight:700;color:#d00;margin-bottom:8px}
.listenSideFeedback{border-top:1px solid #bbb;border-bottom:1px solid #bbb;min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-style:italic;color:#c00;font-size:18px;padding:10px}
.listenSideFeedback.ok{color:#c00}
.listenSideBlock table{width:100%;border-collapse:collapse}
body.isListeningMcqScript #detailsSection{display:block!important}
body.isListeningMcqScript #audioSection,body.isListeningMcqScript #videoSection{display:none!important}

/* Stage 15: substitution + per-option recording/upload */
.isSubstitutionRecordExercise #audioSection,
.isSubstitutionRecordExercise #videoSection { display:none !important; }
.subRecordRoot { padding:18px 22px 26px; width:100%; max-width:none; min-width:0; box-sizing:border-box; }
.subRecordHeader { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:12px; }
.subRecordHeader > strong { color:#d10a22; font-size:18px; }
.subRecordNav { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.subRecordNav button { border:0; background:transparent; cursor:pointer; font-size:15px; }
.subRecordNav button:disabled { opacity:.25; cursor:default; }
.subRecordInstruction { margin:0 0 14px; line-height:1.45; }
.subRecordModelAudio { width:100%; max-width:none; margin:0 0 14px; }
.subRecordPrompt { margin:4px 0 16px; font-size:16px; line-height:1.55; }
.subRecordPrompt > div { margin:2px 0; }
.subRecordOptions { display:grid; gap:12px; }
.subRecordOption { border:1px solid #b9b9b9; padding:10px 12px; background:#fff; }
.subRecordOptionTop { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.subRecordOptionNumber { font-weight:700; min-width:68px; }
.subRecordSegments { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.subRecordNativeLink { border:0; padding:0; background:transparent; color:#0645ad; text-decoration:underline; cursor:pointer; font:inherit; }
.subRecordControls { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
.subRecordControls button,.subRecordActions button { min-width:80px; }
.subRecordPlayback { width:100%; max-width:none; margin-top:8px; height:34px; }
.subRecordHint { min-height:18px; margin-top:4px; font-size:13px; }
.subRecordActions { display:flex; justify-content:space-between; gap:16px; margin-top:18px; }
.subRecordFeedback { min-height:28px; margin-top:10px; text-align:center; font-weight:700; color:#c00; }
.subRecordAnswer { padding:8px 6px; line-height:1.45; }
.subRecordAnswerTitle { color:#d10a22; font-weight:700; margin-bottom:10px; }
.subRecordAnswer a { color:#0645ad; }

/* Stage 15: model substitution options belong on their own lines in Answer panel. */
.subRecordAnswer > a,
.subRecordAnswer > div > a,
.subRecordAnswer p > a {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
}

/* Stage 16 - Quick Response record / submit */
.quickResponseRoot{padding:22px 28px;width:100%;max-width:none;min-width:0;box-sizing:border-box}
.quickResponseHeader,.quickResponseInstruction,.quickResponseGroupTitle,.quickResponseRecordBox,.quickResponseActions,.quickResponseFeedback{width:100%;box-sizing:border-box}
.quickResponseHeader{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;color:#c00}
.quickResponseNav{display:flex;align-items:center;gap:10px;color:#111;font-weight:normal}
.quickResponseNav button{border:0;background:transparent;cursor:pointer;font-size:16px;padding:2px 4px}
.quickResponseNav button:disabled{opacity:.25;cursor:default}
.quickResponseInstruction{line-height:1.45;margin-bottom:18px}
.quickResponseGroupTitle{font-weight:700;margin:8px 0 12px}
.quickResponsePromptAudio{width:min(420px,100%);margin:0 0 18px}
.quickResponseRecordBox{border:1px solid #bbb;padding:14px;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;margin-bottom:18px}
.quickResponseRecordBox .quickResponsePlayback{grid-column:1/-1;width:min(520px,100%)}
.quickResponseActions{display:flex;justify-content:space-between;gap:18px;margin-top:14px}
.quickResponseActions button{min-width:82px}
.quickResponseFeedback{text-align:center;font-style:italic;font-weight:700;color:#c00;font-size:18px;min-height:28px;margin-top:12px}
.quickResponseSide{padding:14px 10px;line-height:1.45}
.quickResponseSideTitle{font-weight:700;color:#c00;margin-bottom:10px}


/* Stage 17: drag/drop fill-in-the-blanks */
.dragFillActive .item { cursor: grab; user-select: none; display: inline-block; padding: 2px 6px; }
.dragFillActive .item:active { cursor: grabbing; }
.dragFillActive .drop { min-width: 56px; min-height: 20px; display: inline-block; border-bottom: 1px solid #000; vertical-align: baseline; text-align: center; cursor: pointer; }
.dragFillActive .drop.dropHover { outline: 2px solid currentColor; outline-offset: 1px; }
.dragFillSide { padding: 10px 8px; }
.dragFillSideTitle { font-weight: 700; margin-bottom: 10px; color: #d10b22; }
.dragFillAnswerHtml { line-height: 1.5; }
.dragFillActions { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:22px 14px 0; }
.dragFillActionButton { width:80px; min-height:22px; }
.dragFillFeedback { margin-top: 22px; padding: 18px 8px; border-top: 1px solid #bbb; text-align: center; font-weight: 700; font-style: italic; color: #d10b22; }

/* Stage 23 - pure written-response exercises */
.writtenResponseRoot{padding:16px 20px 24px;box-sizing:border-box;max-width:980px}
.writtenResponseLead{line-height:1.5;margin-bottom:8px}
.writtenResponseLead .LessonTextTitle{font-weight:700;color:#d10b22}
.writtenResponseLead table{max-width:100%}
/* Legacy ASP.NET written-response fragments used fixed frame-filling heights.
   In the Node flow these must collapse to the actual instruction content. */
.writtenResponseLead table,.writtenResponseLead tbody,.writtenResponseLead tr,.writtenResponseLead td{height:auto!important;min-height:0!important;max-height:none!important}
.writtenResponseNav{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:6px 4px 12px}
.writtenResponseNav button{border:0;background:transparent;cursor:pointer;font-size:16px;padding:2px 4px}
.writtenResponseNav button:disabled{opacity:.25;cursor:default}
.writtenResponsePrompt{margin:8px 0 14px;line-height:1.5}
.writtenResponsePrompt table{width:auto;max-width:100%;border-collapse:collapse}
.writtenResponsePrompt td{padding:3px}
.writtenResponseEditor{margin-top:14px}
.writtenResponseLabel{text-align:center;font-weight:700;margin-bottom:4px}
#writtenResponseText{width:98%;min-height:180px;box-sizing:border-box;resize:vertical;font:inherit}
.writtenResponseActions{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px}
.writtenResponseActions button{width:80px;min-height:24px}
.writtenResponseStatus{text-align:center;font-style:italic;font-weight:700;min-height:28px;margin-top:14px}
.writtenResponseStatus.ok{color:#d10b22}.writtenResponseStatus.bad{color:#b00020}
.writtenResponseAnswer{margin-top:16px;line-height:1.5}

/* Stage 27: Picture Description recording exercises */
body.isPictureDescriptionRecord #mainRecUpload{display:none;}
.pictureDescriptionExercise{padding:8px 12px 18px;box-sizing:border-box;}
.pictureDescriptionContent{font-size:16px;line-height:1.35;}
.pictureDescriptionContent .LessonTextTitle{font-weight:700;color:#d00;}
.pictureDescriptionContent table{max-width:100%;}
.pictureDescriptionContent img{
  width:220px;
  height:150px;
  max-width:100%;
  object-fit:contain;
  box-sizing:border-box;
}
.pictureDescriptionContent table td{vertical-align:top;}
.pictureDescriptionActions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:8px;}
.pictureDescriptionActions button{min-width:80px;padding:4px 14px;}
.pictureDescriptionFeedback{min-height:20px;margin-top:8px;font-weight:600;}
.pictureDescriptionHint{padding:8px;line-height:1.45;}
.pictureDescriptionHint .LessonHintText{font-weight:700;color:#d00;}

/* Stage 28 mixed grammar exercise controls */
.grammarInsertionMarker { display:inline-block; margin:0 2px; font-weight:600; }
.grammarDragBank { display:flex; gap:28px; flex-wrap:wrap; margin:8px 4px 18px; }
.grammarDragBank .bankItem { cursor:grab; padding:2px 8px; border:1px solid transparent; }
.grammarDragPrompt table { font-size:inherit; }
.grammarDragPrompt span.drop { display:inline-block; min-width:72px; min-height:20px; border-bottom:1px solid #222; margin:0 3px; vertical-align:baseline; text-align:center; }
.grammarDragPrompt span.drop.dropHover { outline:1px dashed #555; }

/* Stage 29: legacy Word Insertion layout */
.wordInsertionExercise{padding:10px 7px 0;line-height:1.45;}
.wordInsertionWordRow{display:grid;grid-template-columns:28px 1fr;min-height:42px;align-items:start;margin-bottom:2px;}
.wordInsertionDialogue{border-collapse:collapse;width:auto;max-width:100%;margin:0;}
.wordInsertionDialogue td{border:0!important;padding:2px 0!important;vertical-align:top;background:transparent!important;}
.wordInsertionDialogue .wordInsertionSpeaker{width:34px;white-space:nowrap;padding-right:6px!important;}
.wordInsertionDialogue input[type="radio"]{margin:0 2px;vertical-align:-1px;}
.wordInsertionSentence{display:flex;gap:10px;align-items:baseline;min-height:56px;padding-top:27px;}
.wordInsertionSentenceValue{font-size:1em;}

/* Stage 30: restore the two-line A/B dialogue layout for grammar Pick and Choose. */
.pickChoosePrompt { margin-top: 14px; }
.pickChooseDialogue { line-height: 1.8; }
.pickChooseDialogue > div { display: flex; align-items: baseline; }
.pickChooseSpeaker { flex: 0 0 auto; margin-right: 4px; white-space: nowrap; }
.pickChooseBlank { display: inline-block; min-width: 72px; border-bottom: 1px solid #000; line-height: 1.15; color: transparent; vertical-align: baseline; }
.pickChooseChoices { margin-top: 28px; }


/* Stage 33: Analytical Reading */
.analyticReadingPassage{padding:10px 4px 18px;line-height:1.45}.analyticReadingPassage .LessonTextTitle{font-weight:700;color:#d10b22}.analyticReadingPassage table{max-width:100%}.analyticReadingSide{padding:10px 7px 20px;line-height:1.4}.analyticReadingHeader{display:flex;align-items:center;justify-content:space-between;color:#d10b22;margin:6px 2px 20px}.analyticReadingNav{display:flex;gap:10px;align-items:center;color:#111;font-weight:400}.analyticReadingNav button{border:0;background:transparent;padding:0 2px;cursor:pointer}.analyticReadingNav button:disabled{visibility:hidden}.analyticReadingChoices{display:grid;grid-template-columns:28px 1fr;gap:8px 0;margin-bottom:24px}.analyticReadingNumber{grid-row:1 / span 8}.analyticReadingChoice{display:flex;align-items:center;gap:7px;min-height:28px}.analyticReadingActions{display:flex;justify-content:space-between;align-items:center;margin:12px 0 10px}.analyticReadingActions button{min-width:60px}.analyticReadingFeedback{text-align:center;font-style:italic;font-weight:700;color:#c00;font-size:18px;min-height:34px;padding:14px 4px;border-top:1px solid #bbb;border-bottom:1px solid #bbb}.analyticReadingFeedback.ok{color:#c00}.analyticReadingAnswer,.analyticReadingScript{padding:14px 0;line-height:1.45}.analyticReadingAnswer+.analyticReadingScript{border-top:1px solid #bbb}.analyticReadingAnswer .LessonHintText,.analyticReadingScript .LessonHintText,.analyticAnswerTitle{font-weight:700;color:#d10b22;margin-bottom:10px}


/* Stage 36: legacy inline vocabulary links preserved in repository-backed passages. */
.mcqSequenceContent a.legacyInterpretLink,
.mcqSequenceContent a[data-interpret-char] {
  color: #0645ad;
  text-decoration: underline;
  cursor: pointer;
}

/* Stage 39: repository-backed e-mail composition */
body.isEmailComposeExercise #recordingSection,
body.isEmailComposeExercise .recordingSection,
body.isEmailComposeExercise #recordingBar { display:none !important; }
.emailComposeRoot{padding:4px 6px;max-width:780px}
.emailComposeLead{margin-bottom:14px;line-height:1.45}
.emailComposeLead .LessonTextTitle{color:#d00;font-weight:700}
.emailComposeForm label{display:flex;align-items:center;margin:3px 0;gap:8px}
.emailComposeForm label>span{width:62px;font-weight:700;flex:0 0 62px}
.emailComposeForm input{width:min(390px,calc(100% - 76px));box-sizing:border-box}
.emailComposeForm label.message{align-items:flex-start;flex-wrap:wrap}
.emailComposeForm label.message>span{width:62px}
.emailComposeForm textarea{width:min(390px,calc(100% - 76px));min-height:170px;box-sizing:border-box;resize:vertical}
.emailComposeActions{width:min(468px,100%);display:flex;justify-content:flex-end;margin-top:10px}
.emailComposeActions button{min-width:80px}
.emailComposeStatus{margin-top:10px;font-weight:600}
.emailComposeStatus.ok{color:#087d1c}.emailComposeStatus.bad{color:#b00020}
@media(max-width:560px){.emailComposeForm label{display:block}.emailComposeForm label>span{display:block;width:auto;margin-bottom:2px}.emailComposeForm input,.emailComposeForm textarea{width:100%}.emailComposeActions{width:100%}}

/* Stage 46 complete Phone / Phonetics exercise panel */
.phoneExercise{font-size:14px;line-height:1.45;padding:4px 2px 12px}.phoneExerciseHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.phoneExerciseHeader strong{font-size:16px}.phoneExerciseHeader button{min-width:28px}.phoneExerciseHeader span{display:inline-block;min-width:56px;text-align:center}.phonePlay,.phoneRecordPrompt{cursor:pointer}.phoneToneImage{display:block;max-width:300px;width:100%;height:auto;margin:8px 0;cursor:pointer}.phonePrompt{margin:8px 0}.phoneChoices{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:10px 0 14px}.phoneChoices label{display:flex;gap:6px;align-items:flex-start}.phoneActions,.phoneRecordControls{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.phoneAnswer{margin-top:12px;padding-top:10px;border-top:1px solid #bbb}.phoneFeedback{min-height:22px;margin-top:10px}.phoneRecordPrompt{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:8px;margin:10px 0}.phoneRecord audio{width:100%;margin-top:10px}

/* Stage 51: preserve legacy Answer/Script table layout in listening exercises. */
.listenSideLegacyTable{width:100%;border-collapse:collapse;table-layout:auto}
.listenSideLegacyTable td{vertical-align:top;padding:2px 4px}
.listenSideLegacyTable tr:first-child td{padding-bottom:8px}
.listenSideLegacyTable .LessonHintText{font-weight:700;color:#d00}
/* Stage 52: only force the narrow speaker-label column on genuine
   two-cell script rows. Answer fragments often contain a single <td>;
   treating that as the speaker column forced the whole answer into a
   28px nowrap cell and clipped the text. */
.listenSideLegacyTable td{white-space:normal;overflow-wrap:break-word;word-break:normal}
.listenSideLegacyTable tr > td:first-child:nth-last-child(2){width:28px;white-space:nowrap}
.listenSideLegacyTable tr > td:only-child{width:auto;white-space:normal}

/* Stage 54: Short Passage MCQ layout */
.mcqSequencePrompt .mcqSequenceQuestionNumber{display:inline-block;min-width:26px;vertical-align:top}
.mcqSequenceChoices.longOptions{grid-template-columns:1fr;row-gap:8px;max-width:720px;margin-left:12px}
.mcqShortPassage .mcqSequenceChoice{min-height:28px;padding:2px 6px;align-items:flex-start}
.mcqShortPassage .mcqSequenceCheck{line-height:1.45}
.mcqShortPassage .mcqSequenceOption{line-height:1.45}
.mcqShortPassage .mcqSequenceFeedback{margin-top:4px}

/* Stage 57: textbook Main Text recording-composite exercises */
.maintextRecordingRoot{padding:18px 22px 30px;box-sizing:border-box;max-width:980px}
.maintextExerciseSection{margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid #cfcfcf}
.maintextExerciseTitle{font-weight:700;color:#c00;margin-bottom:8px}
.maintextQaInstruction{margin-bottom:12px;line-height:1.45}
.maintextQaToolbar{display:flex;align-items:center;gap:12px;margin:10px 0 12px}
.maintextRecordBox{display:grid;grid-template-columns:auto auto minmax(180px,1fr) auto;align-items:center;gap:10px;margin:10px 0}
.maintextRecordBox audio{width:100%;min-width:180px;height:34px}
.maintextRecordFeedback{grid-column:1/-1;min-height:20px;font-style:italic}
.maintextReviewActions{display:flex;gap:12px;margin-top:10px}
.maintextSituationPrompt table{border-collapse:collapse;max-width:100%}
.maintextSituationPrompt td{padding:3px 6px;vertical-align:top}
.maintextReviewTitle{font-weight:700;color:#c00;margin-bottom:10px}
.maintextReview{line-height:1.45}
.maintextLegacyTable{border-collapse:collapse;width:100%}
.maintextLegacyTable td{padding:2px 4px;vertical-align:top;white-space:normal}
body.isMaintextRecordingComposite #mediaPlayerBar,body.isMaintextRecordingComposite #audioSection,body.isMaintextRecordingComposite #videoSection{display:none!important}
@media(max-width:760px){.maintextRecordBox{grid-template-columns:1fr 1fr}.maintextRecordBox audio{grid-column:1/-1}.maintextRecordFeedback{grid-column:1/-1}}

/* Stage 58: two-column matching / line-connection exercise */
.matchingPairsHeader{margin-bottom:4px}.matchingPairsInstruction{padding:4px 6px 12px;line-height:1.35}.matchingPairsBoard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:58px;padding:4px 8px 10px;min-height:180px}.matchingPairsSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}.matchingPairsSvg line{pointer-events:none}.matchingPairLine{stroke:#1f4f99!important;stroke-width:2!important;stroke-linecap:round;vector-effect:non-scaling-stroke}.matchingPairLine{fill:none}.matchingPairsColumn{display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}.matchingPairItem{display:flex;align-items:center;gap:8px;min-height:38px;padding:5px 4px;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}.matchingPairsRight .matchingPairItem{justify-content:flex-start}.matchingPairNum{flex:0 0 22px;text-align:right}.matchingPairText{flex:1;line-height:1.35}.matchingDot{display:inline-block;flex:0 0 10px;width:10px;height:10px;border:1px solid currentColor;border-radius:50%;background:#fff;box-sizing:border-box}.matchingPairItem.pending .matchingDot{box-shadow:0 0 0 3px rgba(0,0,0,.12)}.matchingPairItem.connected .matchingDot{background:currentColor}.matchingPairsActions{display:flex;justify-content:space-between;gap:12px;padding:10px 8px}.matchingPairsFeedback{min-height:34px;padding:10px 8px;text-align:center;font-style:italic;font-weight:700}.matchingPairsFeedback.ok{color:#060}.matchingPairsFeedback.bad{color:#c00}.matchingPairsAnswer{margin-top:4px;border-top:1px solid #ccc;padding:10px 8px}.matchingAnswerTitle{font-weight:700;margin-bottom:10px}.matchingAnswerRow{display:grid;grid-template-columns:24px minmax(0,1fr) 18px minmax(0,1fr);gap:6px;align-items:start;margin:7px 0;line-height:1.35}@media (max-width:700px){.matchingPairsBoard{column-gap:34px;padding-left:2px;padding-right:2px}.matchingPairItem{padding-left:0;padding-right:0}}


/* Stage 60: use an absolutely-positioned HTML line layer instead of SVG.
   This avoids Chromium/Linux SVG overlay inconsistencies inside the side panel. */
.matchingPairsBoard{isolation:isolate}
.matchingLinesLayer{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:3}
.matchingPairLineHtml{position:absolute;height:3px;background:#1f4f99;border-radius:2px;transform-origin:0 50%;pointer-events:none;box-shadow:0 0 0 0.25px #1f4f99}
.matchingPairsColumn{z-index:4}
.matchingPairItem{position:relative;z-index:4}
.matchingDot{position:relative;z-index:5}

/* Stage 63 - Guided Role-playing */
.isGuidedRolePlaying #mainContent{overflow:visible;}
.guidedRoleRoot{font-size:15px;line-height:1.45;padding:4px 6px 12px;}
.guidedRoleHeader{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px;}
.guidedRoleTitle{font-size:20px;font-weight:700;margin-bottom:3px;}
.guidedRoleInstruction{max-width:620px;}
.guidedRoleHelpLink{border:0;background:none;padding:2px 0;text-decoration:underline;cursor:pointer;font:inherit;}
.guidedRoleNav{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.guidedRoleNav button{min-width:30px;}
.guidedRoleFullAudio{margin:8px 0 12px;}
.guidedRoleFullAudio audio{width:min(100%,420px);height:34px;}
.guidedRoleTranscriptWrap{min-height:205px;max-height:285px;overflow:auto;margin-bottom:10px;}
.guidedRoleTranscript{width:100%;border-collapse:collapse;}
.guidedRoleTranscript td{padding:3px 5px;vertical-align:top;}
.guidedRoleTranscript td:first-child{width:34px;white-space:nowrap;font-weight:600;}
.guidedRoleTranscript tr.active td{font-weight:700;}
.guidedRolePromptArea{display:grid;grid-template-columns:92px 1fr;gap:6px;min-height:76px;padding:9px 6px;margin:8px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.guidedRolePromptLabel{font-weight:700;}
.guidedRolePromptText{font-size:17px;}
.guidedRoleRecorder{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;}
.guidedRoleRecorder[hidden]{display:none!important;}
.guidedRolePreview{height:32px;max-width:230px;}
.guidedRoleStatus{min-height:24px;margin:5px 0;font-weight:600;}
.guidedRoleActions{display:grid;grid-template-columns:90px 1fr 1fr 90px;gap:8px;align-items:center;margin-top:8px;}
.guidedRoleActions button{min-height:34px;}
.guidedRoleRole{border:0;background:none;text-decoration:underline;cursor:pointer;font-weight:700;}
.guidedRoleRole.selected{text-decoration:none;font-weight:800;}
.guidedRoleInstructions{padding:4px 8px;line-height:1.5;}
.guidedRoleInstructions>strong{display:block;margin-bottom:8px;}
.guidedRoleInstructions ol{margin:0;padding-left:22px;}
.guidedRoleInstructions li{margin-bottom:8px;}
@media (max-width:700px){.guidedRoleHeader{display:block}.guidedRoleNav{margin-top:8px}.guidedRoleActions{grid-template-columns:1fr 1fr}.guidedRolePromptArea{grid-template-columns:72px 1fr}}

/* Stage 65: vocabulary Chinese-word column must remain horizontal.
   The legacy vocabulary tables put each Han character in a separate <a> so
   it can open stroke-order help. Modern responsive table sizing can shrink
   that cell enough to wrap every character onto its own line. Preserve the
   legacy 80px word column and keep the per-character links inline. */
.isVocabPage #mainContent td.LessonTextChinese {
  width: 80px !important;
  min-width: 80px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.isVocabPage #mainContent td.LessonTextChinese > a {
  display: inline !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Stage 121: full lesson text also uses td.LessonTextChinese.  Outside
   vocabulary pages it must wrap normally inside the main column instead of
   being forced into the 80px no-wrap vocabulary cell. */
body:not(.isVocabPage) #mainContent td.LessonTextChinese {
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
body:not(.isVocabPage) #mainContent td.LessonTextChinese > a {
  display: inline !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* Stage 69: Volume 2 positional Word Insertion layout parity.
   Keep question navigation in the header and prevent the generic composite
   action-row/grid styles from changing the original ASP.NET arrangement. */
.wordInsertionPanel{box-sizing:border-box;width:100%;padding:0 6px 18px;line-height:1.45;}
.wordInsertionHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 10px;color:#c00;font-weight:700;}
.wordInsertionNav{display:flex;align-items:center;gap:9px;color:#111;font-weight:400;white-space:nowrap;}
.wordInsertionNav button{border:0;background:transparent;padding:0 2px;cursor:pointer;font-size:14px;line-height:1;}
.wordInsertionNav button:disabled{opacity:.22;cursor:default;}
.wordInsertionPanel .wordInsertionExercise{padding:6px 0 0;line-height:1.55;}
.wordInsertionPanel .wordInsertionWordRow{display:grid;grid-template-columns:24px minmax(0,1fr);min-height:42px;align-items:start;margin:0 0 4px;}
.wordInsertionPanel .wordInsertionDialogue{border-collapse:collapse;width:100%;max-width:100%;table-layout:auto;margin:0;}
.wordInsertionPanel .wordInsertionDialogue td{border:0!important;padding:3px 0!important;vertical-align:top;background:transparent!important;}
.wordInsertionPanel .wordInsertionDialogue .wordInsertionSpeaker{width:30px;white-space:nowrap;padding-right:5px!important;}
.wordInsertionPanel .wordInsertionDialogue .wordInsertionSentenceRow{padding-left:0!important;line-height:1.8;}
.wordInsertionPanel .wordInsertionDialogue input[type="radio"]{margin:0 2px 0 1px;vertical-align:-1px;}
.wordInsertionPanel .wordInsertionSentence{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;min-height:62px;padding:22px 0 4px;}
.wordInsertionPanel .wordInsertionSentence>span:first-child{white-space:nowrap;}
.wordInsertionPanel .wordInsertionSentenceValue{font-size:1em;min-width:0;overflow-wrap:anywhere;}
.wordInsertionActions{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 0 14px;}
.wordInsertionActions button{min-width:58px;}
.wordInsertionFeedback{min-height:38px;padding:16px 6px;border-top:1px solid #bbb;border-bottom:1px solid #bbb;text-align:center;font-size:18px;font-style:italic;font-weight:700;color:#c00;}
.wordInsertionFeedback:empty{display:none;}
.wordInsertionAnswer{padding:14px 6px 18px;line-height:1.45;}
.wordInsertionAnswer .LessonHintText{font-weight:700;color:#c00;}
.wordInsertionAnswer table{width:100%;max-width:100%;border-collapse:collapse;}
.wordInsertionAnswer td{border:0!important;padding:2px 0!important;vertical-align:top;}

/* Stage 72: simultaneous multi-question Analytical Reading */
body.isAnalyticalReadingMultiExercise .analyticMultiPassage{padding:0 6px 8px;line-height:1.45}
body.isAnalyticalReadingMultiExercise .analyticMultiChoices{border-top:1px solid #bbb;padding:10px 6px 12px}
body.isAnalyticalReadingMultiExercise .analyticMultiTitle{font-weight:700;color:#d00;margin:0 0 8px}
body.isAnalyticalReadingMultiExercise .analyticMultiRow{display:grid;grid-template-columns:32px repeat(4,minmax(90px,1fr));align-items:center;gap:4px 12px;min-height:31px}
body.isAnalyticalReadingMultiExercise .analyticMultiRow label{display:flex;align-items:center;gap:4px;white-space:nowrap}
body.isAnalyticalReadingMultiExercise .analyticMultiActions{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-top:10px}
body.isAnalyticalReadingMultiExercise .analyticMultiActions button:first-child{justify-self:start}
body.isAnalyticalReadingMultiExercise .analyticMultiActions button:nth-child(2){justify-self:center}
body.isAnalyticalReadingMultiExercise .analyticMultiActions button:last-child{justify-self:end}
body.isAnalyticalReadingMultiExercise .analyticMultiSide{padding:8px 6px;line-height:1.45}
body.isAnalyticalReadingMultiExercise .analyticMultiSubmit{margin-top:0;border-top:1px solid #bbb;border-bottom:1px solid #bbb;padding:16px 8px;text-align:center;color:#d00;font:italic 700 18px Georgia,serif;line-height:1.5}
@media(max-width:700px){body.isAnalyticalReadingMultiExercise .analyticMultiRow{grid-template-columns:28px 1fr 1fr 1fr;gap:4px 6px}}

/* Stage 74: checkbox-based Sentence Construction */
.sentenceConstructionPrompt{padding:16px 8px 12px;line-height:1.55;}
.sentenceConstructionNumber{display:inline-block;min-width:22px;}
.sentenceConstructionChoices{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:10px 16px;padding:6px 8px 18px;}
.sentenceConstructionChoice{display:flex;align-items:center;gap:6px;cursor:pointer;line-height:1.35;}
.sentenceConstructionChoice input{margin:0;}
.sentenceConstructionBuilt{display:grid;grid-template-columns:110px 1fr;gap:8px;min-height:58px;padding:10px 8px 16px;align-items:start;}
.sentenceConstructionValue{min-height:24px;line-height:1.5;}
@media(max-width:700px){.sentenceConstructionChoices{grid-template-columns:repeat(2,minmax(90px,1fr));}.sentenceConstructionBuilt{grid-template-columns:1fr;}}

/* Stage 76: group Monologue questions by legacy passage (2 questions per passage). */
.listeningPassageTabs{display:flex;gap:34px;margin:0 0 18px 0;align-items:center}
.listeningPassageTabs button{border:0;background:transparent;padding:0;color:#174a9b;text-decoration:underline;font:inherit;font-weight:700;cursor:pointer}
.listeningPassageTabs button.selected{color:#777;cursor:default}

/* Stage 82: legacy Sentence Construction written-response side panel */
.writtenResponseSideAnswer{min-height:285px;padding:8px 6px;box-sizing:border-box;line-height:1.45}
.writtenResponseSideDivider{border-top:1px solid #bbb;margin:0 -2px}
.writtenResponseSideHelp{min-height:285px;padding:10px 6px;box-sizing:border-box;line-height:1.5}
.writtenResponseSideHelp .LessonTextTitle{color:#d10b22;font-weight:700}

/* Stage 98: click-selected fill-blank choice; drag/drop remains supported. */
.bankItem.selected {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.fillPrompt { display:block; min-width:0; }
.dualTextPromptLabel { margin-top:8px; font-weight:600; }


/* Stage 100: repository-backed authentic form exercise */
.authFormExercise{font-size:14px;line-height:1.35}.authFormHeader{color:#d00;margin:0 0 8px}.authFormInstruction{margin:0 0 10px}.authFormFields{max-height:285px;overflow:auto;padding-right:4px}.authFormGroup{color:#d00;font-weight:700;margin:6px 0 2px}.authFormRow{display:grid;grid-template-columns:76px 1fr;gap:6px;align-items:center;margin:3px 0}.authFormRow input{min-width:0;width:100%;box-sizing:border-box;border:0;border-bottom:1px solid #bbb;padding:2px 3px;background:#fff}.authFormActions{display:flex;justify-content:space-between;margin-top:8px}.authFormFeedback{border-top:1px solid #ccc;margin-top:8px;padding:8px 4px;text-align:center;font-weight:700;font-style:italic;color:#d00}.authFormFeedback:empty{display:none}.authFormAnswer{border-top:1px solid #ccc;margin-top:8px;padding-top:8px;max-height:285px;overflow:auto}

/* Stage 103: Lesson 27 Web Surfing customized text-input exercise */
.webSurfingCustomTextExercise {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 0 3px 8px 0;
}
.webSurfingCustomTextExercise .webSurfingTitle {
  font-weight: bold;
  color: #d00;
  margin-bottom: 14px;
}
.webSurfingCustomTextExercise .webSurfingInstructions {
  margin-bottom: 14px;
}
.webSurfingCustomTextExercise .webSurfingLink {
  margin-bottom: 4px;
  font-weight: bold;
}
.webSurfingInputFrame {
  width: 100%;
  border: 1px solid #222;
  padding: 4px;
  box-sizing: border-box;
}
.webSurfingZipRow {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  white-space: nowrap;
}
.webSurfingZipRowTop {
  justify-content: flex-start;
  margin-bottom: 4px;
}
.webSurfingZipRowBottom {
  justify-content: flex-end;
  margin-top: 4px;
}
.webSurfingZipInput {
  width: 184px;
  height: 22px;
  box-sizing: border-box;
  font: inherit;
}
.webSurfingAddressInput {
  display: block;
  width: 100%;
  height: 156px;
  min-height: 156px;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}
.webSurfingSendRow {
  width: 100%;
  margin-top: 3px;
  text-align: right;
}
.webSurfingSendRow button {
  width: 80px;
  min-height: 23px;
}
.webSurfingSubmitStatus {
  margin-top: 8px;
  text-align: right;
  font-weight: bold;
  font-style: italic;
  color: #d00;
}

/* Stage 104: preserve/recover the volume picture on textbook/workbook lesson indexes. */
.lessonIndexPicture{display:none!important}
.lessonIntroImageFallback{float:right;margin:0 0 12px 18px}
.lessonIntroImageFallback .lessonIntroImage{max-width:200px;height:auto}

/* Stage 113: legacy multi-field Sentence Construction */
.grammarMultiFields{margin:14px 0 8px;display:flex;flex-direction:column;gap:8px}.grammarMultiRow{display:grid;grid-template-columns:minmax(72px,auto) 1fr;align-items:center;gap:8px}.grammarMultiLabel{white-space:nowrap}.grammarMultiInput{min-width:0;width:100%;box-sizing:border-box;padding:4px 6px}

/* Stage 126: Listen/Speak listening activity with voice explanation */
.listeningMcqRecordingRoot{width:100%;max-width:none;min-width:0;box-sizing:border-box}
.listeningMcqRecordingRoot .listeningMcqHeader,
.listeningMcqRecordingRoot .listeningMcqInstruction,
.listeningMcqRecordingRoot .listeningMcqGroupTitle,
.listeningMcqRecordingRoot .listeningMcqPrompt,
.listeningMcqRecordingRoot .listeningMcqChoices,
.listeningMcqRecordingRoot .listenSpeakExplainBox,
.listeningMcqRecordingRoot .listeningMcqActions{width:100%;box-sizing:border-box}
.listeningMcqRecordingRoot .listeningMcqChoices{max-width:none}
.listeningMcqGroupTitle{margin:6px 0 10px}
.listenSpeakExplainBox{border:1px solid #bbb;padding:10px;margin:14px 0;display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center}
.listenSpeakExplainLabel{font-weight:700;grid-column:1/-1}
.listenSpeakExplainBox audio{grid-column:1/-1;width:100%;max-width:520px}
@media (max-width:640px){.listenSpeakExplainBox{grid-template-columns:1fr}.listenSpeakExplainBox audio{grid-column:1}}

/* Stage 152: keep exercise paging controls on one horizontal line. */
.exerciseHeader .exercisePager {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.exerciseHeader .exercisePager .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  width: 38px;
  height: 34px;
  padding: 4px 8px;
  flex: 0 0 auto;
}
.exerciseHeader .exercisePager > span {
  display: inline-block;
  min-width: 42px;
  text-align: center;
  flex: 0 0 auto;
}
.wordPhraseComposition .exerciseHeader {
  align-items: center;
}
\n\n/* Stage 155: Grammar main-panel Note/Practice links should look like links,
   including legacy <span> actions that are no longer inline JavaScript. */
#mainContent [data-action^="changePassage__"],
#mainContent [id^="sp_Practice_"] {
  color: #0645ad !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
#mainContent [data-action^="changePassage__"] b,
#mainContent [id^="sp_Practice_"] b {
  text-decoration: underline !important;
}
#mainContent [data-action^="changePassage__"].ListSelectedItem,
#mainContent [id^="sp_Practice_"].ListSelectedItem {
  color: #c00 !important;
}
#sideText .legacyGrammarSelectedTitle {
  font-weight: 700;
  margin: 0 0 10px 0;
}
#sideText [id^="task_arrow_left_"],
#sideText [id^="task_arrow_right_"] {
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 2px 5px;
}


/* Stage 158: self-contained pager for multi-item legacy Grammar exercises. */
.legacyGrammarPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 10px 0;
}
.legacyGrammarPagerBtn {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  cursor: pointer;
}
.legacyGrammarPagerBtn:disabled {
  cursor: default;
}
.legacyGrammarPagerCount {
  min-width: 52px;
  text-align: center;
  white-space: nowrap;
}

/* Stage 163: legacy Grammar drag/fill blanks recovered into #sideText.
   ASP.NET defined .drop in an inline <style> block that is stripped during
   sanitization, leaving empty spans at zero width. Keep them visible and
   usable after the legacy exercise fragment is moved into the modern panel. */
#sideText [data-legacy-grammar-task] span.drop,
#sideText .legacyGrammarDragFill span.drop {
  display: inline-block;
  position: relative;
  min-width: 70px;
  width: 70px;
  min-height: 22px;
  height: 26px;
  margin: 0 3px;
  border-bottom: 1px solid #000;
  vertical-align: text-bottom;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
#sideText .legacyGrammarDragFill .item {
  display: inline-block;
  position: static;
  min-width: 54px;
  padding: 2px 6px;
  margin: 1px 2px;
  text-align: center;
  line-height: 22px;
  cursor: grab;
  user-select: none;
}
#sideText .legacyGrammarDragFill .item:active { cursor: grabbing; }
#sideText .legacyGrammarDragFill .item.legacyGrammarChoiceSelected {
  outline: 1px dashed currentColor;
  outline-offset: 1px;
}
#sideText .legacyGrammarDragFill span.drop.legacyGrammarDropHover {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}


/* =====================================================================
   Feedback workflow
   ===================================================================== */
.feedbackIconButton{
  display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(255,255,255,.75);
  background:transparent;color:#fff;text-decoration:none;cursor:pointer;font:inherit;white-space:nowrap;
}
.feedbackIconButton:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff;}
.feedbackIconButton svg{width:18px;height:18px;fill:currentColor;display:block;}
.feedbackIconLabel{font-size:12px;font-weight:700;}
.feedbackModal[hidden]{display:none!important;}
.feedbackModal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;}
.feedbackModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
.feedbackDialog{position:relative;z-index:1;width:min(560px,100%);background:#fff;color:#000;border:2px solid var(--border);box-shadow:0 14px 45px rgba(0,0,0,.35);padding:0;}
.feedbackDialogHeader{display:flex;align-items:center;justify-content:space-between;background:var(--beige);border-bottom:1px solid var(--border);padding:10px 12px;}
.feedbackDialogHeader h2{margin:0;font-size:20px;}
.feedbackClose{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#000;}
#feedbackForm{padding:14px;}
.feedbackField{display:block;margin-bottom:12px;font-weight:700;}
.feedbackField>span{display:block;margin-bottom:5px;}
.feedbackTextarea{width:100%;min-height:170px;resize:vertical;box-sizing:border-box;padding:8px;}
.feedbackDialogActions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
.feedbackSubmitMessage{min-height:20px;font-size:13px;}
.feedbackSubmitMessage.success{color:#176b2f;}
.feedbackSubmitMessage.error{color:#b00020;}
.feedbackModalOpen{overflow:hidden;}
.feedbackAdminPage{max-width:1180px;margin:0 auto;padding:20px;}
.feedbackAdminHeader{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-bottom:2px solid var(--border);padding-bottom:10px;}
.feedbackAdminHeader h1{margin:0;color:var(--accent);}
.feedbackFilterForm{display:flex;align-items:center;gap:8px;}
.feedbackCount{margin:12px 0;color:#444;}
.feedbackEmpty{border:1px solid var(--border);padding:20px;background:#fff;}
.feedbackAdminCard{border:1px solid var(--border);background:#fff;margin:0 0 14px;padding:12px;}
.feedbackAdminMeta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;}
.feedbackType,.feedbackStatus{display:inline-block;border:1px solid var(--border);padding:2px 7px;text-transform:capitalize;font-weight:700;background:#f2f2f2;}
.feedbackType-bug{border-color:#b00020;color:#b00020;}
.feedbackType-improvement{border-color:#7a4d00;color:#7a4d00;}
.feedbackPageUrl{margin:9px 0;font-size:13px;overflow-wrap:anywhere;}
.feedbackUserText{white-space:pre-wrap;border-left:4px solid var(--beige);padding:9px 12px;background:#fafafa;margin:8px 0 14px;}
.feedbackAdminForm{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:start;border-top:1px solid #ccc;padding-top:12px;}
.feedbackAdminForm label>span{display:block;font-weight:700;margin-bottom:4px;}
.feedbackAdminCommentField textarea{width:100%;min-height:80px;box-sizing:border-box;padding:7px;resize:vertical;}
.feedbackAdminActions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;}
@media(max-width:700px){.feedbackIconLabel{display:none}.feedbackAdminForm{grid-template-columns:1fr}.feedbackAdminActions{grid-column:1}.feedbackAdminActions{align-items:flex-end;flex-direction:column}.feedbackAdminPage{padding:10px}}

/* Keep authentication identity readable on the dark top navigation bar. */
.topbar .auth .muted {
  color: #e6eef8;
}
.topbar .auth .muted b {
  color: #ffffff;
}

/* Workbook Activity Report */
.activityReport{padding:4px 6px 24px;font-size:14px}.activityReport h2{text-align:center;color:#d00;font-size:20px;margin:0 0 18px}.activityReportMeta{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.activityReportSection{margin:0 0 18px}.activityReportSection h3,.activityReportSummary h3{margin:0 0 7px;color:#d00;font-size:14px}.activityReportTable{width:100%;border-collapse:collapse}.activityReportTable th{border-bottom:1px solid #aaa;text-align:left;padding:2px 8px}.activityReportTable td{padding:4px 8px}.activityReportTable th:first-child,.activityReportTable td:first-child{width:28%;text-align:center}.activityReportTable th:nth-child(2),.activityReportTable td:nth-child(2){width:30%}.activityReportSummary{padding:8px;font-size:14px}.activitySummaryGroup{margin:0 0 28px}.activitySummaryGroup>div{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}.activityOverall{margin-top:30px}.activityCongratulations{text-align:center;font-size:24px;line-height:1.25;margin-top:55px}.activityReportLoading,.activityReportError{padding:20px}.activityReportError{color:#b00020}@media(max-width:850px){.activityReportMeta{flex-direction:column;gap:6px}.activitySummaryGroup>div{grid-template-columns:1fr}.activityCongratulations{font-size:20px}}


/* Lesson 1 Overview: preserve the ASP.NET illustration and append action content below it. */
.lesson1OverviewSideBase { text-align:center; margin:0 0 12px; }
.lesson1OverviewSideImage { display:block; width:100%; max-width:303px; height:auto; margin:0 auto; }
.lesson1OverviewActionHost { text-align:left; }
.lesson1OverviewAnswerHost { margin-top:28px; }


/* Workbook lesson-index parity with the original ASP.NET pages */
#mainContent .LessonTitle { color:#d10b22; font-weight:700; font-size:20px; }
#mainContent .WorkbookPinyin { color:#111; font-weight:700; }
#mainContent .LessonTextTitle { color:#d10b22; font-weight:700; }
.workbookIndexCover { width:100%; padding:0; text-align:center; box-sizing:border-box; }
.workbookIndexCover img { display:block; width:min(290px, 100%); height:auto; margin:0 auto; }

/* Workbook e-mail composition: align all fields to one consistent form grid. */
body.isEmailComposeExercise .emailComposeForm{
  width:min(520px,100%);
}
body.isEmailComposeExercise .emailComposeForm label{
  display:grid;
  grid-template-columns:80px minmax(0,390px);
  column-gap:8px;
  align-items:center;
  margin:4px 0;
}
body.isEmailComposeExercise .emailComposeForm label>span{
  width:auto;
  min-width:0;
  flex:none;
  white-space:nowrap;
  font-weight:700;
}
body.isEmailComposeExercise .emailComposeForm input,
body.isEmailComposeExercise .emailComposeForm textarea{
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
}
body.isEmailComposeExercise .emailComposeForm label.message{
  display:grid;
  grid-template-columns:80px minmax(0,390px);
  align-items:start;
  flex-wrap:nowrap;
}
body.isEmailComposeExercise .emailComposeForm label.message>span{
  width:auto;
  padding-top:2px;
}
body.isEmailComposeExercise .emailComposeForm textarea{
  min-height:170px;
  resize:vertical;
}
body.isEmailComposeExercise .emailComposeActions{
  width:auto;
  margin:10px 0 0 88px;
  max-width:390px;
  display:flex;
  justify-content:flex-end;
}
@media(max-width:560px){
  body.isEmailComposeExercise .emailComposeForm label,
  body.isEmailComposeExercise .emailComposeForm label.message{
    display:block;
  }
  body.isEmailComposeExercise .emailComposeForm label>span,
  body.isEmailComposeExercise .emailComposeForm label.message>span{
    display:block;
    width:auto;
    margin-bottom:2px;
    white-space:normal;
  }
  body.isEmailComposeExercise .emailComposeActions{
    margin-left:0;
    max-width:none;
    width:100%;
  }
}

/* Stage 165: responsive alignment for legacy Textbook Main Text dialogue tables.
   ASP.NET pages used a fixed 90px + 360px colgroup.  In the wider Node main
   panel that leaves the dialogue compressed into a narrow strip. */
.isMainTextPage #mainContent > table,
.isMainTextPage #mainContent > table > tbody > tr > td > div,
.isMainTextPage #mainContent table.LessonText {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table col:first-child {
  width: 96px !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table col:nth-child(2) {
  width: auto !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td:first-child {
  width: 96px !important;
  min-width: 96px !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td:nth-child(2) {
  width: auto !important;
  min-width: 0 !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
@media (max-width: 700px) {
  .isMainTextPage #mainContent table.LessonText > tbody > tr > td > table col:first-child {
    width: 82px !important;
  }
  .isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td:first-child {
    width: 82px !important;
    min-width: 82px !important;
    white-space: normal !important;
  }
}


/* Stage 168: normalize legacy Textbook Vocabulary tables.
   The ASP.NET pages were authored for a 480px frame with 15/80/95/290
   columns. In the wider Node layout the browser can collapse the Chinese
   and pinyin columns, causing multi-character words to stack vertically. */
.isVocabPage #mainContent > table,
.isVocabPage #mainContent > table > tbody > tr > td > div,
.isVocabPage #mainContent td.LessonText,
.isVocabPage #mainContent td.LessonText > table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.isVocabPage #mainContent td.LessonText > table {
  table-layout: auto !important;
  border-collapse: separate;
}
/* Only vocabulary-list tables use the legacy 4-column structure.
   Featured Vocabulary / usage-note tables are 2-3 column prose tables and
   must keep their natural column widths. */
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) col:nth-child(1) { width: 34px !important; }
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) col:nth-child(2) { width: 92px !important; }
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) col:nth-child(3) { width: 112px !important; }
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) col:nth-child(4) { width: auto !important; }
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) td:nth-child(1) {
  width: 34px !important; min-width: 34px !important; white-space: nowrap !important; vertical-align: top !important;
}
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) td:nth-child(2) {
  width: 92px !important; min-width: 92px !important; white-space: nowrap !important; vertical-align: top !important;
}
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) td:nth-child(3) {
  width: 112px !important; min-width: 112px !important; white-space: nowrap !important; vertical-align: top !important;
}
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) td:nth-child(4) {
  width: auto !important; min-width: 0 !important; vertical-align: top !important; word-break: normal !important; overflow-wrap: normal !important;
}
/* Featured Vocabulary / vocabulary-note prose tables should consume the
   available main-panel width and wrap naturally. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) td {
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  vertical-align: top !important;
}
@media (max-width: 700px) {
  .isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) col:nth-child(2),
  .isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) td:nth-child(2) { width: 72px !important; min-width: 72px !important; }
  .isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) col:nth-child(3),
  .isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) td:nth-child(3) { width: 92px !important; min-width: 92px !important; }
}

/* Stage 171: keep numbered vocabulary rows aligned after the featured-vocab
   full-width normalization.  The first cell is always the item-number gutter;
   do not let auto table layout collapse it enough to wrap `2.` into two lines. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) > tbody > tr > td:first-child {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) > tbody > tr > td:not(:first-child) {
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  vertical-align: top !important;
}

/* Keep the regular four-column vocabulary list's number gutter aligned with
   the first line of Chinese/pinyin/definition content. */
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) > tbody > tr > td:first-child {
  padding-left: 0 !important;
  padding-right: 6px !important;
  text-align: right !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}

/* Stage 172: align regular vocabulary row numbers to the text baseline.
   Top-aligning the legacy table cells makes the number appear a few pixels
   higher than the Chinese/pinyin links because those links have different
   font metrics/borders.  Baseline alignment keeps the first line visually
   level while retaining the fixed vocabulary column widths. */
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) > tbody > tr > td {
  vertical-align: baseline !important;
}
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) > tbody > tr > td:first-child {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}

/* Stage 173: visually align vocabulary item numbers with the first content line.
   These legacy rows mix plain number text, Han-character links, and bordered
   pinyin links, so table baseline alignment still places the number slightly
   too high.  Apply a small visual offset to the number gutter only. */
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) > tbody > tr > td:first-child {
  vertical-align: top !important;
  position: relative !important;
  top: 2px !important;
}

/* Stage 175: expand legacy Textbook Grammar content to the full Main-panel width.
   The prior Stage 174 block was accidentally serialized with literal \n tokens
   and was therefore ignored by the browser.  Normalize every outer ASP.NET
   wrapper as well as the inner LessonText/table structure. */
.isGrammarPage #mainContent {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.isGrammarPage #mainContent > table,
.isGrammarPage #mainContent > table > tbody > tr > td,
.isGrammarPage #mainContent > table > tbody > tr > td > div,
.isGrammarPage #mainContent > table > tbody > tr > td > div > table,
.isGrammarPage #mainContent td.LessonText {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.isGrammarPage #mainContent td.LessonText > table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box !important;
}
/* Release the old 361px example-content column while keeping the left label
   readable. */
.isGrammarPage #mainContent td.LessonText > table td[style*="width: 111px"],
.isGrammarPage #mainContent td.LessonText > table td[style*="width:111px"] {
  width: 145px !important;
  min-width: 145px !important;
  max-width: 145px !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}
.isGrammarPage #mainContent td.LessonText > table td[style*="width: 361px"],
.isGrammarPage #mainContent td.LessonText > table td[style*="width:361px"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  vertical-align: top !important;
  white-space: normal !important;
}
@media (max-width: 700px) {
  .isGrammarPage #mainContent td.LessonText > table td[style*="width: 111px"],
  .isGrammarPage #mainContent td.LessonText > table td[style*="width:111px"] {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    white-space: normal !important;
  }
}


/* Stage 176: distinguish numbered Featured Vocabulary tables from ordinary
   explanatory tables.  Earlier rules treated every first cell as a 34px
   number gutter, which crushed labels such as "Before the adjective
   predicate:" and caused them to overlap the example column. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):not(.vocabNumberedNoteTable) > tbody > tr > td:first-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: top !important;
}
.isVocabPage #mainContent td.LessonText > table.vocabNumberedNoteTable > tbody > tr > td:first-child {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  vertical-align: top !important;
}

/* Stage 174: repository MCQ lead content must fill the modern Main panel. */
.mcqSequenceContent { width:100%; max-width:100%; box-sizing:border-box; }
.mcqSequenceContent > table,
.mcqSequenceContent > div { max-width:100%; box-sizing:border-box; }
.mcqSequenceContent table[width="100%"] { width:100% !important; }

/* Main Text composite Exercise B: release legacy ASP.NET 80/380px columns. */
body.isMaintextRecordingComposite .maintextSituationPrompt,
body.isMaintextRecordingComposite .maintextSituationPrompt > table {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
body.isMaintextRecordingComposite .maintextSituationPrompt table {
  table-layout: auto !important;
}
body.isMaintextRecordingComposite .maintextSituationPrompt col {
  width: auto !important;
}
body.isMaintextRecordingComposite .maintextSituationPrompt td:first-child:not([colspan]) {
  width: 100px !important;
  white-space: nowrap;
}
body.isMaintextRecordingComposite .maintextSituationPrompt td[colspan] {
  width: auto !important;
  white-space: normal;
}

/* Stage 177: vocabulary download/footer rows span all vocabulary columns and
   are content, not item-number cells.  Earlier number-gutter rules matched
   any first <td>, including colspan=4 footer rows, which right-aligned these
   download links.  Keep spanning rows full-width and left-aligned. */
.isVocabPage #mainContent td.LessonText > table:has(td.LessonTextChinese) > tbody > tr > td[colspan] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-align: left !important;
  vertical-align: top !important;
  position: static !important;
  top: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: normal !important;
}

/* Stage 168: keep Main Text Exercise B prompts inside the Main panel.
   Legacy promptHtml may use intrinsic table widths that grow beyond the panel;
   force the prompt table/cells to use the available width and wrap normally. */
.maintextRecordingRoot{
  width:100%;
  max-width:none;
}
.maintextSituationPrompt{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:visible;
}
.maintextSituationPrompt table{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  table-layout:auto;
  box-sizing:border-box;
}
.maintextSituationPrompt tbody,
.maintextSituationPrompt tr{
  width:100%;
  max-width:100%;
}
.maintextSituationPrompt td,
.maintextSituationPrompt th{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:break-word;
  word-break:normal;
  box-sizing:border-box;
}

/* Stage 169: Main Text full-width narrative rows.
   Some ASP.NET dialogue tables use colspan="2" for introductions, scene notes,
   and narrative paragraphs.  Do not treat those spanning cells as the fixed
   speaker-name column; let them occupy the full dialogue width and wrap. */
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td:first-child[colspan],
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td[colspan="2"] {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td:first-child:not([colspan]) {
  width: 96px !important;
  min-width: 96px !important;
  vertical-align: top !important;
  white-space: nowrap !important;
}
@media (max-width: 700px) {
  .isMainTextPage #mainContent table.LessonText > tbody > tr > td > table td:first-child:not([colspan]) {
    width: 82px !important;
    min-width: 82px !important;
  }
}

/* Guided role-playing: let instruction text use the full Main-panel width. */
.isGuidedRolePlaying .guidedRoleHeader > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.isGuidedRolePlaying .guidedRoleInstruction {
  width: 100%;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Stage 181: written-response repository content must remain responsive after
   the async renderer replaces the initial server-rendered page. */
.writtenResponseLead,
.writtenResponseLead > table,
.writtenResponseLead > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.writtenResponseLead table[width="455px"],
.writtenResponseLead table[width="455"],
.writtenResponseLead table[width="450px"],
.writtenResponseLead table[width="450"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Stage 182: Authentic Materials image-carousel pager.
   Keep previous arrow, "N of M", and next arrow on one horizontal line beside
   the image. Legacy ASP.NET pages gave the counter only 40px, causing "1 of 3"
   to wrap vertically. Support both initial SSR IDs and repository-sanitized
   data-authentic-carousel-id attributes. */
#lbimg,
#lbimgt,
table:has([data-authentic-carousel-id="imgId"]),
table:has([data-authentic-carousel-id="imgtId"]) {
  table-layout: auto !important;
  width: auto !important;
  max-width: 100% !important;
}
#imgHintId,
#imgHintId_t,
[data-authentic-carousel-id="imgHintId"],
[data-authentic-carousel-id="imgHintId_t"] {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}
#img_arrow_left,
#img_arrow_right,
#img_arrow_left_t,
#img_arrow_right_t,
[data-authentic-carousel-id="img_arrow_left"],
[data-authentic-carousel-id="img_arrow_right"],
[data-authentic-carousel-id="img_arrow_left_t"],
[data-authentic-carousel-id="img_arrow_right_t"] {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: top !important;
  cursor: pointer;
  box-sizing: border-box !important;
}

/* Stage 185: Workbook E-mail exercise uses the full Main-panel width. */
body.isEmailComposeExercise .emailComposeRoot{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
body.isEmailComposeExercise .emailComposeLead{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
body.isEmailComposeExercise .emailComposeForm{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
body.isEmailComposeExercise .emailComposeForm label,
body.isEmailComposeExercise .emailComposeForm label.message{
  grid-template-columns:80px minmax(0,1fr);
  width:100%;
  box-sizing:border-box;
}
body.isEmailComposeExercise .emailComposeForm input,
body.isEmailComposeExercise .emailComposeForm textarea{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
body.isEmailComposeExercise .emailComposeActions{
  width:calc(100% - 88px);
  max-width:none;
  margin:10px 0 0 88px;
  box-sizing:border-box;
}
@media(max-width:560px){
  body.isEmailComposeExercise .emailComposeActions{
    width:100%;
    margin-left:0;
  }
}

/* Multi-topic E-mail exercise pager (Lesson 30 and compatible legacy pages). */
body.isEmailComposeExercise .emailComposeMultiLead{width:100%;max-width:none;}
body.isEmailComposeExercise .emailComposeMultiHeader{width:100%;}
body.isEmailComposeExercise .emailComposeTopicNav{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;}
body.isEmailComposeExercise .emailComposeTopicNav>span:first-child{flex:1 1 auto;}
body.isEmailComposeExercise .emailTopicPrev,
body.isEmailComposeExercise .emailTopicNext{flex:0 0 auto;min-width:28px;padding:1px 6px;line-height:1.2;}
body.isEmailComposeExercise .emailTopicCount{flex:0 0 auto;min-width:56px;text-align:center;white-space:nowrap;}
body.isEmailComposeExercise .emailComposeTopicBody{width:100%;box-sizing:border-box;margin-top:12px;line-height:1.45;}
body.isEmailComposeExercise .emailComposeTopicBody span{max-width:100%;white-space:normal;}

/* Stage 184: Featured Vocabulary headings stay left-aligned in the responsive layout.
   Legacy ASP.NET tables relied on narrow fixed widths, so default TH centering was
   not noticeable. Once the tables expand to the Main panel, that centering pushes
   headings such as "够 (Gòu)" and numbered section titles into the middle. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) > tbody > tr > th,
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) > tr > th {
  text-align: left !important;
  vertical-align: top !important;
}

/* Numbered Featured Vocabulary tables use a compact first column for 1., 2., etc.
   Apply the gutter to TH rows too (some legacy pages use TH for the first heading). */
.isVocabPage #mainContent td.LessonText > table.vocabNumberedNoteTable > tbody > tr > th:first-child,
.isVocabPage #mainContent td.LessonText > table.vocabNumberedNoteTable > tr > th:first-child {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  white-space: nowrap !important;
  text-align: left !important;
  vertical-align: top !important;
}
.isVocabPage #mainContent td.LessonText > table.vocabNumberedNoteTable > tbody > tr > th:not(:first-child),
.isVocabPage #mainContent td.LessonText > table.vocabNumberedNoteTable > tr > th:not(:first-child) {
  text-align: left !important;
  vertical-align: top !important;
}

/* Stage 190: align four-column Grammar pattern headers with their example rows.
   Legacy ASP.NET relied on compact cells; after expanding tables to the full
   Main-panel width, browser-default centered TH text makes the headings appear
   offset from the left-aligned values beneath them. */
.isGrammarPage #mainContent td.LessonText > table > tbody > tr > th {
  text-align: left !important;
  vertical-align: top !important;
}
.isGrammarPage #mainContent td.LessonText > table > tbody > tr > td {
  vertical-align: top !important;
}
/* Give the common Subject / predicate / 得 / complement pattern stable,
   responsive proportions while preserving colspan rows above it. */
.isGrammarPage #mainContent td.LessonText > table:has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(1) {
  width: 22% !important;
}
.isGrammarPage #mainContent td.LessonText > table:has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(2) {
  width: 22% !important;
}
.isGrammarPage #mainContent td.LessonText > table:has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(3) {
  width: 12% !important;
}
.isGrammarPage #mainContent td.LessonText > table:has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(4) {
  width: 44% !important;
}

/* Stage 185: Featured Vocabulary definition tables need readable column spacing.
   These legacy four-column note tables use: indent / term / part-of-speech /
   definition. Earlier responsive normalization made every cell width:auto,
   which visually packed entries such as "打工 vt. to ..." together. Keep the
   table responsive while restoring stable semantic columns and breathing room. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(1) {
  width: 34px !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(2) {
  width: 100px !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(3) {
  width: 100px !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(4) {
  width: auto !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > tbody > tr > td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 1px 10px 1px 0 !important;
  line-height: 1.3 !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > tbody > tr > td:first-child {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding-right: 10px !important;
}
/* Preserve full-width explanatory rows inside the same tables. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > tbody > tr > td[colspan] {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
@media (max-width: 760px) {
  .isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(2) {
    width: 82px !important;
  }
  .isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)):has(> colgroup > col:nth-child(4)) > colgroup > col:nth-child(3) {
    width: 78px !important;
  }
}

/* Stage 116: keep drag-fill word-bank choices on one line when space permits. */
.dragFillActive .dragFillBankTable{width:100%!important;max-width:100%!important;table-layout:auto!important;border-collapse:separate;}
.dragFillActive .dragFillBankTable td{white-space:nowrap!important;width:auto!important;min-width:0!important;padding-left:4px!important;padding-right:4px!important;text-align:center!important;}
.dragFillActive .dragFillBankTable .item{position:static!important;left:auto!important;bottom:auto!important;width:auto!important;min-width:max-content!important;height:auto!important;line-height:1.35!important;white-space:nowrap!important;box-sizing:border-box!important;}

/* Stage 191: Featured Vocabulary nested five-column definition tables.
   Some lessons (for example L39) wrap each numbered Featured Vocabulary item
   in a nested table authored for the original 480px ASP.NET frame with
   30/30/30/110/170 columns.  Keep the modern table responsive while restoring
   readable semantic spacing: indent / term / POS / meaning / example. */
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
  box-sizing: border-box !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(1) {
  width: 34px !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(2) {
  width: 86px !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(3) {
  width: 88px !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(4) {
  width: 210px !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(5) {
  width: auto !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > tbody > tr > td {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 1px 12px 1px 0 !important;
  line-height: 1.35 !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > tbody > tr > td:nth-child(2),
.isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > tbody > tr > td:nth-child(3) {
  white-space: nowrap !important;
}
/* Give each numbered Featured Vocabulary section a little breathing room. */
.isVocabPage #mainContent td.LessonText > table:not(:has(td.LessonTextChinese)) > tbody > tr + tr > td {
  padding-top: 8px !important;
}
@media (max-width: 850px) {
  .isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(2) {
    width: 72px !important;
  }
  .isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(3) {
    width: 72px !important;
  }
  .isVocabPage #mainContent td.LessonText table table:has(> colgroup > col:nth-child(5)) > colgroup > col:nth-child(4) {
    width: 150px !important;
  }
}

/* Stage 192: Grammar tables whose visible row has more cells than the legacy
   COLGROUP declared must not inherit the four-column percentage layout.
   Example: L40 declares four COLs but renders five cells
   (连 / Subject / 都-也 / Verb / Object), which previously left the implicit
   fifth column with almost no width and wrapped Chinese text vertically. */
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > td:nth-child(5)),
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > th:nth-child(5)) {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
}
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > td:nth-child(5)) > colgroup > col,
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > th:nth-child(5)) > colgroup > col {
  width: auto !important;
}
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > td:nth-child(5)) > tbody > tr > td:not([colspan]),
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > th:nth-child(5)) > tbody > tr > th:not([colspan]) {
  white-space: nowrap !important;
  width: auto !important;
  min-width: max-content !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > td:nth-child(5)) > tbody > tr > td[colspan],
.isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > th:nth-child(5)) > tbody > tr > th[colspan] {
  white-space: normal !important;
  width: auto !important;
  min-width: 0 !important;
}
@media (max-width: 760px) {
  .isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > td:nth-child(5)) > tbody > tr > td:not([colspan]),
  .isGrammarPage #mainContent td.LessonText > table:has(> tbody > tr > th:nth-child(5)) > tbody > tr > th:not([colspan]) {
    white-space: normal !important;
    min-width: 0 !important;
  }
}


/* Stage 171: Lesson 40 Comprehensive Fill-in + True/False composite. */
body.isCompositeFillMcq .compositeMcqMount { width:100%; margin-top:14px; }
body.isCompositeFillMcq .compositeFillAnswer table { border-collapse:collapse; margin-top:8px; }
body.isCompositeFillMcq .compositeFillAnswer td { padding:2px 10px 2px 0; vertical-align:top; }
body.isCompositeFillMcq #mainContent input.singLineTxt { min-width:34px; width:2.5em; }

/* Stage 172: Lesson 40 Comprehensive Fill-in word-bank drag/drop. */
body.isCompositeFillMcq #mainContent .compositeFillBankItem {
  cursor: grab;
  user-select: none;
  text-align: center;
  padding: 5px 8px !important;
  border: 1px solid transparent;
  border-radius: 2px;
}
body.isCompositeFillMcq #mainContent .compositeFillBankItem:hover,
body.isCompositeFillMcq #mainContent .compositeFillBankItem.selected {
  border-color: currentColor;
  background: rgba(0,0,0,.05);
}
body.isCompositeFillMcq #mainContent input.compositeFillDrop {
  transition: outline-color .12s ease, background-color .12s ease;
}
body.isCompositeFillMcq #mainContent input.compositeFillDrop.dropHover {
  outline: 2px solid currentColor;
  outline-offset: 1px;
  background: rgba(0,0,0,.05);
}

/* Stage 193: Main Text narrative rows that contain only one cell are not
   speaker-label rows. Let them span the full content width and wrap normally. */
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table > tbody > tr > td:only-child {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  vertical-align: top !important;
}

/* Stage 194: Main-text vocabulary links are semantic words/phrases. Keep each
   clickable Chinese term intact at line boundaries while allowing the
   surrounding LessonTextChinese paragraph to wrap normally. */
body:not(.isVocabPage) #mainContent td.LessonTextChinese > a {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Stage 195: single-column Main Text narrative tables must not grow to their
   intrinsic no-wrap width when they contain inline vocabulary links. Keep the
   table inside the Main panel, allow Chinese prose to wrap naturally, while
   Stage 194 keeps each linked vocabulary term intact. */
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table.LessonText:not(:has(> tbody > tr > td:nth-child(2))) {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  box-sizing: border-box !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table.LessonText:not(:has(> tbody > tr > td:nth-child(2))) col {
  width: 100% !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table.LessonText:not(:has(> tbody > tr > td:nth-child(2))) > tbody > tr > td {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-all !important;
  box-sizing: border-box !important;
}
.isMainTextPage #mainContent table.LessonText > tbody > tr > td > table.LessonText:not(:has(> tbody > tr > td:nth-child(2))) > tbody > tr > td > a {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Stage 196: legacy Workbook sentence-listening fallback (L41-L50 tab 2).
   Keep the ASP.NET sentence-choice UI responsive when the repository renderer
   is unavailable, and align the controls like the original page. */
body.isLegacySentenceAudioChoice #mainContent > table,
body.isLegacySentenceAudioChoice #mainContent > table > tbody > tr > td,
body.isLegacySentenceAudioChoice #mainContent table.LessonText {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
}
body.isLegacySentenceAudioChoice #mainContent tr[style*="height:460px"],
body.isLegacySentenceAudioChoice #mainContent td[height="354px"] {
  height: auto !important;
}
body.isLegacySentenceAudioChoice #mainContent #sentence,
body.isLegacySentenceAudioChoice #mainContent #engsentence {
  width: 100% !important;
  max-width: 100% !important;
  display: table;
  border-collapse: collapse !important;
  box-sizing: border-box !important;
}
body.isLegacySentenceAudioChoice #mainContent #sentence[style*="display:none"],
body.isLegacySentenceAudioChoice #mainContent #engsentence[style*="display:none"] {
  display: none !important;
}
body.isLegacySentenceAudioChoice #mainContent #sentence tr,
body.isLegacySentenceAudioChoice #mainContent #engsentence tr {
  height: auto !important;
}
body.isLegacySentenceAudioChoice #mainContent #sentence td,
body.isLegacySentenceAudioChoice #mainContent #engsentence td {
  padding: 6px 8px !important;
  border: 1px solid #667700 !important;
  vertical-align: top !important;
}
body.isLegacySentenceAudioChoice #mainContent #sentence td:first-child,
body.isLegacySentenceAudioChoice #mainContent #engsentence td:first-child {
  width: 28px !important;
  min-width: 28px !important;
  text-align: center !important;
}
body.isLegacySentenceAudioChoice #mainContent #vercns,
body.isLegacySentenceAudioChoice #mainContent #verens {
  display: inline-block;
  min-width: 54px;
  padding: 3px 6px;
  text-align: center;
  cursor: pointer;
  color: #164c9c;
  text-decoration: underline;
  user-select: none;
}
body.isLegacySentenceAudioChoice #mainContent #vercns.ListSelectedItem,
body.isLegacySentenceAudioChoice #mainContent #verens.ListSelectedItem {
  color: #777;
  text-decoration: none;
  font-weight: bold;
}
body.isLegacySentenceAudioChoice #mainContent #bnt_playAudio {
  min-width: 88px;
  width: auto !important;
}
body.isLegacySentenceAudioChoice #mainContent .legacySentenceTopBar,
body.isLegacySentenceAudioChoice #mainContent .legacySentenceBottomBar {
  width: 100% !important;
  table-layout: fixed !important;
}
body.isLegacySentenceAudioChoice #mainContent .legacySentenceTopBar td:first-child { text-align: left !important; }
body.isLegacySentenceAudioChoice #mainContent .legacySentenceTopBar td:nth-last-child(-n+2) { width: 70px !important; text-align: right !important; }
body.isLegacySentenceAudioChoice #mainContent .legacySentenceBottomBar td:nth-child(1) { text-align: left !important; }
body.isLegacySentenceAudioChoice #mainContent .legacySentenceBottomBar td:nth-child(2) { text-align: center !important; }
body.isLegacySentenceAudioChoice #mainContent .legacySentenceBottomBar td:nth-child(3) { text-align: right !important; }
body.isLegacySentenceAudioChoice #mainContent .legacySentenceBottomBar input { min-width: 80px; width: auto !important; }

/* Stage 183: L41-L50 ThinkWrite must fill the modern main panel. */
#mainContent .thinkWriteDirectControls{width:100%;max-width:100%;box-sizing:border-box}
#mainContent .thinkWriteDirectControls textarea,
#mainContent textarea[data-thinkwrite-input="1"]{width:100%!important;max-width:100%!important;box-sizing:border-box;resize:vertical}

/* Stage 199: top-align numbered Speak presentation prompts. */
#mainContent tbody[name="pg1_div_task1"] > tr > td,
#mainContent tbody[name="pg2_div_task2"] > tr > td {
  vertical-align: top !important;
}
#mainContent tbody[name="pg1_div_task1"] > tr > td:first-child,
#mainContent tbody[name="pg2_div_task2"] > tr > td:first-child {
  padding-top: 0 !important;
}


/* Stage 201: L41-L50 Workbook Listen tab 2 sentence-choice exercises fill Main panel. */
body.isWorkbookAudioExercise #mainContent .workbookAudioExerciseRoot{width:100%!important;max-width:none!important;box-sizing:border-box}
body.isWorkbookAudioExercise #mainContent .workbookAudioToolbar,
body.isWorkbookAudioExercise #mainContent .workbookAudioChoiceGrid,
body.isWorkbookAudioExercise #mainContent .workbookAudioFooter{width:100%!important;max-width:none!important;box-sizing:border-box}
body.isWorkbookAudioExercise #mainContent .workbookAudioChoiceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
body.isLegacySentenceAudioChoice #mainContent.legacyAudioChoiceExercise>table,
body.isLegacySentenceAudioChoice #mainContent.legacyAudioChoiceExercise table#sentence,
body.isLegacySentenceAudioChoice #mainContent.legacyAudioChoiceExercise table#engsentence{width:100%!important;max-width:100%!important;box-sizing:border-box}
body.isLegacySentenceAudioChoice #mainContent.legacyAudioChoiceExercise table#sentence,
body.isLegacySentenceAudioChoice #mainContent.legacyAudioChoiceExercise table#engsentence{display:table}
body.isLegacySentenceAudioChoice #mainContent.legacyAudioChoiceExercise table#engsentence[style*="display:none"]{display:none!important}

/* Stage 203: listening_mcq_script / Workbook Listen tab 3 fills Main panel. */
body.isListeningMcqScript #mainContent .listeningMcqScriptRoot {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body.isListeningMcqScript #mainContent .listeningMcqHeader,
body.isListeningMcqScript #mainContent .listeningMcqInstruction,
body.isListeningMcqScript #mainContent .listeningMcqPrompt,
body.isListeningMcqScript #mainContent .listeningMcqChoices,
body.isListeningMcqScript #mainContent .listeningMcqActions {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
body.isListeningMcqScript #mainContent .listeningMcqChoices {
  margin-left: 0 !important;
  padding-left: 22px !important;
}
body.isListeningMcqScript #mainContent .listeningMcqAudio {
  width: min(520px, 100%) !important;
  max-width: 100% !important;
}


/* Site information menu + converted ASP.NET informational pages */
.siteMenu{position:relative;flex:0 0 auto;}
.siteMenuButton{list-style:none;display:flex;align-items:center;justify-content:center;width:32px;height:30px;padding:0;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:20px;line-height:1;box-sizing:border-box;}
.siteMenuButton::-webkit-details-marker{display:none;}
.siteMenuButton:hover,.siteMenu[open] .siteMenuButton{background:rgba(255,255,255,.18);}
.siteMenuDropdown{position:absolute;top:36px;left:0;z-index:1000;min-width:180px;background:#fff;border:1px solid var(--border);box-shadow:0 4px 14px rgba(0,0,0,.22);padding:4px 0;}
.siteMenuDropdown a{display:block;padding:9px 14px;color:#111;text-decoration:none;white-space:nowrap;}
.siteMenuDropdown a:hover,.siteMenuDropdown a:focus{background:var(--beige);color:#000;outline:none;}
.infoPageShell{max-width:1100px;margin:22px auto;padding:0 18px 36px;box-sizing:border-box;}
.infoPageCard{background:#fff;border:1px solid var(--border);padding:22px 26px;box-sizing:border-box;}
.infoPageCard h1{margin:0 0 18px;color:var(--accent);font-size:24px;}
.infoPageBody{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;font-size:15px;color:#111;}
@media(max-width:700px){.topbar{gap:9px;padding-left:10px;padding-right:10px}.crumb{display:none}.infoPageShell{margin-top:12px;padding:0 10px 24px}.infoPageCard{padding:16px}.siteMenuDropdown{min-width:170px}}


/* Simplified / Traditional Chinese display toggle (Main panel only). */
.mainPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chineseScriptToggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 2px 8px;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 6px;
  background: rgba(255,255,255,.35);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.chineseScriptToggle:hover { background: rgba(255,255,255,.6); }
.chineseScriptToggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.chineseScriptToggle .scriptToggleArrow { opacity: .65; font-size: 11px; }
.chineseScriptToggle[data-mode="traditional"] .scriptToggleTraditional,
.chineseScriptToggle[data-mode="simplified"] .scriptToggleSimple {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chineseScriptToggle[disabled] { opacity: .5; cursor: not-allowed; }

/* Photo Gallery */
.photoGalleryShell{max-width:1240px;margin:20px auto 40px;padding:0 18px;box-sizing:border-box}
.photoGalleryHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.photoGalleryHeading h1{margin:0 0 6px;color:var(--accent);font-size:26px}.photoGalleryHeading p{margin:0;color:#444}
.photoPrimaryBtn{font-weight:700}
.photoSearchForm{display:grid;grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) minmax(170px,1fr) minmax(140px,1fr) auto auto;gap:8px;align-items:center;background:#fff;border:1px solid var(--border);padding:12px;margin-bottom:12px}
.photoResultSummary{margin:10px 0;color:#555}.photoEmpty{background:#fff;border:1px solid var(--border);padding:30px;text-align:center;color:#666}
.photoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.photoCard{display:block;background:#fff;border:1px solid var(--border);text-decoration:none;color:#111;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.photoCard:hover{box-shadow:0 4px 12px rgba(0,0,0,.16)}.photoCard img{display:block;width:100%;height:190px;object-fit:cover;background:#eee}.photoCardBody{padding:11px 12px}.photoCardTitle{font-weight:700;font-size:16px;margin-bottom:7px}.photoMeta{font-size:13px;color:#555;margin-top:3px}
.photoPager{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0}.photoFormShell{max-width:900px}.photoUploadForm{background:#fff;border:1px solid var(--border);padding:20px;display:grid;gap:15px}.photoUploadForm label{display:grid;gap:6px;font-weight:700}.photoUploadForm .input{font-weight:400}.photoTextarea{resize:vertical;min-height:120px}.required{color:#b00000}.photoHelp{font-size:12px;color:#666;font-weight:400}.photoSubmitInfo{padding:10px;background:#f6f6f6;border:1px solid #ddd}.photoFormActions{display:flex;gap:10px}.photoFormError{background:#fff2f2;color:#950000;border:1px solid #dca1a1;padding:10px 12px;margin-bottom:12px}
.photoDetailNav{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.photoDetailCard{background:#fff;border:1px solid var(--border);display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:0}.photoDetailImage{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#111}.photoDetailInfo{padding:22px}.photoDetailInfo h1{margin:0 0 18px;color:var(--accent)}.photoDetailInfo dl{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;margin:0}.photoDetailInfo dt{font-weight:700}.photoDetailInfo dd{margin:0;overflow-wrap:anywhere}.photoDescription{margin-top:20px;padding-top:16px;border-top:1px solid #ddd;white-space:pre-wrap;line-height:1.55}
@media(max-width:900px){.photoSearchForm{grid-template-columns:1fr 1fr}.photoDetailCard{grid-template-columns:1fr}.photoDetailImage{max-height:none}}
@media(max-width:600px){.photoGalleryHeading{display:block}.photoGalleryHeading .btn{display:inline-block;margin-top:12px}.photoSearchForm{grid-template-columns:1fr}.photoDetailInfo dl{grid-template-columns:1fr}.photoDetailInfo dd{margin-bottom:8px}.photoGalleryShell{padding:0 10px}}

.photoFieldLabel{display:inline-flex;align-items:baseline;gap:4px;font-weight:700}
.photoFieldLabel .required{display:inline;color:#b00000}

/* Photo gallery ownership, moderation, favorites, and comments */
.photoNavActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.photoHiddenNotice{margin:0 0 12px;padding:10px 12px;border:1px solid #c98b00;background:#fff8df;color:#6b4a00;font-weight:700}
.photoManagementBox{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid #ddd}
.photoInlineForm{display:inline-block;margin:12px 6px 0 0}
.photoManagementBox .photoInlineForm{margin:0}
.photoDangerBtn{border-color:#a40000!important;color:#8b0000!important}
.photoFavoriteActive{font-weight:700}
.photoComments{max-width:900px;margin:22px auto 0;background:#fff;border:1px solid var(--border);padding:18px;box-sizing:border-box}
.photoComments h2{margin:0 0 14px;color:var(--accent)}
.photoComment{padding:12px 0;border-top:1px solid #e1e1e1}.photoComment:first-of-type{border-top:0}
.photoCommentMeta{font-size:13px;color:#666;margin-bottom:5px}.photoCommentText{white-space:pre-wrap;line-height:1.5}
.photoCommentForm{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #ddd}.photoCommentForm label{font-weight:700}
.photoCommentHint{margin-top:16px;padding:10px;background:#f5f5f5;border:1px solid #ddd}
.photoAdminFilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}.photoAdminFilters>span{font-weight:700}.photoFilterActive{font-weight:700;background:#eef4ff!important}.photoHiddenBadge{display:inline-block;margin-left:6px;padding:1px 5px;border:1px solid #b56b00;background:#fff3d8;color:#7a4600;font-size:11px;vertical-align:middle}

/* Batch photo submission */
.photoBatchShell{max-width:1100px}
.photoBatchForm{display:grid;gap:18px}
.photoBatchShared{background:#fff;border:1px solid var(--border);padding:18px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,2fr);gap:16px}
.photoBatchShared label,.photoBatchFields label{display:grid;gap:6px;font-weight:700}
.photoBatchList{display:grid;gap:12px}
.photoBatchEmpty{padding:28px;text-align:center;border:1px dashed #aaa;background:#fafafa;color:#666}
.photoBatchRow{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;background:#fff;border:1px solid var(--border);padding:14px}
.photoBatchThumbWrap{min-width:0}.photoBatchThumb{display:block;width:100%;height:160px;object-fit:cover;background:#eee;border:1px solid #ddd}
.photoBatchFileName{margin-top:6px;font-size:12px;color:#666;overflow-wrap:anywhere}
.photoBatchFields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-content:start}
.photoBatchFields label:first-child{grid-column:1 / -1}
.photoBatchFields .input{font-weight:400}
.photoBatchActions{position:sticky;bottom:0;background:rgba(255,255,255,.96);border-top:1px solid #ddd;padding:12px 0;z-index:3}
@media(max-width:760px){.photoBatchShared{grid-template-columns:1fr}.photoBatchRow{grid-template-columns:1fr}.photoBatchThumb{height:auto;max-height:280px;object-fit:contain}.photoBatchFields{grid-template-columns:1fr}.photoBatchFields label:first-child{grid-column:auto}}
.photoBatchThumbWrap{position:relative}
.photoBatchThumb.isPending{display:none}
.photoBatchThumbPlaceholder{display:flex;align-items:center;justify-content:center;width:100%;height:160px;background:#f3f3f3;border:1px solid #ddd;color:#777;font-size:12px;text-align:center;padding:8px;box-sizing:border-box}
.photoUploadModeSwitch{display:flex;gap:8px;margin:0 0 14px 0;align-items:center}
.photoUploadModeBtn{min-width:130px}
.photoUploadModeBtn.photoUploadModeActive{font-weight:700;box-shadow:inset 0 0 0 2px currentColor}
.photoSingleUploadForm[hidden],.photoBatchForm[hidden]{display:none!important}

/* Admin user management */
.adminUsersPage { background:#f5f7fa; min-height:100vh; }
.adminUsersShell,.adminUserFormShell { max-width:1200px; margin:24px auto; padding:0 18px 36px; }
.adminUserFormShell { max-width:820px; }
.adminUsersHeader { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.adminUsersHeader h1 { margin:0; }
.adminUsersHeader p { margin:4px 0 0; color:#667; }
.adminUserSearch { display:flex; gap:8px; margin-bottom:16px; }
.adminUserSearch .input { flex:1; }
.adminUsersTableWrap { overflow:auto; background:#fff; border:1px solid #d8dde6; border-radius:8px; }
.adminUsersTable { width:100%; border-collapse:collapse; min-width:900px; }
.adminUsersTable th,.adminUsersTable td { padding:10px 12px; border-bottom:1px solid #e7eaf0; text-align:left; vertical-align:middle; }
.adminUsersTable th { background:#eef2f7; white-space:nowrap; }
.adminUsersTable tbody tr:hover { background:#fafcff; }
.adminUserForm { display:grid; gap:16px; background:#fff; border:1px solid #d8dde6; border-radius:8px; padding:20px; }
.adminUserForm label { display:grid; gap:6px; }
.adminUserForm .twoCol { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.adminUserChecks { display:flex; flex-wrap:wrap; gap:16px 24px; padding:12px; background:#f7f9fc; border-radius:6px; }
.adminUserChecks label,.resetPasswordCheck { display:flex !important; align-items:center; gap:7px !important; }
.dangerZone { margin-top:24px; padding:18px 20px; background:#fff4f4; border:1px solid #e3a6a6; border-radius:8px; }
.dangerZone h2 { margin-top:0; color:#8b1f1f; }
.btn-danger { background:#a92a2a !important; color:#fff !important; border-color:#8c2020 !important; }
.btn-small { padding:5px 9px !important; font-size:13px; }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
@media(max-width:700px){ .adminUserForm .twoCol{grid-template-columns:1fr}.adminUsersHeader{align-items:flex-start;flex-direction:column}.adminUserSearch{flex-wrap:wrap}.adminUserSearch .input{flex-basis:100%} }

/* Q & A Forum */
.forumShell{max-width:1180px;margin:22px auto 42px;padding:0 18px;box-sizing:border-box}
.forumHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.forumHeading h1{margin:0 0 6px;color:var(--accent);font-size:28px}.forumHeading p{margin:0;color:#555}.forumHeadingActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.forumPrimaryBtn{font-weight:700}
.forumSearch{display:grid;grid-template-columns:minmax(240px,2fr) minmax(150px,1fr) minmax(130px,.8fr) minmax(150px,.9fr) auto auto auto auto;gap:8px;align-items:center;background:#fff;border:1px solid var(--border);padding:12px}.forumCheck{display:flex;align-items:center;gap:5px;font-size:13px;white-space:nowrap}.forumResultSummary{margin:10px 0;color:#555}
.forumQuestionList{display:grid;gap:10px}.forumQuestionCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;background:#fff;border:1px solid var(--border);padding:14px 16px;text-decoration:none;color:#111}.forumQuestionCard:hover{box-shadow:0 3px 10px rgba(0,0,0,.12)}.forumPinned{border-left:4px solid #d59a00}.forumQuestionTitle{font-size:17px;font-weight:700;color:#163f79;margin-bottom:6px}.forumQuestionMeta{font-size:13px;color:#666;line-height:1.45}.forumCategory{font-weight:700;color:#333}.forumQuestionStats{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:4px 14px;align-content:center;text-align:right;font-size:12px;color:#666;white-space:nowrap}.forumEmpty{padding:28px;text-align:center;background:#fff;border:1px solid var(--border);color:#666}.forumPager{display:flex;justify-content:center;align-items:center;gap:12px;margin:20px 0}
.forumStatus{display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;text-transform:capitalize;border:1px solid #aaa;background:#f4f4f4}.forumStatus-open{color:#245f29;background:#eef9ef;border-color:#8abd8e}.forumStatus-answered{color:#164d83;background:#edf5ff;border-color:#8eb2d6}.forumStatus-resolved{color:#5d3a8b;background:#f4effb;border-color:#b6a0d0}.forumStatus-closed{color:#666;background:#eee;border-color:#bbb}.forumInstructorBadge{display:inline-block;padding:1px 5px;border-radius:4px;background:#e5f2ff;border:1px solid #7aa9d8;color:#144b7b;font-size:11px;font-weight:700}.forumHiddenBadge{display:inline-block;padding:1px 5px;background:#fff3d8;border:1px solid #b56b00;color:#7a4600;font-size:11px}.forumPin{display:inline-block;margin-right:6px;padding:1px 5px;background:#fff2bd;border:1px solid #c99a00;color:#6b5100;font-size:11px}.forumTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.forumTags span{font-size:12px;background:#f2f5f8;border:1px solid #d7dde5;border-radius:999px;padding:2px 7px;color:#4d5967}
.forumFormShell{max-width:920px}.forumDetailNav{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:14px}.forumForm{display:grid;gap:15px;background:#fff;border:1px solid var(--border);padding:20px}.forumForm label,.forumAnswerComposer label{display:grid;gap:6px;font-weight:700}.forumForm small,.forumAnswerComposer small{font-weight:400;color:#666}.forumTextarea{resize:vertical;min-height:130px;white-space:pre-wrap}.forumFormTwo{display:grid;grid-template-columns:1fr 1fr;gap:14px}.forumFormActions{display:flex;gap:8px}.forumError{margin-bottom:12px;padding:10px 12px;background:#fff0f0;border:1px solid #d99;color:#8d1111}
.forumPost{background:#fff;border:1px solid var(--border);padding:20px;margin-bottom:16px}.forumQuestionPost{border-top:4px solid var(--accent)}.forumPostHidden{opacity:.72;background:#fff9ee}.forumPostHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.forumPostHeader h1{margin:0 0 7px;color:#173f75;font-size:25px}.forumPostBody{white-space:pre-wrap;line-height:1.65;font-size:15px;margin:18px 0;overflow-wrap:anywhere}.forumContext{margin-top:12px;padding:9px 10px;background:#f6f8fb;border-left:3px solid #8aa8ca;font-size:13px}.forumPostActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;color:#666;font-size:13px}.forumPostActions form{display:inline}.forumHelpfulActive{font-weight:700;background:#eef7ff!important}.forumModeration{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed #ccc}
.forumMediaGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:14px 0}.forumMediaGrid img,.forumMediaGrid video{display:block;width:100%;max-height:360px;object-fit:contain;background:#111;border:1px solid #ddd}.forumAnswers h2,.forumAnswerComposer h2{color:var(--accent)}.forumAnswerPost{margin-left:28px}.forumAnswerHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:#555}.forumAccepted{border:2px solid #5d9d59;background:#f8fff7}.forumAcceptedBadge{display:inline-block;padding:3px 7px;border-radius:5px;background:#e4f6e2;color:#245d20;border:1px solid #75a96f;font-weight:700}.forumAnswerComposer{background:#fff;border:1px solid var(--border);padding:18px;margin-top:22px}.forumAnswerComposer form{display:grid;gap:12px}.forumLoginPrompt{margin:18px 0;text-align:center}.forumMyAnswerExcerpt{margin-top:6px;color:#444;font-size:13px;white-space:pre-wrap}.forumScriptToggleWrap{margin-left:6px}.mainPanelActions{display:flex;align-items:center;gap:7px}.forumAskFromPage{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 6px;border:1px solid rgba(0,0,0,.25);border-radius:6px;background:rgba(255,255,255,.35);color:inherit;text-decoration:none;font-size:12px;font-weight:700;box-sizing:border-box}.forumAskFromPage:hover{background:rgba(255,255,255,.6)}
@media(max-width:980px){.forumSearch{grid-template-columns:1fr 1fr}.forumQuestionCard{grid-template-columns:1fr}.forumQuestionStats{grid-auto-flow:row;grid-template-columns:repeat(3,auto);grid-template-rows:none;text-align:left;justify-content:start}.forumAnswerPost{margin-left:0}}
@media(max-width:650px){.forumHeading{display:block}.forumHeadingActions{justify-content:flex-start;margin-top:12px}.forumSearch{grid-template-columns:1fr}.forumFormTwo{grid-template-columns:1fr}.forumPostHeader,.forumAnswerHeader{display:block}.forumStatus,.forumAcceptedBadge{margin-top:8px}.forumShell{padding:0 10px}}

/* Internal messaging */
.messageTopIcon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 7px;border:1px solid var(--border);border-radius:5px;text-decoration:none;color:inherit;background:rgba(255,255,255,.04);font-size:18px}.messageTopIcon:hover{background:rgba(255,255,255,.1)}
.messageUnreadBadge{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#c40000;color:#fff;font:700 11px/18px Arial,sans-serif;text-align:center}
.messageShell{width:min(1100px,calc(100% - 32px));max-width:none;margin:22px auto;padding:0 0 40px;box-sizing:border-box}.messageToolbar,.messageDetailNav,.messageActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.messagePrimary{font-weight:700}.messageSearch{display:flex;gap:8px;margin:12px 0 16px}.messageSearch .input{flex:1}.messageList{display:grid;gap:7px}.messageRow{display:grid;grid-template-columns:minmax(150px,220px) minmax(180px,1fr) minmax(180px,2fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--border);background:var(--panel);text-decoration:none;color:inherit}.messageRow.unread{font-weight:700;border-left:5px solid #b30000}.messageRow time,.messagePreview{font-weight:400;color:var(--muted)}.messagePreview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.messageCompose{display:grid;gap:14px;width:100%!important;max-width:none!important;box-sizing:border-box;margin:0}.messageCompose label{display:grid;gap:6px}.messageCompose textarea{resize:vertical}.messageMeta{display:grid;gap:4px;color:var(--muted)}.messageDetail{width:100%!important;max-width:none!important;box-sizing:border-box;margin:0}.messageDetail h1{margin:16px 0}.messageBody{white-space:pre-wrap;line-height:1.55}.messageAnnouncementBadge{display:inline-block;width:max-content;padding:3px 8px;border-radius:12px;background:#fff1bf;color:#6d5100;font-weight:700}.messageActions form{margin:0}.danger{border-color:#a40000;color:#a40000}@media(max-width:800px){.messageRow{grid-template-columns:1fr}.messageRow time{justify-self:start}.messageSender{font-size:12px}.messagePreview{white-space:normal}}

/* Internal messaging UI alignment + rounded controls */
.messageCompose .announcementChoice{display:flex!important;align-items:center;gap:8px!important;grid-template-columns:none!important;font-weight:400}
.messageCompose .announcementChoice input[type=checkbox]{margin:0;flex:0 0 auto}
.messageFieldLabel{display:inline-flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.messageComposeActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.messageShell .btn,.messageShell button.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:104px;padding:8px 14px;border-radius:9px!important;box-sizing:border-box;text-decoration:none;line-height:1.1}
.messageComposeActions .btn,.messageComposeActions button.btn,.messageActions .btn,.messageActions button.btn{min-width:118px}
.messageSearch button.btn{min-width:96px}
.messageTopIcon{border-radius:9px}

/* Q & A Forum UI normalization: shared width + rounded controls */
.forumShell{
  width:min(1100px,calc(100% - 32px));
  max-width:none;
  margin:22px auto 42px;
  padding:0;
  box-sizing:border-box;
}
.forumFormShell{width:min(1100px,calc(100% - 32px));max-width:none}
.forumSearch,.forumQuestionList,.forumForm,.forumPost,.forumAnswerComposer,.forumEmpty{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.forumAnswerPost{margin-left:0}
.forumShell .btn,.forumShell button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  min-width:104px;
  padding:8px 14px;
  border-radius:9px!important;
  box-sizing:border-box;
  text-decoration:none;
  line-height:1.1;
}
.forumShell .btn-small,.forumShell button.btn-small{
  min-height:34px;
  min-width:86px;
  padding:6px 11px!important;
  border-radius:8px!important;
}
.forumHeadingActions,.forumFormActions,.forumPostActions,.forumModeration,.forumDetailNav,.forumPager{
  align-items:center;
}
.forumFormActions .btn,.forumFormActions button.btn{min-width:118px}
.forumSearch .btn,.forumSearch button.btn{min-width:92px}
.forumAnswerComposer .forumPrimaryBtn{min-width:118px}
@media(max-width:650px){
  .forumShell,.forumFormShell{width:calc(100% - 20px);padding:0}
}

/* Forum compact filter controls */
.forumSearch{gap:8px}
.forumSearch .forumFilterIconBtn{
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:18px;
  line-height:1;
  flex:0 0 42px;
}

/* Forum compact switch filters */
.forumSwitch{display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.forumSwitch input{position:absolute;opacity:0;pointer-events:none}
.forumSwitchTrack{position:relative;width:34px;height:20px;border:1px solid var(--border);border-radius:999px;background:#e9edf2;display:inline-block;box-sizing:border-box;transition:.15s ease}
.forumSwitchKnob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #aab2bc;box-sizing:border-box;transition:.15s ease}
.forumSwitch input:checked + .forumSwitchTrack{background:#cfe5ff;border-color:#4d83bd}
.forumSwitch input:checked + .forumSwitchTrack .forumSwitchKnob{left:16px;border-color:#4d83bd}
.forumSwitchHint{font-size:16px;line-height:1}
.forumSwitch:focus-within .forumSwitchTrack{outline:2px solid #7aa7d9;outline-offset:2px}
.forumSearch{grid-template-columns:minmax(220px,2fr) minmax(140px,1fr) minmax(125px,.8fr) minmax(140px,.9fr) auto auto auto auto}

/* Photo Gallery UI normalization: shared width + rounded controls */
.photoGalleryShell,
.photoGalleryShell.photoFormShell,
.photoGalleryShell.photoBatchShell{
  width:min(1100px, calc(100% - 32px));
  max-width:1100px;
  margin:20px auto 40px;
  padding:0;
  box-sizing:border-box;
}
.photoGalleryShell .photoComments{
  width:100%;
  max-width:none;
  margin:22px 0 0;
  box-sizing:border-box;
}
.photoGalleryShell .photoUploadForm,
.photoGalleryShell .photoBatchForm,
.photoGalleryShell .photoDetailCard,
.photoGalleryShell .photoSearchForm,
.photoGalleryShell .photoEmpty{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}
.photoGalleryShell .btn,
.photoGalleryShell button.btn,
.photoGalleryShell a.btn,
.photoGalleryShell input[type="submit"].btn,
.photoGalleryShell input[type="button"].btn{
  border-radius:10px;
  min-height:40px;
  min-width:88px;
  padding:8px 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.photoGalleryShell .photoUploadModeBtn{
  min-width:130px;
}
.photoGalleryShell .photoInlineForm{
  vertical-align:middle;
}
.photoGalleryShell .photoFormActions,
.photoGalleryShell .photoNavActions,
.photoGalleryShell .photoManagementBox,
.photoGalleryShell .photoPager,
.photoGalleryShell .photoAdminFilters{
  align-items:center;
}
@media(max-width:600px){
  .photoGalleryShell,
  .photoGalleryShell.photoFormShell,
  .photoGalleryShell.photoBatchShell{
    width:calc(100% - 20px);
    padding:0;
  }
}

/* Classes / classrooms */
.classShell{width:min(1100px,calc(100% - 32px));margin:22px auto 48px;box-sizing:border-box}.classHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}.classHeader h1,.classSection h2{margin-top:0}.classSection{margin:20px 0}.classGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.classCard,.classForm,.codeBox{background:#fff;border:1px solid #d8dee8;border-radius:12px;padding:16px;box-sizing:border-box;width:100%;max-width:none}.classForm{display:grid;gap:14px;margin-bottom:16px}.classForm label{display:grid;gap:6px;font-weight:600}.classForm .inlineCheck,.inlineCheck{display:flex;align-items:center;gap:8px;font-weight:600}.classActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.classShell .btn,.classShell button.btn{border-radius:10px;min-height:36px;padding:7px 13px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.classShell .btn-small{min-height:30px;padding:4px 9px}.classShell .btn-primary{background:#0f5bd3;color:#fff;border-color:#0f5bd3}.classShell .btn-danger{background:#fff;color:#a02020;border-color:#c9a1a1}.twoCols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.inlineForm{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inlineForm .input{flex:1;min-width:250px}.ownerList{display:grid;gap:8px;margin-bottom:10px}.ownerRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid #e2e6ec;border-radius:9px}.codeBox{margin-top:12px}.codeBox code{font-size:1.1em;letter-spacing:.08em;padding:3px 7px;background:#f4f6f9;border-radius:6px}.classTableWrap{width:100%;overflow:auto;border:1px solid #d8dee8;border-radius:12px;background:#fff}.classTable{width:100%;border-collapse:collapse;min-width:760px}.classTable th,.classTable td{padding:10px 12px;border-bottom:1px solid #e7eaf0;text-align:left;vertical-align:top}.classTable th{background:#f6f8fb;white-space:nowrap}.responseCell{max-width:420px;white-space:pre-wrap;word-break:break-word}.classDetail{margin-bottom:16px}@media(max-width:700px){.classShell{width:min(100% - 18px,1100px)}.twoCols{grid-template-columns:1fr}.classHeader{display:block}.classHeader .btn{margin-top:8px}}

/* Classes landing page tabs */
.classesHomeTabs{display:flex;align-items:flex-end;gap:6px;overflow-x:auto;border-bottom:1px solid #cfd7e3;margin:0 0 20px;padding:0 2px;scrollbar-width:thin}
.classesHomeTab{appearance:none;border:1px solid #cfd7e3;border-bottom:0;background:#f5f7fa;color:#24364b;border-radius:11px 11px 0 0;padding:10px 15px;min-height:42px;font:inherit;font-weight:700;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.classesHomeTab:hover{background:#eef3f9}
.classesHomeTab.active{background:#fff;color:#0f5bd3;position:relative;top:1px;padding-bottom:11px}
.classesHomeTab:focus-visible{outline:2px solid #0f5bd3;outline-offset:2px}
.classesTabCount{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#dfe6ef;color:#41536a;font-size:.82em;box-sizing:border-box}
.classesHomeTab.active .classesTabCount{background:#e5efff;color:#0f5bd3}
.classesHomePanel{width:100%;box-sizing:border-box}
.classesHomePanel[hidden]{display:none!important}
.classTabPanelHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.classTabPanelHeader h2{margin:0 0 4px}.classTabPanelHeader p{margin:0}
.classEmptyState{grid-column:1/-1;background:#fff;border:1px dashed #c7d0dc;border-radius:12px;padding:22px;text-align:center}.classEmptyState p{margin:4px 0 12px}
@media(max-width:700px){.classesHomeTabs{gap:4px}.classesHomeTab{padding:9px 11px}.classTabPanelHeader{display:block}.classTabPanelHeader .btn{margin-top:10px}}

/* Admin User Management UI normalization (2026-10-06 v2) */
.adminUsersPage .adminUsersTopbar{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  min-height:58px;
  padding:10px 16px !important;
}
.adminUsersPage .adminUsersTopbar .brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  white-space:nowrap;
}
.adminUsersPage .adminUsersTopbar .brand a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}
.adminUsersPage .adminUsersTopbar .messageTopIcon{flex:0 0 auto;}
.adminUsersPage .adminUsersTopbar .auth{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:10px !important;
  min-width:0;
  white-space:nowrap;
}
.adminUsersPage .adminUsersTopbar .auth .muted{overflow:hidden;text-overflow:ellipsis;}
.adminUsersPage .adminTopbarLogout{display:inline-flex;margin:0;}
.adminUsersPage .btn,
.adminUsersPage button.btn,
.adminUsersPage a.btn,
.adminUsersPage input[type="button"],
.adminUsersPage input[type="submit"]{
  border-radius:9px !important;
  min-height:38px;
  padding:8px 14px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  text-decoration:none;
}
.adminUsersPage .btn-small{min-height:34px;padding:6px 11px !important;}
.adminUsersPage .siteMenuButton{border-radius:7px !important;}
.adminUsersPage .messageTopIcon{border-radius:7px !important;}
.adminUsersPage .adminUsersTableWrap,
.adminUsersPage .adminUserForm,
.adminUsersPage .dangerZone{border-radius:10px;}
@media(max-width:760px){
  .adminUsersPage .adminUsersTopbar{padding:8px 10px !important;gap:7px !important;}
  .adminUsersPage .adminUsersTopbar .auth .muted{max-width:180px;}
}
@media(max-width:560px){
  .adminUsersPage .adminUsersTopbar .auth .muted{display:none;}
}

/* User Management shared-width normalization */
.adminUsersPage .adminUsersShell,
.adminUsersPage .adminUserFormShell{
  width:min(1100px,calc(100% - 36px));
  max-width:none !important;
  margin:24px auto 36px;
  padding:0;
  box-sizing:border-box;
}
.adminUsersPage .adminUsersHeader,
.adminUsersPage .adminUserSearch,
.adminUsersPage .adminUsersTableWrap,
.adminUsersPage .adminUserForm,
.adminUsersPage .dangerZone,
.adminUsersPage .pager{
  width:100%;
  max-width:none !important;
  box-sizing:border-box;
}
.adminUsersPage .adminUserForm{margin:0;}
.adminUsersPage .dangerZone{margin-left:0;margin-right:0;}
@media(max-width:700px){
  .adminUsersPage .adminUsersShell,
  .adminUsersPage .adminUserFormShell{width:calc(100% - 20px);margin:14px auto 28px;}
}

/* Feedback UI shared responsive width normalization - 2026-10-06 */
.feedbackAdminPage{
  width:min(1100px,calc(100% - 32px));
  max-width:none;
  margin:22px auto 48px;
  padding:0;
  box-sizing:border-box;
}
.feedbackAdminHeader,
.feedbackAdminCard,
.feedbackEmpty{
  width:100%;
  box-sizing:border-box;
}
.feedbackDialog{
  width:min(1100px,calc(100vw - 32px));
  max-width:none;
  box-sizing:border-box;
  border-radius:12px;
  overflow:hidden;
}
#feedbackForm{
  width:100%;
  box-sizing:border-box;
}
.feedbackField .input,
.feedbackField .textarea,
.feedbackTextarea{
  width:100%;
  box-sizing:border-box;
}
@media(max-width:700px){
  .feedbackAdminPage{width:calc(100% - 20px);margin:12px auto 28px;padding:0}
  .feedbackDialog{width:calc(100vw - 20px)}
}


/* Main-panel duplicate navigation controls */
.mainPanelHeader{
  position:relative;
}
.mainHeaderNavControls{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.mainHeaderNavControls .navBtn{
  min-width:28px;
  width:28px;
  height:25px;
  padding:1px 4px;
  line-height:1;
}
@media(max-width:900px){
  .mainHeaderNavControls{gap:6px;}
  .mainHeaderNavControls .navBtn{min-width:25px;width:25px;padding:1px 2px;}
}

/* MongoDB vocabulary stroke detail parity with the legacy XML panel. */
.strokeDetailLine {
  color: #111;
  margin-top: 10px;
  line-height: 1.35;
}
.strokeExamples {
  margin-top: 14px;
  font-size: 14px;
  color: #111;
  line-height: 1.45;
}
.strokeExample { margin-bottom: 3px; }

/* Stroke panel: keep the animation viewport at its minimum useful size so
   MongoDB metadata and all example lines remain visible below it. */
.panel.side.strokeMode #strokePanel {
  height: auto !important;
  min-height: 430px;
  align-self: stretch;
}
.panel.side.strokeMode .strokePanelBody {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.panel.side.strokeMode .strokeWriter {
  flex: 0 0 240px !important;
  width: 240px;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
}
.panel.side.strokeMode .strokeExamples {
  display: block !important;
  white-space: normal;
  overflow: visible;
}
.panel.side.strokeMode .strokeExample {
  display: block !important;
  margin: 3px 0;
  white-space: normal;
  line-height: 1.45;
}