/* MandarinBench Worksheet Studio production CSS bundle. Source files remain canonical. */

/* ===== styles/mandarinbench-design-tokens.css ===== */
/* MandarinBench redesign token layer
 * Source of truth: approved 1A Studio + 1D landing handoff.
 * Stage 1 only: tokens are defined here but not yet wired into existing components.
 */

:root {
  /* Core colour system */
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-paper: #ffffff;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Neutral ramp */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* Accent ramp */
  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  /* Spacing scale — only these values are permitted in app chrome. */
  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  /* Page-level rhythm */
  --space-page-1: 27.2px;
  --space-page-1-5: 40.8px;
  --space-page-2: 54.4px;
  --space-page-2-4: 65.3px;

  /* Geometry */
  --radius-0: 0;
  --border-hairline: 1px solid var(--color-divider);
  --border-emphasis: 1.5px solid var(--color-text);

  /* Elevation — chrome should not use shadows. */
  --shadow-sm: 0 1px 2px rgba(43, 43, 45, .14);
  --shadow-md: 0 3px 10px rgba(43, 43, 45, .16);
  --shadow-lg: 0 12px 32px rgba(43, 43, 45, .22);

  /* Typography */
  --font-heading: "Barlow Condensed", "Noto Sans SC", sans-serif;
  --font-latin: "Barlow", sans-serif;
  --font-ui-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-paper-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --type-micro: 10px;
  --type-meta: 11px;
  --type-label: 12px;
  --type-dense: 13px;
  --type-control: 14px;
  --type-body: 15px;
  --type-panel-sm: 16px;
  --type-panel-md: 21px;
  --type-landing-sm: 26px;
  --type-landing-md: 38px;
  --type-landing-xl: 62px;

  --tracking-section: .08em;
  --tracking-kicker: .2em;

  /* Interaction tokens */
  --transition-fast: 150ms;
  --transition-accordion: 180ms;
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-accent);
  --selection-bg: color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* Approved structural measurements */
  --studio-topbar-height: 60px;
  --studio-left-rail-width: 340px;
  --studio-tool-rail-width: 72px;
  --studio-paper-width: 720px;

  /* Responsive thresholds */
  --breakpoint-toolrail: 1180px;
  --breakpoint-drawer: 900px;
  --breakpoint-mobile: 760px;
}

/* ===== styles/mandarinbench-primitives.css ===== */
/* MandarinBench shared UI primitives
 * Stage 2 of the 1A / 1D redesign.
 * These classes are intentionally framework-free and presentation-only.
 * They are not wired into the existing Worksheet / Copybook UI yet.
 */

.mb-ui {
  color: var(--color-text);
  font-family: var(--font-latin), var(--font-ui-cn);
  font-size: var(--type-control);
  line-height: 1.45;
}

.mb-ui *,
.mb-ui *::before,
.mb-ui *::after {
  box-sizing: border-box;
}

.mb-btn,
.mb-input,
.mb-textarea,
.mb-select,
.mb-stepper,
.mb-switch,
.mb-tag,
.mb-blueprint-frame {
  border-radius: var(--radius-0);
}

.mb-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: var(--border-hairline);
  background: var(--color-paper);
  color: var(--color-text);
  font: var(--font-weight-medium) var(--type-dense)/1 var(--font-latin), var(--font-ui-cn);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.mb-btn:hover:not(:disabled) {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-500);
}

.mb-btn:active:not(:disabled) {
  background: var(--color-neutral-200);
}

.mb-btn--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-paper);
}

.mb-btn--primary:hover:not(:disabled) {
  border-color: var(--color-accent-700);
  background: var(--color-accent-700);
}

.mb-btn--primary:active:not(:disabled) {
  border-color: var(--color-accent-800);
  background: var(--color-accent-800);
}

.mb-btn--quiet {
  border-color: transparent;
  background: transparent;
}

.mb-btn--quiet:hover:not(:disabled) {
  border-color: var(--color-divider);
  background: var(--color-neutral-100);
}

.mb-btn--icon {
  width: 36px;
  padding: 0;
}

.mb-btn:disabled,
.mb-input:disabled,
.mb-textarea:disabled,
.mb-select:disabled,
.mb-stepper button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.mb-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.mb-field__label {
  color: var(--color-neutral-700);
  font: var(--font-weight-medium) var(--type-label)/1.25 var(--font-latin), var(--font-ui-cn);
}

.mb-field__hint {
  margin: 0;
  color: var(--color-neutral-600);
  font: var(--font-weight-regular) var(--type-meta)/1.45 var(--font-latin), var(--font-ui-cn);
}

.mb-input,
.mb-textarea,
.mb-select {
  width: 100%;
  border: var(--border-hairline);
  background: var(--color-paper);
  color: var(--color-text);
  font: var(--font-weight-regular) var(--type-control)/1.35 var(--font-latin), var(--font-ui-cn);
  outline: 0;
  transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease;
}

.mb-input,
.mb-select {
  min-height: 36px;
  padding: 0 var(--space-3);
}

.mb-textarea {
  min-height: 96px;
  padding: var(--space-3);
  resize: vertical;
}

.mb-input:hover:not(:disabled),
.mb-textarea:hover:not(:disabled),
.mb-select:hover:not(:disabled) {
  border-color: var(--color-neutral-500);
}

.mb-input:focus,
.mb-textarea:focus,
.mb-select:focus {
  border-color: var(--color-accent);
}

.mb-select {
  appearance: none;
  padding-right: var(--space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-neutral-700) 50%),
    linear-gradient(135deg, var(--color-neutral-700) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.mb-stepper {
  min-height: 36px;
  display: grid;
  grid-template-columns: 36px minmax(48px, 1fr) 36px;
  border: var(--border-hairline);
  background: var(--color-paper);
}

.mb-stepper button {
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: var(--font-weight-medium) var(--type-panel-sm)/1 var(--font-latin), var(--font-ui-cn);
  cursor: pointer;
}

.mb-stepper button:first-child {
  border-right: var(--border-hairline);
}

.mb-stepper button:last-child {
  border-left: var(--border-hairline);
}

.mb-stepper button:hover:not(:disabled) {
  background: var(--color-neutral-100);
}

.mb-stepper__value {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--space-2);
  color: var(--color-text);
  font: var(--font-weight-medium) var(--type-dense)/1 var(--font-mono);
  text-align: center;
}

.mb-switch {
  width: 36px;
  height: 20px;
  position: relative;
  display: inline-block;
  flex: none;
  background: var(--color-neutral-300);
  border: 1px solid var(--color-neutral-400);
  cursor: pointer;
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.mb-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mb-switch__thumb {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--color-paper);
  border: 1px solid var(--color-neutral-500);
  transition: transform var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

.mb-switch:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.mb-switch input:checked + .mb-switch__thumb {
  transform: translateX(16px);
  border-color: var(--color-accent-700);
}

.mb-toggle-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline);
}

.mb-toggle-row__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.mb-toggle-row__label {
  color: var(--color-text);
  font: var(--font-weight-medium) var(--type-dense)/1.3 var(--font-latin), var(--font-ui-cn);
}

.mb-toggle-row__hint {
  color: var(--color-neutral-600);
  font: var(--font-weight-regular) var(--type-meta)/1.35 var(--font-latin), var(--font-ui-cn);
}

.mb-section-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-emphasis);
}

.mb-section-header__title {
  margin: 0;
  color: var(--color-text);
  font: var(--font-weight-semibold) var(--type-dense)/1.15 var(--font-latin), var(--font-ui-cn);
  letter-spacing: var(--tracking-section);
  text-transform: uppercase;
}

.mb-section-header__meta {
  color: var(--color-neutral-600);
  font: var(--font-weight-medium) var(--type-micro)/1 var(--font-mono);
  letter-spacing: .04em;
}

.mb-tag {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: var(--border-hairline);
  background: var(--color-paper);
  color: var(--color-neutral-700);
  font: var(--font-weight-medium) var(--type-micro)/1 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
}

