/* Shared learning workspace. This final layer replaces the older illustrated shells. */
:root {
  --accent: #167567;
  --accent-dark: #105e54;
  --ink: #202a31;
  --dark: #202a31;
  --muted: #6c7780;
  --line: #e3e8eb;
  --paper: #ffffff;
  --white: #ffffff;
  --soft: #edf7f4;
  --blue: #376da0;
  --red: #b45158;
  --shadow: 0 8px 28px #202a310b;
  --field-border: #dce3e7;
  --field-text: #202a31;
  --field-muted: #8a949c;
  --field-accent: #167567;
  --field-active: #edf7f4;
  --workspace-nav-width: 0px;
  --workspace-header-height: 64px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}

html { scroll-padding-top: 86px; }
html body { min-width: 0; margin: 0; color: var(--ink); background: #fff; font-family: Inter, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", Arial, sans-serif; }
html body :is(button,input,select,textarea) { font-family: inherit; }
html body.home-mode, html body.home-mode #app { height: auto; min-height: 100dvh; overflow: visible; }
html body :is(h1,h2,h3,h4,strong,small,.en,.eyebrow,.brand-name) { letter-spacing: 0; }
html body :is(h1,h2,h3,h4) { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
html body h1 { font-size: 25px; line-height: 1.5; }
html body h2 { font-size: 19px; line-height: 1.6; }
html body h3 { font-size: 15px; line-height: 1.65; }
html body :is(button,a,input,textarea,select,summary):focus-visible {
  outline: 2px solid #376da0 !important;
  outline-offset: 3px;
}
html body :is(input,textarea,select) {
  min-height: 42px;
  padding: 10px 12px;
  border-color: var(--field-border) !important;
  border-radius: 6px !important;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
}
html body :is(input,textarea,select):focus { border-color: #7baaa6 !important; }
html body input::placeholder, html body textarea::placeholder { color: #8a949c; }
html body label { color: #4e5d68; font-size: 12px; font-weight: 500; }
html body .hb-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
}
html body .hb-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .hb-select-chevron { flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; }
html body .hb-select-trigger:focus-visible { outline: 2px solid #376da0 !important; outline-offset: 3px; }
html body .hb-select-menu { border-radius: 6px; background: #fff; color: var(--ink); box-shadow: 0 8px 30px #202a3114; }
html body .shell, html body.home-mode .shell {
  display: block;
  height: auto;
  min-height: 100dvh;
  padding-left: var(--workspace-nav-width);
  background: #fff;
}
html body .workspace-body { width: 100%; min-width: 0; }

/* Navigation occupies a stable track; the document owns vertical scrolling. */
html body .workspace-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: var(--workspace-nav-width);
  padding: 0 13px 18px;
  border-right: 1px solid var(--line);
  background: #f8fafb;
  overflow-y: auto;
}
html body .workspace-nav .brand,
html body .workspace-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--workspace-header-height);
  margin: 0 0 22px;
  padding: 0 10px;
  color: var(--ink);
}
html body .workspace-nav .brand-symbol { width: 34px; height: 34px; flex-basis: 34px; }
html body .workspace-nav .brand-image { width: 40px; height: 34px; object-fit: contain; background: transparent; }
html body .workspace-nav .brand-name strong { font-size: 19px; }
html body .workspace-nav .brand-name small { font-size: 10px; color: var(--muted); }
html body .workspace-nav-group { display: grid; gap: 4px; margin-bottom: 20px; }
html body .workspace-nav-brand > img { display: block; flex: 0 0 42px; width: 42px; height: 34px; object-fit: contain; }
html body .workspace-nav-brand > span { display: grid; gap: 3px; }
html body .workspace-nav-brand strong { color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.5; }
html body .workspace-nav-brand small { color: #8a989f; font-size: 10px; line-height: 1.3; }
html body .workspace-nav-group > :is(p,h2,h3,small,.workspace-nav-label,.workspace-nav-caption) {
  margin: 0 12px 6px;
  color: #8b959e;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
}
html body .workspace-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  color: #5b6974;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
}
html body .workspace-nav-link .icon { width: 18px; height: 18px; color: #80909b; stroke-width: 1.65; }
html body .workspace-nav-link :is(small,.nav-count) { margin-left: auto; color: #80909b; font-size: 10px; }
html body .workspace-nav-link:hover { color: var(--ink); background: #edf1f4; }
html body .workspace-nav-link:is(.active,[aria-current="page"]) { color: var(--accent-dark); background: #e8f3ef; font-weight: 600; }
html body .workspace-nav-link:is(.active,[aria-current="page"]) .icon { color: var(--accent); }
html body .workspace-nav-footer { margin-top: auto; padding: 18px 12px 0; border-top: 1px solid var(--line); color: #8b959e; font-size: 10px; line-height: 1.8; }
html body .workspace-nav-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
html body .workspace-learner { display: flex; align-items: center; gap: 10px; margin: 16px 12px 0; padding: 15px 0 0; border-top: 1px solid var(--line); }
html body .workspace-learner > div { display: grid; gap: 3px; min-width: 0; }
html body .workspace-learner strong { color: #5d7480; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
html body .workspace-learner small { color: #96a6af; font-size: 9px; }
html body .workspace-mobile-nav { display: none; }
html body .shell .topbar, html body.home-mode .topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  flex: none;
  border-bottom: 1px solid var(--line);
  background: #fff;
  backdrop-filter: none;
}
html body .shell .topbar-inner, html body.home-mode .topbar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: auto;
  min-height: var(--workspace-header-height);
  max-width: none;
  padding: 11px 34px;
}
html body .topbar .brand { display: flex; flex-shrink: 0; }
html body .topbar .breadcrumb { display: flex; min-width: 0; flex: 1; font-size: 12px; gap: 10px; }
html body .topbar .breadcrumb strong { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
html body .topbar .top-actions { gap: 16px; margin-left: auto; min-width: 0; }
html body .personal-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #53616c;
  font-size: 12px;
}
html body .personal-entry:hover { color: var(--accent); background: transparent; }
html body .avatar { width: 29px; height: 29px; border-radius: 50%; background: #e8eef4; color: #376da0; font-size: 11px; }
html body .language-switch { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafb; }
html body .language-switch :is(button,a) { min-width: 34px; min-height: 26px; padding: 4px 8px; border: 0; border-radius: 4px; color: #7a8791; background: transparent; font-size: 11px; line-height: 1.5; }
html body .language-switch :is(button,a):is(.active,[aria-pressed="true"]) { color: var(--ink); background: #fff; box-shadow: 0 1px 3px #202a3112; }
html body .language-switch .icon { width: 15px; height: 15px; margin-left: 6px; color: #80909b; }
html body .language-switch > select { width: 84px; height: 28px; min-height: 28px; padding: 3px 7px; border: 0; border-radius: 4px !important; background: transparent; color: #556b77; font-size: 11px; line-height: 1.5; cursor: pointer; }
html body .language-switch .hb-select-trigger { min-height: 30px; padding: 3px 8px; border: 0; background: transparent; font-size: 11px; }
html body .top-actions .login-button { min-height: 32px; padding: 7px 12px; font-size: 11px; }

/* Commands, headings, and sections share the same restrained geometry. */
html body .shell.workspace-shell .main[class], html body.home-mode .main.page-home,
html body.home-mode:has(.generation-home.has-generation) .main.page-home {
  display: block;
  position: relative;
  flex: none;
  width: 100%;
  max-width: 1240px;
  min-height: calc(100dvh - var(--workspace-header-height));
  margin: 0 auto;
  padding: 32px 36px 28px;
  background: #fff;
  outline: none;
}
html body .shell.workspace-shell .main[class] :is(.btn,.auth-submit) {
  gap: 8px;
  min-height: 39px;
  padding: 9px 15px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  background: var(--accent);
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  transform: none;
  transition: background 140ms ease;
}
html body .shell.workspace-shell .main[class] :is(.btn,.auth-submit):hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .btn.secondary { color: #54636f; background: #fff; border-color: #dce3e7; }
html body .shell.workspace-shell .main[class] .btn.secondary:hover { color: var(--ink); background: #f6f8fa; border-color: #cbd6dc; }
html body .shell.workspace-shell .main[class] .btn.soft { color: var(--accent-dark); background: #edf7f4; border-color: #edf7f4; }
html body .shell.workspace-shell .main[class] .btn.small { min-height: 32px; padding: 6px 11px; font-size: 11px; }
html body .shell.workspace-shell .main[class] .btn .icon { width: 16px; height: 16px; }
html body .shell.workspace-shell .main[class] .link-btn { color: var(--accent); font-size: 12px; }
html body .shell.workspace-shell .main[class] .pill { padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; color: #70808d; background: #f8fafb; font-size: 10px; }
html body .shell.workspace-shell .main[class] .pill.accent { color: var(--accent-dark); background: #edf7f4; border-color: #dceee7; }
html body .shell.workspace-shell .main[class] .pill.blue { color: var(--blue); background: #eff5fc; border-color: #dfeaf6; }
html body .shell.workspace-shell .main[class] .page-head { align-items: center; gap: 20px; margin: 0 0 27px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .page-heading { display: flex; gap: 0; align-items: center; min-width: 0; }
html body .shell.workspace-shell .main[class] .page-illustration { display: none; }
html body .shell.workspace-shell .main[class] .page-head h1 { font-size: 25px; line-height: 1.5; }
html body .shell.workspace-shell .main[class] .page-head p { max-width: 640px; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .eyebrow { color: #88959f; font-size: 10px; line-height: 1.6; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .section-heading { margin: 26px 0 16px; gap: 16px; align-items: center; }
html body .shell.workspace-shell .main[class] .section-heading h2 { font-size: 16px; line-height: 1.7; }
html body .shell.workspace-shell .main[class] .panel { padding: 23px 0; margin-bottom: 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .panel > :is(h2,h3) { margin-bottom: 16px; }
html body .shell.workspace-shell .main[class] .panel > p { font-size: 13px; line-height: 1.95; }
html body .shell.workspace-shell .main[class] .panel + .panel { border-top: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] details.panel { padding: 20px 0; border-top: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] details.panel > summary { min-height: 26px; color: #455563; font-size: 14px; font-weight: 500; }
html body .shell.workspace-shell .main[class] details.panel[open] > summary { margin-bottom: 18px; }
html body .shell.workspace-shell .main[class] .notice { margin: 19px 0; padding: 13px 16px; border: 1px solid #dfeaf4; border-radius: 6px; color: #5a748d; background: #f4f8fc; font-size: 12px; line-height: 1.9; }
html body .shell.workspace-shell .main[class] .notice p { font-size: 12px; line-height: 1.9; }
html body .shell.workspace-shell .main[class] .empty { display: block; max-width: none; padding: 56px 24px; border: 1px dashed #dce4e9; border-radius: 6px; background: #fafcfd; box-shadow: none; }
html body .shell.workspace-shell .main[class] .empty > :is(svg,.hub-art,.hub-image,.empty-art) { display: none; }
html body .shell.workspace-shell .main[class] .empty-mark { width: 34px; height: 34px; margin-bottom: 14px; border-radius: 6px; background: #eff5fc; color: #64829c; font-size: 22px; }
html body .shell.workspace-shell .main[class] .empty p { margin: 10px auto 20px; color: var(--muted); font-size: 12px; }
html body .shell.workspace-shell .main[class] .empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
html body .shell.workspace-shell .main[class] .footer { margin-top: 34px; padding: 20px 0 0; border-top: 1px solid var(--line); color: #94a0a9; font-size: 10px; }
html body .shell.workspace-shell .main[class] .footer button { font-size: 10px; color: #7e8d97; }

/* Creation is an immediately usable tool, with topic imagery at thumbnail scale. */
html body .shell.workspace-shell .main[class].page-home { max-width: 1110px; padding-top: 30px; }
html body .shell.workspace-shell .main[class] .generation-home,
html body .shell.workspace-shell .main[class] .generation-home.has-generation { display: flex; flex-direction: column; gap: 19px; width: 100%; max-width: 930px; min-height: 0; margin: 0 auto; }
html body .shell.workspace-shell .main[class] .workspace-head { position: static; display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; margin: 0 0 27px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .workspace-title { color: var(--ink); font-size: 23px; font-weight: 600; }
html body .shell.workspace-shell .main[class] .workspace-title strong { color: var(--ink); font-size: 23px; font-weight: 600; }
html body .shell.workspace-shell .main[class] .workspace-actions { display: flex; gap: 7px; flex-shrink: 0; }
html body .shell.workspace-shell .main[class] .workspace-actions button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; color: #637481; background: #fff; font-size: 11px; box-shadow: none; }
html body .shell.workspace-shell .main[class] .workspace-actions button:hover { background: #f6f9fb; color: var(--ink); }
html body .shell.workspace-shell .main[class] .workspace-actions .icon { width: 15px; height: 15px; }
html body .shell.workspace-shell .main[class] .generation-stage,
html body .shell.workspace-shell .main[class] .generation-home.has-generation .generation-stage { display: block; flex: none; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
html body .shell.workspace-shell .main[class] .generation-welcome { display: block; width: 100%; margin: 0 0 2px; padding: 0; text-align: left; }
html body .shell.workspace-shell .main[class] .generation-welcome h1 { color: var(--ink); font-size: 21px; line-height: 1.6; font-weight: 500; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .generation-welcome p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.85; }
html body .shell.workspace-shell .main[class] :is(.studio-emblem,.home-mascot,.workspace-art) { display: none; }
html body .shell.workspace-shell .main[class] .generation-composer,
html body .shell.workspace-shell .main[class] .generation-home.has-generation .generation-composer { position: relative; flex: none; min-height: 168px; margin: 0; padding: 21px 23px 17px; border: 1px solid #ccd8dd; border-radius: 8px; background: #fff; box-shadow: 0 3px 14px #202a3104; }
html body .shell.workspace-shell .main[class] .generation-composer::before { display: none; }
html body .shell.workspace-shell .main[class] .generation-composer:focus-within { border-color: #7baaa6; }
html body .shell.workspace-shell .main[class] .generation-composer textarea { display: block; width: 100%; height: 84px; min-height: 84px; max-height: 220px; margin: 0; padding: 0; border: 0; border-radius: 0 !important; background: transparent; color: var(--ink); box-shadow: none; font-size: 15px; line-height: 1.9; resize: vertical; outline: none !important; }
html body .shell.workspace-shell .main[class] .composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0 0; border-top: 1px solid #f0f3f5; }
html body .shell.workspace-shell .main[class] .composer-settings { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
html body .shell.workspace-shell .main[class] .composer-level { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #647581; font-size: 11px; line-height: 1.6; }
html body .shell.workspace-shell .main[class] .composer-level .hb-select { width: 73px; }
html body .shell.workspace-shell .main[class] .composer-level .hb-select-trigger { min-height: 29px; padding: 4px 8px; border-color: var(--line); border-radius: 4px; background: #f8fafb; font-size: 11px; }
html body .shell.workspace-shell .main[class] .composer-cost { color: #9a6e45; font-size: 10px; }
html body .shell.workspace-shell .main[class] .generation-send { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 120px; min-height: 36px; padding: 8px 13px; border: 1px solid var(--accent); border-radius: 5px; color: #fff; background: var(--accent); font-size: 12px; font-weight: 500; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .generation-send:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
html body .shell.workspace-shell .main[class] .generation-send:disabled { color: #91a29f; background: #edf2f1; border-color: #edf2f1; opacity: 1; }
html body .shell.workspace-shell .main[class] .generation-send .icon { width: 16px; height: 16px; }
html body .shell.workspace-shell .main[class] .composer-error { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #f1dbdd; color: var(--red); font-size: 12px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .suggestion-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; width: 100%; margin: 4px 0 0; }
html body .shell.workspace-shell .main[class] .topic-suggestion { position: static; display: flex; align-items: center; justify-content: flex-start; gap: 11px; min-width: 0; height: 81px; min-height: 81px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; color: #54636f; background: #fff; box-shadow: none; text-align: left; transform: none; transition: border-color 140ms ease; }
html body .shell.workspace-shell .main[class] .topic-suggestion:hover { border-color: #95b8ad; background: #fafdfb; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .topic-suggestion .suggestion-image { position: static; display: block; flex: 0 0 46px; width: 46px; height: 46px; margin: 0; object-fit: contain; opacity: 1; filter: none; transform: none; }
html body .shell.workspace-shell .main[class] .suggestion-copy { display: block; min-width: 0; padding: 0; }
html body .shell.workspace-shell .main[class] .suggestion-copy strong { color: #54636f; font-size: 12px; font-weight: 500; line-height: 1.7; }
html body .shell.workspace-shell .main[class] .workspace-footnote { min-height: 20px; margin: 0; padding: 0; text-align: left; }
html body .shell.workspace-shell .main[class] .workspace-footnote p { color: #8b979f; font-size: 11px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .reference-preview { display: inline-flex; gap: 5px; padding: 0; color: var(--blue); font-size: 11px; }
html body .shell.workspace-shell .main[class] .generation-history { position: static; inset: auto; z-index: auto; width: 100%; max-width: none; max-height: none; margin: -20px 0 8px; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; box-shadow: none; }
html body .shell.workspace-shell .main[class] .history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0; }
html body .shell.workspace-shell .main[class] .history-head strong { color: #52616d; font-size: 12px; font-weight: 500; }
html body .shell.workspace-shell .main[class] .close-history { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 4px; color: #8a969f; background: #f7f9fa; }
html body .shell.workspace-shell .main[class] .generation-history-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 236px; overflow: auto; }
html body .shell.workspace-shell .main[class] .history-item { min-width: 0; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; text-align: left; }
html body .shell.workspace-shell .main[class] .history-item:hover, html body .shell.workspace-shell .main[class] .history-item[aria-pressed="true"] { border-color: #9bbcaf; background: #f4faf7; }
html body .shell.workspace-shell .main[class] .history-item strong { display: block; color: #455663; font-size: 12px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .shell.workspace-shell .main[class] .history-item > span { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; color: #94a0a8; font-size: 10px; line-height: 1.6; }
html body .shell.workspace-shell .main[class] .history-status { margin-left: auto; font-weight: 400; font-size: 10px; color: #66899e; }
html body .shell.workspace-shell .main[class] .history-status.done { color: var(--accent); }
html body .shell.workspace-shell .main[class] .history-empty { grid-column: 1/-1; padding: 18px 0; color: #7a8a95; text-align: left; font-size: 12px; }
html body .shell.workspace-shell .main[class] .history-empty .icon { display: none; }
html body .shell.workspace-shell .main[class] .history-empty .btn { margin-left: 12px; }
html body .shell.workspace-shell .main[class] .generation-home.has-generation :is(.generation-composer,.suggestion-row,.workspace-footnote) { display: none; }
html body .shell.workspace-shell .main[class] .generation-thread { display: block; width: 100%; height: auto; max-height: none; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
html body .shell.workspace-shell .main[class] .generation-project { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
html body .shell.workspace-shell .main[class] .generation-project-head { gap: 20px; align-items: flex-start; }
html body .shell.workspace-shell .main[class] .generation-project-head h1 { color: var(--ink); font-size: 22px; line-height: 1.6; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .project-eyebrow { color: #8a969f; font-size: 10px; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .project-level { padding: 5px 8px; border: 1px solid #dfeaf6; border-radius: 4px; background: #f4f8fc; color: var(--blue); font-size: 11px; }
html body .shell.workspace-shell .main[class] .course-progress { margin: 24px 0 0; padding: 23px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .course-progress-head { gap: 14px; align-items: flex-start; }
html body .shell.workspace-shell .main[class] .course-progress-head h2 { color: var(--ink); font-size: 18px; line-height: 1.6; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] :is(.progress-orbit,.progress-artwork,.progress-eyebrow,.progress-context) { display: none; }
html body .shell.workspace-shell .main[class] .progress-badge { padding: 4px 8px; border: 1px solid #dceee7; border-radius: 4px; background: #edf7f4; color: var(--accent); font-size: 10px; }
html body .shell.workspace-shell .main[class] .progress-overview { margin: 17px 0 12px; gap: 15px; }
html body .shell.workspace-shell .main[class] .progress-stage-count strong { color: var(--ink); font-size: 25px; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .progress-stage-count > span, html body .shell.workspace-shell .main[class] .progress-current-label { color: #7f8c96; font-size: 11px; }
html body .shell.workspace-shell .main[class] .progress-track { height: 4px; border-radius: 2px; background: #edf1f4; }
html body .shell.workspace-shell .main[class] .progress-track > i { border-radius: 2px; background: var(--accent); box-shadow: none; }
html body .shell.workspace-shell .main[class] .progress-pipeline { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin: 18px 0 0; }
html body .shell.workspace-shell .main[class] .progress-step,
html body .shell.workspace-shell .main[class] .generation-home.has-generation .progress-step:not(.is-active),
html body .shell.workspace-shell .main[class] .course-progress[data-state="done"] .progress-step { display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: start; gap: 7px; min-height: 94px; padding: 12px 8px; border: 0; border-radius: 4px; background: #f8fafb; animation: none; }
html body .shell.workspace-shell .main[class] .progress-step-index { width: 23px; height: 23px; margin: 0; border: 1px solid #dce4e9; border-radius: 50%; background: #fff; color: #96a1a9; font-size: 10px; }
html body .shell.workspace-shell .main[class] .progress-step-index::after { display: none; }
html body .shell.workspace-shell .main[class] .progress-step-copy strong { color: #768590; font-size: 11px; font-weight: 500; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .progress-step-copy p { display: none; }
html body .shell.workspace-shell .main[class] .progress-step-state { display: block; grid-column: 2; margin: 0; color: #94a0a8; font-size: 10px; }
html body .shell.workspace-shell .main[class] .progress-step.is-active { background: #eff5fc; }
html body .shell.workspace-shell .main[class] .progress-step.is-active .progress-step-index { background: var(--blue); border-color: var(--blue); color: #fff; }
html body .shell.workspace-shell .main[class] .progress-step.is-active :is(.progress-step-copy strong,.progress-step-state) { color: var(--blue); }
html body .shell.workspace-shell .main[class] .progress-step.is-done .progress-step-index { background: #e4f2ec; border-color: #e4f2ec; color: var(--accent); }
html body .shell.workspace-shell .main[class] .progress-step.is-done .progress-step-copy strong { color: var(--accent-dark); }
html body .shell.workspace-shell .main[class] .progress-step.is-failed { background: #fcf1f2; }
html body .shell.workspace-shell .main[class] .progress-step.is-failed .progress-step-index { color: var(--red); background: #fae7e9; border-color: #fae7e9; }
html body .shell.workspace-shell .main[class] .progress-footer { margin-top: 15px; padding-top: 12px; border-top: 0; }
html body .shell.workspace-shell .main[class] .progress-footer p { color: #75848f; font-size: 11px; }
html body .shell.workspace-shell .main[class] .progress-status-indicator { background: var(--accent); width: 5px; height: 5px; animation: none; }
html body .shell.workspace-shell .main[class] .generation-result { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 22px; margin-top: 23px; padding: 23px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .generation-result > img { display: block; width: 128px; height: 128px; min-height: 0; border-radius: 6px; object-fit: contain; background: #fafbfc; }
html body .shell.workspace-shell .main[class] .result-copy { padding: 0; gap: 8px; }
html body .shell.workspace-shell .main[class] .result-copy > span { color: var(--accent); font-size: 10px; }
html body .shell.workspace-shell .main[class] .result-copy h2 { color: var(--ink); font-size: 19px; line-height: 1.6; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .result-chapters { gap: 10px; flex-wrap: wrap; }
html body .shell.workspace-shell .main[class] .result-chapters a { color: #708491; font-size: 10px; }
html body .shell.workspace-shell .main[class] .result-copy .btn { justify-self: start; align-self: start; margin-top: 4px; min-height: 36px; font-size: 11px; }
html body .shell.workspace-shell .main[class] :is(.result-usage,.generation-background-note,.result-details) { color: #89959e; font-size: 10px; }
html body .shell.workspace-shell .main[class] .generation-failure { margin-top: 20px; padding: 15px; border: 1px solid #f0dce0; border-radius: 6px; background: #fdf6f7; }
html body .shell.workspace-shell .main[class] .generation-error { color: var(--red); font-size: 12px; }

/* The next learning action and plan share one unframed secondary band. */
html body .shell.workspace-shell .main[class] .learning-next { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 34px; width: 100%; max-width: 930px; margin: 35px auto 0; padding: 25px 0 0; border-top: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .learning-next > :is(h2,h3) { grid-column: 1/-1; margin-bottom: -12px; font-size: 15px; }
html body .shell.workspace-shell .main[class] .learning-next :is(.continue-learning,.learning-plan) { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .learning-next :is(h2,h3) { margin-bottom: 16px; color: #5c717e; font-size: 13px; font-weight: 500; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .continue-lesson { display: grid; grid-template-columns: 57px minmax(0,1fr) 13px; align-items: center; gap: 12px; min-height: 70px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; }
html body .shell.workspace-shell .main[class] .continue-lesson > img { width: 57px; height: 58px; border-radius: 4px; object-fit: contain; background: #fafbfc; }
html body .shell.workspace-shell .main[class] .continue-lesson > span { display: grid; gap: 5px; min-width: 0; }
html body .shell.workspace-shell .main[class] .continue-lesson strong { color: #4e6876; font-size: 12px; font-weight: 500; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .continue-lesson small { color: #8c9faa; font-size: 10px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .continue-lesson > .icon { width: 13px; height: 13px; color: #9aaeb9; }
html body .shell.workspace-shell .main[class] .continue-lesson:hover strong { color: var(--accent); }
html body .shell.workspace-shell .main[class] .learning-plan-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
html body .shell.workspace-shell .main[class] .learning-plan-step { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 40px; padding: 6px 0; color: #6b8492; font-size: 11px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .learning-plan-step > :is(b,i,.step-number,.learning-step-number) { display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 23px; border: 1px solid #dce8f1; border-radius: 50%; background: #f2f7fc; color: var(--blue); font-size: 10px; font-style: normal; font-weight: 400; }
html body .shell.workspace-shell .main[class] .learning-plan-step > span { min-width: 0; color: #6b8492; font-size: 11px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .learning-plan-step > span > strong { display: block; color: #5e7988; font-size: 11px; font-weight: 500; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .learning-plan-step > span > small { display: block; color: #9aabb5; font-size: 9px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .learning-plan-step > .icon { width: 12px; height: 12px; margin-left: auto; color: #b3c0c8; }
html body .shell.workspace-shell .main[class] :is(.learning-plan-objective,.learning-plan-evidence) { margin-top: 10px; color: #8b9da8; font-size: 10px; line-height: 1.9; }
html body .shell.workspace-shell .main[class] .learning-plan-objective { color: #6d8491; }
html body .shell.workspace-shell .main[class] .learning-next:has(.learning-plan):not(:has(.continue-learning)) { grid-template-columns: minmax(0,1fr); }
html body .shell.workspace-shell .main[class] .setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 43px; padding: 7px 0; color: #647e8c; font-size: 12px; font-weight: 400; }
html body .shell.workspace-shell .main[class] .setting-toggle > span { display: grid; gap: 3px; }
html body .shell.workspace-shell .main[class] .setting-toggle small { color: #95a6b0; font-size: 10px; }
html body .shell.workspace-shell .main[class] .setting-toggle input[type="checkbox"] { flex: 0 0 32px; width: 32px; min-width: 32px; height: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }

/* Catalog items retain their relevant cultural images, with compact copy. */
html body .shell.workspace-shell .main[class] .discovery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 30px; }
html body .shell.workspace-shell .main[class] .topic-tile { display: grid; grid-template-columns: 60px minmax(0,1fr) 14px; grid-template-rows: auto auto; gap: 3px 13px; align-items: center; min-height: 90px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: none; text-align: left; transform: none; }
html body .shell.workspace-shell .main[class] .topic-tile img { grid-column: 1; grid-row: 1/3; width: 60px; height: 60px; border-radius: 4px; object-fit: contain; background: #fafbfc; }
html body .shell.workspace-shell .main[class] .topic-tile strong { grid-column: 2; align-self: end; color: var(--ink); font-size: 12px; font-weight: 500; }
html body .shell.workspace-shell .main[class] .topic-tile > span { grid-column: 2; align-self: start; color: #8d99a2; font-size: 10px; }
html body .shell.workspace-shell .main[class] .topic-tile > .icon { grid-column: 3; grid-row: 1/3; width: 13px; height: 13px; color: #9aabb4; }
html body .shell.workspace-shell .main[class] .topic-tile:hover { border-color: #a0bbb4; background: #fbfdfc; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .filter-bar { display: flex; gap: 11px; margin-bottom: 22px; }
html body .shell.workspace-shell .main[class] .filter-bar input { flex: 1; min-width: 0; }
html body .shell.workspace-shell .main[class] .filter-bar .hb-select { width: 195px; }
html body .shell.workspace-shell .main[class] .card-grid { gap: 17px; grid-template-columns: repeat(3,minmax(0,1fr)); }
html body .shell.workspace-shell .main[class] .course-card { border: 1px solid var(--line); border-radius: 7px; background: #fff; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .course-card:hover { border-color: #afc6bd; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .card-art { height: 145px; background: #f8fafb; }
html body .shell.workspace-shell .main[class] .card-art .lesson-visual { height: 145px; min-height: 0; background: #f8fafb; }
html body .shell.workspace-shell .main[class] .card-art .topic-image { object-fit: contain; }
html body .shell.workspace-shell .main[class] .card-art .pill { top: 10px; left: 10px; padding: 4px 7px; background: #ffffffed; color: #557382; font-size: 9px; }
html body .shell.workspace-shell .main[class] .course-card-body { padding: 17px; }
html body .shell.workspace-shell .main[class] .card-kicker { margin-bottom: 6px; color: #8b979f; font-size: 10px; }
html body .shell.workspace-shell .main[class] .course-card h3 { color: var(--ink); font-size: 14px; line-height: 1.7; font-weight: 500; }
html body .shell.workspace-shell .main[class] .course-card p { margin: 7px 0 12px; color: #86939e; font-size: 11px; }
html body .shell.workspace-shell .main[class] .card-footer { border-color: var(--line); padding-top: 12px; gap: 10px; font-size: 10px; color: #8b99a3; }
html body .shell.workspace-shell .main[class] .card-footer .link-btn { font-size: 10px; }

/* Account and operational sections are unframed bands rather than large tiles. */
html body .shell.workspace-shell .main[class].page-account { max-width: 1180px; padding-top: 32px; }
html body .shell.workspace-shell .main[class] .account-overview { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 26px; padding: 0 0 24px; border-bottom: 1px solid var(--line); background: transparent; }
html body .shell.workspace-shell .main[class] .account-profile { gap: 13px; }
html body .shell.workspace-shell .main[class] .account-avatar { width: 44px; height: 44px; border: 1px solid #dde7f0; border-radius: 8px; background: #eff5fc; color: var(--blue); font-size: 20px; }
html body .shell.workspace-shell .main[class] .account-person h1 { font-size: 24px; color: var(--ink); letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .account-person p { margin-top: 4px; color: #7b8992; font-size: 12px; }
html body .shell.workspace-shell .main[class] .account-profile-actions { gap: 9px; }
html body .shell.workspace-shell .main[class] .account-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin: 0 0 30px; border-bottom: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .account-summary-item { min-height: 88px; padding: 6px 24px 22px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .account-summary-item + .account-summary-item { padding-left: 26px; border-left: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .account-summary-item > span { color: #81909b; font-size: 11px; }
html body .shell.workspace-shell .main[class] .account-summary-item > strong { color: var(--ink); font-size: 25px; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .account-summary-item strong small { color: #89979f; font-size: 10px; }
html body .shell.workspace-shell .main[class] .account-summary-item > .icon { color: #a3b0b8; width: 14px; height: 14px; }
html body .shell.workspace-shell .main[class] .account-summary-item:hover { color: var(--accent); background: transparent; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .account-section { margin-bottom: 27px; }
html body .shell.workspace-shell .main[class] .account-section .section-heading { margin: 0 0 14px; }
html body .shell.workspace-shell .main[class] .account-section .section-heading h2 { color: #495b67; font-size: 14px; font-weight: 500; }
html body .shell.workspace-shell .main[class] .account-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 25px; }
html body .shell.workspace-shell .main[class] .account-tile { display: grid; grid-template-columns: minmax(0,1fr) 14px; gap: 9px; align-items: center; min-height: 69px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .account-tile-art { display: none; }
html body .shell.workspace-shell .main[class] .account-tile-copy { grid-column: 1; gap: 4px; }
html body .shell.workspace-shell .main[class] .account-tile-copy strong { color: #4e626f; font-size: 13px; line-height: 1.7; letter-spacing: 0; font-weight: 500; }
html body .shell.workspace-shell .main[class] .account-tile-copy span { color: #95a1a9; font-size: 10px; }
html body .shell.workspace-shell .main[class] .account-tile > .icon { grid-column: 2; color: #94a7b3; width: 14px; height: 14px; transform: none; }
html body .shell.workspace-shell .main[class] .account-tile:hover { background: transparent; border-color: #95b8ad; box-shadow: none; transform: none; }
html body .shell.workspace-shell .main[class] .account-tile:hover .account-tile-copy strong { color: var(--accent); }
html body .shell.workspace-shell .main[class] .account-utilities { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .account-utility-list { gap: 7px 19px; }
html body .shell.workspace-shell .main[class] .account-utility-list > :is(a,button) { min-height: 34px; padding: 6px 0; border-radius: 4px; color: #7d8a93; font-size: 11px; }
html body .shell.workspace-shell .main[class] .account-utility-list > :is(a,button):hover { color: var(--accent); background: transparent; }
html body .shell.workspace-shell .main[class] .account-utility-list [data-action="logout"] { color: #a87357; }
html body .shell.workspace-shell .main[class] .stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0 0 30px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .stat { min-width: 0; padding: 0 23px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .stat:first-child { padding-left: 0; }
html body .shell.workspace-shell .main[class] .stat:last-child { border-right: 0; }
html body .shell.workspace-shell .main[class] .stat span { color: #8b98a1; font-size: 11px; }
html body .shell.workspace-shell .main[class] .stat strong { margin-top: 10px; color: var(--ink); font-size: 29px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] :is(.settings-grid,.classroom-grid) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; }
html body .shell.workspace-shell .main[class] .settings-grid > .panel, html body .shell.workspace-shell .main[class] .classroom-grid > .panel { padding-top: 0; }
html body .shell.workspace-shell .main[class] .form-stack { gap: 17px; }
html body .shell.workspace-shell .main[class] .form-stack > .btn { align-self: start; justify-self: start; margin-top: 4px; }
html body .shell.workspace-shell .main[class] .list-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .list-row h3 { font-size: 13px; color: #485e6b; }
html body .shell.workspace-shell .main[class] .list-row p { margin-top: 5px; color: #8b99a3; font-size: 11px; }
html body .shell.workspace-shell .main[class] .balance-card { display: flex; align-items: center; min-height: 130px; margin-bottom: 24px; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .balance-card > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
html body .shell.workspace-shell .main[class] .balance-card span { width: 100%; color: #86949e; font-size: 11px; }
html body .shell.workspace-shell .main[class] .balance-card strong { color: var(--ink); font-size: 38px; line-height: 1.5; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .balance-card small { color: #9aabb4; font-size: 12px; }
html body .shell.workspace-shell .main[class] .balance-art { display: none; }
html body .shell.workspace-shell .main[class] .package { padding: 22px; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
html body .shell.workspace-shell .main[class] .package h3 { color: #576b78; font-size: 14px; }
html body .shell.workspace-shell .main[class] .price { display: block; margin: 15px 0 7px; color: var(--ink); font-size: 28px; line-height: 1.5; }
html body .shell.workspace-shell .main[class] .token-count { color: var(--blue); font-size: 12px; }
html body .shell.workspace-shell .main[class] .table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
html body .shell.workspace-shell .main[class] table { width: 100%; border-collapse: collapse; background: #fff; color: #536773; font-size: 12px; }
html body .shell.workspace-shell .main[class] th { padding: 12px 14px; background: #f8fafb; color: #8a97a1; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 500; }
html body .shell.workspace-shell .main[class] td { padding: 13px 14px; border-bottom: 1px solid #edf1f3; line-height: 1.8; }
html body .shell.workspace-shell .main[class] tbody tr:last-child td { border-bottom: 0; }
html body .shell.workspace-shell .main[class] .progress-bar { height: 4px; background: #edf1f4; }
html body .shell.workspace-shell .main[class] .progress-bar i { background: var(--accent); }

/* Lesson controls remain compact; Chinese prose keeps generous reading rhythm. */
html body .shell.workspace-shell .main[class].page-lesson { max-width: 1250px; }
html body .shell.workspace-shell .main[class] .lesson-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 23px; margin: 0 0 22px; padding: 0; border: 0; }
html body .shell.workspace-shell .main[class] .lesson-heading { min-width: 0; padding: 0; }
html body .shell.workspace-shell .main[class] .lesson-origin { display: inline-block; margin-bottom: 8px; color: var(--accent); font-size: 10px; }
html body .shell.workspace-shell .main[class] .lesson-title .eyebrow { display: none; }
html body .shell.workspace-shell .main[class] .lesson-title h1 { max-width: 730px; color: var(--ink); font-family: inherit; font-size: 25px; line-height: 1.65; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .lesson-title .en { margin-top: 7px; color: #8c99a3; font-size: 11px; }
html body .shell.workspace-shell .main[class] .lesson-levels { flex-shrink: 0; }
html body .shell.workspace-shell .main[class] .lesson-level-note { color: #8c99a3; font-size: 10px; }
html body .shell.workspace-shell .main[class] .level-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9fa; }
html body .shell.workspace-shell .main[class] .level-switch button { min-height: 29px; padding: 6px 8px; border-radius: 4px; color: #82919b; font-size: 10px; }
html body .shell.workspace-shell .main[class] .level-switch button.active { color: var(--accent); background: #fff; box-shadow: 0 1px 4px #202a3108; }
html body .shell.workspace-shell .main[class] .lesson-overview { display: flex; align-items: center; gap: 16px; padding: 14px 0; margin: 0 0 15px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
html body .shell.workspace-shell .main[class] .lesson-progress-summary { display: flex; gap: 10px; align-items: center; white-space: nowrap; color: #7e8d98; font-size: 10px; }
html body .shell.workspace-shell .main[class] .lesson-progress-summary strong { color: #536c79; font-size: 11px; font-weight: 500; }
html body .shell.workspace-shell .main[class] .lesson-progress-track { flex: 1; max-width: 250px; height: 3px; background: #edf1f4; border-radius: 2px; }
html body .shell.workspace-shell .main[class] .lesson-progress-track i { background: var(--accent); border-radius: 2px; }
html body .shell.workspace-shell .main[class] .lesson-current-section { margin-left: auto; color: #8b99a3; font-size: 10px; }
html body .shell.workspace-shell .main[class] .tabs { position: static; display: flex; gap: 0; margin: 0 0 18px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; overflow-x: auto; scrollbar-width: thin; }
html body .shell.workspace-shell .main[class] .tab { position: relative; flex: 1 0 auto; min-width: 105px; min-height: 46px; padding: 12px 10px; border: 0; border-radius: 0; color: #7d8c97; background: transparent; font-size: 12px; box-shadow: none; }
html body .shell.workspace-shell .main[class] .tab > .icon { width: 16px; height: 16px; color: #93a2ad; }
html body .shell.workspace-shell .main[class] .tab.active { color: var(--accent); background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
html body .shell.workspace-shell .main[class] .tab.active > .icon { color: var(--accent); }
html body .shell.workspace-shell .main[class] .tab-complete { width: 13px; height: 13px; color: var(--accent); }
html body .shell.workspace-shell .main[class] .lesson-layout { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
html body .shell.workspace-shell .main[class] .lesson-tools { order: -1; width: 100%; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 5px; background: #fafcfd; }
html body .shell.workspace-shell .main[class] .lesson-tools > summary { display: flex; align-items: center; min-height: 40px; padding: 10px 13px; color: #718391; font-size: 11px; }
html body .shell.workspace-shell .main[class] .lesson-tools > summary > span { display: inline; margin-left: 0; color: #718391; font-size: 11px; }
html body .shell.workspace-shell .main[class] .lesson-tools > summary::after { color: #92a2ad; }
html body .shell.workspace-shell .main[class] .lesson-tools-content { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 22px; padding: 17px; border-top: 1px solid var(--line); background: #fff; }
html body .shell.workspace-shell .main[class] .lesson-tools .panel { margin: 0; padding: 0; border: 0; }
html body .shell.workspace-shell .main[class] .lesson-tools h3 { color: #586d7a; font-size: 12px; }
html body .shell.workspace-shell .main[class] .lesson-tools .btn { min-height: 34px; padding: 8px 9px; font-size: 10px; }
html body .shell.workspace-shell .main[class] .lesson-tools label { color: #7c8f9b; font-size: 10px; }
html body .shell.workspace-shell .main[class] .lesson-tools .hb-select-trigger { min-height: 35px; padding: 6px 10px; font-size: 11px; }
html body .shell.workspace-shell .main[class] #lesson-content {
  --lesson-ink: #202a31;
  --lesson-copy: #4d606c;
  --lesson-muted: #84949f;
  --lesson-line: #e3e8eb;
  --lesson-paper: #f8fafb;
  --lesson-teal: #167567;
  --lesson-green: #edf7f4;
  --lesson-red: #b45158;
  --accent: #167567;
  --accent-dark: #105e54;
  --blue: #376da0;
  --red: #b45158;
  width: 100%;
  min-width: 0;
  flex: none;
  align-self: stretch;
  scroll-margin-top: 90px;
}
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .panel { padding: 24px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .panel + .panel { border-top: 1px solid var(--line); }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .panel h2 { color: var(--ink); font-size: 19px; line-height: 1.6; letter-spacing: 0; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content h3 { color: #4b626f; font-size: 15px; letter-spacing: 0; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .lesson-body { max-width: 880px; margin-left: auto; margin-right: auto; }
html body .shell.workspace-shell .main[class] .article-figure { max-width: 580px; margin: 22px auto 28px; border: 0; border-radius: 6px; background: #fafbfc; }
html body .shell.workspace-shell .main[class] .lesson-visual.large { aspect-ratio: 16/7; min-height: 0; max-height: 245px; background: #fafbfc; }
html body .shell.workspace-shell .main[class] .lesson-visual.large .topic-image { object-fit: contain; }
html body .shell.workspace-shell .main[class] .article-figure figcaption { padding: 10px 12px; background: #fafbfc; color: #90a0aa; font-size: 9px; }
html body .shell.workspace-shell .main[class] .article-figure figcaption span { display: none; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .article-paragraph { margin: 26px 0; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .zh-text { color: #344a57; font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; font-size: 20px; line-height: 2.35; letter-spacing: 0; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .translation { margin-top: 11px; color: #8998a3; font-size: 12px; line-height: 1.95; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .pinyin-line { color: #8196a5; font-size: 12px; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word { color: var(--accent); border-bottom-color: #9cc7b9; background: transparent; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .glossary-word:hover { background: #edf7f4; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
html body .shell.workspace-shell .main[class] :is(.vocab-card,.question) { padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: none; }
html body .shell.workspace-shell .main[class].page-lesson #lesson-content :is(.vocab-card,.question) { padding: 20px; border-color: var(--line); border-radius: 6px; }
html body .shell.workspace-shell .main[class] .vocab-title strong { color: var(--ink); font-size: 23px; font-weight: 500; }
html body .shell.workspace-shell .main[class] .vocab-card p { color: #657c8a; font-size: 12px; line-height: 1.9; }
html body .shell.workspace-shell .main[class] .vocab-actions { margin-top: 17px; padding-top: 12px; border-color: var(--line); }
html body .shell.workspace-shell .main[class] .vocab-actions button { min-height: 28px; color: #78909e; font-size: 10px; }
html body .shell.workspace-shell .main[class] .tone-1 { color: #b18140; }
html body .shell.workspace-shell .main[class] .tone-2 { color: #376da0; }
html body .shell.workspace-shell .main[class] .tone-3 { color: #8d639e; }
html body .shell.workspace-shell .main[class] .tone-4 { color: #b45158; }
html body .shell.workspace-shell .main[class] .grammar-formula { padding: 16px 19px; border-radius: 5px; color: var(--blue); background: #f1f6fc; font-size: 20px; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .english-tip { border-left: 2px solid #a4c0de; border-radius: 0; background: #f8fafc; color: #7a91a3; font-size: 12px; }
html body .shell.workspace-shell .main[class] .writing-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 34px; }
html body .shell.workspace-shell .main[class] #writing-draft { border: 1px solid var(--line); border-radius: 6px !important; background: #fff; font-size: 16px; line-height: 2; }
html body .shell.workspace-shell .main[class] .scaffolds { border: 1px solid var(--line); border-radius: 5px; padding: 12px 15px; color: #697f8d; background: #fafcfd; font-size: 12px; }
html body .shell.workspace-shell .main[class] .scaffolds summary { color: #5e7786; font-size: 12px; }
html body .shell.workspace-shell .main[class] .chapter-end { gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); color: #8798a3; font-size: 11px; }
html body .shell.workspace-shell .main[class] .chapter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
html body .shell.workspace-shell .main[class] .score-ring { width: 105px; height: 105px; margin: 20px auto; background: conic-gradient(var(--accent) calc(var(--score)*1%),#eef2f4 0); }
html body .shell.workspace-shell .main[class] .score-ring > div { width: 91px; height: 91px; color: var(--ink); font-size: 29px; }
html body .shell.workspace-shell .main[class] .score-ring small { color: #8b9da7; font-size: 9px; }
html body .shell.workspace-shell .main[class] .dimension p { color: #8b9ba6; font-size: 11px; }
html body .shell.workspace-shell .main[class] .question { margin-bottom: 17px; }
html body .shell.workspace-shell .main[class] .question-num { width: 27px; height: 27px; border-radius: 5px; color: var(--blue); background: #eff5fc; font-size: 11px; }
html body .shell.workspace-shell .main[class] .question-head h3 { color: #4c6573; font-size: 14px; }
html body .shell.workspace-shell .main[class] .option { min-height: 43px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 5px; color: #536d7b; background: #fff; font-size: 13px; }
html body .shell.workspace-shell .main[class] .option:hover { background: #f5f9fc; border-color: #b3cadb; }
html body .shell.workspace-shell .main[class] .option:is(.correct,.selected) { background: #edf7f4; border-color: #a0c8b8; color: var(--accent); }
html body .shell.workspace-shell .main[class] .option.wrong { border-color: #e6bfc5; background: #fdf4f6; color: var(--red); }
html body .shell.workspace-shell .main[class] .feedback { padding: 13px 16px; border-radius: 5px; background: #edf7f4; color: var(--accent-dark); font-size: 12px; }
html body .shell.workspace-shell .main[class] .feedback.wrong { color: var(--red); background: #fdf4f6; }
html body .shell.workspace-shell .main[class] .match-item { min-height: 41px; border-radius: 5px; border-color: var(--line); color: #566f7c; background: #fff; font-size: 12px; }

/* Task forms and authentication use the same page canvas. */
html body .shell.workspace-shell .main[class] .flow-workspace { max-width: 820px; margin-bottom: 35px; animation: none; }
html body .shell.workspace-shell .main[class] .flow-workspace.wide { max-width: 1050px; }
html body .shell.workspace-shell .main[class] .flow-navigation { margin-bottom: 20px; }
html body .shell.workspace-shell .main[class] .flow-navigation > span { display: none; }
html body .shell.workspace-shell .main[class] .flow-surface { padding: 23px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .flow-workspace .modal-head h2 { color: var(--ink); font-size: 21px; line-height: 1.6; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .modal-actions { gap: 10px; border-color: var(--line); }
html body .shell.workspace-shell .main[class] :is(.task-atelier,.generation > img) { display: none; }
html body .shell.workspace-shell .main[class] .agent-path { padding: 17px 0; }
html body .shell.workspace-shell .main[class] .agent-node { border: 0; border-radius: 0; color: #78909e; background: transparent; }
html body .shell.workspace-shell .main[class] .tutor-stepper { gap: 20px; color: #8497a3; border-color: var(--line); font-size: 11px; }
html body .shell.workspace-shell .main[class] .tutor-pending { padding: 17px; border-radius: 6px; background: #eff5fc; color: var(--blue); }
html body .shell.workspace-shell .main[class] .tutor-pending p { color: #8499a9; }
html body .shell.workspace-shell .main[class] .tutor-result { border-color: var(--line); }
html body .shell.workspace-shell .main[class] .tutor-result h3 { color: #486774; font-size: 16px; }
html body .shell.workspace-shell .main[class] .saved-response { color: #516b78; font-size: 15px; line-height: 2; }
html body .shell.workspace-shell .main[class] .tutor-conversation { display: grid; gap: 0; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
html body .shell.workspace-shell .main[class] .tutor-conversation:empty { display: none; }
html body .shell.workspace-shell .main[class] .tutor-message { min-width: 0; margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .tutor-message:first-child { padding-top: 0; }
html body .shell.workspace-shell .main[class] .tutor-message > span { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #8fa0aa; font-size: 10px; line-height: 1.8; }
html body .shell.workspace-shell .main[class] .tutor-message.user > span { color: var(--blue); }
html body .shell.workspace-shell .main[class] .tutor-message.assistant > span { color: var(--accent); }
html body .shell.workspace-shell .main[class] .tutor-message > p { margin: 0; color: #4c6573; font-size: 16px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }
html body .shell.workspace-shell .main[class] .tutor-message.user > p { color: #738a98; font-size: 15px; }
html body .shell.workspace-shell .main[class] .tutor-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
html body .shell.workspace-shell .main[class] .tutor-suggestions .btn { min-height: 32px; max-width: 100%; padding: 6px 10px; border-color: #dce7ee; color: #6c8796; background: #fafcfd; font-size: 11px; line-height: 1.7; white-space: normal; text-align: left; }
html body .shell.workspace-shell .main[class] .tutor-suggestions .btn:hover { color: var(--blue); background: #f1f6fc; border-color: #bed2e2; }
html body .shell.workspace-shell .main[class] .tutor-question-form { gap: 13px; }
html body .shell.workspace-shell .main[class] .tutor-question-form label { color: #607b89; font-size: 12px; }
html body .shell.workspace-shell .main[class] .tutor-question-form textarea { min-height: 105px; color: #4e6a79; font-size: 15px; line-height: 1.9; }
html body .shell.workspace-shell .main[class] .tutor-sources { display: flex; flex-wrap: wrap; gap: 9px 18px; min-width: 0; margin-top: 10px; }
html body .shell.workspace-shell .main[class] .tutor-sources:empty { display: none; }
html body .shell.workspace-shell .main[class] .tutor-sources > a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 4px 0; color: #7595aa; font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
html body .shell.workspace-shell .main[class] .tutor-sources > a:hover { color: var(--blue); }
html body .shell.workspace-shell .main[class] .tutor-sources > a .icon { flex: 0 0 12px; width: 12px; height: 12px; transform: rotate(-45deg); }
html body .shell.workspace-shell .main[class]:has(.auth-flow) { max-width: 1040px; padding-top: 34px; padding-bottom: 40px; }
html body .shell.workspace-shell .main[class] .auth-flow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: start; min-height: 0; padding-top: 12px; color: var(--ink); }
html body .shell.workspace-shell .main[class] .auth-flow-intro { padding: 0; }
html body .shell.workspace-shell .main[class] .auth-flow-back { margin-bottom: 29px; color: #889aa6; font-size: 11px; }
html body .shell.workspace-shell .main[class] .auth-flow-art { display: none; }
html body .shell.workspace-shell .main[class] .auth-flow-brand { margin-bottom: 10px; color: var(--accent); font-size: 12px; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .auth-flow-intro h1 { color: var(--ink); font-size: 25px; line-height: 1.65; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .auth-flow-intro > p { margin-top: 10px; color: #7c909d; font-size: 12px; line-height: 1.9; }
html body .shell.workspace-shell .main[class] .auth-flow-intro-note { display: none; }
html body .shell.workspace-shell .main[class] .auth-flow-surface { padding: 0 0 0 32px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .auth-flow-form { gap: 18px; }
html body .shell.workspace-shell .main[class] .auth-flow-field { color: #657e8c; font-size: 12px; }
html body .shell.workspace-shell .main[class] .auth-flow-field :is(input,select,.hb-select-trigger) { height: 43px; min-height: 43px; border-color: #dce3e7; border-radius: 6px; color: var(--ink); background: #fff; font-size: 13px; }
html body .shell.workspace-shell .main[class] .auth-flow-field .hb-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body .shell.workspace-shell .main[class] .auth-password-field { height: 43px; border: 1px solid #dce3e7; border-radius: 6px; }
html body .shell.workspace-shell .main[class] .auth-password-field input { min-height: 41px; height: 41px; border: 0; border-radius: 0 !important; background: transparent; }
html body .shell.workspace-shell .main[class] .auth-password-toggle { color: #8da3b0; }
html body .shell.workspace-shell .main[class] .auth-password-toggle:hover { color: var(--blue); background: #f3f7fa; }
html body .shell.workspace-shell .main[class] .auth-flow-field > small { color: #8ca0ab; font-size: 10px; }
html body .shell.workspace-shell .main[class] .auth-flow-switch { color: #8ca0ab; border-color: var(--line); }
html body .shell.workspace-shell .main[class] .auth-flow-switch button { color: var(--blue); }
html body .shell.workspace-shell .main[class] .auth-steps { gap: 10px; margin-bottom: 25px; }
html body .shell.workspace-shell .main[class] .auth-steps li { color: #97a7b1; font-size: 10px; }
html body .shell.workspace-shell .main[class] .auth-steps li::after { background: var(--line); }
html body .shell.workspace-shell .main[class] .auth-steps li.active { color: var(--accent); }
html body .shell.workspace-shell .main[class] .auth-steps li.active > span { border-color: var(--accent); background: var(--accent); color: #fff; }
html body .shell.workspace-shell .main[class] .auth-welcome-credit { border-color: var(--line); }
html body .shell.workspace-shell .main[class] .auth-welcome-credit > strong { color: var(--blue); font-size: 17px; }
html body .shell.workspace-shell .main[class] .auth-complete h2 { color: var(--ink); font-size: 22px; }

/* Operations retain dense lists and visible selection rather than decorative tiles. */
html body .shell.workspace-shell .main[class].page-admin { --admin-ink: #202a31; --admin-muted: #83939e; --admin-line: #e3e8eb; --admin-accent: #167567; }
html body .shell.workspace-shell .main[class] .admin-console { color: var(--ink); font-size: 12px; }
html body .shell.workspace-shell .main[class] .admin-navigation { display: flex; gap: 0; margin-bottom: 25px; border-color: var(--line); overflow-x: auto; }
html body .shell.workspace-shell .main[class] .admin-nav-item { flex: 1 0 auto; min-height: 44px; padding: 10px 12px; color: #78909e; border-radius: 0; background: transparent; font-size: 11px; }
html body .shell.workspace-shell .main[class] .admin-nav-item.active { color: var(--accent); background: transparent; }
html body .shell.workspace-shell .main[class] .admin-nav-item.active::after { left: 9px; right: 9px; background: var(--accent); }
html body .shell.workspace-shell .main[class] .admin-stat-grid { gap: 0; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
html body .shell.workspace-shell .main[class] .admin-stat { min-height: 105px; padding: 7px 15px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html body .shell.workspace-shell .main[class] .admin-stat:last-child { border-right: 0; }
html body .shell.workspace-shell .main[class] .admin-stat:hover { background: #f8fafb; }
html body .shell.workspace-shell .main[class] .admin-stat > span { color: #8497a3; font-size: 10px; }
html body .shell.workspace-shell .main[class] .admin-stat > strong { margin: 13px 0 10px; color: var(--ink); font-size: 26px; letter-spacing: 0; }
html body .shell.workspace-shell .main[class] .admin-stat > small { color: #9aabb5; font-size: 9px; }
html body .shell.workspace-shell .main[class] .admin-section-heading h2 { color: var(--ink); font-size: 17px; }
html body .shell.workspace-shell .main[class] .admin-priority { padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
html body .shell.workspace-shell .main[class] .admin-priority-icon { color: var(--blue); background: #eff5fc; border-radius: 5px; }
html body .shell.workspace-shell .main[class] .admin-priority p { color: #8d9fa9; font-size: 11px; }
html body .shell.workspace-shell .main[class] .admin-priority > small { color: var(--accent); font-size: 10px; }
html body .shell.workspace-shell .main[class] .admin-usage { color: #8297a3; border-color: var(--line); }
html body .shell.workspace-shell .main[class] .admin-usage > strong { color: var(--ink); font-size: 14px; }
html body .shell.workspace-shell .main[class] .admin-role-guide { border-color: var(--line); border-radius: 6px; background: #fafcfd; }
html body .shell.workspace-shell .main[class] .admin-role-guide strong { color: #648094; }
html body .shell.workspace-shell .main[class] .admin-role-guide span { color: #8ba0ac; }
html body .shell.workspace-shell .main[class] .admin-search { border-color: var(--line); border-radius: 6px; color: #8ba0ac; }
html body .shell.workspace-shell .main[class] .admin-search input { min-height: 38px; color: var(--ink); }
html body .shell.workspace-shell .main[class] .admin-button { min-height: 32px; padding: 6px 10px; border-color: var(--line); border-radius: 5px; color: #708895; background: #fff; font-size: 11px; }
html body .shell.workspace-shell .main[class] .admin-button:hover { border-color: #abc2cc; background: #f6fafc; color: var(--ink); }
html body .shell.workspace-shell .main[class] .admin-button.primary { color: #fff; border-color: var(--accent); background: var(--accent); }
html body .shell.workspace-shell .main[class] .admin-button.danger { color: var(--red); border-color: #efdce0; }
html body .shell.workspace-shell .main[class] .admin-table-wrap { border-color: var(--line); border-radius: 6px; }
html body .shell.workspace-shell .main[class] .admin-table th { background: #f8fafb; color: #8ba0ac; font-size: 10px; }
html body .shell.workspace-shell .main[class] .admin-table td { color: #647f8e; border-color: #edf1f3; font-size: 11px; }
html body .shell.workspace-shell .main[class] :is(.admin-detail,.admin-editor,.admin-status,.admin-error,.admin-notice) { border-radius: 6px; }

@media (min-width: 1450px) {
  html body .shell.workspace-shell .main[class] { padding-top: 38px; }
  html body .shell.workspace-shell .main[class].page-home { padding-top: 38px; }
}

@media (max-width: 1200px) {
  :root { --workspace-nav-width: 198px; }
  html body .shell .topbar-inner { padding-left: 26px; padding-right: 26px; }
  html body .shell.workspace-shell .main[class], html body.home-mode .main.page-home { padding-left: 27px; padding-right: 27px; }
  html body .shell.workspace-shell .main[class] .discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body .shell.workspace-shell .main[class] .topic-tile { min-height: 82px; }
  html body .shell.workspace-shell .main[class] .topic-suggestion { gap: 7px; padding: 10px; }
  html body .shell.workspace-shell .main[class] .topic-suggestion .suggestion-image { width: 36px; height: 40px; flex-basis: 36px; }
  html body .shell.workspace-shell .main[class] .suggestion-copy strong { font-size: 11px; }
  html body .shell.workspace-shell .main[class] .card-grid, html body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body .shell.workspace-shell .main[class] .account-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body .shell.workspace-shell .main[class] .admin-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 0; }
  html body .shell.workspace-shell .main[class] .admin-stat:nth-child(3n) { border-right: 0; }
}

@media (max-width: 900px) {
  :root { --workspace-nav-width: 176px; }
  html body .workspace-nav { padding-left: 10px; padding-right: 10px; }
  html body .workspace-nav-link { gap: 8px; padding: 9px 10px; font-size: 12px; }
  html body .shell.workspace-shell .main[class] .suggestion-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body .shell.workspace-shell .main[class] .topic-suggestion { height: 73px; min-height: 73px; }
  html body .shell.workspace-shell .main[class] .topic-suggestion .suggestion-image { width: 43px; height: 43px; flex-basis: 43px; }
  html body .shell.workspace-shell .main[class] .suggestion-copy strong { font-size: 12px; }
  html body .shell.workspace-shell .main[class] .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px 0; }
  html body .shell.workspace-shell .main[class] .stat { padding-left: 20px; }
  html body .shell.workspace-shell .main[class] .stat:nth-child(odd) { padding-left: 0; }
  html body .shell.workspace-shell .main[class] .stat:nth-child(even) { border-right: 0; }
  html body .shell.workspace-shell .main[class] :is(.settings-grid,.classroom-grid,.writing-grid) { grid-template-columns: minmax(0,1fr); gap: 25px; }
  html body .shell.workspace-shell .main[class] .lesson-title { flex-direction: column; gap: 15px; }
  html body .shell.workspace-shell .main[class] .lesson-levels { align-items: flex-start; }
  html body .shell.workspace-shell .main[class] .lesson-tools-content { grid-template-columns: minmax(0,1fr); }
  html body .shell.workspace-shell .main[class] .progress-pipeline { grid-template-columns: minmax(0,1fr); gap: 4px; }
  html body .shell.workspace-shell .main[class] .progress-step,
  html body .shell.workspace-shell .main[class] .generation-home.has-generation .progress-step:not(.is-active),
  html body .shell.workspace-shell .main[class] .course-progress[data-state="done"] .progress-step { grid-template-columns: 23px minmax(0,1fr) auto; align-items: center; min-height: 43px; padding: 9px 11px; }
  html body .shell.workspace-shell .main[class] .progress-step-state { grid-column: 3; }
  html body .shell.workspace-shell .main[class] .progress-step-copy strong { font-size: 12px; }
  html body .shell.workspace-shell .main[class] .generation-history-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body .shell.workspace-shell .main[class] .learning-next { grid-template-columns: minmax(0,1fr); gap: 25px; }
  html body .shell.workspace-shell .main[class] .auth-flow { gap: 35px; }
  html body .shell.workspace-shell .main[class] .auth-flow-surface { padding-left: 24px; }
}

@media (max-width: 760px) {
  html body .shell.workspace-shell .main[class].page-admin .admin-table tr { padding: 13px 15px; border-radius: 6px; }
  html body .shell.workspace-shell .main[class].page-admin .admin-table td {
    display: grid;
    grid-template-columns: 96px minmax(0,1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #edf1f3;
    text-align: right;
    overflow-wrap: anywhere;
  }
  html body .shell.workspace-shell .main[class].page-admin .admin-table td::before {
    display: block;
    grid-column: 1;
    width: auto;
    min-width: 90px;
    max-width: none;
    margin: 0;
    color: #8b9faa;
    font-size: 11px;
    line-height: 1.8;
    text-align: left;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
  }
  html body .shell.workspace-shell .main[class].page-admin .admin-table td > * { min-width: 0; max-width: 100%; }
  html body .shell.workspace-shell .main[class].page-admin .admin-table td.admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 7px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  html body .shell.workspace-shell .main[class].page-admin .admin-table td.admin-actions::before { display: none; }
  html body .shell.workspace-shell .main[class].page-admin .admin-table :is(.admin-confirm-row td,td[colspan]) { display: block; padding: 10px 0; text-align: left; }
  html body .shell.workspace-shell .main[class].page-admin .admin-table :is(.admin-confirm-row td,td[colspan])::before { display: none; }
}

@media (max-width: 720px) {
  :root { --workspace-header-height: 58px; }
  html { scroll-padding-top: 76px; }
  html body .shell, html body.home-mode .shell { padding-left: 0; }
  html body .workspace-nav { display: none; }
  html body .shell .topbar, html body.home-mode .topbar { position: sticky; top: 0; }
  html body .shell .topbar-inner, html body.home-mode .topbar-inner { height: auto; min-height: 58px; gap: 12px; padding: 10px 17px; }
  html body .topbar .brand { display: flex; gap: 7px; margin: 0; padding: 0; }
  html body .topbar .brand-symbol { width: 29px; height: 29px; flex-basis: 29px; }
  html body .topbar .brand-image { width: 35px; height: 27px; object-fit: contain; background: transparent; }
  html body .topbar .brand-name strong { font-size: 17px; line-height: 1.5; letter-spacing: 0; }
  html body .topbar .brand-name small { display: none; }
  html body .topbar .breadcrumb { display: none; }
  html body .topbar .top-actions { gap: 10px; }
  html body .personal-entry-label { display: none; }
  html body .topbar .personal-entry { min-width: 28px; }
  html body .language-switch { min-height: 29px; }
  html body .language-switch :is(button,a) { min-width: 31px; min-height: 24px; padding: 3px 7px; font-size: 10px; }
  html body .workspace-mobile-nav { display: flex; position: sticky; top: 58px; z-index: 34; gap: 5px; padding: 6px 14px 7px; border-top: 1px solid #f1f4f6; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: #fff; }
  html body .workspace-mobile-nav::-webkit-scrollbar { display: none; }
  html body .workspace-mobile-nav .workspace-nav-link { flex: 0 0 auto; min-height: 30px; gap: 6px; padding: 6px 10px; border-radius: 4px; color: #7b8d99; font-size: 11px; white-space: nowrap; }
  html body .workspace-mobile-nav .workspace-nav-link .icon { width: 14px; height: 14px; }
  html body .workspace-mobile-nav .workspace-nav-link:is(.active,[aria-current="page"]) { color: var(--accent); background: #edf7f4; }
  html body .shell.workspace-shell .main[class], html body.home-mode .main.page-home,
  html body.home-mode:has(.generation-home.has-generation) .main.page-home { min-height: calc(100dvh - var(--workspace-header-height)); padding: 25px 20px 25px; }
  html body .shell.workspace-shell .main[class] .page-head { gap: 14px; margin-bottom: 22px; padding-bottom: 19px; }
  html body .shell.workspace-shell .main[class] .page-head h1 { font-size: 22px; }
  html body .shell.workspace-shell .main[class] .page-head > .btn { min-height: 34px; padding: 8px 10px; font-size: 11px; }
  html body .shell.workspace-shell .main[class] .workspace-head { margin-bottom: 18px; padding-bottom: 18px; }
  html body .shell.workspace-shell .main[class] .workspace-title, html body .shell.workspace-shell .main[class] .workspace-title strong { font-size: 21px; }
  html body .shell.workspace-shell .main[class] .workspace-actions button { gap: 5px; min-height: 31px; padding: 6px 8px; font-size: 10px; }
  html body .shell.workspace-shell .main[class] .generation-home, html body .shell.workspace-shell .main[class] .generation-home.has-generation { gap: 17px; }
  html body .shell.workspace-shell .main[class] .learning-next { margin-top: 29px; padding-top: 23px; }
  html body .shell.workspace-shell .main[class] .generation-welcome h1 { font-size: 20px; }
  html body .shell.workspace-shell .main[class] .generation-composer { padding: 18px 17px 15px; }
  html body .shell.workspace-shell .main[class] .generation-composer textarea { height: 90px; min-height: 90px; font-size: 14px; }
  html body .shell.workspace-shell .main[class] .composer-settings { gap: 9px; }
  html body .shell.workspace-shell .main[class] .composer-cost { font-size: 9px; }
  html body .shell.workspace-shell .main[class] .generation-send { min-width: 110px; padding: 8px 11px; font-size: 11px; }
  html body .shell.workspace-shell .main[class] .suggestion-row { gap: 10px; margin-top: 3px; }
  html body .shell.workspace-shell .main[class] .topic-suggestion { gap: 11px; min-height: 72px; height: 72px; padding: 10px 12px; }
  html body .shell.workspace-shell .main[class] .generation-history { margin-top: -10px; }
  html body .shell.workspace-shell .main[class] .course-progress[data-state="done"] .progress-pipeline { grid-template-columns: 1fr; }
  html body .shell.workspace-shell .main[class] .generation-result { grid-template-columns: 90px minmax(0,1fr); gap: 16px; }
  html body .shell.workspace-shell .main[class] .generation-result > img { width: 90px; height: 100px; }
  html body .shell.workspace-shell .main[class] .result-copy h2 { font-size: 17px; }
  html body .shell.workspace-shell .main[class] .account-overview { flex-wrap: wrap; gap: 17px; padding-bottom: 20px; }
  html body .shell.workspace-shell .main[class] .account-person h1 { font-size: 22px; }
  html body .shell.workspace-shell .main[class] .account-summary-item { min-height: 83px; padding-bottom: 19px; }
  html body .shell.workspace-shell .main[class] .account-summary-item + .account-summary-item { padding-left: 18px; }
  html body .shell.workspace-shell .main[class] .account-summary-item > strong { font-size: 22px; }
  html body .shell.workspace-shell .main[class] .account-grid { gap: 0 20px; }
  html body .shell.workspace-shell .main[class] .account-tile { min-height: 66px; padding: 15px 0; }
  html body .shell.workspace-shell .main[class] .account-tile-copy strong { font-size: 12px; }
  html body .shell.workspace-shell .main[class] .lesson-title h1 { font-size: 22px; }
  html body .shell.workspace-shell .main[class] .lesson-overview { gap: 11px; }
  html body .shell.workspace-shell .main[class] .lesson-progress-track { max-width: 130px; }
  html body .shell.workspace-shell .main[class] .lesson-current-section { font-size: 9px; }
  html body .shell.workspace-shell .main[class] .tab { min-width: 87px; font-size: 11px; }
  html body .shell.workspace-shell .main[class] .tab > .icon { width: 14px; height: 14px; }
  html body .shell.workspace-shell .main[class].page-lesson #lesson-content .panel { padding: 17px 0; }
  html body .shell.workspace-shell .main[class] .lesson-tools > summary { padding: 10px 12px; }
  html body .shell.workspace-shell .main[class] .lesson-tools-content { padding: 14px; }
  html body .shell.workspace-shell .main[class].page-lesson #lesson-content .zh-text { font-size: 19px; line-height: 2.25; }
  html body .shell.workspace-shell .main[class] .chapter-end { align-items: flex-start; }
  html body .shell.workspace-shell .main[class] .chapter-end .btn { min-height: 35px; padding: 8px 10px; font-size: 10px; }
  html body .shell.workspace-shell .main[class] .flow-surface { padding: 18px 0; }
  html body .shell.workspace-shell .main[class] .auth-flow { grid-template-columns: minmax(0,1fr); gap: 29px; }
  html body .shell.workspace-shell .main[class] .auth-flow-intro { text-align: left; }
  html body .shell.workspace-shell .main[class] .auth-flow-back { margin-bottom: 17px; }
  html body .shell.workspace-shell .main[class] .auth-flow-intro h1 { font-size: 24px; }
  html body .shell.workspace-shell .main[class] .auth-flow-surface { padding: 23px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  html body .shell.workspace-shell .main[class] .admin-priority-grid { grid-template-columns: 1fr; }
  html body .shell.workspace-shell .main[class] .admin-role-guide { grid-template-columns: 1fr; gap: 12px; }
  html body .shell.workspace-shell .main[class] .admin-toolbar { grid-template-columns: minmax(0,1fr) 130px 36px; }
  html body .shell.workspace-shell .main[class] .admin-toolbar > .admin-button:not(.icon-only) { grid-column: 1/3; grid-row: 2; justify-self: start; }
  html body .shell.workspace-shell .main[class] .admin-toolbar-simple { grid-template-columns: minmax(0,1fr) 36px; }
  html body .shell.workspace-shell .main[class] .admin-toolbar-simple > .admin-button:not(.icon-only) { grid-column: 1; }
}

@media (max-width: 480px) {
  html body .shell.workspace-shell .main[class], html body.home-mode .main.page-home,
  html body.home-mode:has(.generation-home.has-generation) .main.page-home { padding-left: 17px; padding-right: 17px; }
  html body .shell.workspace-shell .main[class] .card-grid, html body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-grid,
  html body .shell.workspace-shell .main[class] .collection-grid { grid-template-columns: minmax(0,1fr); }
  html body .shell.workspace-shell .main[class] .card-art, html body .shell.workspace-shell .main[class] .card-art .lesson-visual { height: 166px; }
  html body .shell.workspace-shell .main[class] .course-card-body { padding: 17px; }
  html body .shell.workspace-shell .main[class] .filter-bar { flex-wrap: wrap; }
  html body .shell.workspace-shell .main[class] .filter-bar input { flex-basis: 100%; }
  html body .shell.workspace-shell .main[class] .filter-bar .hb-select { width: 100%; }
  html body .shell.workspace-shell .main[class] .topic-tile { grid-template-columns: 39px minmax(0,1fr) 11px; gap: 3px 9px; padding: 11px; min-height: 77px; }
  html body .shell.workspace-shell .main[class] .topic-tile img { width: 39px; height: 49px; }
  html body .shell.workspace-shell .main[class] .topic-tile strong { font-size: 11px; }
  html body .shell.workspace-shell .main[class] .topic-tile > span { font-size: 9px; }
  html body .shell.workspace-shell .main[class] .workspace-actions button { width: 31px; padding: 7px; justify-content: center; }
  html body .shell.workspace-shell .main[class] .workspace-actions button span { display: none; }
  html body .shell.workspace-shell .main[class] .composer-bottom { align-items: flex-end; }
  html body .shell.workspace-shell .main[class] .composer-cost { display: none; }
  html body .shell.workspace-shell .main[class] .generation-composer { min-height: 167px; padding: 18px 16px 15px; }
  html body .shell.workspace-shell .main[class] .generation-send { min-width: 110px; }
  html body .shell.workspace-shell .main[class] .topic-suggestion { height: 67px; min-height: 67px; gap: 9px; padding: 9px 11px; }
  html body .shell.workspace-shell .main[class] .topic-suggestion .suggestion-image { width: 36px; height: 39px; flex-basis: 36px; }
  html body .shell.workspace-shell .main[class] .suggestion-copy strong { font-size: 11px; }
  html body .shell.workspace-shell .main[class] .generation-history-list { grid-template-columns: 1fr; max-height: 245px; }
  html body .shell.workspace-shell .main[class] .learning-plan-steps { grid-template-columns: minmax(0,1fr); gap: 2px; }
  html body .shell.workspace-shell .main[class] .learning-plan-step { min-height: 35px; }
  html body .shell.workspace-shell .main[class] .generation-project-head h1 { font-size: 20px; }
  html body .shell.workspace-shell .main[class] .course-progress-head h2 { font-size: 16px; }
  html body .shell.workspace-shell .main[class] .generation-result { grid-template-columns: minmax(0,1fr); }
  html body .shell.workspace-shell .main[class] .generation-result > img { width: 94px; height: 85px; }
  html body .shell.workspace-shell .main[class] .result-copy h2 { font-size: 18px; }
  html body .shell.workspace-shell .main[class] .stats-grid { margin-bottom: 23px; }
  html body .shell.workspace-shell .main[class] .stat strong { font-size: 26px; }
  html body .shell.workspace-shell .main[class] .account-summary-item > strong { font-size: 20px; }
  html body .shell.workspace-shell .main[class] .account-summary-item { padding-right: 14px; }
  html body .shell.workspace-shell .main[class] .account-summary-item + .account-summary-item { padding-left: 14px; }
  html body .shell.workspace-shell .main[class] .account-utility-list { gap: 8px 14px; }
  html body .shell.workspace-shell .main[class] .lesson-overview { flex-wrap: wrap; gap: 8px 13px; }
  html body .shell.workspace-shell .main[class] .lesson-current-section { margin-left: 0; }
  html body .shell.workspace-shell .main[class] .level-switch { gap: 2px; }
  html body .shell.workspace-shell .main[class] .level-switch button { padding-left: 8px; padding-right: 8px; font-size: 9px; }
  html body .shell.workspace-shell .main[class].page-lesson #lesson-content .zh-text { font-size: 18px; }
  html body .shell.workspace-shell .main[class] .article-figure { margin-top: 19px; margin-bottom: 23px; }
  html body .shell.workspace-shell .main[class] .chapter-end { display: flex; flex-direction: column; gap: 12px; }
  html body .shell.workspace-shell .main[class] .chapter-actions { width: 100%; justify-content: space-between; }
  html body .shell.workspace-shell .main[class] .vocab-card, html body .shell.workspace-shell .main[class].page-lesson #lesson-content .vocab-card { padding: 19px; }
  html body .shell.workspace-shell .main[class] .admin-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html body .shell.workspace-shell .main[class] .admin-stat:nth-child(3n) { border-right: 1px solid var(--line); }
  html body .shell.workspace-shell .main[class] .admin-stat:nth-child(even) { border-right: 0; }
  html body .shell.workspace-shell .main[class] .admin-stat > strong { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .shell *, html body .shell *::before, html body .shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Word-card reading text keeps the same comfortable size as the lesson. */
html body .shell.workspace-shell .main[class] .flow-workspace .modal .pinyin-line,
html body .shell.workspace-shell .main[class] .flow-workspace .modal .word-translation {
  font-size: 18px;
  line-height: 1.8;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
html body .shell.workspace-shell .main[class] .flow-workspace .modal .word-translation { color: var(--blue); }
@media (max-width: 480px) {
  html body .shell.workspace-shell .main[class] .flow-workspace .modal .pinyin-line,
  html body .shell.workspace-shell .main[class] .flow-workspace .modal .word-translation { font-size: 17px; }
}

/* Saved correction reasons belong beside each learner's existing evidence. */
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table-wrap { overflow: visible; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table { table-layout: fixed; font-size: 16px; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table :is(th,td) { font-size: 16px; line-height: 1.8; white-space: normal; overflow-wrap: anywhere; padding: 13px 10px; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(1) { width: 11%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(2) { width: 6%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(3) { width: 10%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(4) { width: 11%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(5) { width: 10%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(6) { width: 8%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(7) { width: 24%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table th:nth-child(8) { width: 20%; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table :is(.teacher-cell-detail,.teacher-recommendation,.teacher-row-actions .btn) { font-size: 15px; line-height: 1.8; }
html body .shell.workspace-shell .main[class].page-teacher :is(.teacher-common-errors-basis,.teacher-common-errors-empty,.teacher-common-errors-scope) { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors-basis { margin: 16px 0; color: var(--muted); }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors ul { list-style: none; padding: 0; margin: 0; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors li { display: grid; grid-template-columns: minmax(0,1fr); gap: 3px; padding: 8px 0; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors li + li { border-top: 1px solid var(--line); }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-error-reason { white-space: pre-wrap; overflow-wrap: anywhere; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors strong { color: var(--accent); font-size: 16px; font-weight: 500; }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors-scope { margin-top: 10px; color: var(--muted); }
html body .shell.workspace-shell .main[class].page-teacher .teacher-common-errors-empty { margin: 0; color: var(--muted); }
@media (max-width: 1100px) {
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table,
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table :is(tbody,tr,td) { display: block; width: 100%; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table thead { display: none; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table tbody { display: grid; gap: 16px; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table tbody tr { padding: 15px; border: 1px solid var(--line); border-radius: 10px; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td,
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table tbody tr:last-child td { display: flex; align-items: start; justify-content: space-between; gap: 15px; border: 0; border-bottom: 1px solid var(--line); padding: 11px 0; text-align: right; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td::before { content: attr(data-label); flex: 0 1 auto; min-width: 0; font-size: 15px; line-height: 1.8; white-space: normal; text-align: left; color: var(--muted); }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td:has(.btn) { flex-wrap: wrap; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td.teacher-common-errors-cell { display: block; text-align: left; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td.teacher-common-errors-cell::before { display: block; margin-bottom: 8px; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td:last-child { border-bottom: 0; }
  html body .shell.workspace-shell .main[class].page-teacher .teacher-learning-table td[colspan]::before { display: none; }
}