.mb-tag--accent {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

.mb-blueprint-frame {
  --mb-blueprint-mark: 8px;
  position: relative;
  border: var(--border-hairline);
  background: var(--color-paper);
}

.mb-blueprint-frame::before,
.mb-blueprint-frame::after,
.mb-blueprint-frame__mark::before,
.mb-blueprint-frame__mark::after {
  content: "";
  position: absolute;
  width: var(--mb-blueprint-mark);
  height: var(--mb-blueprint-mark);
  pointer-events: none;
}

.mb-blueprint-frame::before {
  top: calc(var(--mb-blueprint-mark) / -2);
  left: calc(var(--mb-blueprint-mark) / -2);
  border-top: 1px solid var(--color-neutral-500);
  border-left: 1px solid var(--color-neutral-500);
}

.mb-blueprint-frame::after {
  top: calc(var(--mb-blueprint-mark) / -2);
  right: calc(var(--mb-blueprint-mark) / -2);
  border-top: 1px solid var(--color-neutral-500);
  border-right: 1px solid var(--color-neutral-500);
}

.mb-blueprint-frame__mark::before {
  bottom: calc(var(--mb-blueprint-mark) / -2);
  left: calc(var(--mb-blueprint-mark) / -2);
  border-bottom: 1px solid var(--color-neutral-500);
  border-left: 1px solid var(--color-neutral-500);
}

.mb-blueprint-frame__mark::after {
  right: calc(var(--mb-blueprint-mark) / -2);
  bottom: calc(var(--mb-blueprint-mark) / -2);
  border-right: 1px solid var(--color-neutral-500);
  border-bottom: 1px solid var(--color-neutral-500);
}

.mb-control-row {
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: var(--border-hairline);
}

.mb-control-row__label {
  color: var(--color-neutral-700);
  font: var(--font-weight-medium) var(--type-label)/1.25 var(--font-latin), var(--font-ui-cn);
}

.mb-stack {
  display: grid;
  gap: var(--space-3);
}

.mb-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mb-btn:focus-visible,
.mb-input:focus-visible,
.mb-textarea:focus-visible,
.mb-select:focus-visible,
.mb-stepper button:focus-visible,
.mb-switch:focus-within,
.mb-tag:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

::selection {
  background: var(--selection-bg);
}

@media (max-width: 760px) {
  .mb-control-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .mb-btn {
    min-height: 40px;
  }

  .mb-input,
  .mb-select {
    min-height: 40px;
  }
}

/* ===== styles/mandarinbench-worksheet-studio.css ===== */
/* MandarinBench 1A Worksheet Studio — screen-only editor chrome.
 * Loaded into worksheet.html by studio.html. Worksheet content/data and print geometry remain native.
 */

:root{
  --ui-bg:var(--color-bg,#f2f2f3)!important;
  --ui-panel:var(--color-paper,#fff)!important;
  --ui-border:var(--color-divider,rgba(29,31,32,.16))!important;
  --ink:var(--color-text,#1d1f20)!important;
  --ink-soft:var(--color-neutral-600,#7a7a7d)!important;
  --accent:var(--color-accent,#5980a6)!important;
  --accent-soft:var(--color-accent-100,#eef6ff)!important;
}
html,body{height:100%!important;background:var(--color-bg,#f2f2f3)!important;color:var(--color-text,#1d1f20)!important}
.topbar,.worksheet-format-bar,.topbar-support{display:none!important}
.app{height:100vh!important;min-height:0!important;grid-template-rows:minmax(0,1fr)!important}
.main{height:100%!important;min-height:0!important;display:grid!important;grid-template-columns:340px minmax(0,1fr)!important;background:var(--color-bg,#f2f2f3)!important}

/* ---------- left rail ---------- */
aside.controls{
  position:relative!important;inset:auto!important;display:block!important;
  width:340px!important;min-width:340px!important;max-width:340px!important;height:100%!important;max-height:none!important;
  overflow:auto!important;padding:0 13.6px 27.2px!important;background:var(--color-bg,#f2f2f3)!important;
  border:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important;border-radius:0!important;box-shadow:none!important;
  scrollbar-color:var(--color-neutral-400,#b7b7ba) transparent!important
}
aside.controls::before,.mb-rail-prefill::before,.mb-rail-blocks::before{
  display:block;padding:20.4px 0 10.2px;margin:0;border-bottom:1.5px solid var(--color-text,#1d1f20);
  font-family:var(--font-heading,"Barlow Condensed",sans-serif);font-size:13px;font-weight:600;letter-spacing:.08em;line-height:1;color:var(--color-text,#1d1f20)
}
aside.controls::before{content:"01  ·  文档   DOCUMENT"}
.mb-rail-prefill::before{content:"02  ·  快速填充   PREFILL";margin-bottom:13.6px}
.mb-rail-blocks::before{content:"03  ·  题块   BLOCKS"}
.panel-resizer{display:none!important}
aside.controls .panel,aside.controls .block-card,aside.controls .control-language-bar,
aside.controls input,aside.controls textarea,aside.controls select,aside.controls button,
aside.controls .btn,aside.controls .addbtn,aside.controls .icon-btn{border-radius:0!important;box-shadow:none!important}
aside.controls .panel{border:0!important;border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:transparent!important;background-image:none!important;padding:13.6px 0!important;margin:0!important}
aside.controls .panel h2,aside.controls .panel h2.toggle-header{font-family:var(--font-heading,"Barlow Condensed",sans-serif)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.05em!important;color:var(--color-neutral-700,#5d5d60)!important;margin:0 0 10.2px!important}
aside.controls .panel h2.toggle-header{min-height:28px!important;align-items:center!important}
.mb-rail-prefill,.mb-rail-blocks{padding-top:0!important}
.mb-rail-prefill>h2:first-of-type{display:none!important}

/* document controls */
aside.controls .field{margin-bottom:10.2px!important}
aside.controls .field label{font-family:var(--font-ui-cn,"Noto Sans SC",sans-serif)!important;color:var(--color-neutral-700,#5d5d60)!important;font-size:11px!important;font-weight:500!important}
aside.controls input[type=text],aside.controls input[type=number],aside.controls textarea,aside.controls select{min-height:34px!important;padding:6.8px!important;background:var(--color-paper,#fff)!important;border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;color:var(--color-text,#1d1f20)!important}
aside.controls input:focus,aside.controls textarea:focus,aside.controls select:focus{outline:2px solid var(--color-accent,#5980a6)!important;outline-offset:-1px!important;border-color:var(--color-accent,#5980a6)!important}
aside.controls .toggle-row{min-height:36px!important;margin:0!important;padding:6.8px 0!important;border-top:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
aside.controls .toggle-row span{font-size:11px!important;font-weight:500!important;color:var(--color-text,#1d1f20)!important}
aside.controls .switch{width:32px!important;height:18px!important}
aside.controls .switch .track{border-radius:0!important;background:var(--color-neutral-300,#d4d4d7)!important}
aside.controls .switch .track::after{border-radius:0!important;width:14px!important;height:14px!important;top:2px!important;left:2px!important}
aside.controls .switch input:checked + .track{background:var(--color-accent,#5980a6)!important}
aside.controls .switch input:checked + .track::after{transform:translateX(14px)!important}

/* ---------- 02 Quick Prefill ---------- */
.prefill-mode-toggle{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;margin:0 0 10.2px!important;padding:0!important;border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;border-radius:0!important}
.prefill-mode-toggle button{min-height:34px!important;border:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;color:var(--color-neutral-700,#5d5d60)!important;font-size:11px!important;font-weight:500!important}
.prefill-mode-toggle button:last-child{border-right:0!important}
.prefill-mode-toggle button.active{background:var(--color-accent,#5980a6)!important;color:#fff!important}
.ai-simple-box{margin:0!important;padding:0!important;border:0!important;background:transparent!important;background-image:none!important}
.ai-simple-box .prefill-note,.ai-simple-privacy{color:var(--color-neutral-600,#7a7a7d)!important;font-size:10px!important;line-height:1.45!important}
.ai-simple-box textarea{min-height:94px!important;background:var(--color-paper,#fff)!important}
.ai-simple-actions{display:flex!important;justify-content:flex-end!important;margin-top:6.8px!important}
.ai-simple-actions .btn.accent,aside.controls .btn.primary,aside.controls .btn.accent{background:var(--color-accent,#5980a6)!important;border-color:var(--color-accent,#5980a6)!important;color:#fff!important}
.prefill-status{border-radius:0!important;background:var(--color-accent-100,#eef6ff)!important;color:var(--color-accent-900,#1d2d3d)!important}

/* ---------- 03 Blocks ---------- */
.mb-rail-blocks{border-bottom:0!important}
.qb-panel-head{min-height:36px!important;margin:0!important;padding:6.8px 0!important;background:transparent!important;border:0!important;justify-content:flex-end!important}
.qb-panel-head h2{display:none!important}.qb-panel-actions{gap:3.4px!important}
.qb-panel-actions .icon-btn{min-width:30px!important;min-height:30px!important;padding:3.4px 6.8px!important;border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;color:var(--color-neutral-700,#5d5d60)!important}
aside.controls .block-card{border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;margin:0 0 6.8px!important;transition:border-color var(--transition-fast,150ms) ease}
aside.controls .block-card.open,aside.controls .block-card.mb-selected-block{border-color:var(--color-accent,#5980a6)!important}
aside.controls .block-head{min-height:40px!important;padding:6.8px!important;background:var(--color-paper,#fff)!important;border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
aside.controls .block-card:not(.open) .block-head{border-bottom:0!important}
aside.controls .block-head:hover{background:var(--color-neutral-100,#f5f5f8)!important}
aside.controls .block-head .ic{width:22px!important;height:22px!important;background:var(--color-neutral-100,#f5f5f8)!important;color:var(--color-accent,#5980a6)!important;border-radius:0!important}
aside.controls .block-head .lbl{color:var(--color-text,#1d1f20)!important;font-size:12px!important;font-weight:600!important}
aside.controls .block-head .idx{color:var(--color-neutral-500,#98989b)!important;font-size:10px!important}
aside.controls .block-body{padding:13.6px 10.2px 10.2px!important;background:var(--color-paper,#fff)!important}
aside.controls .block-settings,aside.controls .advanced-fields{border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-neutral-100,#f5f5f8)!important;border-radius:0!important}
aside.controls .addbtn{min-height:34px!important;border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;color:var(--color-text,#1d1f20)!important}
aside.controls .addbtn:hover{border-color:var(--color-accent,#5980a6)!important;background:var(--color-accent-100,#eef6ff)!important}
aside.controls .addbtn .ic{background:transparent!important;color:var(--color-accent,#5980a6)!important}

/* ---------- Stage 5: selected block accordion ---------- */
.mb-selected-block .block-head{background:var(--color-accent-100,#eef6ff)!important}
.mb-selected-block .block-head::after{content:"EDIT";margin-left:auto;color:var(--color-accent-700,#416180);font:600 9px/1 var(--font-latin,"Barlow",sans-serif);letter-spacing:.12em}
.mb-selected-block .block-title-row{display:grid!important;grid-template-columns:minmax(0,1fr) 78px!important;gap:6.8px!important;align-items:end!important}
.mb-selected-block .block-format-row,.mb-selected-block .vocab-size-row,.mb-selected-block .hanzi-size-font-row,.mb-selected-block .row2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6.8px!important}
.mb-selected-block .row3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6.8px!important}
.mb-selected-block .block-body>.field textarea{min-height:76px!important;resize:vertical!important}
.mb-layout-kicker{display:flex;align-items:center;gap:6.8px;margin:13.6px 0 6.8px;padding-top:10.2px;border-top:1px solid var(--color-divider,rgba(29,31,32,.16));font:600 10px/1 var(--font-heading,"Barlow Condensed",sans-serif);letter-spacing:.1em;color:var(--color-neutral-600,#7a7a7d)}
.mb-layout-kicker::before{content:"";width:13.6px;height:1px;background:var(--color-accent,#5980a6)}
.mb-native-range{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important}
.mb-range-stepper{display:grid;grid-template-columns:34px minmax(42px,1fr) 34px;min-height:34px;border:1px solid var(--color-divider,rgba(29,31,32,.16));background:var(--color-paper,#fff)}
.mb-range-stepper button{min-width:34px!important;width:34px!important;min-height:32px!important;padding:0!important;border:0!important;background:var(--color-paper,#fff)!important;color:var(--color-text,#1d1f20)!important;font:500 17px/1 var(--font-latin,"Barlow",sans-serif)!important}
.mb-range-stepper button:first-child{border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important}.mb-range-stepper button:last-child{border-left:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
.mb-range-stepper button:hover{background:var(--color-neutral-100,#f5f5f8)!important;color:var(--color-accent-700,#416180)!important}
.mb-range-value{display:grid;place-items:center;padding:0 3.4px;color:var(--color-text,#1d1f20);font:600 12px/1 var(--font-mono,monospace);white-space:nowrap}
.mb-advanced-toggle{width:100%!important;min-height:34px!important;margin:10.2px 0 0!important;padding:0 6.8px!important;border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:transparent!important;color:var(--color-accent-700,#416180)!important;text-align:left!important;font:600 11px/1 var(--font-ui-cn,"Noto Sans SC",sans-serif)!important;letter-spacing:.02em!important}
.mb-advanced-toggle:hover{background:var(--color-accent-100,#eef6ff)!important}
.mb-selected-block .advanced-fields[hidden]{display:none!important}
.mb-selected-block .block-secondary-settings{margin-top:10.2px!important;border-top:1px solid var(--color-divider,rgba(29,31,32,.16))!important;padding-top:10.2px!important}
.mb-selected-block input[type=color],.mb-selected-block .block-colour-input,.mb-selected-block .palette-trigger{border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;border-radius:0!important}
.mb-selected-block .field:has(input[type=color]),.mb-selected-block .field:has(.block-colour-input){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:6.8px!important}

/* ---------- canvas / tool rail ---------- */
main.preview-wrap{min-width:0!important;height:100%!important;overflow:auto!important;margin:0 72px 0 0!important;padding:27.2px!important;background:var(--color-surface,#e9e9ea)!important;border:0!important}
.preview-toolbar{position:fixed!important;z-index:50!important;right:0!important;top:0!important;bottom:0!important;width:72px!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:0!important;margin:0!important;background:var(--color-paper,#fff)!important;border:0!important;border-left:1px solid var(--color-divider,rgba(29,31,32,.16))!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
.preview-toolbar .toolbar-btn,.preview-toolbar button{width:72px!important;min-width:72px!important;min-height:60px!important;margin:0!important;padding:6.8px!important;border:0!important;border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16))!important;border-radius:0!important;background:var(--color-paper,#fff)!important;color:var(--color-neutral-700,#5d5d60)!important;box-shadow:none!important}
.preview-toolbar .toolbar-btn:hover,.preview-toolbar button:hover{background:var(--color-neutral-100,#f5f5f8)!important;color:var(--color-text,#1d1f20)!important}
.page{box-shadow:0 3px 10px rgba(43,43,45,.16)!important}

/* ---------- Stage 6: canvas + integrated tool rail ---------- */
.mb-stage6-toolbar>.toolbar-btn{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3.4px!important;font-family:var(--font-ui-cn,"Noto Sans SC",sans-serif)!important;font-size:10px!important;line-height:1.1!important}
.mb-stage6-toolbar .toolbar-icon{display:grid!important;place-items:center!important;width:20.4px!important;height:20.4px!important;font-size:0!important}
.mb-stage6-toolbar .toolbar-icon svg{width:20.4px;height:20.4px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mb-stage6-toolbar .zoom{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6.8px!important;width:72px!important;padding:13.6px 0!important;border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16))!important;color:var(--color-neutral-600,#7a7a7d)!important}
.mb-stage6-toolbar .mb-tool-label{font:500 10px/1 var(--font-ui-cn,"Noto Sans SC",sans-serif);letter-spacing:.04em}
.mb-stage6-toolbar .mb-tool-zoom-button{width:30px!important;min-width:30px!important;min-height:30px!important;height:30px!important;padding:0!important;border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;background:var(--color-paper,#fff)!important;color:var(--color-text,#1d1f20)!important;font:500 18px/1 var(--font-latin,"Barlow",sans-serif)!important}
.mb-stage6-toolbar .mb-tool-zoom-button:hover{background:var(--color-accent-100,#eef6ff)!important;color:var(--color-accent-700,#416180)!important}
.mb-stage6-toolbar .mb-tool-zoom-range{width:18px!important;height:108px!important;min-height:108px!important;padding:0!important;border:0!important;background:transparent!important;writing-mode:vertical-lr!important;direction:rtl!important;accent-color:var(--color-accent,#5980a6)!important}
.mb-stage6-toolbar .mb-tool-zoom-value{font:600 10px/1 var(--font-mono,monospace);color:var(--color-text,#1d1f20)!important}
.mb-stage6-toolbar .mb-tool-page-count{width:72px!important;margin:0!important;padding:10.2px 3.4px!important;border:0!important;border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16))!important;border-radius:0!important;background:transparent!important;color:var(--color-neutral-600,#7a7a7d)!important;font:500 10px/1 var(--font-latin,"Barlow",sans-serif)!important}
.mb-stage6-toolbar .spacer{display:block!important;flex:1 1 auto!important}
.mb-stage6-toolbar .mb-tool-export{margin-top:auto!important;border-top:1px solid var(--color-divider,rgba(29,31,32,.16))!important;border-bottom:0!important;color:var(--color-accent-800,#2c455d)!important}
#pageHost .q-block[data-block-id]{position:relative;transition:outline-color var(--transition-fast,150ms) ease,background-color var(--transition-fast,150ms) ease}
#pageHost .q-block[data-block-id].mb-preview-selected{outline:1.5px solid var(--color-accent,#5980a6)!important;outline-offset:6.8px;background:color-mix(in srgb,var(--color-accent-100,#eef6ff) 36%,transparent)!important}
#pageHost .q-block[data-block-id].mb-preview-selected::before{content:"EDIT";position:absolute;right:0;top:-17px;padding:0 3.4px;background:var(--color-paper,#fff);color:var(--color-accent-700,#416180);font:600 8px/1 var(--font-latin,"Barlow",sans-serif);letter-spacing:.1em}
#pageHost .q-block[data-block-id].mb-preview-pulse{outline-color:var(--color-accent-700,#416180)!important}
.page-shell{align-items:flex-start!important}

@media screen and (max-width:1180px){
  .main{grid-template-columns:340px minmax(0,1fr)!important}
  main.preview-wrap{margin-right:0!important;padding-bottom:92px!important}
  .preview-toolbar{top:auto!important;left:340px!important;right:0!important;bottom:0!important;width:auto!important;height:72px!important;flex-direction:row!important;border-left:0!important;border-top:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
  .preview-toolbar .toolbar-btn,.preview-toolbar button{height:72px!important;min-height:72px!important;border-bottom:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
  .mb-stage6-toolbar .zoom{width:auto!important;height:72px!important;flex-direction:row!important;padding:0 10.2px!important;border-bottom:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
  .mb-stage6-toolbar .mb-tool-zoom-range{width:88px!important;height:18px!important;min-height:18px!important;writing-mode:horizontal-tb!important;direction:ltr!important}
  .mb-stage6-toolbar .mb-tool-page-count{width:auto!important;min-width:54.4px!important;height:72px!important;display:grid!important;place-items:center!important;padding:0 6.8px!important;border-bottom:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
  .mb-stage6-toolbar .spacer{flex:1 1 auto!important}
  .mb-stage6-toolbar .mb-tool-export{margin-top:0!important;margin-left:auto!important;border-top:0!important;border-left:1px solid var(--color-divider,rgba(29,31,32,.16))!important}
}
@media screen and (max-width:900px){
  .main{display:block!important}
  aside.controls{position:fixed!important;z-index:80!important;left:0!important;top:0!important;bottom:0!important;width:min(340px,88vw)!important;min-width:0!important;max-width:88vw!important;transform:translateX(-102%)!important;transition:transform 180ms ease!important}
  aside.controls.open{transform:translateX(0)!important}
  main.preview-wrap{height:100%!important;padding:20.4px 13.6px 92px!important}.preview-toolbar{left:0!important}
  .mb-stage6-toolbar .mb-tool-label,.mb-stage6-toolbar .mb-tool-page-count{display:none!important}
  .mb-stage6-toolbar .zoom{padding-inline:6.8px!important}
  .mb-stage6-toolbar .mb-tool-zoom-range{width:65.3px!important}
}

@media print{
  /* Explicitly defer printed worksheet geometry to worksheet.html. */
  .topbar,.worksheet-format-bar,aside.controls,.panel-resizer,.preview-toolbar{display:none!important}
  .app,.main{display:block!important;height:auto!important;min-height:0!important}
  main.preview-wrap{display:block!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;background:#fff!important}
  #pageHost .q-block[data-block-id].mb-preview-selected{outline:0!important;background:transparent!important}
  #pageHost .q-block[data-block-id].mb-preview-selected::before{display:none!important}
  .page{box-shadow:none!important}
}

/* ===== styles/mandarinbench-worksheet-stage8.css ===== */
/* MandarinBench Worksheet Studio — Stage 8 responsive QA overrides */

.mb-drawer-backdrop{display:none}

/* Restored 01 · 文档 controls, re-homed from the native hidden format bar. */
.mb-document-settings{
  padding:13.6px 0 20.4px!important;
  border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16))!important
}
.mb-doc-field{display:block;margin:0 0 10.2px!important}
.mb-doc-field>span{display:block;margin:0 0 3.4px;font-size:10px;font-weight:500;color:var(--color-neutral-700,#5d5d60)}
.mb-doc-field input{
  width:100%!important;height:34px!important;min-height:34px!important;padding:6.8px!important;
  border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;border-radius:0!important;
  background:var(--color-paper,#fff)!important;color:var(--color-text,#1d1f20)!important;box-shadow:none!important
}
.mb-doc-field input:focus-visible{outline:2px solid var(--color-accent,#5980a6)!important;outline-offset:-1px!important}
.mb-doc-toggle-group{border:1px solid var(--color-divider,rgba(29,31,32,.16));background:var(--color-paper,#fff)}
.mb-doc-toggle-row{
  min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:10.2px;
  padding:0 6.8px;border-bottom:1px solid var(--color-divider,rgba(29,31,32,.16));
  font-size:11px;font-weight:500;color:var(--color-text,#1d1f20);cursor:pointer
}
.mb-doc-toggle-row:last-child{border-bottom:0}
.mb-doc-toggle-row.is-disabled{opacity:.45;cursor:not-allowed}
.mb-doc-switch{position:relative;width:30px;height:16px;flex:0 0 30px;display:inline-block}
.mb-doc-switch input{position:absolute;opacity:0;pointer-events:none}
.mb-doc-track{position:absolute;inset:0;border:1px solid var(--color-neutral-400,#b7b7ba);background:var(--color-neutral-300,#d4d4d7)}
.mb-doc-track::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;background:var(--color-paper,#fff);transition:transform var(--transition-fast,150ms) ease}
.mb-doc-switch input:checked+.mb-doc-track{background:var(--color-accent,#5980a6);border-color:var(--color-accent,#5980a6)}
.mb-doc-switch input:checked+.mb-doc-track::after{transform:translateX(14px)}
.mb-doc-switch input:focus-visible+.mb-doc-track{outline:2px solid var(--color-accent,#5980a6);outline-offset:2px}

@supports(height:100dvh){
  html,body,.app,.main,aside.controls,main.preview-wrap{height:100dvh!important}
}

@media screen and (max-width:1180px){
  main.preview-wrap{padding-bottom:68px!important}
  .preview-toolbar{
    left:340px!important;right:0!important;bottom:0!important;top:auto!important;
    width:auto!important;height:48px!important;min-height:48px!important;
    display:flex!important;flex-direction:row!important;align-items:stretch!important;
    border-left:0!important;border-top:1px solid var(--color-divider,rgba(29,31,32,.16))!important;
    background:var(--color-bg,#f2f2f3)!important
  }
  .preview-toolbar>.toolbar-btn,
  .preview-toolbar button,
  .preview-toolbar .mb-tool-zoom-button{
    width:auto!important;min-width:48px!important;height:48px!important;min-height:48px!important;
    padding:3.4px 6.8px!important;border-bottom:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important
  }
  .preview-toolbar>.toolbar-btn{flex:0 0 68px!important;font-size:9px!important}
  .preview-toolbar>.toolbar-btn .toolbar-icon{width:16px!important;height:16px!important}
  .preview-toolbar .zoom{
    flex:1 1 auto!important;min-width:180px!important;height:48px!important;
    display:grid!important;grid-template-columns:auto 40px minmax(70px,1fr) 40px auto!important;
    align-items:center!important;gap:0!important;border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important;padding:0 6.8px!important
  }
  .preview-toolbar .zoom .mb-tool-label{writing-mode:horizontal-tb!important;transform:none!important;margin:0 6.8px 0 0!important}
  .preview-toolbar .zoom .mb-tool-zoom-range{
    width:100%!important;height:18px!important;writing-mode:horizontal-tb!important;direction:ltr!important;appearance:auto!important
  }
  .preview-toolbar .zoom .mb-tool-zoom-value{min-width:42px!important;text-align:center!important;font-size:10px!important}
  .preview-toolbar .mb-tool-page-count{display:none!important}
}

@media screen and (max-width:900px){
  .main{display:block!important}
  main.preview-wrap{display:block!important;grid-template-columns:none!important;column-gap:0!important}
  .page-shell{grid-column:auto!important;grid-row:auto!important;width:100%!important}
  aside.controls{
    position:fixed!important;z-index:90!important;left:0!important;top:0!important;bottom:0!important;
    width:min(340px,88vw)!important;min-width:0!important;max-width:88vw!important;
    padding-bottom:max(27.2px,env(safe-area-inset-bottom))!important;
    transform:translateX(-102%)!important;
    transition:transform var(--transition-accordion,180ms) ease!important;
    box-shadow:none!important
  }
  aside.controls.open{transform:translateX(0)!important}
  .mb-drawer-backdrop{
    display:block;position:fixed;z-index:85;inset:0;background:color-mix(in srgb,var(--color-text,#1d1f20) 28%,transparent);
    opacity:0;pointer-events:none;transition:opacity var(--transition-accordion,180ms) ease
  }
  .mb-drawer-backdrop.open{opacity:1;pointer-events:auto}
  main.preview-wrap{
    height:100%!important;margin-right:0!important;padding:20.4px 13.6px calc(68px + env(safe-area-inset-bottom))!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important
  }
  .preview-toolbar{
    position:fixed!important;grid-column:auto!important;grid-row:auto!important;
    left:0!important;padding-bottom:env(safe-area-inset-bottom)!important;
    height:calc(48px + env(safe-area-inset-bottom))!important;min-height:48px!important
  }
}

@media screen and (max-width:620px){
  aside.controls{width:min(340px,92vw)!important;max-width:92vw!important}
  .preview-toolbar>.toolbar-btn{flex-basis:54px!important;min-width:54px!important}
  .preview-toolbar .zoom{min-width:138px!important;grid-template-columns:34px minmax(54px,1fr) 34px auto!important;padding-inline:3.4px!important}
  .preview-toolbar .zoom .mb-tool-label{display:none!important}
  .preview-toolbar .zoom .mb-tool-zoom-button{min-width:34px!important;width:34px!important;padding:0!important}
  .preview-toolbar .zoom .mb-tool-zoom-value{min-width:36px!important;font-size:9px!important}
  .preview-toolbar>.toolbar-btn span:last-child{font-size:8px!important;line-height:1.05!important}
  main.preview-wrap{padding-left:6.8px!important;padding-right:6.8px!important}
}

@media screen and (max-width:430px){
  .preview-toolbar>.toolbar-btn{flex-basis:48px!important;min-width:48px!important;padding-inline:3.4px!important}
  .preview-toolbar .zoom{min-width:124px!important}
  .preview-toolbar .mb-tool-export{margin-left:auto!important}
}

@media(prefers-reduced-motion:reduce){
  aside.controls,.mb-drawer-backdrop,.mb-doc-track::after{transition:none!important}
}

@media print{
  .mb-drawer-backdrop,.mb-document-settings{display:none!important}
}

/* ================================================================
   Quiet Workbook — Classic worksheet only
   Visual simplification inspired by professionally typeset workbooks.
   No renderer, data, grid or pagination behaviour is changed here.
   ================================================================ */
.page.design-classic{
  --quiet-accent:#527AA6;
  --quiet-ink:#1F2328;
  --quiet-muted:#66717D;
  --quiet-line:#C9D0D7;
  --quiet-line-soft:#E1E5E9;
  color:var(--quiet-ink)!important;
  background:#fff!important
}
.page.design-classic .page-header{
  border:0!important;border-bottom:1px solid var(--quiet-ink)!important;
  padding:0 0 10px!important;margin-bottom:18px!important
}
.page.design-classic .title-row{justify-content:flex-start!important;padding-right:34mm}
.page.design-classic .page-header .title{
  font-family:var(--sans)!important;font-size:var(--title-font,26px)!important;font-weight:750!important;
  line-height:1.12!important;letter-spacing:.005em!important;text-align:left!important;color:var(--quiet-ink)!important
}
.page.design-classic .page-header .subtitle{
  margin-top:3px!important;text-align:left!important;font-family:var(--sans)!important;font-size:10.5px!important;
  line-height:1.35!important;letter-spacing:.01em!important;color:var(--quiet-muted)!important
}
.page.design-classic .info-row{gap:18px!important;margin-top:14px!important}
.page.design-classic .info-row .fl{gap:6px!important}
.page.design-classic .info-row .fl-label{
  font-family:var(--sans)!important;font-size:9px!important;font-weight:650!important;
  letter-spacing:.055em!important;color:var(--quiet-muted)!important
}
.page.design-classic .info-row .fl-blank{border-bottom:1px solid #9DA6AF!important}
.page.design-classic .score-corner{
  top:11mm!important;right:15mm!important;min-width:28mm;padding:5px 8px!important;
  border:1px solid var(--quiet-ink)!important;border-radius:0!important;background:#fff!important;
  font-family:var(--sans)!important;font-size:9.5px!important;font-weight:550!important;line-height:1.45!important;
  text-align:center!important;color:var(--quiet-ink)!important
}
.page.design-classic .q-head{
  gap:7px!important;margin-bottom:6px!important;padding-bottom:5px!important;
  border-bottom:1px solid var(--quiet-ink)!important;font-family:var(--sans)!important;
  font-size:var(--head-font,14.5px)!important;font-weight:720!important;line-height:1.25!important;color:var(--quiet-ink)!important
}
.page.design-classic .q-head-icon{display:none!important}
.page.design-classic .q-head .task-prefix{
  display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 5px!important;
  border:1px solid var(--quiet-accent)!important;border-radius:0!important;background:#fff!important;
  font-family:var(--sans)!important;font-size:.72em!important;font-weight:650!important;line-height:1!important;
  letter-spacing:.08em!important;color:var(--quiet-accent)!important;white-space:nowrap
}
.page.design-classic .q-head .pts{
  margin-left:auto!important;font-family:var(--sans)!important;font-size:9px!important;font-weight:600!important;
  line-height:1!important;letter-spacing:.11em!important;text-transform:uppercase;color:var(--quiet-muted)!important
}
.page.design-classic .q-instruction{
  gap:0!important;margin:0 0 var(--instr-margin,10px) 0!important;padding:1px 0 1px 7px!important;
  border:0!important;border-left:1.5px solid var(--quiet-accent)!important;border-radius:0!important;background:transparent!important;
  font-family:var(--sans)!important;font-size:var(--instr-font,10.5px)!important;line-height:1.45!important;color:var(--quiet-muted)!important
}
.page.design-classic .q-instruction .qi-label{display:none!important}
.page.design-classic .q-instruction .english-text{color:var(--quiet-muted)!important}
.page.design-classic .q-divider{border-top:1px solid var(--quiet-line-soft)!important;margin:var(--block-gap,16px) 0!important}
.page.design-classic .page-continued{
  padding-bottom:5px!important;margin-bottom:14px!important;border-bottom:1px solid var(--quiet-line)!important;
  font-family:var(--sans)!important;font-size:9px!important;letter-spacing:.04em!important;color:var(--quiet-muted)!important
}
.page.design-classic .page-footer{
  left:15mm!important;right:15mm!important;bottom:7mm!important;text-align:right!important;
  font-family:var(--sans)!important;font-size:8px!important;font-weight:500!important;letter-spacing:.08em!important;color:#9AA3AD!important
}
.page.design-classic .word-bank{border:1px solid var(--quiet-line)!important;border-radius:0!important;background:#fff!important}
.page.design-classic .wb-label{color:var(--quiet-muted)!important}
.page.design-classic .wb-chip{border-color:#AEB6BF!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
.page.design-classic .vocab-table{border-color:#AEB6BF!important;border-radius:0!important}
.page.design-classic .vocab-table-cell{border-color:#C7CDD3!important}
.page.design-classic .vocab-table-header .vocab-table-cell{
  background:#fff!important;color:var(--quiet-muted)!important;font-family:var(--sans)!important;font-weight:650!important
}
.page.design-classic .order-row .chunk{
  border-color:#AEB6BF!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
.page.design-classic .match-item{border-bottom-color:#C7CDD3!important}
.page.design-classic .match-item .num,
.page.design-classic .sent .num,
.page.design-classic .dict-row .num,
.page.design-classic .order-row .num{font-family:var(--sans)!important;color:var(--quiet-accent)!important}
.page.design-classic .dialogue-turn,
.page.design-classic .dialogue-order-turn{border-color:#C7CDD3!important;border-radius:0!important;background:#fff!important}
.page.design-classic .pinyin-text{color:var(--quiet-accent)!important}

/* ===== styles/mandarinbench-question-block-normalizer.css ===== */
/* MandarinBench 1A — normalized question-block accordion presentation */

.mb-normalized-block{position:relative;background:var(--color-paper)!important;border:1px solid var(--color-divider)!important}
.mb-normalized-block.open{border-color:var(--color-accent)!important}

.mb-normalized-block>.block-head{
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:24px auto minmax(0,1fr) auto 18px 28px!important;
  gap:var(--space-2)!important;
  align-items:center!important;
  padding:var(--space-3)!important;
  background:var(--color-paper)!important;
  border:0!important;
  border-bottom:1px solid transparent!important;
}
.mb-normalized-block.open>.block-head{background:var(--color-accent-100)!important;border-bottom-color:var(--color-divider)!important}
.mb-normalized-block>.block-head:hover{background:var(--color-neutral-100)!important}
.mb-normalized-block.open>.block-head:hover{background:var(--color-accent-100)!important}

/* Preserve the native Worksheet drag handle. The existing beginBlockDrag / dropBlock
   functions remain the source of truth for history, block order, and rerendering. */
.mb-normalized-block>.block-head>.block-drag-handle{
  display:inline-grid!important;
  place-items:center!important;
  width:24px!important;
  min-width:24px!important;
  height:28px!important;
  padding:0!important;
  color:var(--color-neutral-500)!important;
  background:transparent!important;
  font:500 15px/1 var(--font-mono)!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.mb-normalized-block>.block-head>.block-drag-handle:hover{color:var(--color-accent-700)!important;background:var(--color-paper)!important}
.mb-normalized-block>.block-head>.block-drag-handle:active{cursor:grabbing!important}
.mb-normalized-block.dragging{opacity:.62}
.mb-normalized-block.drag-before::before,
.mb-normalized-block.drag-after::before{
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  height:2px;
  background:var(--color-accent);
  pointer-events:none;
}
.mb-normalized-block.drag-before::before{top:-2px}
.mb-normalized-block.drag-after::before{bottom:-2px}

.mb-normalized-block>.block-head>.block-toggle-btn,
.mb-normalized-block>.block-head>.ic,
.mb-normalized-block>.block-head>.lbl,
.mb-normalized-block>.block-head>.idx,
.mb-normalized-block>.block-head>.icon-btn:not(.mb-header-delete),
.mb-normalized-block>.block-head::after{display:none!important}

.mb-normalized-block>.block-head>.mb-header-delete{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--color-neutral-600)!important;
  font:500 18px/1 var(--font-latin)!important;
  cursor:pointer!important;
}
.mb-normalized-block>.block-head>.mb-header-delete:hover{background:var(--color-neutral-100)!important;color:var(--color-text)!important}
.mb-normalized-block.open>.block-head>.mb-header-delete:hover{background:var(--color-paper)!important}
.mb-normalized-block>.block-head>.mb-header-delete:focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:-2px!important}

.mb-accordion-index{font:500 10px/1 var(--font-latin);color:var(--color-neutral-600);white-space:nowrap}
.mb-accordion-title{font:500 14px/1.2 var(--font-ui-cn);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-item-tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-2);border:var(--border-hairline);background:var(--color-paper);font:500 10px/1 var(--font-latin);color:var(--color-neutral-700);white-space:nowrap}
.mb-accordion-chevron{font:600 12px/1 var(--font-latin);color:var(--color-accent-700);transform:rotate(-90deg);transition:transform var(--transition-accordion) ease}
.mb-normalized-block.open .mb-accordion-chevron{transform:rotate(0)}

.mb-normalized-block>.block-body{padding:var(--space-4)!important;background:var(--color-paper)!important}
.mb-normalized-block>.block-body>.mb-layout-kicker,
.mb-normalized-block>.block-body>.mb-advanced-toggle,
.mb-normalized-block .mb-advanced-toggle{display:none!important}

.mb-block-core{display:grid;gap:var(--space-3)}
.mb-block-core .field{margin:0!important}
.mb-block-core .block-title-row{display:grid!important;grid-template-columns:minmax(0,1fr) 90px!important;gap:var(--space-3)!important;align-items:end!important;margin:0!important}
.mb-block-core .block-title-row .field{margin:0!important}

.mb-student-instruction input[type=text]{min-height:42px!important}
.mb-primary-content-field textarea{min-height:120px!important;font-family:var(--font-mono)!important;font-size:11px!important;line-height:1.55!important;resize:vertical!important}
.mb-primary-content-field input[type=text]{min-height:42px!important}
.mb-primary-content-field label,.mb-student-instruction label{font-size:11px!important;color:var(--color-neutral-700)!important}

.mb-block-layout{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1.5px solid var(--color-text)}
.mb-layout-heading{display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-3)}
.mb-layout-heading span{font:600 13px/1 var(--font-heading);letter-spacing:var(--tracking-section);color:var(--color-text)}
.mb-layout-heading small{font:600 10px/1 var(--font-heading);letter-spacing:var(--tracking-section);color:var(--color-neutral-600)}

.mb-layout-grid,.mb-size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}
.mb-proxy-field{display:grid;gap:var(--space-2);min-width:0}
.mb-proxy-field>span{font-size:11px;font-weight:500;color:var(--color-neutral-700)}
.mb-proxy-select{width:100%;min-width:0;height:40px!important;padding:0 var(--space-3)!important;border:var(--border-hairline)!important;background:var(--color-paper)!important;color:var(--color-text)!important}

.mb-normalized-stepper{display:grid;grid-template-columns:34px minmax(46px,1fr) 34px;height:40px;border:var(--border-hairline);background:var(--color-paper)}
.mb-normalized-stepper button{width:34px!important;min-width:34px!important;min-height:38px!important;height:38px!important;padding:0!important;border:0!important;background:var(--color-paper)!important;color:var(--color-neutral-700)!important;font:500 17px/1 var(--font-latin)!important}
.mb-normalized-stepper button:first-child{border-right:var(--border-hairline)!important}
.mb-normalized-stepper button:last-child{border-left:var(--border-hairline)!important}
.mb-normalized-stepper button:hover{background:var(--color-accent-100)!important;color:var(--color-accent-700)!important}
.mb-normalized-stepper output{display:grid;place-items:center;font:500 11px/1 var(--font-latin);color:var(--color-text);white-space:nowrap}

.mb-ink-font-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:var(--space-3);align-items:end;margin-top:var(--space-2)}
.mb-ink-control{display:flex;align-items:center;gap:var(--space-2);min-height:40px}
.mb-ink-control>span{margin-right:var(--space-1);font-size:11px;font-weight:500;color:var(--color-neutral-700)}
.mb-ink-swatch{position:relative;width:24px!important;min-width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;border:1px solid var(--color-neutral-400)!important;background:var(--swatch)!important}
.mb-ink-swatch.is-active::after{content:"";position:absolute;inset:-3px;border:2px solid var(--color-accent);pointer-events:none}
.mb-font-proxy{grid-template-columns:auto 1fr!important;align-items:center!important;gap:var(--space-2)!important}
.mb-font-proxy>span{white-space:nowrap}
.mb-font-proxy .mb-proxy-select{height:34px!important}

.mb-proxied-native{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important;border:0!important}

.mb-block-advanced{margin-top:var(--space-3);padding-top:var(--space-3);border-top:var(--border-hairline);display:grid;gap:var(--space-3)}
.mb-block-advanced[hidden]{display:none!important}
.mb-block-advanced .advanced-fields{margin:0!important;padding:0!important;border:0!important;background:transparent!important}
.mb-block-advanced .advanced-fields>summary{display:none!important}
.mb-block-advanced .field{margin:0!important}
.mb-block-advanced .row2,.mb-block-advanced .row3{margin:0!important}
.mb-block-ops{display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-2);border-top:var(--border-hairline)}
.mb-block-ops>span{margin-right:auto;font-size:10px;color:var(--color-neutral-600)}
.mb-block-ops .icon-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:30px!important;min-height:30px!important;border:var(--border-hairline)!important;background:var(--color-paper)!important;color:var(--color-neutral-700)!important}
.mb-block-ops .icon-btn:hover{background:var(--color-accent-100)!important;color:var(--color-accent-700)!important}

.mb-advanced-footer{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);padding-top:var(--space-3);border-top:var(--border-hairline)}
.mb-normalized-advanced-toggle{flex:1 1 auto;min-height:34px!important;padding:0!important;border:0!important;background:transparent!important;text-align:left!important;font:500 11px/1.3 var(--font-ui-cn)!important;color:var(--color-accent-700)!important}
.mb-normalized-advanced-toggle:hover{background:transparent!important;color:var(--color-accent-900)!important}
.mb-advanced-count{flex:none;font:400 10px/1 var(--font-ui-cn);color:var(--color-neutral-600);white-space:nowrap}

@media screen and (max-width:430px){
  .mb-normalized-block>.block-head{grid-template-columns:22px auto minmax(0,1fr) auto 16px 26px!important;gap:var(--space-1)!important}
  .mb-normalized-block>.block-head>.block-drag-handle{width:22px!important;min-width:22px!important}
  .mb-block-core .block-title-row{grid-template-columns:minmax(0,1fr) 76px!important}
  .mb-layout-grid,.mb-size-grid{grid-template-columns:1fr}
  .mb-ink-font-row{grid-template-columns:1fr}
  .mb-advanced-footer{align-items:flex-start;flex-direction:column;gap:var(--space-2)}
}

@media(prefers-reduced-motion:reduce){.mb-accordion-chevron{transition:none}}

@media print{.mb-normalized-block .mb-preview-selected{outline:0!important}}

/* ===== styles/mandarinbench-question-block-fixes.css ===== */
/* Focused follow-up for the normalized question-block accordion. */
.mb-normalized-block>.block-head{cursor:pointer!important}
.mb-normalized-block>.block-head:focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:-2px!important}
.mb-fixed-size-proxy{min-width:0}
.mb-fixed-size-proxy .mb-normalized-stepper{width:100%}

/* The reference keeps Hanzi and Pinyin sizes paired, including in the 340px mobile drawer. */
@media screen and (max-width:430px){
  .mb-size-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--space-2)!important}
  .mb-size-grid .mb-normalized-stepper{grid-template-columns:30px minmax(38px,1fr) 30px!important}
  .mb-size-grid .mb-normalized-stepper button{width:30px!important;min-width:30px!important}
  .mb-size-grid .mb-proxy-field>span{font-size:10px!important;white-space:nowrap}
}

/* ================================================================
   Quiet Workbook — final worksheet presentation layer
   Applies to Classic + Modern. Friendly Classroom remains untouched.
   Presentation only: no renderer, data, grid or pagination changes.

   Colour rule:
   - worksheet typography starts black;
   - structural accents may remain muted blue;
   - question-block language colour controls remain the source of truth.
   ================================================================ */
.page:is(.design-classic,.design-modern){
  --quiet-accent:#527AA6;
  --quiet-ink:#000000;
  --quiet-line:#C9D0D7;
  --quiet-line-soft:#E7EAED;
  color:var(--quiet-ink)!important;
  background:#fff!important
}

/* Remove Modern's decorative paper effects so the page reads as a workbook, not a card. */
.page.design-modern::before,
.page.design-modern::after{content:none!important;display:none!important}

.page:is(.design-classic,.design-modern) .page-header{
  position:relative!important;z-index:auto!important;
  border:0!important;border-bottom:1px solid var(--quiet-ink)!important;border-radius:0!important;
  padding:0 0 10px!important;margin-bottom:18px!important;background:transparent!important
}
.page:is(.design-classic,.design-modern) .title-row{justify-content:flex-start!important;padding-right:34mm!important}
.page:is(.design-classic,.design-modern) .page-header .title{
  font-family:var(--sans)!important;font-size:var(--title-font,26px)!important;font-weight:750!important;
  line-height:1.12!important;letter-spacing:.005em!important;text-align:left!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .page-header .subtitle{
  display:block!important;margin:3px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;text-align:left!important;font-family:var(--sans)!important;font-size:10.5px!important;
  font-weight:500!important;line-height:1.35!important;letter-spacing:.01em!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .info-row{gap:18px!important;margin-top:14px!important}
.page:is(.design-classic,.design-modern) .info-row .fl{
  min-height:0!important;align-items:flex-end!important;gap:6px!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important
}
.page:is(.design-classic,.design-modern) .info-row .fl-label{
  font-family:var(--sans)!important;font-size:9px!important;font-weight:650!important;
  letter-spacing:.055em!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .info-row .fl-blank{border-bottom:1px solid #9DA6AF!important}
.page:is(.design-classic,.design-modern) .score-corner{
  top:11mm!important;right:15mm!important;min-width:28mm!important;padding:5px 8px!important;
  border:1px solid var(--quiet-ink)!important;border-radius:0!important;background:#fff!important;
  font-family:var(--sans)!important;font-size:9.5px!important;font-weight:550!important;
  line-height:1.45!important;text-align:center!important;color:#000!important
}

.page:is(.design-classic,.design-modern) .q-block{
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:#000!important
}
.page:is(.design-classic,.design-modern) .q-head{
  gap:7px!important;margin:0 0 6px!important;padding:0 0 5px!important;
  border:0!important;border-bottom:1px solid var(--quiet-ink)!important;border-radius:0!important;background:transparent!important;
  font-family:var(--block-hanzi-font,var(--worksheet-font))!important;font-size:var(--head-font,14.5px)!important;font-weight:400!important;
  line-height:1.25!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .q-head-icon{display:none!important}
.page:is(.design-classic,.design-modern) .q-head .task-prefix{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:24px!important;height:20px!important;padding:0 5px!important;
  border:1px solid var(--quiet-accent)!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;
  font-family:var(--sans)!important;font-size:.72em!important;font-weight:650!important;line-height:1!important;
  letter-spacing:.08em!important;color:#000!important;white-space:nowrap!important
}
.page:is(.design-classic,.design-modern) .q-head .pts{
  margin-left:auto!important;font-family:var(--sans)!important;font-size:9px!important;font-weight:600!important;
  line-height:1!important;letter-spacing:.11em!important;text-transform:uppercase!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .q-instruction{
  gap:0!important;margin:0 0 var(--instr-margin,10px) 0!important;padding:1px 0 1px 7px!important;
  border:0!important;border-left:1.5px solid var(--quiet-accent)!important;border-radius:0!important;background:transparent!important;
  font-family:var(--sans)!important;font-size:var(--instr-font,10.5px)!important;line-height:1.45!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .q-instruction .qi-label{display:none!important}
.page:is(.design-classic,.design-modern) .q-instruction .english-text{color:#000!important}
.page:is(.design-classic,.design-modern) .q-divider{
  border:0!important;border-top:1px solid var(--quiet-line-soft)!important;margin:var(--block-gap,16px) 0!important
}

/* Language layers: black is the native fallback, but the existing editor variables always win. */
.page:is(.design-classic,.design-modern) .q-body .hanzi-text{color:var(--hanzi-color,#000000)!important}
.page:is(.design-classic,.design-modern) .q-body .pinyin-text{color:var(--pinyin-color,#000000)!important}
.page:is(.design-classic,.design-modern) .q-body .english-text{color:var(--english-color,#000000)!important}

.page:is(.design-classic,.design-modern) .word-bank{
  border:1px solid var(--quiet-line)!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
.page:is(.design-classic,.design-modern) .wb-label{color:#000!important}
.page:is(.design-classic,.design-modern) .wb-chip{
  border-color:#AEB6BF!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
.page:is(.design-classic,.design-modern) .vocab-table{
  border-color:#AEB6BF!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
.page:is(.design-classic,.design-modern) .vocab-table-cell{border-color:#C7CDD3!important}
.page:is(.design-classic,.design-modern) .vocab-table-header .vocab-table-cell{
  background:#fff!important;font-family:var(--sans)!important;font-weight:650!important
}
/* Vocabulary colour controls already write these custom properties; keep them authoritative. */
.page:is(.design-classic,.design-modern) .vocab-table-hanzi,
.page:is(.design-classic,.design-modern) .vocab-plain-hanzi{color:var(--vocab-hanzi-color,#000000)!important}
.page:is(.design-classic,.design-modern) .vocab-table-pinyin,
.page:is(.design-classic,.design-modern) .vocab-plain-pinyin-only{color:var(--vocab-pinyin-color,#000000)!important}
.page:is(.design-classic,.design-modern) .vocab-table-english,
.page:is(.design-classic,.design-modern) .vocab-plain-english{color:var(--vocab-english-color,#000000)!important}

/* Vocabulary Hanzi should read like normal workbook text, not a bold label. */
.page .vocab-table-hanzi,
.page .vocab-plain-hanzi{font-weight:400!important}

.page:is(.design-classic,.design-modern) .order-row .chunk{
  border-color:#AEB6BF!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
.page:is(.design-classic,.design-modern) .match-item{border-bottom-color:#C7CDD3!important}
.page:is(.design-classic,.design-modern) .match-item .num,
.page:is(.design-classic,.design-modern) .sent .num,
.page:is(.design-classic,.design-modern) .dict-row .num,
.page:is(.design-classic,.design-modern) .order-row .num{font-family:var(--sans)!important;color:#000!important}
.page:is(.design-classic,.design-modern) .dialogue-turn,
.page:is(.design-classic,.design-modern) .dialogue-order-turn{
  border-color:#C7CDD3!important;border-radius:0!important;background:#fff!important;box-shadow:none!important
}
.page:is(.design-classic,.design-modern) .page-continued{
  padding-bottom:5px!important;margin-bottom:14px!important;border:0!important;border-bottom:1px solid var(--quiet-line)!important;
  border-radius:0!important;background:transparent!important;font-family:var(--sans)!important;font-size:9px!important;
  letter-spacing:.04em!important;color:#000!important
}
.page:is(.design-classic,.design-modern) .page-footer{
  left:15mm!important;right:15mm!important;bottom:7mm!important;text-align:right!important;
  font-family:var(--sans)!important;font-size:8px!important;font-weight:500!important;letter-spacing:.08em!important;color:#000!important
}


/* Workbook typography refinement — regular hierarchy, lighter rules */
.page:is(.design-classic,.design-modern){
  --quiet-line:#D8DDE2;
  --quiet-line-soft:#EEF0F2;
  --quiet-line-strong:#C5CBD1
}

/* Task hierarchy: fixed square number, regular title. The number is independent of language-size controls. */
.page .q-head{
  font-family:var(--block-hanzi-font,var(--worksheet-font))!important;
  font-weight:400!important
}
.page:is(.design-classic,.design-modern) .q-head .task-prefix,
.page.design-friendly .q-head .task-prefix{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:21px!important;min-width:21px!important;height:21px!important;padding:0!important;
  border:1px solid var(--quiet-line-strong,#C5CBD1)!important;border-radius:0!important;
  background:#fff!important;box-shadow:none!important;color:#000!important;
  font-family:var(--sans)!important;font-size:10px!important;font-weight:400!important;line-height:1!important;
  letter-spacing:.03em!important;white-space:nowrap!important
}

/* Inner item numbers remain a neutral fixed UI size when Hanzi / Pinyin / English sizes change. */
.page .match-item .num,
.page .sent .num,
.page .dict-row .num,
.page .order-row .num{
  font-family:var(--sans)!important;font-size:10.5px!important;font-weight:400!important;
  line-height:1.25!important;color:#000!important
}

/* No visual divider between tasks. Spacing alone separates sections. */
.page .q-divider{display:none!important;margin:0!important;border:0!important}

/* Hanzi Search target text and grid Hanzi are normal-weight workbook text. */
.page .wordsearch-cell,
.page .wordsearch-target-list b{font-weight:400!important}

/* Lighter structural rules across the quiet workbook designs. */
.page:is(.design-classic,.design-modern) .page-header{border-bottom-color:var(--quiet-line-strong)!important}
.page:is(.design-classic,.design-modern) .info-row .fl-blank{border-bottom-color:var(--quiet-line-strong)!important}
.page:is(.design-classic,.design-modern) .score-corner{border-color:var(--quiet-line-strong)!important}
.page:is(.design-classic,.design-modern) .q-head{border-bottom-color:var(--quiet-line-strong)!important}
.page:is(.design-classic,.design-modern) .q-instruction{border-left-color:var(--quiet-line-strong)!important}
.page:is(.design-classic,.design-modern) .word-bank,
.page:is(.design-classic,.design-modern) .wb-chip,
.page:is(.design-classic,.design-modern) .vocab-table,
.page:is(.design-classic,.design-modern) .vocab-table-cell,
.page:is(.design-classic,.design-modern) .order-row .chunk,
.page:is(.design-classic,.design-modern) .dialogue-turn,
.page:is(.design-classic,.design-modern) .dialogue-order-turn,
.page:is(.design-classic,.design-modern) .wordsearch-grid,
.page:is(.design-classic,.design-modern) .wordsearch-cell,
.page:is(.design-classic,.design-modern) .tf,
.page:is(.design-classic,.design-modern) .order-sequence-circle,
.page:is(.design-classic,.design-modern) .dialogue-number-circle,
.page:is(.design-classic,.design-modern) .freeform-blank-area,
.page:is(.design-classic,.design-modern) .freeform-line,
.page:is(.design-classic,.design-modern) .tzg-cell{
  border-color:var(--quiet-line-strong)!important
}
.page:is(.design-classic,.design-modern) .match-item{border-bottom-color:var(--quiet-line)!important}
.page:is(.design-classic,.design-modern) .blank,
.page:is(.design-classic,.design-modern) .translate-lines .ln,
.page:is(.design-classic,.design-modern) .speech-lines .ln,
.page:is(.design-classic,.design-modern) .order-write-line,
.page:is(.design-classic,.design-modern) .dialogue-blank-line,
.page:is(.design-classic,.design-modern) .dialogue-inline-blank{
  border-color:var(--quiet-line-strong)!important
}
.page:is(.design-classic,.design-modern) .tzg-cell::before{border-left-color:var(--quiet-line)!important}
.page:is(.design-classic,.design-modern) .tzg-cell::after{border-top-color:var(--quiet-line)!important}
.page:is(.design-classic,.design-modern) .page-continued{border-bottom-color:var(--quiet-line)!important}

/* Let the worksheet's Hanzi font choice handle Chinese in titles/instructions; Latin still falls back to sans. */
.page:is(.design-classic,.design-modern) .page-header .title,
.page:is(.design-classic,.design-modern) .page-header .subtitle,
.page:is(.design-classic,.design-modern) .q-instruction,
.page:is(.design-classic,.design-modern) .q-instruction .english-text{
  font-family:var(--worksheet-font)!important
}


/* Workbook follow-up — task spacing, regular points, hollow Matching dots */
/* The divider remains visually absent but becomes a proportional spacer between tasks. */
.page:is(.design-classic,.design-modern) .q-divider{
  display:block!important;
  visibility:hidden!important;
  height:calc(var(--block-gap,16px) * 1.5)!important;
  margin:0!important;
  padding:0!important;
  border:0!important
}

/* Points are supporting metadata, not a bold heading. */
.page:is(.design-classic,.design-modern) .q-head .pts{
  font-family:var(--sans)!important;
  font-weight:400!important
}

/* Matching connection points should be hollow circles in every column layout. */
.page:is(.design-classic,.design-modern) .match-dot{
  width:8px!important;
  height:8px!important;
  border:1px solid #000!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important
}

/* Workbook follow-up — clearer space between instruction and question content. */
.page:is(.design-classic,.design-modern) .q-instruction{
  margin-bottom:calc(var(--instr-margin,10px) * 1.5)!important
}

/* Workbook follow-up — inner question numbers align with the first text line as language size grows. */
.page .sent,
.page .dict-row,
.page .order-row{
  align-items:baseline!important
}
.page .sent .num,
.page .dict-row .num,
.page .order-row .num{
  align-self:baseline!important;
  margin-top:0!important
}

/* Workbook follow-up — exact control-panel English typography. */
.page:is(.design-classic,.design-modern) .q-block,
.page:is(.design-classic,.design-modern) .q-body{
  font-family:var(--sans)!important
}
.page:is(.design-classic,.design-modern) .q-body .english-text,
.page:is(.design-classic,.design-modern) .q-body .flashcard-english,
.page:is(.design-classic,.design-modern) .q-body .flashcard-pinyin,
.page:is(.design-classic,.design-modern) .q-body .pinyin-text{
  font-family:var(--sans)!important
}
/* Task titles use the mixed stack: UI sans for Latin, FangSong fallback for Hanzi. */
.page:is(.design-classic,.design-modern) .q-head{
  font-family:var(--worksheet-font)!important
}

/* Workbook follow-up — structural English typography matches the control panel. */
.page:is(.design-classic,.design-modern) .info-row .fl-label,
.page:is(.design-classic,.design-modern) .score-corner,
.page:is(.design-classic,.design-modern) .q-head .pts,
.page:is(.design-classic,.design-modern) .q-head .task-prefix,
.page:is(.design-classic,.design-modern) .page-continued,
.page:is(.design-classic,.design-modern) .page-footer{
  font-family:var(--sans)!important
}
.page:is(.design-classic,.design-modern) .info-row .fl-label,
.page:is(.design-classic,.design-modern) .score-corner,
.page:is(.design-classic,.design-modern) .q-head .pts{
  text-transform:uppercase!important
}

/* ===== styles/mandarinbench-panel-resizer.css ===== */
/* MandarinBench Studio — restore the native Worksheet left/canvas resize control.
 * The existing Worksheet resizer owns pointer/keyboard behavior and local persistence.
 */
@media screen and (min-width:901px){
  .main{
    grid-template-columns:var(--controls-width,340px) var(--space-3,10.2px) minmax(0,1fr)!important;
  }

  aside.controls{
    width:var(--controls-width,340px)!important;
    min-width:var(--controls-width,340px)!important;
    max-width:var(--controls-width,340px)!important;
  }

  .panel-resizer{
    display:block!important;
    position:relative!important;
    top:auto!important;
    width:var(--space-3,10.2px)!important;
    min-width:var(--space-3,10.2px)!important;
    max-width:var(--space-3,10.2px)!important;
    height:100%!important;
    flex:0 0 var(--space-3,10.2px)!important;
    align-self:stretch!important;
    z-index:60!important;
    cursor:col-resize!important;
    touch-action:none!important;
    background:var(--color-bg,#f2f2f3)!important;
    border:0!important;
    border-right:1px solid var(--color-divider,rgba(29,31,32,.16))!important;
    outline:none!important;
  }

  .panel-resizer::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border:0!important;
    background:transparent!important;
  }

  .panel-resizer:hover::before,
  .panel-resizer:focus-visible::before,
  .panel-resizer.dragging::before{
    background:var(--color-accent-100,#eef6ff)!important;
  }

  .panel-resizer:focus-visible{
    outline:2px solid var(--color-accent,#5980a6)!important;
    outline-offset:-2px!important;
  }

  .panel-resizer-grip{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:var(--space-6,20.4px)!important;
    height:var(--space-page-2,54.4px)!important;
    border:1px solid var(--color-divider,rgba(29,31,32,.16))!important;
    border-radius:0!important;
    background:var(--color-paper,#fff)!important;
    color:var(--color-neutral-600,#7a7a7d)!important;
    font:500 16px/1 var(--font-latin,"Barlow",sans-serif)!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  .panel-resizer:hover .panel-resizer-grip,
  .panel-resizer:focus-visible .panel-resizer-grip,
  .panel-resizer.dragging .panel-resizer-grip{
    border-color:var(--color-accent,#5980a6)!important;
    color:var(--color-accent-700,#416180)!important;
  }
}

@media screen and (min-width:901px) and (max-width:1180px){
  .preview-toolbar{
    left:calc(var(--controls-width,340px) + var(--space-3,10.2px))!important;
  }
}

@media screen and (max-width:900px){
  .panel-resizer{display:none!important}
}

@media print{
  .panel-resizer{display:none!important}
}