:root {
  /* ========================================================================
     旧版 token —— 保留,与现有 5600+ 行样式继续兼容
     ======================================================================== */
  --sidebar: #17202a;
  --ink: #17202a;
  --muted: #697586;
  --line: #d9e1ea;
  --bg: #f4f7fb;
  --panel: #ffffff;
  --accent: #1769aa;
  --accent-2: #00856f;
  --danger: #b42318;

  /* ========================================================================
     新版设计 Token (Phase 1 / 2026-05-05)
     新增组件请优先使用这些变量,旧组件保持不动
     ======================================================================== */

  /* --- 颜色:背景层 --- */
  --bg-page:      #f6f8fb;
  --bg-elevated:  #ffffff;
  --bg-subtle:    #eef2f7;          /* input 底色、tag 底色 */
  --bg-overlay:   rgba(15, 23, 42, 0.5);

  /* --- 颜色:文字层 --- */
  --ink-primary:   #0f172a;
  --ink-secondary: #475569;
  --ink-tertiary:  #94a3b8;
  --ink-on-brand:  #ffffff;

  /* --- 颜色:分割线 --- */
  --line-soft:    #e2e8f0;
  --line-strong:  #cbd5e1;

  /* --- 颜色:品牌主色(沿用原蓝,补全交互态)--- */
  --brand:        #1769aa;
  --brand-hover:  #155a93;
  --brand-active: #0f4577;
  --brand-soft:   #e0eaf5;
  --brand-on:     #ffffff;

  /* --- 颜色:语义 --- */
  --color-success:      #059669;
  --color-success-soft: #d1fae5;
  --color-warn:         #d97706;
  --color-warn-soft:    #fef3c7;
  --color-danger:       #dc2626;
  --color-danger-soft:  #fee2e2;
  --color-info:         #0284c7;
  --color-info-soft:    #e0f2fe;

  /* --- 间距(8 倍数尺度)--- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-10: 64px;

  /* --- 圆角 --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- 阴影(双层柔和)--- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, .04), 0 10px 15px rgba(15, 23, 42, .06);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, .06), 0 20px 40px rgba(15, 23, 42, .08);
  --shadow-xl: 0 20px 25px rgba(15, 23, 42, .08), 0 25px 50px rgba(15, 23, 42, .10);

  /* --- 字体:系统字体栈,自动按平台用 PingFang / 雅黑 UI / SF --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI",
               "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", monospace;

  /* --- 字重(供组件按需引用,不做全局批量替换)--- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  /* --- 动效 --- */
  --ease-out:    cubic-bezier(.4, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .6, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* --- iOS Safari 安全区 --- */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body.dialog-open {
  overflow: hidden;
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
}

.dialog-card {
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f4f7fb 0%, #eaf1fb 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(23, 32, 42, 0.12);
}

.login-brand {
  margin-bottom: 22px;
  font-weight: 800;
}

.login-card h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.login-card p {
  margin: 0 0 24px;
  color: var(--muted);
}

.login-tenant-card {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #d9e7fb;
  border-radius: 8px;
  background: #f7fbff;
}

.login-tenant-card__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.login-tenant-card strong {
  font-size: 15px;
}

.login-tenant-card small {
  color: var(--muted);
  line-height: 1.6;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.login-message {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.auth-user-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}

.auth-user-bar span {
  font-weight: 800;
}

.auth-user-bar small {
  color: var(--muted);
}

.auth-user-bar button {
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--ink);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  background: var(--sidebar);
  color: #fff;
  padding: 26px 22px;
}

.brand {
  font-weight: 700;
  margin-bottom: 32px;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-main {
  display: inline-block;
  font-size: 28px;
  letter-spacing: 0;
}

.brand-tail {
  display: inline-block;
  font-size: 16px;
  margin-left: 2px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.side-caption {
  color: #9fb1c5;
  font-size: 13px;
  margin: 18px 8px 8px;
}

.side-section {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  margin-top: 42px;
}

.muted-line {
  color: var(--muted);
  margin-top: 8px;
}

nav {
  display: grid;
  gap: 8px;
}

.nav-group {
  display: grid;
  gap: 6px;
}

.nav-parent {
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 800;
  padding: 11px 12px 8px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-parent:hover {
  background: rgba(255, 255, 255, 0.08);
}

.nav-parent.current-group {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-parent.current-group::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: #4ea1ff;
  box-shadow: 0 0 0 1px rgba(78, 161, 255, 0.12);
}

.nav-parent::after {
  content: "\25BE";
  color: #9fb1c5;
  font-size: 19px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.nav-group:not(.expanded) .nav-parent::after {
  transform: rotate(-90deg);
}

.nav-group.expanded .nav-parent::after {
  color: #4ea1ff;
}

.submenu {
  display: none;
  gap: 6px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.nav-group.expanded .submenu {
  display: grid;
}

.submenu a {
  position: relative;
  font-size: 14px;
  padding: 9px 10px;
}

nav a {
  color: #dce6ef;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 6px;
  font-weight: 700;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.submenu a.active {
  background: rgba(78, 161, 255, 0.18);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(78, 161, 255, 0.2);
}

.submenu a.active::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: rgba(120, 189, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(120, 189, 255, 0.08);
}

nav a.placeholder {
  color: #f4f8fd;
}

nav a.placeholder:hover {
  background: rgba(255, 255, 255, 0.08);
}

.page {
  margin-left: 260px;
  min-height: 100vh;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 18px;
  margin-bottom: 14px;
}

.topbar p {
  color: var(--muted);
  margin-top: 6px;
}

.status {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
}

.status.status-success {
  color: #067647;
  border-color: #a6f4c5;
  background: #ecfdf3;
}

.status.status-error {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}

.status.status-busy {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.notice {
  border: 1px solid #a7c7ff;
  background: #eef6ff;
  color: #1454a6;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 18px;
  line-height: 1.6;
}

.student-mobile-access {
  display: grid;
  gap: 10px;
}

.student-mobile-access strong {
  font-size: 16px;
}

.student-mobile-access p {
  margin: 0;
}

.student-mobile-urls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.student-mobile-url {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #bfd7ff;
  background: rgba(255, 255, 255, 0.96);
  color: #0f4f8c;
  font-weight: 700;
  word-break: break-all;
}

.student-mobile-url.muted {
  color: var(--muted);
  font-weight: 600;
}

.student-home-workspace {
  grid-template-columns: minmax(360px, 0.9fr) minmax(280px, 0.7fr);
}

.student-select-panel {
  min-width: 0;
}

.student-guide-panel {
  min-width: 0;
}

.student-guide-list {
  display: grid;
  gap: 14px;
}

.student-guide-list div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.student-guide-list strong {
  display: block;
  margin-bottom: 6px;
}

.student-stage-body {
  background: var(--bg);
  color: var(--ink);
}

.student-stage-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 18px;
}

.student-stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.student-stage-header p {
  color: var(--muted);
  margin-top: 6px;
}

.student-stage-card {
  display: grid;
  grid-template-rows: auto minmax(180px, 1fr) auto 108px auto 60px;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  min-height: 0;
}

.student-stage-label {
  margin: 0;
  font-weight: 700;
}

.student-stage-box {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  font: inherit;
  line-height: 1.6;
}

.student-stage-box[readonly] {
  background: #f8fafc;
}

.student-dialogue-box {
  resize: none;
  min-height: 0;
}

.student-hint-box {
  min-height: 96px;
  max-height: 96px;
  resize: none;
  color: #1454a6;
  font-weight: 700;
}

.student-input-box {
  min-height: 108px;
  resize: none;
}

.student-stage-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-stage-actions button {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.ghost-action {
  background: #e8eef5;
  color: #26415d;
}

.report-stage-page {
  max-width: 960px;
  margin: 0 auto;
}

.student-report-card {
  grid-template-rows: 1fr auto;
}

.student-report-view {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 16px;
  overflow: auto;
}

.student-report-view.empty {
  display: block;
  color: var(--muted);
}

.single-action {
  grid-template-columns: 1fr;
}

.course-page {
  padding: 0 0 42px;
}

.course-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.course-header h1 {
  font-size: 20px;
}

.course-header__main {
  min-width: 0;
}

.course-header p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
  line-height: 1.5;
  white-space: nowrap;
}

.course-header__action {
  flex: 0 0 108px;
  width: 108px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.course-header__action .icon-button,
.course-header__action .status {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.course-header__action .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
}

.icon-button {
  background: #fff;
  color: #41516a;
  border: 1px solid transparent;
  font-size: 17px;
}

.model-select-panel {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 0.42fr) minmax(160px, 0.3fr);
  align-items: end;
  gap: 14px;
  margin: 22px 32px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.model-fixed-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 22px 32px 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.model-fixed-panel strong {
  display: block;
  color: var(--ink);
  margin-bottom: 6px;
}

.model-fixed-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.model-fixed-panel .model-status {
  min-width: 280px;
  text-align: right;
}

.model-field label {
  margin-top: 0;
}

.model-field p {
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

.settings-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 16px;
  font-weight: 700;
  text-decoration: none;
}

.settings-link:hover {
  border-color: #9db8dd;
  color: var(--accent);
}

.model-status {
  grid-column: 1 / -1;
  min-height: 20px;
  color: var(--muted);
  line-height: 1.4;
}

.model-status.ok {
  color: #16703a;
}

.model-status.warn {
  color: #9a6200;
}

.course-page-status {
  margin: -6px 24px 16px;
}

.course-page-status:empty {
  display: none;
}

.test-detail {
  margin-top: 14px;
}

.test-summary {
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #f8fafc;
  padding: 10px 12px;
  color: #344054;
  font-weight: 700;
}

.test-summary.ok {
  background: #e9f8ee;
  border-color: #bce8c9;
  color: #16703a;
}

.test-summary.warn {
  background: #fff7e6;
  border-color: #f3d38b;
  color: #9a6200;
}

.test-steps {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.test-step {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: start;
  border-left: 4px solid #9db8dd;
  background: #fff;
  border-radius: 6px;
  padding: 10px 12px;
  color: #344054;
}

.test-step.ok {
  border-left-color: #27a35f;
}

.test-step.warn {
  border-left-color: #f0a202;
}

.test-step.fail {
  border-left-color: #d92d20;
}

.test-step strong {
  color: var(--ink);
}

.test-step span {
  white-space: pre-wrap;
  word-break: break-word;
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 32px 0;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  background: #fff;
  color: #41516a;
  border: 1px solid var(--line);
  text-align: left;
}

.wizard-step span {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #edf4ff;
  color: var(--accent);
  font-weight: 800;
}

.wizard-step.active {
  border-color: #2d7ff9;
  background: #eaf3ff;
  color: #0f4ea4;
}

.wizard-step.active span {
  background: #2d7ff9;
  color: #fff;
}

.wizard-panel {
  display: none;
  margin: 22px 32px 0;
}

.wizard-panel.active {
  display: block;
}

.wizard-panel > .panel {
  margin: 0;
}

.course-page[data-course-mode="script"] .wizard-panel.active > .panel,
.course-page[data-course-mode="materials"] .wizard-panel.active > .panel {
  border-color: #1769aa;
  box-shadow: 0 0 0 1px rgba(23, 105, 170, 0.12);
}

.panel-subtitle {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.panel-subtitle span {
  display: block;
  margin-top: 4px;
  color: #41516a;
}

.upload-box {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 150px;
  padding: 28px;
  border: 1px dashed #a9bfdb;
  border-radius: 8px;
  background: #f3f7ff;
  color: #3c4b63;
  cursor: pointer;
  text-align: center;
}

.upload-box strong {
  font-size: 18px;
  color: #17202a;
}

.upload-box span {
  display: inline-flex;
  justify-content: center;
  width: min(620px, 100%);
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 10px 12px;
  color: var(--muted);
}

.upload-box input {
  display: none;
}

.upload-box.dragging {
  border-color: #2d7ff9;
  background: #e8f2ff;
}

.course-title-row.compact {
  margin: 18px 0 0;
}

.course-title-row.compact label {
  grid-template-columns: 92px 1fr;
}

.course-title-row input.course-title-duplicate {
  border-color: #d92d20;
  background: #fffafa;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.course-title-duplicate-hint {
  margin: 8px 0 0 92px;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.file-content-preview {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.file-content-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.file-content-preview-head span {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.file-content-preview pre {
  max-height: 260px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
  color: #21314d;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
}

.material-control-block {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(180px, 0.9fr) minmax(360px, 1.6fr);
  align-items: start;
  gap: 16px;
  margin: 20px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.material-control-block > label,
.material-focus-field {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.material-control-block input[type="number"],
.material-control-block select {
  width: 100%;
}

.material-focus-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.material-focus-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}

.material-focus-options input {
  width: auto;
  margin: 0;
}

.material-context-block {
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.material-context-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.material-context-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.material-context-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  text-align: right;
}

.material-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.material-context-grid label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.material-context-grid textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.6;
  font-weight: 400;
}

.wizard-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 22px;
}

.wizard-actions button {
  min-width: 210px;
}

.score-model-list {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.score-item {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) 96px minmax(260px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.score-item textarea {
  min-height: 48px;
}

.score-item button {
  background: #fff;
  color: var(--danger);
  border: 1px solid #f3b6b1;
}

.summary-panel {
  max-width: 980px;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.summary-grid div,
.summary-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 16px;
}

.summary-grid span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.summary-grid strong {
  display: block;
  font-size: 18px;
  color: var(--ink);
  word-break: break-word;
}

.generated-course-result {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.generated-course-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.generated-course-head h3 {
  margin: 0;
  font-size: 18px;
}

.generated-course-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.generated-course-actions button {
  min-width: 72px;
  padding: 8px 12px;
}

.generated-course-head span,
.generated-course-grid span,
.generated-course-block span {
  color: var(--muted);
}

.generated-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px;
}

.generated-course-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  min-width: 0;
}

.generated-course-grid strong,
.generated-course-grid p {
  display: block;
  margin: 8px 0 0;
  color: var(--ink);
  line-height: 1.6;
  word-break: break-word;
}

.generated-course-title-input,
.generated-course-script-input {
  width: 100%;
  margin-top: 8px;
}

.generated-course-script-input {
  min-height: 260px;
  line-height: 1.65;
  resize: vertical;
}

.generated-course-block {
  padding: 0 18px 16px;
}

.generated-course-block pre {
  margin: 8px 0 0;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
  font-family: inherit;
  color: var(--ink);
}

.highlighted-script-view {
  margin: 8px 0 0;
  max-height: 340px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 14px 14px;
}

.highlighted-script-view .script-highlight-legend {
  margin: 0 0 10px;
}

.highlighted-script-lines p {
  margin: 0 0 8px;
  line-height: 1.75;
  color: var(--ink);
  word-break: break-word;
}

.highlighted-script-lines p:last-child {
  margin-bottom: 0;
}

.course-toolbar,
.course-title-row,
.opening-row,
.upload-hint,
.dialogue-list,
.course-footer-actions {
  margin: 22px 32px 0;
}

.course-toolbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 28px;
}

.stepper-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 500;
}

.round-display {
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 11px 18px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
}

.toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.file-button {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
}

.file-button input {
  display: none;
}

.course-title-row label,
.opening-row label {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  margin: 0;
  gap: 8px;
  font-weight: 500;
}

.opening-row b {
  color: var(--danger);
}

.opening-row input {
  border-color: #3fa7ff;
}

.upload-hint {
  background: #fff;
  border: 1px dashed #9db8dd;
  border-radius: 8px;
  padding: 24px;
  color: var(--muted);
  line-height: 1.7;
}

.dialogue-list {
  background: #eef3fb;
  border-left: 8px solid #e3ebfb;
  min-height: 300px;
  max-height: 960px;
  overflow: auto;
}

.dialogue-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
}

.dialogue-number {
  font-size: 17px;
  font-weight: 800;
  color: #252d3a;
}

.dialogue-body {
  min-width: 0;
}

.dialogue-split {
  display: block;
}

.dialogue-preview-panel,
.dialogue-edit-panel {
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fbfdff;
  padding: 12px;
}

.dialogue-edit-panel {
  background: #fff;
  min-height: 300px;
}

.dialogue-edit-panel--single {
  min-height: 88px;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.dialogue-panel-title {
  margin-bottom: 10px;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.dialogue-preview-line {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.dialogue-preview-line p {
  margin: 0;
  color: #344054;
  line-height: 1.7;
  word-break: break-word;
}

.dialogue-line {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.dialogue-line textarea {
  min-height: 19px;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow-y: hidden;
  resize: none;
  background: transparent;
  line-height: 1.6;
}

.dialogue-line textarea[data-field="answer"] {
  min-height: 29px;
}

.role-badge {
  width: 42px;
  height: 22px;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.role-badge.question {
  background: #4f7df3;
}

.role-badge.answer {
  background: #4ba45c;
}

.keyword-line {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  background: #f8fafc;
  color: #98a2b3;
  border-radius: 4px;
  padding: 6px 10px;
  margin-left: 54px;
}

.dialogue-preview-keywords {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  background: #f8fafc;
  color: #98a2b3;
  border-radius: 4px;
  padding: 9px 12px;
  margin-left: 54px;
}

.dialogue-preview-keywords strong {
  color: #1d65ff;
  font-weight: 700;
  line-height: 1.6;
  word-break: break-word;
}

.keyword-line input {
  border: 0;
  padding: 0;
  color: #1d65ff;
  background: transparent;
}

.script-highlight-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 20px;
  align-items: center;
}

.dialogue-footer-legend {
  margin: 0;
  flex: 1 1 420px;
  justify-content: flex-start;
  font-size: 12px;
}

.dialogue-footer-legend[hidden] {
  display: none;
}

.script-highlight {
  display: inline;
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1.8;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.script-highlight-need {
  color: #b42318;
  background: #fee4e2;
}

.script-highlight-product {
  color: #067647;
  background: #d1fadf;
}

.script-highlight-objection {
  color: #1849a9;
  background: #dbeafe;
}

.script-highlight-closing {
  color: #6d28d9;
  background: #ede9fe;
}

.script-highlight-preview {
  margin: -2px 0 8px 54px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fbfdff;
  padding: 9px 12px;
  min-height: 36px;
  color: #475467;
  line-height: 1.75;
  word-break: break-word;
}

.typo-note {
  margin: 6px 0 0;
  color: #c62828;
  font-weight: 700;
  line-height: 1.6;
}

.typo-note span {
  display: block;
}

.dialogue-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 96px;
}

.dialogue-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
}

.dialogue-actions-row:not(.dialogue-actions-row-top) {
  justify-content: stretch;
}

.dialogue-actions button {
  background: transparent;
  color: #246bfe;
  padding: 0;
  font-weight: 600;
}

.dialogue-actions-row:not(.dialogue-actions-row-top) button {
  width: 100%;
  text-align: right;
}

.course-footer-actions {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.course-footer-actions button {
  min-width: 220px;
}

.workspace {
  display: grid;
  grid-template-columns: 310px minmax(420px, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.panel,
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

label {
  display: block;
  margin: 14px 0 8px;
  color: #344054;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  font: inherit;
  background: #fff;
}

textarea {
  resize: vertical;
  min-height: 92px;
}

pre {
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  color: #344054;
  line-height: 1.6;
}

.inline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  padding: 11px 16px;
  font-weight: 700;
  cursor: pointer;
}

button.secondary {
  background: var(--accent-2);
}

button.danger {
  background: var(--danger);
}

button:disabled {
  background: #aab6c2;
  cursor: not-allowed;
}

/* 锁定态按钮：常驻显示但条件未满足，悬停 title 说明解锁条件 */
button.btn-locked,
.button-link.btn-locked {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: auto;
}

/* 已下发态：黄色提示已有下发记录，悬停 title 显示已下发人数 */
button.btn-assigned,
.button-link.btn-assigned {
  background: #d97706 !important;
  color: #fff !important;
}

button.btn-assigned:hover,
.button-link.btn-assigned:hover {
  background: #b45309 !important;
}

.scenario-panel button {
  width: 100%;
  margin-top: 16px;
}

.scenario-detail {
  margin-top: 14px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  line-height: 1.6;
  max-height: 460px;
  overflow: auto;
}

.chat-panel {
  padding: 0;
  overflow: hidden;
}

.chat-log {
  height: 520px;
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bubble {
  max-width: 82%;
  padding: 12px 14px;
  border-radius: 8px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.bubble.customer {
  align-self: flex-start;
  background: #eef4ff;
}

.bubble.trainee {
  align-self: flex-end;
  background: #e7f8f3;
}

.bubble small {
  display: block;
  color: var(--muted);
  margin-bottom: 4px;
}

.composer {
  border-top: 1px solid var(--line);
  padding: 14px;
}

.voice-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.voice-input-row button {
  min-width: 104px;
}

.voice-file-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344054;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.voice-file-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.voice-input-row span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.empty {
  color: var(--muted);
  line-height: 1.7;
}

.score {
  font-size: 46px;
  font-weight: 800;
  color: var(--accent);
}

.record-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.dimension {
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: #edf2f7;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: var(--accent-2);
}

.report-panel ul {
  padding-left: 20px;
  line-height: 1.7;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.metric span {
  display: block;
  color: var(--muted);
}

.metric strong {
  font-size: 30px;
  margin-top: 8px;
  display: block;
}

.admin-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
}

.admin-forms {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
  margin-bottom: 18px;
}

.section-gap {
  margin-top: 22px;
}

.settings-list {
  display: grid;
  gap: 18px;
}

.provider-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.provider-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.provider-head h2 {
  display: inline-block;
  margin-right: 10px;
}

.provider-head p {
  color: var(--muted);
  max-width: 520px;
  line-height: 1.6;
}

.admin-startup-panel {
  display: grid;
  gap: 12px;
}

.admin-startup-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  cursor: pointer;
}

.admin-startup-switch input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.admin-startup-switch strong {
  display: block;
  color: #182230;
  font-size: 15px;
  line-height: 1.35;
}

.admin-startup-switch em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.55;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.badge.ok {
  background: #e9f8ee;
  color: #16703a;
  border: 1px solid #bce8c9;
}

.badge.warn {
  background: #fff7e6;
  color: #9a6200;
  border: 1px solid #f3d38b;
}

.badge.danger {
  background: #fff1f2;
  color: #b42318;
  border: 1px solid #fecdd3;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px;
}

.runtime-model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.runtime-model-row {
  display: grid;
  gap: 14px;
  align-items: end;
}

.runtime-model-row.two-columns {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.runtime-model-row.three-columns {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.runtime-model-row label {
  min-width: 0;
}

.detailed-report-model-card .runtime-model-row {
  margin-top: 12px;
}

.detailed-report-inline {
  align-items: end;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.detailed-report-inline-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  margin: 0;
  min-height: 44px;
}

.detailed-report-inline-actions button {
  white-space: nowrap;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
}

.key-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.field-title {
  color: #344054;
  font-weight: 600;
  margin: 14px 0 8px;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.check-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #f8fafc;
  font-weight: 500;
}

.check-pill input {
  width: auto;
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.runtime-settings-actions {
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.runtime-save-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.course-audio-maintenance {
  flex: 1 1 680px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  min-width: 520px;
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.course-audio-maintenance h3 {
  margin: 0;
  font-size: 16px;
}

.course-audio-maintenance p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.course-audio-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.course-audio-maintenance #courseAudioStatus {
  grid-column: 1 / -1;
}

.course-audio-dialog {
  width: calc(100vw - 32px);
  max-width: none;
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.course-audio-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 14px 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.course-audio-filter-form label {
  margin: 0;
}

.course-audio-filter-form label span {
  display: block;
  margin-bottom: 7px;
  color: #344054;
  font-weight: 700;
}

.course-audio-filter-actions {
  display: flex;
  gap: 10px;
}

.course-audio-filter-actions button {
  min-width: 78px;
}

.course-audio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.course-audio-course-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
}

.course-audio-course-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.course-audio-course-item input {
  width: auto;
  margin-top: 3px;
}

.course-audio-course-item strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.course-audio-course-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.course-audio-modal-status {
  display: block;
  margin-top: 10px;
}

.form-help {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

button.ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.button-link.ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.course-audio-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.course-audio-select-cell {
  text-align: center;
}

.course-audio-select-cell input {
  width: auto;
}

.course-audio-result {
  margin: 0 0 18px;
  font-weight: 700;
}

.course-audio-result.working {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1454a6;
}

.course-audio-result.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.course-audio-result.warn {
  border-color: #facc15;
  background: #fefce8;
  color: #854d0e;
}

.course-audio-result.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.student-create-panel {
  margin-bottom: 18px;
}

.student-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.student-section-head h2 {
  margin: 0;
}

.student-section-head p {
  color: var(--muted);
}

.student-actions,
.student-query-actions {
  display: flex;
  gap: 10px;
}

.student-actions button,
.student-query-actions button {
  min-width: 84px;
}

.student-form-grid,
.student-query-grid {
  display: grid;
  gap: 14px;
}

.student-form-grid {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.student-full-row {
  grid-column: 1 / -1;
}

.student-query-panel {
  margin-bottom: 18px;
}

.student-query-grid {
  grid-template-columns: repeat(5, minmax(150px, 1fr)) repeat(4, minmax(130px, 0.9fr)) auto;
  align-items: end;
}

.student-form-grid label,
.student-query-grid label {
  margin: 0;
}

.student-form-grid label span,
.student-query-grid label span {
  display: block;
  margin-bottom: 8px;
}

/* 学员考试作答页：标题字号对齐“试卷已提交”状态徽标，移动端不再放大 */
#studentExamTitle {
  font-size: 16px;
  line-height: 1.5;
}

/* 学员考试作答页：选项按钮放到 A/B/C/D 文字左侧，单行排列 */
#studentExamQuestions .student-form-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 500;
}

#studentExamQuestions .student-form-grid label input[type="radio"],
#studentExamQuestions .student-form-grid label input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

.org-level-locked span {
  color: #98a2b3;
}

.org-level-locked select {
  background: #eef2f6;
  color: #98a2b3;
  cursor: not-allowed;
}

.student-table-panel {
  padding: 0;
  overflow: hidden;
}

.student-history-panel {
  padding: 0;
  overflow: hidden;
}

.student-table-panel th:first-child,
.student-table-panel td:first-child {
  width: 110px;
}

.student-table-panel th:last-child,
.student-table-panel td:last-child {
  width: 460px;
}

.student-edit-dialog {
  width: min(760px, 100%);
}

.student-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.student-edit-grid label {
  margin: 0;
}

.student-edit-grid label span {
  display: block;
  margin-bottom: 8px;
  color: #344054;
  font-weight: 700;
}

.modal-reason-field {
  display: block;
  margin-top: 14px;
}

.modal-reason-field span {
  display: block;
  margin-bottom: 8px;
  color: #344054;
  font-weight: 700;
}

.org-form-grid,
.org-query-grid {
  display: grid;
  gap: 14px;
}

.org-form-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.org-query-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) auto;
  align-items: end;
}

.org-form-grid label,
.org-query-grid label {
  margin: 0;
}

.org-form-grid label span,
.org-query-grid label span {
  display: block;
  margin-bottom: 8px;
}

.org-table-panel {
  padding: 0;
  overflow: hidden;
}

.org-table-panel th:first-child,
.org-table-panel td:first-child {
  width: 100px;
}

.org-table-panel th:last-child,
.org-table-panel td:last-child {
  width: 170px;
}

.permission-editor-panel,
.permission-query-panel {
  margin-bottom: 18px;
}

.permission-form-grid,
.permission-scope-grid,
.permission-query-grid {
  display: grid;
  gap: 14px;
  align-items: end;
}

.permission-form-grid {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.permission-scope-grid {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
}

.permission-query-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr)) auto;
}

.permission-query-grid-wide {
  grid-template-columns: repeat(5, minmax(140px, 1fr)) repeat(5, minmax(130px, 0.9fr)) auto;
}

.permission-form-grid label,
.permission-scope-grid label,
.permission-query-grid label {
  margin: 0;
}

.permission-form-grid label span,
.permission-scope-grid label span,
.permission-query-grid label span {
  display: block;
  margin-bottom: 8px;
}

.permission-block {
  margin-top: 18px;
}

.permission-block h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.permission-person-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.info-card {
  border: 1px solid #d8e0eb;
  border-radius: 6px;
  background: #f8fbff;
  padding: 12px;
}

.info-card span,
.single-field span {
  display: block;
  margin-bottom: 8px;
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

.info-card strong {
  color: #101828;
}

.single-field {
  display: block;
  max-width: 320px;
}

.permission-role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 10px;
}

.permission-role-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.permission-role-item strong,
.permission-role-item small {
  display: block;
}

.permission-role-item small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.permission-table-panel {
  padding: 0;
  overflow: hidden;
}

.permission-table-panel th:nth-child(3),
.permission-table-panel td:nth-child(3) {
  min-width: 260px;
}

.permission-table-panel th:nth-child(4),
.permission-table-panel td:nth-child(4) {
  min-width: 180px;
}

.import-panel {
  margin-bottom: 18px;
}

.import-upload-box {
  margin-top: 8px;
}

.import-upload-box input[type="file"] {
  margin-top: 14px;
}

.align-left {
  justify-content: flex-start;
}

.import-result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #dbe3f0;
}

.import-result strong {
  display: block;
  margin-bottom: 6px;
}

.import-result ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #475467;
}

.import-result li + li {
  margin-top: 6px;
}

.org-import-grid {
  display: grid;
  grid-template-columns: minmax(260px, 420px);
  gap: 14px;
  margin-bottom: 14px;
}

.org-import-grid label {
  margin: 0;
}

.org-import-grid label span {
  display: block;
  margin-bottom: 8px;
}

.course-query-panel {
  margin-bottom: 18px;
}

.course-query-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 14px;
  align-items: end;
}

.course-query-form label {
  margin: 0;
}

.course-query-form label span {
  display: block;
  margin-bottom: 8px;
}

.course-query-actions {
  display: flex;
  gap: 10px;
}

.course-query-actions button {
  min-width: 84px;
}

.course-table-panel {
  padding: 0;
  overflow: hidden;
}

.course-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.course-table-head h2 {
  margin-bottom: 0;
}

.course-table-head p {
  color: var(--muted);
}

.exam-batch-reviewer-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-batch-reviewer-toolbar select {
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--text);
}

.exam-batch-reviewer-toolbar span {
  color: var(--muted);
  font-size: 13px;
}

.exam-reviewer-cell {
  min-width: 110px;
}

.exam-reviewer-cell strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.exam-batch-check-col,
.exam-batch-check-cell {
  width: 42px;
  text-align: center;
}

.course-table-wrap {
  overflow-x: auto;
}

.course-table-panel th:first-child,
.course-table-panel td:first-child {
  width: 140px;
}

.course-table-panel th.exam-batch-check-col,
.course-table-panel td.exam-batch-check-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
}

/* 训练任务中心：是否通过 / 通过规则 列宽 */
.task-pass-state-col,
.task-pass-state-cell {
  width: 84px;
  white-space: nowrap;
}

/* 考试任务/成绩列表：通过规则列宽 */
.exam-pass-rule-col,
.exam-pass-rule-cell {
  min-width: 150px;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

.task-pass-rule-col,
.task-pass-rule-cell {
  min-width: 150px;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}

.course-org-cell {
  min-width: 180px;
  color: #344054;
  line-height: 1.5;
}

.course-table-panel th:last-child,
.course-table-panel td:last-child {
  width: 320px;
}

.course-search-page {
  max-width: none;
}

.course-search-page .topbar {
  margin-bottom: 14px;
}

.course-search-page .topbar h1 {
  margin-bottom: 6px;
  font-size: 20px;
}

.course-bookmark-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 8px;
  border-bottom: 1px solid #cfdbeb;
}

.course-bookmark-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid #d7e2f0;
  border-radius: 12px 12px 0 0;
  background: #f5f8fc;
  color: #344054;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.course-bookmark-tab:hover {
  color: var(--accent);
  background: #eaf3ff;
  border-color: #bcd3f0;
}

.course-bookmark-tab.is-active,
.course-bookmark-tab[aria-current="page"] {
  position: relative;
  border-color: #1769aa;
  border-bottom-color: #1769aa;
  background: #1769aa;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(23, 105, 170, 0.18);
}

.course-bookmark-tab.is-active:hover,
.course-bookmark-tab[aria-current="page"]:hover {
  color: #ffffff;
  background: #145b92;
  border-color: #145b92;
}
.course-search-page .course-query-panel {
  margin-bottom: 14px;
  padding: 16px 18px;
  border-color: #1769aa;
  box-shadow: 0 0 0 1px rgba(23, 105, 170, 0.12);
}

.course-query-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.course-query-head h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.course-query-head p {
  margin: 0;
  color: var(--muted);
}

.course-search-page .course-query-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px 12px;
}

.course-search-page .course-query-form label {
  grid-column: span 3;
}

.course-search-page .course-query-form label span {
  margin-bottom: 6px;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.course-search-page .course-query-form input,
.course-search-page .course-query-form select {
  min-height: 38px;
  padding: 9px 11px;
}

.course-search-page .course-query-actions {
  grid-column: span 2;
  align-items: center;
}

.course-search-page .course-query-actions button {
  min-width: 68px;
  min-height: 38px;
  padding: 8px 13px;
}

.course-search-page .course-table-panel {
  border-color: #1769aa;
  box-shadow: 0 0 0 1px rgba(23, 105, 170, 0.12);
}

.course-search-page .course-table-head {
  min-height: 52px;
  padding: 14px 18px;
  background: #fbfcfe;
}

.course-search-page .course-table-head h2 {
  font-size: 16px;
}

.course-search-page .course-table-head p {
  margin: 0;
  font-size: 13px;
}

.course-search-page .course-table-wrap {
  border-top: 1px solid var(--line);
}

.course-search-page .course-results-table {
  table-layout: fixed;
}

.course-search-page .course-results-table th {
  padding: 10px 12px;
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.course-search-page .course-results-table td {
  padding: 13px 12px;
  vertical-align: middle;
}

.course-search-page .course-results-table tbody tr {
  transition: background 0.15s ease;
}

.course-search-page .course-results-table tbody tr:hover {
  background: #f8fbff;
}

.course-search-page .course-results-table th:nth-child(1),
.course-search-page .course-results-table td:nth-child(1) {
  width: 78px;
}

.course-search-page .course-results-table th:nth-child(2),
.course-search-page .course-results-table td:nth-child(2) {
  width: 22%;
}

.course-search-page .course-results-table th:nth-child(3),
.course-search-page .course-results-table td:nth-child(3) {
  width: 168px;
}

.course-search-page .course-results-table th:nth-child(4),
.course-search-page .course-results-table td:nth-child(4) {
  width: 110px;
}

.course-search-page .course-results-table th:nth-child(5),
.course-search-page .course-results-table td:nth-child(5) {
  width: 176px;
}

.course-search-page .course-results-table th:nth-child(6),
.course-search-page .course-results-table td:nth-child(6) {
  width: 164px;
}

.course-search-page .course-results-table th:nth-child(7),
.course-search-page .course-results-table td:nth-child(7) {
  width: 86px;
}

.course-search-page .course-results-table th:nth-child(8),
.course-search-page .course-results-table td:nth-child(8) {
  width: 300px;
}

.exam-paper-builder-page {
  max-width: none;
}

.exam-paper-create-panel {
  display: grid;
  gap: 14px;
}

.exam-paper-import-review {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: #fbfcfe;
}

.exam-paper-bookmark-tabs {
  /* 新建试卷只有两个入口，书签卡片按两列铺满 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exam-paper-import-workbench__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 2.1fr);
  gap: 16px;
  align-items: start;
}

.exam-paper-import-workbench__left {
  display: grid;
  gap: 12px;
  min-width: 0;
  /* 左右两栏固定高度，内容超出时栏内滚动 */
  height: 1200px;
  overflow-y: auto;
  align-content: start;
}

.exam-paper-import-source-text {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  color: #334155;
}

.exam-paper-import-workbench__right {
  display: grid;
  gap: 12px;
  min-width: 0;
  height: 1200px;
  overflow-y: auto;
  align-content: start;
}

.exam-paper-import-workbench__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
}

.exam-paper-import-workbench__fields label {
  min-width: 0;
}

.exam-paper-import-workbench__fields label span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #344054;
}

.exam-paper-import-workbench__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exam-paper-import-workbench__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #475569;
  font-size: 13px;
}

.import-structure-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
}

.import-structure-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7e3f4;
  border-radius: 8px;
  padding: 4px 10px;
  background: #f8fbff;
  font-size: 13px;
  color: #334155;
  white-space: nowrap;
}

.import-structure-chip em {
  font-style: normal;
  color: #1f57c3;
  font-weight: 700;
}

.import-structure-chip input {
  width: 64px;
  min-height: 30px;
  padding: 4px 8px;
}

.import-structure-total {
  font-size: 13px;
  color: #334155;
  white-space: nowrap;
}

.import-structure-total strong {
  color: #1f57c3;
}

@media (max-width: 1100px) {
  .exam-paper-import-workbench__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-paper-import-workbench__left,
  .exam-paper-import-workbench__right {
    height: auto;
    overflow-y: visible;
  }

  .exam-paper-import-workbench__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.exam-paper-import-feedback {
  white-space: pre-line;
  text-align: left;
}

.exam-student-view {
  display: grid;
  gap: 12px;
}

.exam-student-view__head {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #d7e3f4;
  border-radius: 10px;
  background: #f8fbff;
}

.exam-student-view__head span {
  color: #64748b;
  font-size: 13px;
}

.exam-student-view__question {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

.exam-student-view__stem {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.exam-student-view__score {
  color: #64748b;
  font-size: 12px;
}

.exam-student-view__options {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.exam-student-view__blank {
  color: #94a3b8;
  margin: 8px 0 0;
}

.student-view-dialog {
  width: min(860px, 92vw);
  max-width: min(860px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.student-view-dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.student-view-dialog__head h2 {
  margin: 0;
}

.student-view-dialog__body {
  overflow: auto;
  min-height: 120px;
}

.student-view-dialog--full {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
}

.student-view-dialog--full .student-view-dialog__body {
  flex: 1 1 auto;
}

.exam-paper-detail__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #d7e3f4;
  border-radius: 10px;
  background: #f8fbff;
}

.exam-paper-detail__grid span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}

.exam-paper-detail__intro {
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.exam-paper-detail__answer {
  color: #15803d;
  margin: 8px 0 0;
}

.exam-paper-detail__explanation {
  color: #64748b;
  margin: 6px 0 0;
}

.exam-paper-import-review-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.exam-paper-import-card {
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.exam-paper-import-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exam-paper-question-editor {
  display: grid;
  gap: 12px;
}

button.course-bookmark-tab {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

#textKnowledgeList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.text-knowledge-pick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  padding: 10px 14px;
  background: #f8fbff;
}

.text-knowledge-pick-row__main {
  min-width: 0;
}

.text-knowledge-pick-row__main strong {
  display: block;
}

.text-knowledge-pick-row__main p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.exam-paper-workspace-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
  width: 100%;
}

.exam-split-panel {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.exam-split-panel__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exam-split-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #6a7f99;
  font-size: 13px;
}

.exam-split-panel__head strong {
  color: #0f172a;
  font-size: 13px;
  text-align: right;
}

.exam-split-panel__body {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.exam-split-panel__body .course-detail-text-list,
.exam-split-panel__body .course-detail-text-list article,
.exam-split-panel__body .exam-student-view {
  width: 100%;
  max-width: none;
}

@media (max-width: 1100px) {
  .exam-paper-workspace-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.exam-paper-question-status {
  font-size: 12px;
  color: #64748b;
}

.exam-paper-question-status[data-kind="ok"] {
  color: #15803d;
}

.exam-paper-question-status[data-kind="warn"] {
  color: #b91c1c;
}

.exam-paper-import-card__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.exam-paper-import-card label span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.exam-paper-import-card input,
.exam-paper-import-card select,
.exam-paper-import-card textarea {
  width: 100%;
}

.exam-paper-builder-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.exam-paper-builder-mode-tabs button {
  min-width: 120px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}

.exam-paper-builder-mode-tabs button.is-active {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.06);
}

.exam-paper-create-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.exam-paper-create-form > label,
.exam-paper-create-form > .exam-paper-create-form__title,
.exam-paper-create-form > .exam-paper-create-form__summary {
  grid-column: span 3 !important;
}

.exam-paper-create-form > .exam-paper-create-form__file {
  grid-column: 1 / -1;
}

.exam-paper-create-form__btn {
  display: flex;
  align-items: end;
}

.exam-paper-create-form__btn button {
  width: 100%;
  min-height: 38px;
}

.exam-paper-info-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
}

.exam-paper-import-upload {
  min-height: 112px;
}

.exam-paper-import-feedback {
  margin: 0;
}

.exam-paper-import-feedback[data-kind="warn"] {
  color: #b45309;
  background: #fff7ed;
  border-color: #fed7aa;
}

.exam-paper-import-feedback[data-kind="ok"] {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.exam-paper-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.exam-paper-builder-list-panel,
.exam-paper-builder-workspace-panel {
  min-height: calc(100vh - 360px);
  max-height: calc(100vh - 360px);
  display: flex;
  flex-direction: column;
}

.exam-paper-builder-list-panel {
  padding: 0;
  overflow: hidden;
}

.exam-paper-builder-list-panel .course-table-wrap {
  flex: 1 1 auto;
  overflow: auto;
}

.exam-paper-builder-workspace-panel {
  padding: 0;
  overflow: hidden;
}

.exam-paper-builder-workspace-panel .student-section-head {
  flex: 0 0 auto;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.exam-paper-builder-workspace {
  flex: 1 1 auto;
  overflow: auto;
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.exam-paper-builder-hero {
  margin: 0;
}

.exam-paper-builder-selected-status {
  white-space: nowrap;
}

.exam-paper-builder-table {
  table-layout: fixed;
}

.exam-paper-builder-table th:nth-child(1),
.exam-paper-builder-table td:nth-child(1) {
  width: 92px;
}

.exam-paper-builder-table th:nth-child(2),
.exam-paper-builder-table td:nth-child(2) {
  width: 34%;
}

.exam-paper-builder-table th:nth-child(3),
.exam-paper-builder-table td:nth-child(3) {
  width: 100px;
}

.exam-paper-builder-table th:nth-child(4),
.exam-paper-builder-table td:nth-child(4) {
  width: 108px;
}

.exam-paper-builder-table th:nth-child(5),
.exam-paper-builder-table td:nth-child(5) {
  width: 132px;
}

.exam-paper-builder-table th:nth-child(6),
.exam-paper-builder-table td:nth-child(6) {
  width: 88px;
}

.exam-paper-builder-table th:nth-child(7),
.exam-paper-builder-table td:nth-child(7) {
  width: 216px;
}

.exam-paper-builder-table tbody tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.exam-paper-builder-table tbody tr.is-active {
  background: #f5f9ff;
  box-shadow: inset 3px 0 0 #1d4ed8;
}

.exam-paper-builder-course-name {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.exam-paper-builder-course-meta {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exam-paper-builder-select-btn {
  min-width: 72px !important;
}

.exam-paper-builder-config-form {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px;
}

.exam-paper-builder-config-form > label {
  grid-column: span 3;
}

.exam-paper-builder-config-form > .exam-paper-builder-field--identity {
  grid-column: span 2;
}

.exam-paper-builder-config-form > .exam-paper-builder-field--intro {
  grid-column: span 4;
}

.exam-paper-builder-config-form > .exam-paper-builder-field--metric {
  grid-column: span 2;
}

.exam-paper-builder-config-form > .student-full-row,
.exam-paper-builder-config-form > label.student-full-row {
  grid-column: 1 / -1;
}

.exam-paper-builder-config-form textarea[name="intro_text"] {
  min-height: 46px;
}

.exam-paper-builder-field--metric select + select {
  margin-top: 6px;
}

.exam-paper-builder-review-controls {
  display: grid !important;
  grid-template-columns: minmax(72px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
}

.exam-paper-builder-field--review .exam-paper-builder-review-controls select + select {
  margin-top: 0;
}

.exam-paper-builder-structure-fields {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px;
  align-items: end;
}

.exam-paper-builder-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.exam-paper-builder-actions button {
  min-width: 108px;
}

.exam-paper-builder-structure-panel {
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
  border: 1px solid #cddcf3;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff 0%, #f3f8ff 100%);
}

.exam-paper-builder-structure-panel .course-detail-block-head {
  align-items: flex-start;
}

.exam-paper-builder-structure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.exam-paper-builder-structure-card {
  display: grid;
  gap: 14px;
  padding: 12px;
  border: 1px solid #d7e3f4;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.exam-paper-builder-structure-card__head strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.exam-paper-builder-structure-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.exam-paper-builder-structure-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  grid-column: auto !important;
}

.exam-paper-builder-structure-field span {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.exam-paper-builder-structure-field input[readonly] {
  background: #fff;
  color: #111827;
  font-weight: 700;
}

.course-search-page .course-creator-cell {
  white-space: nowrap;
}

.course-search-page .course-type-cell {
  min-width: 180px;
}

@media (max-width: 1680px) {
  .exam-paper-builder-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-paper-create-form > label {
    grid-column: span 4;
  }

  .exam-paper-create-form > .exam-paper-create-form__title,
  .exam-paper-create-form > .exam-paper-create-form__summary {
    grid-column: span 6;
  }

  .exam-paper-builder-config-form > label {
    grid-column: span 4;
  }

  .exam-paper-builder-config-form > label:nth-of-type(-n+4) {
    grid-column: span 6;
  }

  .exam-paper-builder-config-form > .exam-paper-builder-field--identity,
  .exam-paper-builder-config-form > .exam-paper-builder-field--metric {
    grid-column: span 2;
  }

  .exam-paper-builder-config-form > .exam-paper-builder-field--intro {
    grid-column: span 4;
  }

  .exam-paper-builder-structure-grid,
  .exam-paper-builder-structure-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .exam-paper-builder-grid {
    grid-template-columns: 1fr;
  }

  .exam-paper-builder-list-panel,
  .exam-paper-builder-workspace-panel {
    min-height: auto;
    max-height: none;
  }

  .exam-paper-builder-list-panel .course-table-wrap,
  .exam-paper-builder-workspace {
    overflow: visible;
  }

  .exam-paper-builder-config-form > label {
    grid-column: span 6;
  }

  .exam-paper-builder-config-form > .exam-paper-builder-field--identity,
  .exam-paper-builder-config-form > .exam-paper-builder-field--metric {
    grid-column: span 2;
  }

  .exam-paper-builder-config-form > .exam-paper-builder-field--intro {
    grid-column: span 4;
  }

  .exam-paper-create-form > label {
    grid-column: span 6;
  }

  .exam-paper-builder-structure-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .exam-paper-create-form > label,
  .exam-paper-create-form > .exam-paper-create-form__title,
  .exam-paper-create-form > .exam-paper-create-form__summary,
  .exam-paper-builder-config-form > label,
  .exam-paper-builder-config-form > label:nth-of-type(-n+4),
  .exam-paper-builder-config-form > label:nth-of-type(n+5):nth-of-type(-n+10) {
    grid-column: 1 / -1;
  }

  .exam-paper-builder-structure-fields {
    grid-template-columns: 1fr;
  }
}

body.exam-paper-edit-shell {
  overflow: hidden;
}

body.exam-paper-edit-shell .sidebar {
  overflow-y: auto;
}

.exam-paper-edit-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.exam-paper-edit-page .topbar {
  flex: 0 0 auto;
}

.exam-paper-edit-page .exam-paper-builder-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.exam-paper-edit-page .exam-paper-builder-workspace-panel {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.exam-paper-edit-page .exam-paper-builder-workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
}

.exam-paper-edit-page .exam-paper-workspace-split {
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel {
  min-height: 0;
  overflow: hidden;
}

.exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel__body {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel__body[data-role="paper-question-editor"],
.exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel__body[data-role="exam-paper-preview"] {
  flex: 1 1 auto;
}

.exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel__body[data-role="exam-paper-validation"] {
  flex: 0 0 auto;
  max-height: 34%;
}

@media (max-width: 1280px) {
  body.exam-paper-edit-shell {
    overflow: auto;
  }

  .exam-paper-edit-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .exam-paper-edit-page .exam-paper-builder-grid,
  .exam-paper-edit-page .exam-paper-builder-workspace-panel,
  .exam-paper-edit-page .exam-paper-builder-workspace,
  .exam-paper-edit-page .exam-paper-workspace-split,
  .exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel,
  .exam-paper-edit-page .exam-paper-workspace-split .exam-split-panel__body {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

.course-type-main {
  font-weight: 700;
  color: #0f172a;
}

.course-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.course-type-tags span {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 12px;
  line-height: 1.2;
}

.course-id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.course-name-cell strong {
  display: block;
  color: #101828;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-creator-cell,
.course-org-cell {
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-org-cell.is-empty {
  color: #98a2b3;
}

.course-disabled-row {
  background: #fcfcfd;
}

.course-row--archived {
  background: #f5f6f8;
  opacity: 0.7;
}

.course-disabled-row .course-name-cell strong,
.course-disabled-row .course-creator-cell,
.course-disabled-row .course-org-cell {
  color: #98a2b3;
}

.course-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: max-content;
}

.course-row-actions button,
.course-row-actions a {
  flex: 0 0 48px;
  min-width: 48px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.course-row-actions button.secondary,
.course-row-actions a.secondary {
  border-color: rgba(0, 133, 111, 0.18);
  background: #ecfdf5;
  color: #047857;
}

.course-row-actions a.ghost {
  border-color: rgba(37, 99, 235, 0.18);
  background: #eff6ff;
  color: #1d4ed8;
}

.course-row-actions button.assigned {
  border-color: #d97706;
  background: #f59e0b;
  color: #fff;
}

.course-row-actions button.assigned:hover {
  background: #d97706;
}

.course-row-actions button.warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.course-row-actions button.reclaim {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.course-row-actions button.danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b42318;
}

.course-row-actions button:disabled,
.course-row-actions a[aria-disabled="true"] {
  border-color: #e5e7eb;
  background: #f2f4f7;
  color: #98a2b3;
}

.text-course-manage-page .course-results-table th:nth-child(2),
.text-course-manage-page .course-results-table td:nth-child(2) {
  width: 22%;
}

.text-course-manage-page .course-results-table th:nth-child(3),
.text-course-manage-page .course-results-table td:nth-child(3) {
  width: 168px;
}

.text-course-manage-page .course-results-table th:nth-child(4),
.text-course-manage-page .course-results-table td:nth-child(4) {
  width: 18%;
}

.text-course-manage-page .course-results-table th:nth-child(5),
.text-course-manage-page .course-results-table td:nth-child(5) {
  width: 110px;
}

.text-course-manage-page .course-results-table th:nth-child(6),
.text-course-manage-page .course-results-table td:nth-child(6) {
  width: 110px;
}

.text-course-manage-page .course-results-table th:nth-child(7),
.text-course-manage-page .course-results-table td:nth-child(7) {
  width: 164px;
}

.text-course-manage-page .course-results-table th:nth-child(8),
.text-course-manage-page .course-results-table td:nth-child(8) {
  width: 92px;
}

.text-course-manage-page .course-results-table th:nth-child(9),
.text-course-manage-page .course-results-table td:nth-child(9) {
  width: 160px;
}

.text-course-manage-page .course-results-table th:nth-child(10),
.text-course-manage-page .course-results-table td:nth-child(10) {
  width: 430px;
}

.text-course-manage-page .assign-picker-grid {
  max-height: 320px;
  overflow: auto;
}

.assign-selected-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.course-name-cell {
  min-width: 280px;
}

.course-linked-id-cell {
  text-align: center;
}

.course-quiz-flag-cell {
  min-width: 150px;
}

.course-generation-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.course-generation-note--warn {
  color: #b45309;
}

.course-generation-note--off {
  color: #b42318;
}

.course-row--pending .course-name-cell strong,
.course-row--pending .course-id-badge {
  color: #b45309;
}

.course-row--failed .course-name-cell strong,
.course-row--failed .course-id-badge {
  color: #b42318;
}

.course-row--highlight td {
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.95), rgba(255, 251, 235, 0.95));
}

.course-row--highlight {
  animation: course-row-highlight-pulse 2.4s ease-in-out 2;
}

@keyframes course-row-highlight-pulse {
  0% {
    box-shadow: inset 0 0 0 0 rgba(245, 158, 11, 0.00);
  }
  50% {
    box-shadow: inset 6px 0 0 0 rgba(245, 158, 11, 0.55);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(245, 158, 11, 0.00);
  }
}

.record-query-panel {
  margin-bottom: 18px;
}

.record-query-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.record-query-grid label {
  margin: 0;
}

.record-query-grid label span {
  display: block;
  margin-bottom: 8px;
}

.record-query-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 10px;
}

.record-query-actions button {
  min-width: 84px;
}

.knowledge-query-grid {
  grid-template-columns:
    minmax(110px, 0.7fr)
    repeat(5, minmax(120px, 0.9fr))
    minmax(240px, 1.5fr)
    auto;
  gap: 14px;
}

.knowledge-query-grid .record-query-actions {
  grid-column: auto;
  justify-content: flex-end;
  align-self: end;
  flex-wrap: nowrap;
}

.knowledge-query-grid .knowledge-query-id-field,
.knowledge-query-grid .knowledge-query-keyword-field {
  min-width: 0;
}

.knowledge-query-grid .knowledge-query-keyword-field input,
.knowledge-query-grid .knowledge-query-id-field input {
  width: 100%;
}

.knowledge-entry-table th:nth-child(1),
.knowledge-entry-table td:nth-child(1) {
  width: 84px;
}

.knowledge-entry-table th:nth-child(2),
.knowledge-entry-table td:nth-child(2) {
  width: 220px;
}

.knowledge-entry-table th:nth-child(3),
.knowledge-entry-table td:nth-child(3) {
  width: 126px;
}

.knowledge-entry-table th:nth-child(4),
.knowledge-entry-table td:nth-child(4) {
  width: 180px;
}

.knowledge-entry-table th:nth-child(5),
.knowledge-entry-table td:nth-child(5) {
  width: 220px;
}

.knowledge-entry-table th:nth-child(6),
.knowledge-entry-table td:nth-child(6) {
  width: 150px;
}

.knowledge-entry-table th:nth-child(7),
.knowledge-entry-table td:nth-child(7) {
  width: 320px;
}

.knowledge-entry-table th:nth-child(8),
.knowledge-entry-table td:nth-child(8) {
  width: 150px;
}

.knowledge-entry-table th:nth-child(9),
.knowledge-entry-table td:nth-child(9) {
  width: 430px;
}

.org-result-topbar-actions {
  align-self: flex-start;
}

.org-result-query-toolbar {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.org-result-query-actions {
  grid-column: auto;
  margin-left: auto;
}

.record-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.org-result-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.record-summary-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.record-summary-grid span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.record-summary-grid strong {
  display: block;
  font-size: 24px;
  color: var(--ink);
}

.record-chart-filter-panel {
  margin-bottom: 16px;
}

.record-chart-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, 240px) auto;
  gap: 14px;
  align-items: end;
}

.record-chart-filter-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 800;
}

.record-chart-actions {
  display: flex;
  justify-content: flex-end;
}

.record-chart-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 16px;
}

.record-chart-summary em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
}

.record-chart-panels {
  display: grid;
  gap: 16px;
}

.record-chart-panel {
  padding: 18px;
}

.record-chart-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.record-chart-panel-head h2 {
  margin-bottom: 0;
}

.record-chart-panel-head span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f5f8fc;
  font-weight: 800;
}

.record-chart-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}

.record-chart-bars {
  display: grid;
  grid-template-columns: repeat(var(--bar-count), minmax(34px, 1fr));
  gap: 16px;
  min-width: max(100%, calc(var(--bar-count) * 52px));
  height: 190px;
  align-items: end;
}

.record-chart-bar {
  display: grid;
  grid-template-rows: 24px 1fr 22px;
  justify-items: center;
  gap: 6px;
  min-width: 34px;
}

.record-chart-value {
  color: #334155;
  font-size: 12px;
  white-space: nowrap;
}

.record-chart-track {
  position: relative;
  width: 18px;
  height: 128px;
  border-radius: 999px;
  background: #edf1f6;
  overflow: hidden;
}

.record-chart-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 999px;
  min-height: 0;
}

.record-chart-label {
  color: #475569;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .record-chart-filter-grid {
    grid-template-columns: 1fr;
  }

  .record-chart-actions {
    justify-content: flex-start;
  }
}

.record-table-panel th:nth-child(1),
.record-table-panel td:nth-child(1),
.record-table-panel th:nth-child(2),
.record-table-panel td:nth-child(2) {
  width: 100px;
}

.record-table-panel th:nth-child(4),
.record-table-panel td:nth-child(4) {
  min-width: 260px;
}

.record-table-panel th:nth-child(5),
.record-table-panel td:nth-child(5) {
  width: 120px;
}

.record-table-panel th:nth-child(6),
.record-table-panel td:nth-child(6),
.record-table-panel th:nth-child(7),
.record-table-panel td:nth-child(7) {
  width: 190px;
}

.record-table-panel th:last-child,
.record-table-panel td:last-child {
  width: 90px;
}

.training-records-table th:nth-child(3),
.training-records-table td:nth-child(3) {
  width: 84px;
}

.training-records-table th:nth-child(4),
.training-records-table td:nth-child(4) {
  min-width: 180px;
}

.training-records-table th:nth-child(5),
.training-records-table td:nth-child(5) {
  min-width: 220px;
  width: 220px;
}

.org-result-course-table th:nth-child(2),
.org-result-course-table td:nth-child(2) {
  min-width: 280px;
  width: 280px;
}

.record-table-panel .org-result-group-table th:nth-child(1),
.record-table-panel .org-result-group-table td:nth-child(1) {
  min-width: 220px;
  width: 220px;
}

.record-table-panel .org-result-group-table th:last-child,
.record-table-panel .org-result-group-table td:last-child {
  min-width: 320px;
  width: 320px;
}

.org-result-student-table th:nth-child(3),
.org-result-student-table td:nth-child(3) {
  width: 88px;
}

.org-result-student-table th:nth-child(4),
.org-result-student-table td:nth-child(4) {
  min-width: 340px;
  width: 340px;
}

.org-result-student-table th:nth-child(5),
.org-result-student-table td:nth-child(5) {
  min-width: 260px;
  width: 260px;
}

.org-result-student-table th:last-child,
.org-result-student-table td:last-child {
  min-width: 360px;
  width: 360px;
}

.small-btn {
  padding: 8px 12px;
  min-width: 58px;
}

.table-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #2f6fba;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.table-link-btn:hover {
  background: #245b9a;
  color: #fff;
}

#recordDetailModal {
  align-items: flex-start;
  overflow: auto;
}

.record-detail-dialog {
  width: min(1680px, calc(100vw - 24px));
  max-height: none;
  overflow: visible;
  padding: 0;
}

.record-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.record-detail-head h2 {
  margin: 0;
}

.record-detail-body {
  display: grid;
  gap: 18px;
  padding: 18px 22px 22px;
}

.record-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 10px;
}

.record-detail-cell {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.record-detail-cell span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
}

.record-detail-cell strong {
  display: block;
  line-height: 1.45;
  word-break: break-word;
}

.record-detail-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.record-detail-section h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.record-detail-section pre {
  margin: 0;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

.record-course-grid {
  padding: 0;
}

.record-course-grid div {
  padding: 14px;
}

.record-course-block {
  padding: 0;
}

.record-course-block > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 700;
}

.record-course-block pre {
  margin: 0;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.75;
  font-family: inherit;
  color: var(--ink);
}

.record-dialogue-view {
  margin-top: 0;
}

.record-audio-line,
.record-sales-line {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
}

.record-audio-line p,
.record-sales-line p {
  min-width: 0;
}

.record-audio-btn {
  align-self: center;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--accent-2);
}

.record-audio-btn.playing {
  background: var(--accent);
}

.record-audio-btn:disabled {
  background: #d8dee6;
  color: #7a8594;
  cursor: not-allowed;
}

.record-detail-page-box {
  padding: 18px;
}

.record-detail-page-grid {
  padding: 0;
}

.record-detail-page-grid div {
  min-height: 76px;
}

.record-report-block pre {
  max-height: none;
  overflow: visible;
}

.admin-detailed-report-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #f8fafc;
}

.admin-detailed-report-status strong {
  color: #17202a;
  font-size: 13px;
}

.admin-detailed-report-status em {
  color: #697586;
  font-size: 12px;
  font-style: normal;
}

.admin-detailed-report-status button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #1769aa;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.admin-detailed-report-status.failed {
  border-color: #fecdd3;
  background: #fff1f2;
}

.admin-detailed-report-status.pending,
.admin-detailed-report-status.running {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.admin-detailed-report-status.completed {
  border-color: #b9e6c9;
  background: #f3fbf6;
}

.admin-detailed-report-status.not_started,
.admin-detailed-report-status.skipped {
  border-color: #fed7aa;
  background: #fff7ed;
}

/* Admin training record detail polish */
.record-detail-page-box {
  display: grid;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.record-detail-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.record-detail-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "index title"
    "index meta";
  align-items: center;
  gap: 2px 10px;
  min-height: 56px;
  padding: 11px 14px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
  color: #17202a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(36, 52, 71, 0.06);
}

.record-detail-tab span {
  grid-area: index;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eef5ff;
  color: #1769aa;
  font-size: 12px;
  font-weight: 900;
}

.record-detail-tab strong {
  grid-area: title;
  overflow: hidden;
  color: #17202a;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-detail-tab em {
  grid-area: meta;
  overflow: hidden;
  color: #697586;
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-detail-tab:hover,
.record-detail-tab.active {
  border-color: #4b87ff;
  background: #eff6ff;
}

.record-detail-tab.active span {
  background: #4b87ff;
  color: #fff;
}

.record-detail-page-stage {
  min-width: 0;
}

.record-detail-page-stage > .record-detail-section {
  margin: 0;
}

.record-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 180px;
  gap: 14px;
  align-items: stretch;
}

.record-detail-hero-main,
.record-detail-score-card,
.record-detail-status-card,
.record-detail-page-box .record-detail-section {
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(36, 52, 71, 0.08);
}

.record-detail-hero-main {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 20px 22px;
}

.record-detail-eyebrow,
.record-section-head span {
  color: #00856f;
  font-size: 12px;
  font-weight: 900;
}

.record-detail-hero-main h2 {
  margin: 0;
  color: #17202a;
  font-size: 24px;
  line-height: 1.25;
  word-break: break-word;
}

.record-detail-hero-main p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  color: #697586;
  font-size: 13px;
}

.record-detail-score-card,
.record-detail-status-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: 18px;
}

.record-detail-score-card span,
.record-detail-status-card span {
  color: #697586;
  font-size: 13px;
  font-weight: 900;
}

.record-detail-score-card strong {
  color: #1769aa;
  font-size: 42px;
  line-height: 1;
}

.record-detail-score-card em,
.record-detail-status-card em {
  color: #697586;
  font-size: 12px;
  font-style: normal;
}

.record-detail-status-card strong {
  color: #17202a;
  font-size: 20px;
}

.record-detail-status-card.completed {
  border-color: #b9e6c9;
}

.record-detail-status-card.failed {
  border-color: #fecdd3;
}

.record-detail-status-card.pending,
.record-detail-status-card.running {
  border-color: #bfdbfe;
}

.record-detail-status-card.not_started,
.record-detail-status-card.skipped {
  border-color: #fed7aa;
}

.record-detail-page-box .record-detail-section {
  padding: 18px;
}

.record-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5ecf3;
}

.record-section-head h2 {
  margin: 4px 0 0;
  color: #17202a;
  font-size: 18px;
  line-height: 1.25;
}

.record-section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

.record-section-actions > strong {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #d8e2ec;
  border-radius: 999px;
  background: #f8fafc;
  color: #41516a;
  font-size: 12px;
}

.record-section-action {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #1769aa;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(23, 105, 170, 0.2);
}

.record-section-action:hover {
  background: #145c96;
}

.record-section-action:disabled {
  background: #b7c4d4;
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
}

.record-report-model-config {
  display: grid;
  gap: 4px;
  min-width: 260px;
}

.record-report-model-config label {
  color: #697586;
  font-size: 12px;
  font-weight: 900;
}

.record-report-model-config select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  background: #fff;
  color: #17202a;
  font-size: 13px;
  font-weight: 800;
}

.record-report-model-config small {
  color: #697586;
  font-size: 12px;
  line-height: 1.35;
}

.record-detail-page-grid {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  padding: 0;
}

.record-detail-page-grid .record-summary-cell {
  min-height: 74px;
  border-color: #d8e2ec;
  background: #f8fafc;
}

.record-detail-page-grid .record-summary-cell.is-wide {
  grid-column: span 2;
}

.record-detail-page-grid .record-summary-cell.is-primary,
.record-detail-page-grid .record-summary-cell.is-score,
.record-detail-page-grid .record-summary-cell.is-student {
  background: #fff;
}

.record-detail-page-grid .record-summary-cell.is-primary {
  border-color: #bfdbfe;
}

.record-detail-page-grid .record-summary-cell.is-score {
  border-color: #b9e6c9;
}

.record-detail-page-grid .record-summary-cell.is-student {
  border-color: #d8e2ec;
}

.record-detail-page-grid .record-summary-cell span {
  font-size: 12px;
  font-weight: 800;
}

.record-detail-page-grid .record-summary-cell strong {
  margin-top: 7px;
  font-size: 15px;
}

.record-dialogue-section .course-script-view {
  margin-top: 0;
  border-color: #d8e2ec;
  background: #fff;
}

.record-dialogue-section .course-script-round {
  background: #fbfdff;
}

.record-dialogue-section .course-script-round:nth-child(even) {
  background: #f8fafc;
}

.record-dialogue-section .course-script-round-no {
  color: #1769aa;
}

.record-dialogue-section .course-script-line p {
  color: #344054;
}

.record-report-grid {
  display: grid;
  gap: 16px;
}

.record-detail-page-box .record-report-structured {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.record-report-structured > .record-section-head {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(36, 52, 71, 0.08);
}

.record-report-structured > .admin-detailed-report-status {
  margin: 0 0 12px;
  box-shadow: 0 10px 20px rgba(36, 52, 71, 0.06);
}

.admin-report-view {
  overflow: visible;
}

.admin-report-view .student-report-score-card .score {
  font-size: 48px;
}

.record-report-block pre {
  margin: 0;
  border-color: #d8e2ec;
  background: #fbfdff;
}

.record-report-block .admin-detailed-report-status {
  margin: 0 0 12px;
}

.record-report-block .admin-detailed-report-status span {
  color: #697586;
  font-size: 12px;
  font-weight: 900;
}

.assign-dialog {
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.text-course-assign-dialog {
  width: min(1240px, calc(100vw - 48px));
  padding: 20px;
}

.text-course-assign-dialog .assign-page-card {
  margin-bottom: 0;
}

.text-course-assign-layout {
  margin-top: 16px;
}

.text-course-assign-layout .assign-page-head {
  margin-bottom: 12px;
}

.text-course-assign-layout .assign-tree-list {
  max-height: 420px;
  overflow: auto;
}

.text-course-assign-layout .assign-picker-grid {
  grid-template-columns: 1fr;
}

.text-course-assign-note-panel {
  grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.15fr) minmax(220px, 260px) minmax(220px, 260px);
}

.text-course-assign-note-field {
  grid-column: span 1;
}

.text-course-assign-note-field textarea {
  min-height: 86px;
  resize: vertical;
}

.text-course-assign-layout .assign-selected-list {
  max-height: 132px;
  overflow: auto;
}

.text-course-assign-layout .assign-page-actions {
  margin-top: 16px;
}

.text-course-assign-layout .assign-assigned-panel {
  min-height: 120px;
}

.assign-course-text {
  margin-bottom: 16px;
}

.assign-page-card {
  margin-bottom: 16px;
}

.assign-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.9fr);
  gap: 16px;
  align-items: flex-start;
}

.assign-right-panel {
  position: sticky;
  top: 16px;
}

.assign-right-panel .assign-assigned-panel {
  margin-bottom: 0;
}

.assign-right-panel .assign-assigned-list {
  max-height: 560px;
  overflow: auto;
}

.assign-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.assign-page-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.assign-page-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.assign-assigned-panel {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #f1c96b;
  border-radius: 8px;
  background: #fff8e6;
  color: #7a4b00;
}

.assign-assigned-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  line-height: 1.6;
}

.assign-assigned-list span {
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  word-break: break-word;
}

.assign-assigned-list span.completed {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.assign-assigned-list span.pending {
  border: 1px solid #f1c96b;
}

.assign-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.assign-tree-section {
  grid-column: 1 / -1;
}

.assign-picker-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.assign-picker-section h3 {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.assign-checkbox-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
}

.assign-tree-list {
  max-height: 420px;
  gap: 8px;
}

.assign-tree-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.assign-tree-search {
  flex: 1;
  margin: 0;
}

.assign-tree-search span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}

.assign-tree-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assign-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  line-height: 1.45;
}

.assign-checkbox-list input {
  width: auto;
}

.assign-tree-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assign-checkbox-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 7px 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.assign-tree-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
}

.assign-tree-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assign-tree-toggle:hover {
  background: #f8fafc;
}

.assign-tree-toggle.selected {
  border-color: #7db4ff;
  background: #eaf2ff;
  color: #1d4ed8;
  font-weight: 700;
}

.assign-tree-toggle.partial {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1e40af;
}

.assign-tree-toggle.unselected {
  background: #f4f6f8;
  color: #94a3b8;
}

.assign-tree-toggle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #64748b;
  transition: transform 0.2s ease;
}

.assign-tree-toggle[aria-expanded="false"] .assign-tree-toggle-arrow {
  transform: rotate(-90deg);
}

.assign-checkbox-list label.disabled {
  color: var(--muted);
  background: #f1f5f9;
  cursor: not-allowed;
}

.assign-checkbox-list label.locked {
  border-color: #7db4ff;
  background: #eaf2ff;
  color: #1d4ed8;
  cursor: default;
  font-weight: 700;
}

.assign-checkbox-list label.cascade-hidden {
  display: none;
}

.assign-checkbox-list label.selected {
  border-color: #7db4ff;
  background: #eaf2ff;
  color: #1d4ed8;
  font-weight: 700;
}

.assign-checkbox-list label.partial {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1e40af;
  font-weight: 700;
}

.assign-checkbox-list label.reassignable {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.assign-checkbox-list label.reassignable.selected {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

.assign-reassign-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.assign-checkbox-list label.unselected {
  background: #f4f6f8;
  color: #94a3b8;
}

.assign-checkbox-list label.reassignable.unselected {
  background: #f0fdf4;
  color: #15803d;
}

.assign-lock-badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.assign-tree-node {
  display: grid;
  gap: 6px;
}

.assign-tree-node.cascade-hidden {
  display: none;
}

.assign-tree-children {
  display: grid;
  gap: 6px;
  margin-left: 24px;
}

.assign-tree-students {
  display: grid;
  gap: 6px;
}

.assign-tree-depth-1 {
  margin-left: 8px;
}

.assign-tree-depth-2 {
  margin-left: 16px;
}

.assign-tree-depth-3 {
  margin-left: 24px;
}

.assign-tree-depth-4 {
  margin-left: 32px;
}

.assign-empty {
  color: var(--muted);
  padding: 8px;
}

.assign-empty-state {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}

.assign-empty-state strong {
  font-size: 16px;
}

.assign-empty-state p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.assign-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.assign-empty-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
}

.assign-empty-actions a.primary {
  background: #2563eb;
  color: #fff;
}

.assign-empty-actions a.secondary {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1f2937;
}

.assign-loose-student-list {
  max-height: 480px;
  overflow: auto;
}

.assign-selected-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #bcd7ff;
  border-radius: 8px;
  background: #eef5ff;
}

.assign-selected-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.assign-selected-summary {
  color: var(--muted);
  font-size: 13px;
}

.assign-validity-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 280px) minmax(220px, 280px);
  gap: 14px;
  align-items: end;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.assign-validity-panel h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.assign-validity-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.assign-validity-panel label {
  margin: 0;
}

.assign-validity-panel label span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}

.assign-pass-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 300px) minmax(180px, 240px) minmax(160px, 200px);
  gap: 14px;
  align-items: end;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #c9ddff;
  border-radius: 8px;
  background: #f7fbff;
}

.assign-pass-panel h3 {
  margin: 0 0 6px;
  font-size: 16px;
}

.assign-pass-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.assign-pass-panel label {
  margin: 0;
}

.assign-pass-panel label span {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}

.assign-pass-score-main,
.assign-pass-score-floor {
  grid-column: 4;
}

.assign-pass-score-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.assign-pass-score-note[hidden] {
  display: none;
}

.assign-pass-hint {
  grid-column: 1 / -1;
  padding-top: 2px;
  font-size: 13px;
}

.assign-selected-list {
  margin-top: 8px;
  color: #1d65ff;
  line-height: 1.7;
  word-break: break-word;
}

.assign-org-count-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.assign-org-count-badge.partial {
  background: #dbeafe;
  color: #1d4ed8;
}

.assign-org-count-badge.selected {
  background: #dcfce7;
  color: #166534;
}

.assign-student-badges {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.assign-status-badge {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.assign-status-badge.pending {
  background: #fff7ed;
  color: #c2410c;
}

.assign-status-badge.reassign {
  background: #dcfce7;
  color: #166534;
}

.assign-status-badge.locked {
  background: #dbeafe;
  color: #1d4ed8;
}

.assign-confirm-dialog {
  width: min(560px, 100%);
}

.assign-confirm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 14px;
}

.assign-confirm-card {
  padding: 14px 16px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
}

.assign-confirm-card strong {
  display: block;
  font-size: 24px;
  color: #1d4ed8;
}

.assign-confirm-card span {
  display: block;
  margin-top: 6px;
  color: #475569;
  font-size: 13px;
}

.assign-confirm-notes {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  line-height: 1.7;
}

.assign-confirm-notes li + li {
  margin-top: 4px;
}

.assign-search-hit {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.assign-page-actions {
  margin-top: 16px;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.table-actions button {
  padding: 8px 12px;
  min-width: 58px;
}

.org-result-row-actions {
  flex-wrap: nowrap;
  min-width: 330px;
}

.org-result-row-actions button.is-active {
  border-color: rgba(29, 78, 216, 0.28);
  background: #dbeafe;
  color: #1e40af;
}

.student-row-actions {
  flex-wrap: nowrap;
  min-width: 430px;
}

.student-row-actions button {
  white-space: nowrap;
}

.student-row-actions button.secondary {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
}

.org-result-row-actions button {
  min-width: 96px;
  white-space: nowrap;
}

.org-result-rule-text {
  min-width: 340px;
  color: #475467;
  line-height: 1.5;
  white-space: normal;
}

.record-table-panel th.org-result-count-col,
.record-table-panel td.org-result-count-col {
  width: 86px;
  min-width: 86px;
  max-width: 100px;
  text-align: center;
  white-space: nowrap;
}

.table-actions button.assigned {
  border: 1px solid #d97706;
  background: #f59e0b;
  color: #fff;
  font-weight: 800;
}

.table-actions button.assigned:hover {
  background: #d97706;
}

.table-actions button.warning {
  border: 1px solid #d97706;
  background: #fff7ed;
  color: #b45309;
}

.table-actions button.danger {
  border: 1px solid #ef4444;
  background: #fef2f2;
  color: #b42318;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}

.status-pill.status-on {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.status-pill.status-off {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.course-disabled-row {
  background: #fafafa;
  color: #64748b;
}

.course-empty {
  padding: 18px;
}

.course-detail-box {
  display: grid;
  gap: 18px;
}

.course-detail-grid {
  margin-bottom: 0;
}

.course-detail-box .course-script-block pre {
  max-height: none;
  overflow: visible;
}

.course-detail-source-block {
  display: grid;
  gap: 14px;
}

.course-detail-block-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.course-detail-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-detail-source-grid {
  margin: 0;
}

.course-detail-source-summary {
  margin: 0;
  color: #334155;
  line-height: 1.7;
}

.course-detail-source-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.exam-question-bank-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.exam-question-bank-step-card,
.exam-question-bank-source-item,
.exam-question-bank-pool-card {
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #f8fbff;
}

.exam-question-bank-step-card {
  padding: 14px 16px;
}

.exam-question-bank-step-card span {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f0ff;
  color: #1f57c3;
  font-size: 12px;
  font-weight: 600;
}

.exam-question-bank-step-card strong,
.exam-question-bank-source-item strong,
.exam-question-bank-pool-card strong {
  display: block;
  margin-top: 8px;
  color: #16253d;
}

.exam-question-bank-step-card p,
.exam-question-bank-source-item p,
.exam-question-bank-pool-card p {
  margin: 8px 0 0;
  color: #5c6f86;
  line-height: 1.6;
}

.exam-question-bank-context-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.exam-question-bank-default-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.exam-question-bank-main-grid {
  --exam-question-bank-top-panel-height: 630px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.exam-question-bank-review-grid {
  --exam-question-bank-bottom-panel-height: 770px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.exam-question-bank-main-grid > .panel,
.exam-question-bank-review-grid > .panel {
  overflow: hidden;
}

.exam-question-bank-main-grid > .panel {
  height: var(--exam-question-bank-top-panel-height);
}

.exam-question-bank-review-grid > .panel {
  height: var(--exam-question-bank-bottom-panel-height);
}

.exam-question-bank-source-panel,
.exam-question-bank-pool-panel,
.exam-question-bank-editor-panel,
.exam-question-bank-commit-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.exam-question-bank-source-panel .student-section-head,
.exam-question-bank-pool-panel .student-section-head,
.exam-question-bank-editor-panel .student-section-head,
.exam-question-bank-commit-panel .student-section-head,
.exam-question-bank-source-panel .exam-question-bank-tabs,
.exam-question-bank-commit-panel .exam-question-bank-pool-summary,
.exam-question-bank-commit-panel .exam-question-bank-commit-footer,
.exam-question-bank-commit-panel #examQuestionCommitResult {
  flex: 0 0 auto;
}

.exam-question-bank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.exam-question-bank-tabs button {
  border: 1px solid #c6d7ee;
  background: #fff;
  color: #33506f;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.exam-question-bank-tabs button.active {
  border-color: #1f57c3;
  background: #edf4ff;
  color: #1f57c3;
  font-weight: 600;
}

.exam-question-bank-tab-panel {
  display: none;
}

.exam-question-bank-tab-panel.active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.exam-question-bank-source-list,
.exam-question-bank-pool-list,
.exam-question-bank-result-list {
  display: grid;
  gap: 12px;
}

#examQuestionPoolList,
#examQuestionPendingList,
#examQuestionEditorForm {
  min-height: 0;
}

#examQuestionPoolList,
#examQuestionPendingList {
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 4px;
}

#examQuestionEditorForm {
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 4px;
  row-gap: 10px;
}

.exam-question-bank-editor-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.exam-question-bank-editor-headline > label {
  flex: 1 1 120px;
  min-width: 0;
}

#examQuestionEditorForm > label:has(#pendingBusinessScene),
#examQuestionEditorForm > label:has(#pendingTargetAudience),
#examQuestionEditorForm > label:has(#pendingTagsText) {
  grid-column: span 1;
}

.exam-question-bank-stage-table {
  --exam-question-bank-stage-columns: 58px minmax(0, 3.7fr) 92px 72px 88px 126px minmax(156px, 1.05fr) minmax(184px, auto);
  display: grid;
  gap: 6px;
}

.exam-question-bank-library-table {
  --exam-question-bank-library-columns: 58px minmax(0, 3.7fr) 92px 72px 88px 128px minmax(156px, 1.05fr) minmax(188px, auto);
  display: grid;
  gap: 8px;
}

.exam-question-bank-stage-table__head,
.exam-question-bank-stage-row {
  display: grid;
  grid-template-columns: var(--exam-question-bank-stage-columns);
  gap: 8px 10px;
  align-items: center;
}

.exam-question-bank-stage-table__head {
  padding: 0 10px;
  color: #6a7f99;
  font-size: 12px;
  font-weight: 600;
}

.exam-question-bank-library-table__head,
.exam-question-bank-library-row {
  display: grid;
  grid-template-columns: var(--exam-question-bank-library-columns);
  gap: 10px 12px;
  align-items: center;
}

.exam-question-bank-library-table__head {
  padding: 0 14px;
  color: #6a7f99;
  font-size: 12px;
  font-weight: 600;
}

.exam-question-bank-stage-table__actions-label {
  text-align: right;
}

.exam-question-bank-stage-table__body {
  display: grid;
  gap: 6px;
}

.exam-question-bank-stage-row {
  padding: 8px 10px;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  background: #f8fbff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.exam-question-bank-stage-row.active {
  border-color: #1f57c3;
  box-shadow: 0 0 0 2px rgba(31, 87, 195, 0.12);
  background: #fdfefe;
}

.exam-question-bank-library-row {
  padding: 10px 14px;
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  background: #f8fbff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.exam-question-bank-stage-row__title,
.exam-question-bank-stage-row__cell {
  min-width: 0;
}

.exam-question-bank-stage-row__id {
  justify-items: start;
}

.exam-question-bank-stage-row__id .exam-question-bank-stage-row__inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eaf1ff;
  color: #1f57c3;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.exam-question-bank-stage-row__stage {
  color: #1d4f91;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.exam-question-bank-stage-row__check {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  color: inherit;
}

.exam-question-bank-stage-row__check input {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  margin: 2px 0 0;
}

.exam-question-bank-stage-row__title-wrap {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.exam-question-bank-stage-row__title-text {
  display: -webkit-box;
  margin: 0;
  color: #16253d;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-word;
}

.exam-question-bank-stage-row__preview,
.exam-question-bank-stage-row__course,
.exam-question-bank-stage-row__status,
.exam-question-bank-stage-row__sub {
  margin: 0;
  color: #607389;
  font-size: 12px;
  line-height: 1.3;
}

.exam-question-bank-stage-row__preview,
.exam-question-bank-stage-row__course,
.exam-question-bank-stage-row__status {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-word;
}

.exam-question-bank-stage-row__cell {
  display: grid;
  gap: 2px;
}

.exam-question-bank-stage-row__inline {
  color: #24364d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.exam-question-bank-stage-row__status--error {
  color: #b14529;
}

.exam-question-bank-stage-row__status--warning {
  color: #a16207;
}

.exam-question-bank-stage-row__status--ok {
  color: #4b5563;
}

.exam-question-bank-stage-row__actions {
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.exam-question-bank-library-page .exam-question-bank-stage-row__actions {
  justify-content: flex-start;
}

.exam-question-bank-library-page .exam-question-bank-stage-table__actions-label {
  text-align: left;
}

.exam-question-bank-stage-row__actions button {
  min-width: 0;
  min-height: 26px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.exam-question-bank-library-panel {
  margin-top: 16px;
}

.exam-question-bank-library-grid {
  grid-template-columns: minmax(180px, 0.72fr) repeat(4, minmax(140px, 1fr)) auto;
  align-items: end;
  margin-bottom: 16px;
}

.exam-question-bank-library-grid__keyword {
  grid-column: auto;
}

.exam-question-bank-library-grid__actions {
  justify-content: flex-end;
  align-self: end;
}

.exam-question-bank-source-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
}

.exam-question-bank-source-item input {
  margin-top: 4px;
}

.exam-question-bank-pool-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 16px;
}

.exam-question-bank-pool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  padding: 12px 14px;
}

.exam-question-bank-editor-panel,
.exam-question-bank-commit-panel {
  height: 100%;
}

.exam-question-bank-commit-panel {
  display: flex;
  flex-direction: column;
  position: static;
}

#examQuestionCommitResult {
  max-height: 72px;
  overflow: auto;
}

.exam-question-bank-pool-card.active {
  border-color: #1f57c3;
  box-shadow: 0 0 0 2px rgba(31, 87, 195, 0.12);
}

.exam-question-bank-pool-card__main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.exam-question-bank-type-guide {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

.exam-question-bank-type-guide strong {
  display: block;
  color: #16253d;
  font-size: 15px;
}

.exam-question-bank-type-guide p {
  margin: 6px 0 0;
  color: #4c6078;
  line-height: 1.7;
}

.exam-question-bank-type-guide__meta {
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(31, 87, 195, 0.08);
  color: #1f57c3;
  font-size: 12px;
  line-height: 1.6;
}

#manualQuestionStem,
#pendingQuestionStem {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

#manualQuestionAnswer,
#pendingQuestionAnswer {
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
}

#manualQuestionExplanation,
#pendingQuestionExplanation {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

#manualQuestionOptions {
  padding-top: 8.5px;
  padding-bottom: 8.5px;
}

.exam-question-bank-field-help {
  display: block;
  margin-top: 6px;
  color: #6a7f99;
  font-size: 12px;
  line-height: 1.6;
}

.exam-question-bank-field-help:empty {
  display: none;
}

#manualQuestionExplanationField,
#pendingQuestionExplanationField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

#manualQuestionExplanationField > span,
#pendingQuestionExplanationField > span {
  margin-bottom: 0;
}

#manualQuestionExplanationField > textarea,
#pendingQuestionExplanationField > textarea {
  grid-column: 1 / -1;
}

#manualQuestionExplanationField > .exam-question-bank-field-help,
#pendingQuestionExplanationField > .exam-question-bank-field-help {
  margin-top: 0;
  text-align: right;
  justify-self: end;
}

.exam-question-bank-binary-field {
  display: grid;
  gap: 10px;
}

.exam-question-bank-field-title {
  display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.exam-question-bank-binary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.exam-question-bank-binary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #f8fbff;
  cursor: pointer;
  color: #24364d;
}

.exam-question-bank-binary-card input {
  margin: 0 0 2px;
}

.exam-question-bank-binary-card span {
  font-weight: 600;
  color: #16253d;
}

.exam-question-bank-binary-card small {
  color: #6a7f99;
  line-height: 1.5;
}

.exam-question-bank-pool-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.exam-question-bank-pool-card__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  color: inherit;
}

.exam-question-bank-pool-card__check input {
  margin-top: 4px;
}

.exam-question-bank-pool-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
}

.exam-question-bank-pool-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #dbe5f4;
  border-radius: 999px;
  background: #f8fbff;
  color: #607389;
  font-size: 12px;
}

.exam-question-bank-pool-card__title {
  display: -webkit-box;
  margin: 0;
  color: #16253d;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.exam-question-bank-pool-card__preview {
  margin: 0;
  color: #607389;
  font-size: 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-word;
}

.exam-question-bank-issue-list {
  margin: 0;
  padding-left: 18px;
  color: #b14529;
  font-size: 12px;
  line-height: 1.45;
}

.exam-question-bank-pool-card__actions {
  align-self: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.exam-question-bank-pool-card__actions button {
  min-width: 0;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.exam-question-bank-commit-actions {
  justify-content: flex-end;
  margin-left: 0;
}

.exam-question-bank-commit-panel .student-section-head {
  padding-right: 0;
}

@media (max-width: 1400px) {
  .exam-question-bank-default-grid,
  .exam-question-bank-context-grid,
  .exam-question-bank-pool-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .exam-question-bank-stage-table {
    --exam-question-bank-stage-columns: 52px minmax(0, 3fr) 84px 62px 82px 108px minmax(142px, 1fr) minmax(170px, auto);
  }

  .exam-question-bank-library-table {
    --exam-question-bank-library-columns: 52px minmax(0, 3.1fr) 84px 66px 82px 114px minmax(146px, 1fr) minmax(176px, auto);
  }
}

@media (max-width: 1100px) {
  .exam-question-bank-main-grid,
  .exam-question-bank-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-question-bank-main-grid > .panel,
  .exam-question-bank-review-grid > .panel {
    height: auto;
  }

  .exam-question-bank-type-guide {
    flex-direction: column;
  }

  .exam-question-bank-pool-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-question-bank-pool-card__actions {
    min-width: 0;
    justify-content: flex-start;
  }

  .exam-question-bank-stage-table__head {
    display: none;
  }

  .exam-question-bank-library-table__head {
    display: none;
  }

  .exam-question-bank-stage-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .exam-question-bank-library-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .exam-question-bank-stage-row__actions {
    justify-content: flex-start;
  }

  .exam-question-bank-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .exam-question-bank-library-grid__keyword {
    grid-column: span 2;
  }

  .exam-question-bank-library-grid__actions {
    grid-column: span 2;
    justify-content: flex-start;
  }

  .exam-question-bank-default-grid,
  .exam-question-bank-context-grid,
  .exam-question-bank-pool-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .exam-question-bank-default-grid,
  .exam-question-bank-context-grid,
  .exam-question-bank-pool-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-question-bank-binary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-question-bank-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam-question-bank-library-grid__keyword,
  .exam-question-bank-library-grid__actions {
    grid-column: auto;
  }

  .exam-question-bank-commit-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-question-bank-commit-actions {
    margin-left: 0;
    justify-content: stretch;
  }
}

.course-detail-source-sections section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.course-detail-source-sections h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #0f172a;
}

.course-detail-source-sections ul {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  line-height: 1.6;
}

.course-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-detail-tags strong {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
}

.course-detail-assignment-list {
  display: grid;
  gap: 10px;
}

.course-detail-assignment-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.course-detail-assignment-list strong {
  color: #0f172a;
}

.course-detail-assignment-list p {
  grid-column: 1 / -1;
  margin: 0;
  color: #64748b;
  line-height: 1.5;
}

.course-detail-text-list {
  display: grid;
  gap: 12px;
}

.course-detail-text-list article {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}

.course-detail-text-list__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.course-detail-text-list__head strong {
  color: #0f172a;
}

.course-detail-inline-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.course-detail-text-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
}

.course-detail-text-list article p {
  margin: 10px 0 0;
  color: #334155;
  line-height: 1.6;
}

.course-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.course-detail-hero-copy {
  display: grid;
  gap: 10px;
}

.course-detail-hero-copy h2 {
  margin: 0;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.25;
}

.course-detail-hero-copy p {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.course-detail-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.course-detail-hero-badges strong,
.course-detail-hero-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.course-detail-overview-grid {
  margin: 0;
}

.course-detail-grid--course-summary,
.course-detail-grid--exam-config-summary,
.course-detail-grid--exam-ops-summary {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.course-detail-grid--question-bank-summary {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.course-detail-card-span-2 {
  grid-column: span 2;
}

.course-detail-structure-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.course-detail-structure-grid article {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}

.course-detail-structure-grid .generated-course-grid {
  padding: 0;
}

@media (max-width: 1800px) {
  .course-detail-grid--course-summary,
  .course-detail-grid--exam-config-summary,
  .course-detail-grid--exam-ops-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .course-detail-grid--question-bank-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .course-detail-structure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .course-detail-grid--course-summary,
  .course-detail-grid--exam-config-summary,
  .course-detail-grid--exam-ops-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-detail-grid--question-bank-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-detail-structure-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-detail-card-span-2 {
    grid-column: span 1;
  }
}

.course-detail-empty,
.course-detail-empty-inline {
  color: #94a3b8;
}

.course-detail-empty {
  padding: 8px 0;
  line-height: 1.6;
}

.course-detail-generation-block {
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
  border: 1px solid #dbeafe;
}

.course-detail-generation-copy {
  display: grid;
  gap: 6px;
}

.course-detail-generation-copy strong {
  color: #0f172a;
}

.course-detail-generation-copy p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.course-detail-generation-warn {
  color: #b45309 !important;
}

.course-detail-total-weight {
  color: #0f172a;
  font-size: 14px;
}

.course-detail-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.course-detail-score-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 8px;
}

.course-detail-score-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-detail-score-card-head strong {
  color: #0f172a;
}

.course-detail-score-card-head span {
  color: #1d4ed8;
  font-weight: 800;
}

.course-detail-score-card p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.course-detail-stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.course-detail-stage-list article {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  background: #f8fafc;
  display: grid;
  gap: 8px;
}

.course-detail-stage-list strong {
  color: #0f172a;
}

.course-detail-stage-list p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.course-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.course-detail-info-card,
.course-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.course-detail-info-card h3,
.course-detail-card strong {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
}

.course-detail-info-card ul,
.course-detail-card ul {
  margin: 0;
  padding-left: 18px;
  color: #475569;
  line-height: 1.7;
}

.course-detail-card-grid,
.course-detail-demo-grid {
  display: grid;
  gap: 12px;
}

.course-detail-card p {
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.course-detail-card p span {
  color: #0f172a;
  font-weight: 700;
}

.course-detail-demo-card {
  display: grid;
  gap: 14px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 14px;
  background: #f8fbff;
}

.course-detail-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.course-detail-demo-head strong {
  color: #0f172a;
}

.course-detail-demo-head span {
  color: #475569;
  font-size: 13px;
}

.course-detail-stage-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .course-detail-hero {
    grid-template-columns: 1fr;
  }

  .course-detail-hero-badges {
    justify-content: flex-start;
  }

  .course-detail-text-list__head {
    flex-direction: column;
  }
}

.task-detail-panel {
  width: min(980px, calc(100vw - 48px));
}

.task-detail-section {
  display: grid;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 1px solid #e2e8f0;
}

.task-detail-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.task-detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-detail-section h3,
.task-detail-section h4 {
  margin: 0;
  color: #0f172a;
}

.task-detail-section p {
  color: #475569;
  line-height: 1.7;
}

.task-detail-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.task-detail-preview-grid section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.task-detail-preview-grid ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #475569;
  line-height: 1.6;
}

.task-detail-course-copy {
  display: grid;
  gap: 6px;
}

.task-detail-course-copy strong {
  color: #0f172a;
}

.course-script-view,
.course-script-editor {
  display: grid;
  gap: 0;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.course-script-opening {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.course-script-opening span {
  color: var(--muted);
  font-weight: 800;
}

.course-script-opening p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
}

.course-script-round {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.course-script-round:last-child {
  border-bottom: 0;
}

.course-script-round-no {
  font-weight: 800;
  color: var(--ink);
  line-height: 1.8;
}

.course-script-round-body {
  display: grid;
  gap: 10px;
}

.course-script-line {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 10px;
}

.course-script-line p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
}

.course-script-view .role-badge {
  width: auto;
  height: auto;
  justify-content: flex-start;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}

.course-script-view .role-badge.question,
.course-script-view .role-badge.answer {
  background: transparent;
}

.course-script-keywords {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 4px;
  background: #eef5ff;
  color: #1d65ff;
}

.generated-course-block .course-script-keywords span,
.course-script-keywords span,
.course-script-keywords strong {
  color: #1d65ff;
}

.course-script-keywords strong {
  font-weight: 700;
  white-space: pre-wrap;
}

.course-script-edit-section {
  display: grid;
  gap: 8px;
}

.course-script-edit-section > span {
  font-weight: 700;
}

.hidden-script-input {
  display: none;
}

.course-script-editor textarea,
.course-script-editor input {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.course-script-editor textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.65;
}

.course-script-editor .course-script-keywords input {
  color: #1d65ff;
  font-weight: 700;
}

.course-edit-box {
  display: grid;
  gap: 18px;
}

.course-edit-form {
  display: grid;
  gap: 14px;
}

.course-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.course-edit-action-status {
  color: var(--muted);
  font-size: 13px;
}

.course-edit-form #editScriptInput {
  min-height: 640px;
  overflow: hidden;
}

.course-score-editor {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.course-score-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.course-score-editor-head h2 {
  margin: 0;
  font-size: 18px;
}

.score-total-hint {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.score-total-hint.warn {
  color: var(--danger);
}

.course-score-editor-labels {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) 96px minmax(260px, 1.4fr) auto;
  gap: 10px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.course-score-item textarea {
  min-height: 56px;
  overflow: auto;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.34);
}

.confirm-modal[hidden] {
  display: none;
}

.confirm-dialog {
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.22);
}

.confirm-dialog.course-audio-dialog {
  width: calc(100vw - 48px);
  max-width: none;
}

.confirm-dialog h2 {
  margin-bottom: 10px;
}

.confirm-dialog p {
  color: #344054;
  line-height: 1.65;
  word-break: break-word;
}

.exam-question-bank-confirm-dialog {
  width: min(520px, calc(100vw - 40px));
  border-radius: 16px;
  padding: 24px;
}

.exam-question-bank-confirm-dialog h2 {
  margin-bottom: 12px;
  font-size: 20px;
}

.exam-question-bank-confirm-hint {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  background: #f8fbff;
  color: #516277;
  font-size: 13px;
  line-height: 1.65;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.confirm-actions button.warning {
  border-color: #d97706;
  background: #fff7ed;
  color: #b45309;
}

.exam-batch-confirm-modal {
  z-index: 80;
  background:
    radial-gradient(circle at 50% 20%, rgba(38, 103, 170, 0.16), transparent 34%),
    rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(3px);
}

.exam-batch-confirm-dialog {
  width: min(560px, calc(100vw - 40px));
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.exam-batch-confirm-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 24px 24px 18px;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
  border-bottom: 1px solid #dbeafe;
}

.exam-batch-confirm-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #1f5f9f;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(31, 95, 159, 0.24);
}

.exam-batch-confirm-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.exam-batch-confirm-head p {
  margin: 0;
  color: #53627a;
  font-size: 14px;
}

.exam-batch-confirm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 24px 8px;
}

.exam-batch-confirm-summary div {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.exam-batch-confirm-summary span {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12px;
}

.exam-batch-confirm-summary strong {
  color: #0f172a;
  font-size: 18px;
}

.exam-batch-confirm-note {
  margin: 10px 24px 0;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  background: #fffbeb;
  color: #7c4a03;
  font-size: 13px;
  line-height: 1.7;
}

.exam-batch-confirm-actions {
  padding: 18px 24px 24px;
}

.exam-batch-confirm-actions button {
  min-width: 96px;
}

.exam-batch-confirm-actions button:not(.ghost) {
  background: #1f5f9f;
  color: #fff;
  box-shadow: 0 10px 20px rgba(31, 95, 159, 0.18);
}

.inline-status {
  color: var(--muted);
  line-height: 1.4;
}

.inline-status.ok {
  color: #16703a;
}

.inline-status.error {
  color: var(--danger);
}

.tenant-dashboard-page {
  max-width: 1480px;
}

.tenant-dashboard-head {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 280px) auto;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
}

.tenant-dashboard-title,
.tenant-dashboard-plan,
.tenant-dashboard-actions,
.dashboard-kpi-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.tenant-dashboard-title {
  padding: 20px;
}

.dashboard-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.tenant-dashboard-title h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.tenant-dashboard-title p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.tenant-dashboard-plan {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
}

.tenant-dashboard-plan span,
.tenant-dashboard-plan small,
.dashboard-kpi-card span,
.dashboard-kpi-card small {
  color: var(--muted);
}

.tenant-dashboard-plan strong {
  font-size: 22px;
}

.tenant-dashboard-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 10px;
  align-content: center;
  padding: 16px;
}

.tenant-dashboard-actions a,
.dashboard-panel-head a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(23, 105, 170, 0.18);
  border-radius: 6px;
  background: #eef6ff;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.dashboard-alerts {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.tenant-workbench-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.tenant-workbench-card {
  display: grid;
  gap: 14px;
  min-height: 220px;
}

.tenant-workbench-card__head {
  display: grid;
  gap: 6px;
}

.tenant-workbench-card__head h2 {
  margin: 0;
  font-size: 18px;
}

.tenant-workbench-card__head span,
.tenant-workbench-card p {
  color: var(--muted);
}

.tenant-workbench-card p {
  margin: 0;
  line-height: 1.65;
}

.tenant-workbench-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.tenant-workbench-card__actions a,
.tenant-todo-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(23, 105, 170, 0.18);
  border-radius: 6px;
  background: #eef6ff;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}

.tenant-todo-list {
  display: grid;
  gap: 10px;
}

.tenant-todo-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-todo-item strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}

.tenant-todo-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-alert {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  line-height: 1.5;
  font-weight: 700;
}

.dashboard-alert.ok {
  border-color: rgba(5, 150, 105, 0.22);
  background: #f0fdf4;
  color: #047857;
}

.dashboard-alert.warn {
  border-color: rgba(217, 119, 6, 0.28);
  background: #fffbeb;
  color: #a16207;
}

.dashboard-alert.danger {
  border-color: rgba(220, 38, 38, 0.24);
  background: #fef2f2;
  color: #b42318;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-kpi-card {
  display: grid;
  gap: 8px;
  min-height: 128px;
  padding: 16px;
}

.dashboard-kpi-card strong {
  font-size: 28px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr) minmax(360px, 1.3fr);
  gap: 18px;
  align-items: start;
}

.dashboard-panel {
  min-height: 300px;
}

.dashboard-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-panel-head h2 {
  margin: 0;
}

.dashboard-panel-head span {
  color: var(--muted);
  font-weight: 800;
}

.quota-list {
  display: grid;
  gap: 14px;
}

.quota-item {
  display: grid;
  gap: 8px;
}

.quota-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quota-item-head span {
  color: var(--muted);
}

.quota-item small {
  color: var(--muted);
}

.quota-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.quota-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1769aa, #00856f);
}

.quota-item.over .quota-meter i {
  background: #dc2626;
}

.daily-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 210px;
}

.daily-bar-item {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.daily-bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 112px;
  border-radius: 8px;
  background: #f2f5f9;
}

.daily-bar-track i {
  display: block;
  width: 58%;
  border-radius: 6px 6px 0 0;
  background: #1769aa;
}

.daily-bar-item strong {
  color: var(--ink);
}

.recent-record-list {
  display: grid;
  gap: 10px;
}

.recent-record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
}

.recent-record-item div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recent-record-item span,
.recent-record-item small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-record-item b {
  color: var(--accent);
}

.empty-state.compact {
  padding: 18px;
}

@media (max-width: 1180px) {
  .tenant-dashboard-head,
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .tenant-workbench-grid,
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tenant-dashboard-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tenant-workbench-grid,
  .dashboard-kpi-grid,
  .tenant-dashboard-actions {
    grid-template-columns: 1fr;
  }

  .daily-bars {
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    overflow-x: auto;
  }

  .recent-record-item {
    grid-template-columns: 1fr;
  }
}

.platform-tenant-page {
  max-width: none;
  width: auto;
}

.tenant-create-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
}

.tenant-create-grid label {
  margin: 0;
}

.tenant-create-grid .tenant-note-field,
.tenant-create-grid .tenant-create-actions {
  grid-column: 1 / -1;
}

.tenant-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tenant-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(132px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-filter-grid label {
  margin: 0;
}

.tenant-filter-actions {
  display: flex;
  gap: 10px;
}

.tenant-filter-actions button {
  min-width: 72px;
}

.tenant-delivery-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  background: #f8fbff;
}

.tenant-delivery-panel[hidden] {
  display: none;
}

.tenant-plan-panel[hidden] {
  display: none;
}

.tenant-feature-panel[hidden] {
  display: none;
}

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

.tenant-delivery-head h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
}

.tenant-delivery-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.tenant-delivery-panel textarea {
  width: 100%;
  min-height: 190px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: 14px/1.7 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  resize: vertical;
}

.tenant-delivery-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.tenant-delivery-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.tenant-delivery-qr {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}

.tenant-delivery-qr[hidden] {
  display: none;
}

.tenant-delivery-qr-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 360px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 8px;
  background: #fff;
}

.tenant-delivery-qr-card--admin {
  border-color: rgba(23, 105, 170, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.tenant-delivery-qr-card--student {
  border-color: rgba(212, 160, 23, 0.36);
  background: linear-gradient(180deg, #ffffff 0%, #fff8e6 100%);
}

.tenant-delivery-qr-card canvas {
  width: 180px;
  height: 180px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tenant-delivery-qr-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.tenant-delivery-qr-copy strong {
  color: var(--text);
  font-size: 15px;
}

.tenant-delivery-qr-copy span {
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tenant-delivery-qr-copy a {
  width: fit-content;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.tenant-delivery-qr-card--student .tenant-delivery-qr-copy a {
  border-color: rgba(212, 160, 23, 0.36);
  background: #fff7df;
  color: #9a6a00;
}

@media (max-width: 720px) {
  .tenant-delivery-qr-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

.tenant-table-wrap {
  overflow-x: auto;
}

.tenant-feature-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #fdfefe 100%);
}

.tenant-feature-summary strong {
  display: block;
  margin-bottom: 4px;
}

.tenant-feature-form {
  display: grid;
  gap: 16px;
}

.tenant-feature-inherit,
.tenant-feature-switch {
  display: grid;
  gap: 12px;
}

.tenant-feature-inherit input,
.tenant-feature-switch input,
.tenant-feature-option input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  margin: 0;
  padding: 0;
  justify-self: end;
  align-self: start;
  accent-color: #2563eb;
}

.tenant-feature-inherit {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: 12px 16px;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.tenant-feature-inherit > div {
  min-width: 0;
}

.tenant-feature-inherit strong {
  display: block;
  margin-bottom: 4px;
}

.tenant-feature-groups {
  /* 左右两栏瀑布式排布，分组高度不同也能紧凑堆叠 */
  columns: 2;
  column-gap: 16px;
}

.tenant-feature-group {
  break-inside: avoid;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #e5edf6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.tenant-feature-group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef3f8;
}

.tenant-feature-group__head > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.tenant-feature-group__head h3 {
  margin: 0;
  font-size: 16px;
}

.tenant-feature-group__head .form-help {
  margin: 0;
  color: #64748b;
}

.tenant-feature-switch--group {
  display: inline-grid;
  grid-template-columns: 16px auto;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dbe7f5;
  border-radius: 999px;
  background: #f8fbff;
  align-items: center;
  white-space: nowrap;
}

.tenant-feature-switches {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.tenant-feature-switch.disabled,
.tenant-feature-option.disabled {
  opacity: 0.68;
}

.tenant-feature-switch span,
.tenant-feature-option__text {
  line-height: 1.5;
}

.tenant-feature-option {
  display: grid;
  /* 勾选框在左、文字随后 */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fbfcfe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tenant-feature-option__text {
  display: block;
  color: #1f2937;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.tenant-feature-reason textarea {
  min-height: 72px;
}

@media (max-width: 1200px) {
  .tenant-feature-group__head {
    flex-direction: column;
  }

  .tenant-feature-switch--group {
    width: fit-content;
  }
}

@media (max-width: 1100px) {
  .tenant-feature-groups {
    columns: 1;
  }
}

@media (max-width: 640px) {
  .tenant-feature-switches {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sidebar-account-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.sidebar-account-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.sidebar-account-name {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
}

.sidebar-account-id,
.sidebar-account-note {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}

.sidebar-account-btn {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.18);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-account-btn:hover {
  background: rgba(59, 130, 246, 0.24);
}

.sidebar-account-btn--ghost {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-account-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
}

.tenant-feature-reason {
  display: grid;
  gap: 8px;
}

.diagnosis-hero {
  display: grid;
  gap: 18px;
}

.diagnosis-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.diagnosis-hero__top h1 {
  margin: 0 0 8px;
}

.diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.diagnosis-card {
  padding: 20px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.diagnosis-card h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.diagnosis-card p {
  margin: 0;
  color: var(--ink-secondary);
  line-height: 1.7;
}

.diagnosis-hero--compact {
  margin-bottom: 18px;
}

.diagnosis-hero__panel {
  padding: 18px 20px;
}

.diagnosis-hero__panel h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.diagnosis-hero__panel p {
  margin: 0;
  color: var(--ink-secondary);
}

.diagnosis-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.diagnosis-summary-grid--results {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.diagnosis-summary-card {
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.diagnosis-summary-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.diagnosis-summary-card strong {
  display: block;
  margin-top: 8px;
  color: #101828;
  font-size: 28px;
  line-height: 1.1;
}

.diagnosis-filter-panel {
  margin-bottom: 18px;
}

.diagnosis-query-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.diagnosis-query-grid label {
  min-width: 0;
}

.diagnosis-query-actions {
  margin-top: 0;
}

.diagnosis-table-panel .course-table-head {
  align-items: start;
}

.is-linked-target {
  background: #f0f7ff;
}

.is-linked-target td:first-child {
  font-weight: 700;
  color: #1f5f9f;
}

.diagnosis-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.diagnosis-action-panel,
.diagnosis-mini-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diagnosis-form-panel {
  gap: 16px;
}

.diagnosis-action-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.diagnosis-action-panel__head--compact h2 {
  font-size: 16px;
}

.diagnosis-action-panel__head h2,
.diagnosis-mini-panel__head h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.diagnosis-action-panel__head p,
.diagnosis-mini-panel__head p {
  margin: 0;
  color: var(--ink-secondary);
}

.diagnosis-call-status {
  margin: 0;
  min-height: 22px;
  color: var(--ink-secondary);
}

.diagnosis-call-status.status-success {
  color: #067647;
  font-weight: 700;
}

.diagnosis-call-status.status-error {
  color: #b42318;
  font-weight: 700;
}

.diagnosis-call-status.status-busy {
  color: #1d4ed8;
  font-weight: 600;
}

.diagnosis-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.diagnosis-field {
  margin: 0;
  min-width: 0;
}

.diagnosis-field span {
  display: block;
  margin-bottom: 8px;
  color: #344054;
  font-weight: 700;
}

.diagnosis-field--required span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.diagnosis-required-mark {
  color: #d92d20;
  font-style: normal;
  font-weight: 800;
}

.diagnosis-required-hint {
  display: block;
  margin-top: 8px;
  color: #d92d20;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.diagnosis-required-input {
  border-color: #fda29b;
  background: #fffafa;
}

.diagnosis-required-input--invalid {
  border-color: #d92d20 !important;
  background: #fff5f5;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.diagnosis-field--full {
  grid-column: 1 / -1;
}

.diagnosis-inline-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.diagnosis-inline-actions span {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
}

.diagnosis-textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
}

.diagnosis-textarea--compact {
  min-height: 92px;
}

.diagnosis-panel-divider {
  height: 1px;
  background: var(--line-soft);
}

.diagnosis-action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.diagnosis-action-links a {
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: none;
}

.diagnosis-action-links a:hover {
  text-decoration: underline;
}

.diagnosis-created-panel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f9fafb;
  padding: 14px;
}

.diagnosis-created-panel strong {
  display: block;
  color: #101828;
  margin-bottom: 6px;
}

.diagnosis-created-panel p {
  margin: 4px 0 0;
  color: var(--ink-secondary);
}

.diagnosis-created-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.diagnosis-created-badge {
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #bfd5ff;
  background: #eef4ff;
}

.diagnosis-created-badge span {
  display: block;
  margin-bottom: 4px;
  color: #475467;
  font-size: 12px;
}

.diagnosis-created-badge strong {
  margin: 0;
  color: #175cd3;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.diagnosis-created-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.diagnosis-created-actions a,
.diagnosis-created-actions button {
  width: auto;
}

.diagnosis-mini-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diagnosis-mini-item,
.diagnosis-mini-empty {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
}

.diagnosis-mini-item__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 6px;
}

.diagnosis-mini-item__head strong {
  color: #101828;
}

.diagnosis-mini-item__head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.diagnosis-mini-item p,
.diagnosis-mini-empty {
  margin: 0;
  color: var(--ink-secondary);
}

.diagnosis-mini-item__number {
  margin: 0 0 4px;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.diagnosis-mini-item__links {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.diagnosis-mini-item__links a {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.diagnosis-mini-item__links a:hover {
  text-decoration: underline;
}

.diagnosis-mini-link-button {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
}

.diagnosis-mini-link-button:hover {
  text-decoration: underline;
}

.call-page {
  display: grid;
  gap: 16px;
  padding-bottom: 92px;
}

.call-topbar {
  margin-bottom: 0;
}

.call-summary-grid {
  margin-bottom: 0;
}

.call-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.call-main-panel,
.call-side-panel {
  display: grid;
  gap: 16px;
}

.call-main-panel {
  padding: 18px;
}

.call-side-stack {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 16px;
}

.call-panel-head,
.call-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.call-panel-head h2,
.call-section-head h3 {
  margin: 0 0 6px;
  color: var(--ink);
}

.call-panel-head h2 {
  font-size: 20px;
}

.call-section-head h3 {
  font-size: 16px;
}

.call-panel-head p,
.call-section-head p {
  margin: 0;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.call-section {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.call-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.call-section--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.call-section-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.call-meta-grid,
.call-audio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.call-audio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.call-input-pair {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
}

.call-audio-column,
.call-text-column {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.call-text-column .diagnosis-field.call-field-wide {
  width: calc(100% - 100px);
  margin-left: auto;
}

.call-audio-file-field {
  min-height: 500px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}

.call-audio-file-field span {
  margin-bottom: 0;
}

.call-audio-file-field input[type="file"] {
  min-height: 44px;
  background: #fff;
}

.call-audio-file-list {
  min-height: 0;
  max-height: 390px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #fff;
}

.call-audio-file-empty {
  margin: 0;
  padding: 12px;
  color: var(--ink-secondary);
  font-size: 13px;
  text-align: center;
}

.call-audio-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}

.call-audio-file-item__name {
  overflow: hidden;
  color: var(--ink-primary);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-audio-file-item__meta {
  flex-shrink: 0;
  color: var(--ink-secondary);
  font-size: 12px;
}

.call-audio-file-remove {
  flex-shrink: 0;
  width: auto;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #344054;
  font-size: 12px;
}

.call-field-wide {
  grid-column: 1 / -1;
}

.call-more-fields {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  align-self: end;
}

.call-more-fields summary {
  cursor: pointer;
  color: var(--brand-600);
  font-weight: 700;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.call-more-fields[open] summary {
  margin-bottom: 12px;
}

.call-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.call-action-row button {
  width: auto;
}

.call-action-row--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.call-action-row--three button,
.call-action-row--text button {
  width: 100%;
}

.call-action-row--text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc(100% - 100px);
  margin-left: auto;
  transform: translateX(50px);
}

.call-action-row--text button {
  width: 50%;
  min-width: 0;
}

#convertTimestampBtn {
  justify-self: end;
}

#timestampWorkflowBtn {
  justify-self: start;
}

.call-floating-links {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 40;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.call-floating-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: #f8fafc;
}

.call-helper-text {
  margin: 0;
  min-height: 20px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.call-dialogue-field {
  margin-top: 20px;
}

.call-dialogue-textarea {
  min-height: 250px;
}

.call-timestamp-textarea {
  min-height: 200px;
}

.call-status-section {
  gap: 12px;
}

.call-side-panel {
  padding: 16px;
}

.call-demo-panel button {
  width: 100%;
}

.call-side-panel .diagnosis-mini-list {
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.call-side-panel .diagnosis-mini-item {
  border-radius: 8px;
}

.call-side-panel .diagnosis-mini-item__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.call-side-panel .diagnosis-mini-item__head strong {
  overflow-wrap: anywhere;
}

.storefront-video-file-field {
  min-height: 420px;
}

.storefront-business-hints {
  min-height: 340px;
}

.storefront-hint-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #f8fafc;
}

.storefront-hint-card strong {
  color: var(--ink);
}

.storefront-hint-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-secondary);
  line-height: 1.65;
}

.storefront-created-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

.diagnosis-table {
  table-layout: auto;
  min-width: 1280px;
}

.diagnosis-jobs-table {
  min-width: 1784px;
}

.diagnosis-results-table {
  min-width: 1564px;
}

.diagnosis-table th,
.diagnosis-table td {
  vertical-align: top;
}

.diagnosis-table-actions {
  flex-wrap: nowrap;
  gap: 8px;
  white-space: nowrap;
}

.diagnosis-row-title {
  color: #101828;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.diagnosis-jobs-table .diagnosis-col-task-no,
.diagnosis-jobs-table .diagnosis-col-task-no-cell {
  width: 12.75rem;
  min-width: 12.75rem;
  max-width: 12.75rem;
}

.diagnosis-results-table .diagnosis-col-task-no,
.diagnosis-results-table .diagnosis-col-task-no-cell {
  width: 12.75rem;
  min-width: 12.75rem;
  max-width: 12.75rem;
}

.diagnosis-col-task-no-cell {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.diagnosis-col-domain,
.diagnosis-col-domain-cell {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
}

.diagnosis-col-scene,
.diagnosis-col-scene-cell {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

.diagnosis-jobs-table .diagnosis-col-title,
.diagnosis-jobs-table .diagnosis-col-title-cell {
  width: 14.5rem;
  min-width: 14.5rem;
  max-width: 14.5rem;
}

.diagnosis-results-table .diagnosis-col-title,
.diagnosis-results-table .diagnosis-col-title-cell {
  width: 13.5rem;
  min-width: 13.5rem;
  max-width: 13.5rem;
}

.diagnosis-compact-id {
  font-weight: 700;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.diagnosis-results-table .diagnosis-compact-id {
  font-weight: 400;
}

.diagnosis-results-table .diagnosis-row-title {
  font-weight: 400;
}

.diagnosis-jobs-table .diagnosis-col-materials,
.diagnosis-jobs-table .diagnosis-col-materials-cell {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
}

.diagnosis-jobs-table .diagnosis-col-status,
.diagnosis-jobs-table .diagnosis-col-status-cell {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
}

.diagnosis-jobs-table .diagnosis-col-progress,
.diagnosis-jobs-table .diagnosis-col-progress-cell {
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
}

.diagnosis-jobs-table .diagnosis-col-summary,
.diagnosis-jobs-table .diagnosis-col-summary-cell {
  width: 14.5rem;
  min-width: 14.5rem;
  max-width: 14.5rem;
}

.diagnosis-jobs-table .diagnosis-col-owner,
.diagnosis-jobs-table .diagnosis-col-owner-cell {
  width: 5.25rem;
  min-width: 5.25rem;
  max-width: 5.25rem;
}

.diagnosis-results-table .diagnosis-col-result-type,
.diagnosis-results-table .diagnosis-col-result-type-cell {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
}

.diagnosis-results-table .diagnosis-col-subject,
.diagnosis-results-table .diagnosis-col-subject-cell {
  width: 7rem;
  min-width: 7rem;
  max-width: 7rem;
}

.diagnosis-results-table .diagnosis-col-materials,
.diagnosis-results-table .diagnosis-col-materials-cell {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
}

.diagnosis-results-table .diagnosis-col-artifact-count,
.diagnosis-results-table .diagnosis-col-artifact-count-cell {
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
}

.diagnosis-col-created-at,
.diagnosis-col-created-at-cell,
.diagnosis-col-updated-at,
.diagnosis-col-updated-at-cell {
  width: 9.5rem;
  min-width: 9.5rem;
  max-width: 9.5rem;
}

.diagnosis-jobs-table .diagnosis-col-actions,
.diagnosis-jobs-table .diagnosis-col-actions-cell {
  width: 13.75rem;
  min-width: 13.75rem;
  max-width: 13.75rem;
}

.diagnosis-results-table .diagnosis-col-actions,
.diagnosis-results-table .diagnosis-col-actions-cell {
  width: 11rem;
  min-width: 11rem;
  max-width: 11rem;
}

.diagnosis-col-status-cell,
.diagnosis-col-progress-cell,
.diagnosis-col-owner-cell,
.diagnosis-col-artifact-count-cell,
.diagnosis-col-created-at-cell,
.diagnosis-col-updated-at-cell,
.diagnosis-col-actions-cell {
  white-space: nowrap;
}

.diagnosis-col-check {
  width: 4rem;
  min-width: 4rem;
  text-align: center;
}

.diagnosis-task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.diagnosis-task-toolbar__check {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.diagnosis-task-toolbar__check span {
  display: inline-block;
  white-space: nowrap;
}

.diagnosis-task-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.diagnosis-task-toolbar__actions .table-action-button {
  min-height: 30px;
  padding: 6px 12px;
  white-space: nowrap;
}

.diagnosis-batch-toolbar__hint {
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.diagnosis-col-check-cell {
  text-align: center;
  vertical-align: middle;
}

.diagnosis-table--marketing-batch-off .diagnosis-col-check,
.diagnosis-table--marketing-batch-off .diagnosis-col-check-cell {
  display: none;
}

.diagnosis-table-check {
  width: 16px;
  height: 16px;
  accent-color: #175cd3;
  cursor: pointer;
}

.diagnosis-table-check-disabled {
  color: #98a2b3;
  font-size: 12px;
  white-space: nowrap;
}

.diagnosis-task-preview {
  min-height: 220px;
}

.diagnosis-task-artifact-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diagnosis-artifact-group {
  border: 1px solid #dbe6f5;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.diagnosis-artifact-group[open] {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.diagnosis-artifact-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  background: #f8fbff;
}

.diagnosis-artifact-group__summary::-webkit-details-marker {
  display: none;
}

.diagnosis-artifact-group__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diagnosis-artifact-group__title strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.diagnosis-artifact-group__title span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.diagnosis-artifact-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #245fb2;
  font-size: 12px;
  font-weight: 700;
}

.diagnosis-artifact-group__empty {
  padding: 20px 16px;
}

.diagnosis-task-artifacts-table .diagnosis-col-artifact-name,
.diagnosis-task-artifacts-table .diagnosis-col-artifact-name-cell {
  width: 14rem;
  min-width: 14rem;
  max-width: 14rem;
}

.diagnosis-task-artifacts-table .diagnosis-col-source-result,
.diagnosis-task-artifacts-table .diagnosis-col-source-result-cell {
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
}

.diagnosis-task-artifacts-table .diagnosis-col-file-name,
.diagnosis-task-artifacts-table .diagnosis-col-file-name-cell {
  width: 18rem;
  min-width: 18rem;
  max-width: 18rem;
  word-break: break-word;
}

.diagnosis-task-artifacts-table .diagnosis-col-updated-at,
.diagnosis-task-artifacts-table .diagnosis-col-updated-at-cell {
  width: 9rem;
  min-width: 9rem;
  max-width: 9rem;
}

.diagnosis-task-artifacts-table .diagnosis-col-actions,
.diagnosis-task-artifacts-table .diagnosis-col-actions-cell {
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
}

.diagnosis-task-artifacts-table .diagnosis-table-actions {
  justify-content: flex-start;
  gap: 6px;
  white-space: nowrap;
}

.diagnosis-task-artifacts-table .table-action-button,
.diagnosis-detail-actions .table-action-button {
  min-height: 30px;
  padding: 6px 10px;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  filter: none;
  transform: none;
  text-decoration: none;
}

.diagnosis-task-artifacts-table .table-action-button:hover,
.diagnosis-detail-actions .table-action-button:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: none;
  filter: none;
  transform: none;
  text-decoration: none;
}

.diagnosis-task-artifacts-table .table-action-button--secondary,
.diagnosis-detail-actions .table-action-button--secondary {
  border-color: rgba(0, 133, 111, 0.18);
  background: #ecfdf5;
  color: #047857;
}

.diagnosis-task-artifacts-table .table-action-button--secondary:hover,
.diagnosis-detail-actions .table-action-button--secondary:hover {
  border-color: rgba(0, 133, 111, 0.24);
  background: #d1fae5;
  color: #047857;
}

.diagnosis-task-artifacts-table .table-action-button--upload,
.diagnosis-detail-actions .table-action-button--upload {
  border-color: rgba(13, 148, 136, 0.2);
  background: #ecfeff;
  color: #0f766e;
}

.diagnosis-task-artifacts-table .table-action-button--upload:hover,
.diagnosis-detail-actions .table-action-button--upload:hover {
  border-color: rgba(13, 148, 136, 0.26);
  background: #cffafe;
  color: #0f766e;
}

.diagnosis-task-artifacts-table .table-action-button--light,
.diagnosis-detail-actions .table-action-button--light {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #475569;
}

.diagnosis-task-artifacts-table .table-action-button--light:hover,
.diagnosis-detail-actions .table-action-button--light:hover {
  border-color: #cbd5e1;
  background: #eef2f6;
  color: #334155;
}

.diagnosis-task-artifacts-table .table-action-button--downloaded,
.diagnosis-detail-actions .table-action-button--downloaded,
.diagnosis-task-artifacts-table .table-action-button[data-downloaded="true"],
.diagnosis-detail-actions .table-action-button[data-downloaded="true"] {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.diagnosis-task-artifacts-table .table-action-button--downloaded:hover,
.diagnosis-detail-actions .table-action-button--downloaded:hover,
.diagnosis-task-artifacts-table .table-action-button[data-downloaded="true"]:hover,
.diagnosis-detail-actions .table-action-button[data-downloaded="true"]:hover {
  border-color: #f1c96b;
  background: #fff8e6;
  color: #b45309;
}

.diagnosis-task-artifacts-table .table-action-button[disabled],
.diagnosis-task-artifacts-table .table-action-button--disabled,
.diagnosis-detail-actions .table-action-button[disabled],
.diagnosis-detail-actions .table-action-button--disabled {
  border-color: #e5e7eb;
  background: #f2f4f7;
  color: #98a2b3;
  box-shadow: none;
  filter: none;
}

.diagnosis-row-meta,
.diagnosis-row-subtext {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.diagnosis-row-subtext--error {
  color: #b42318;
}

.diagnosis-row-subtext--hint {
  color: #475467;
}

.diagnosis-inline-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
}

.diagnosis-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.diagnosis-pill--ok {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.diagnosis-pill--warn {
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.diagnosis-pill--neutral {
  border: 1px solid #d0d5dd;
  background: #f8fafc;
  color: #475467;
}

.table-action-link {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  align-self: center;
}

.table-action-link:hover {
  text-decoration: underline;
}

.table-action-link.disabled {
  color: var(--muted);
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.table-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid #2e6df6;
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #5fa8ff 0%, #2563eb 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 3px 0 rgba(29, 78, 216, 0.9),
    0 10px 20px rgba(37, 99, 235, 0.26);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.table-action-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 4px 0 rgba(29, 78, 216, 0.88),
    0 14px 24px rgba(37, 99, 235, 0.3);
  text-decoration: none;
}

.diagnosis-jobs-table .table-action-button,
.diagnosis-results-table .table-action-button {
  min-height: 30px;
  padding: 6px 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(37, 99, 235, 0.18);
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: none;
  filter: none;
}

.diagnosis-jobs-table .table-action-button:hover,
.diagnosis-results-table .table-action-button:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow: none;
  filter: none;
  transform: none;
}

.diagnosis-jobs-table .table-action-button--secondary,
.diagnosis-results-table .table-action-button--secondary {
  border-color: rgba(0, 133, 111, 0.18);
  background: #ecfdf5;
  color: #047857;
}

.diagnosis-jobs-table .table-action-button--warning,
.diagnosis-results-table .table-action-button--warning {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.diagnosis-jobs-table .table-action-button--upload,
.diagnosis-results-table .table-action-button--upload {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.diagnosis-jobs-table .table-action-button--disabled,
.diagnosis-jobs-table .table-action-button[disabled],
.diagnosis-results-table .table-action-button--disabled,
.diagnosis-results-table .table-action-button[disabled] {
  border-color: #e5e7eb;
  background: #f2f4f7;
  color: #98a2b3;
  box-shadow: none;
}

.table-action-button--secondary {
  border-color: #059669;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #34d399 0%, #059669 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 3px 0 rgba(4, 120, 87, 0.92),
    0 10px 20px rgba(5, 150, 105, 0.24);
}

.table-action-button--warning {
  border-color: #ea580c;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 3px 0 rgba(154, 52, 18, 0.92),
    0 10px 20px rgba(234, 88, 12, 0.24);
}

.table-action-button--upload {
  border-color: #0f766e;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #2dd4bf 0%, #0f766e 100%);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 3px 0 rgba(15, 118, 110, 0.9),
    0 10px 20px rgba(20, 184, 166, 0.24);
}

.table-action-button--disabled,
.table-action-button[disabled] {
  border-color: #e5e7eb;
  background: linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%);
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 0 rgba(203, 213, 225, 0.9);
  transform: none;
  pointer-events: none;
}

.diagnosis-detail-modal,
.diagnosis-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
}

.diagnosis-detail-modal__backdrop,
.diagnosis-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}

.diagnosis-detail-modal__dialog,
.diagnosis-modal__panel {
  position: relative;
  width: min(880px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  margin: 32px auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.diagnosis-detail-modal__head,
.diagnosis-modal__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.diagnosis-detail-modal__head h2,
.diagnosis-modal__head h2 {
  margin: 0 0 6px;
}

.diagnosis-detail-modal__head p,
.diagnosis-modal__head p {
  margin: 0;
  color: var(--muted);
}

.diagnosis-detail-modal__body,
.diagnosis-modal__body {
  padding: 20px 24px 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.diagnosis-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.diagnosis-detail-grid > div,
.diagnosis-detail-block {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #f8fafc;
  padding: 12px 14px;
}

.diagnosis-detail-block--error {
  border-color: #fecaca;
  background: #fff7f7;
}

.diagnosis-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.diagnosis-detail-grid strong {
  color: #101828;
}

.diagnosis-detail-grid em {
  display: block;
  margin-top: 6px;
  color: var(--ink-secondary);
  font-size: 12px;
  font-style: normal;
}

.diagnosis-detail-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.diagnosis-detail-block p,
.diagnosis-detail-block pre {
  margin: 0;
  color: var(--ink-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.diagnosis-error-summary {
  display: grid;
  gap: 10px;
}

.diagnosis-error-summary > div {
  display: grid;
  gap: 6px;
}

.diagnosis-error-summary span {
  color: var(--muted);
  font-size: 12px;
}

.diagnosis-error-summary strong {
  color: #b42318;
}

.diagnosis-lineage-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.diagnosis-lineage-item {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #ffffff;
}

.diagnosis-lineage-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.diagnosis-lineage-item strong {
  color: #101828;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.diagnosis-report-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.diagnosis-report-preview__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.diagnosis-report-preview__head strong {
  color: #101828;
}

.diagnosis-report-preview__head span {
  color: var(--muted);
  font-size: 13px;
}

.diagnosis-report-preview__section {
  display: grid;
  gap: 6px;
}

.diagnosis-report-preview__section h4 {
  margin: 0;
  color: #101828;
  font-size: 13px;
}

.diagnosis-report-preview__section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-secondary);
}

.diagnosis-report-preview__section li + li {
  margin-top: 4px;
}

.diagnosis-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.diagnosis-detail-actions .table-action-button {
  min-width: 96px;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 8px;
}

.diagnosis-detail-actions a,
.diagnosis-detail-actions button {
  width: auto;
}

.status-pill.status-neutral {
  background: #f2f4f7;
  color: #475467;
  border: 1px solid #d0d5dd;
}

@media (max-width: 1480px) {
  .diagnosis-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diagnosis-query-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .diagnosis-action-grid {
    grid-template-columns: 1fr;
  }

  .call-workbench-grid,
  .call-section--split,
  .call-meta-grid,
  .call-input-pair {
    grid-template-columns: 1fr;
  }

  .call-side-stack {
    position: static;
  }

  .call-floating-links {
    right: 16px;
    bottom: 16px;
  }

  .diagnosis-form-grid {
    grid-template-columns: 1fr;
  }

  .diagnosis-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diagnosis-lineage-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .diagnosis-summary-grid,
  .diagnosis-summary-grid--results,
  .call-audio-grid,
  .diagnosis-query-grid {
    grid-template-columns: 1fr;
  }

  .call-panel-head,
  .call-section-head {
    display: grid;
  }

  .call-text-column .diagnosis-field.call-field-wide,
  .call-action-row--text {
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .call-action-row--text button {
    width: 100%;
  }

  .diagnosis-detail-modal__dialog,
  .diagnosis-modal__panel {
    width: calc(100vw - 24px);
    margin: 12px auto;
    max-height: calc(100vh - 24px);
  }

  .diagnosis-detail-grid {
    grid-template-columns: 1fr;
  }

  .diagnosis-row-meta,
  .diagnosis-row-subtext {
    gap: 6px;
  }
}

.tenant-table th:nth-child(1),
.tenant-table td:nth-child(1) {
  min-width: 180px;
}

.tenant-table th:nth-child(3),
.tenant-table td:nth-child(3) {
  min-width: 210px;
}

.tenant-table th:nth-child(5),
.tenant-table td:nth-child(5) {
  min-width: 170px;
}

.tenant-table th:nth-child(6),
.tenant-table td:nth-child(6) {
  min-width: 320px;
}

.tenant-table th:nth-child(8),
.tenant-table td:nth-child(8) {
  min-width: 280px;
}

.backup-table {
  table-layout: fixed;
  min-width: 1320px;
}

.tenant-table.backup-table th:nth-child(1),
.tenant-table.backup-table td:nth-child(1) {
  min-width: 52px;
  width: 52px;
  text-align: center;
}

.tenant-table.backup-table th:nth-child(2),
.tenant-table.backup-table td:nth-child(2) {
  min-width: 90px;
  width: 90px;
}

.tenant-table.backup-table th:nth-child(3),
.tenant-table.backup-table td:nth-child(3) {
  min-width: 150px;
  width: 150px;
}

.tenant-table.backup-table th:nth-child(4),
.tenant-table.backup-table td:nth-child(4) {
  min-width: 220px;
  width: 220px;
}

.tenant-table.backup-table th:nth-child(5),
.tenant-table.backup-table td:nth-child(5) {
  min-width: 128px;
  width: 128px;
}

.tenant-table.backup-table th:nth-child(6),
.tenant-table.backup-table td:nth-child(6) {
  min-width: 78px;
  width: 78px;
}

.tenant-table.backup-table th:nth-child(7),
.tenant-table.backup-table td:nth-child(7) {
  min-width: 210px;
  width: 210px;
}

.tenant-table.backup-table th:nth-child(8),
.tenant-table.backup-table td:nth-child(8) {
  min-width: 120px;
  width: 120px;
}

.tenant-table.backup-table th:nth-child(9),
.tenant-table.backup-table td:nth-child(9) {
  min-width: 100px;
  width: 100px;
}

.tenant-table.backup-table th:nth-child(10),
.tenant-table.backup-table td:nth-child(10) {
  min-width: 250px;
  width: 250px;
}

.backup-table td:nth-child(4) strong {
  overflow-wrap: anywhere;
}

.tenant-code,
.tenant-path {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  word-break: break-all;
}

.tenant-path.muted {
  font-family: inherit;
}

.tenant-path.danger {
  color: var(--danger);
  font-family: inherit;
  font-weight: 800;
}

.tenant-quota-row {
  display: inline-flex;
  margin: 7px 6px 0 0;
  padding: 4px 8px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.tenant-quota-row.over {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.audit-filter-grid {
  align-items: end;
}

.audit-table th:nth-child(1),
.audit-table td:nth-child(1) {
  min-width: 170px;
}

.audit-table th:nth-child(2),
.audit-table td:nth-child(2) {
  min-width: 150px;
}

.audit-table th:nth-child(5),
.audit-table td:nth-child(5) {
  min-width: 360px;
}

.audit-table th:nth-child(6),
.audit-table td:nth-child(6) {
  min-width: 220px;
}

.audit-detail:empty {
  display: none;
}

.tenant-entry-link,
.tenant-entry-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.tenant-entry-link {
  border: 1px solid rgba(37, 99, 235, 0.22);
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
}

.tenant-entry-link:hover {
  background: #dbeafe;
}

.tenant-entry-disabled {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: var(--muted);
}

.tenant-admin-risk {
  display: inline-flex;
  margin-top: 7px;
  padding: 4px 8px;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
}

.operations-hero .provider-head {
  align-items: flex-start;
}

.operations-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
}

.operations-metric-grid article {
  min-height: 92px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.operations-metric-grid strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
  word-break: break-word;
}

.operations-metric-grid span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.operations-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.operations-check-list,
.operations-focus-list {
  display: grid;
  gap: 10px;
}

.operations-check-row {
  display: grid;
  grid-template-columns: auto minmax(110px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.operations-check-row span:last-child {
  color: var(--muted);
  word-break: break-word;
}

.operations-model-warning {
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 700;
}

.operations-focus-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.6fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #f3d38b;
  border-radius: 8px;
  background: #fff7e6;
  color: #7c4a03;
}

.operations-focus-item.danger {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.operations-focus-item span {
  line-height: 1.5;
}

.operations-table th:nth-child(1),
.operations-table td:nth-child(1) {
  min-width: 190px;
}

.operations-table th:nth-child(2),
.operations-table td:nth-child(2) {
  min-width: 220px;
}

.operations-table th:nth-child(3),
.operations-table td:nth-child(3) {
  min-width: 190px;
}

.operations-table th:nth-child(4),
.operations-table td:nth-child(4) {
  min-width: 160px;
}

.operations-table th:nth-child(5),
.operations-table td:nth-child(5) {
  min-width: 240px;
}

.operations-table th:nth-child(6),
.operations-table td:nth-child(6) {
  min-width: 280px;
}

.operations-check-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.operations-check {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.operations-check.done {
  border: 1px solid #bce8c9;
  background: #e9f8ee;
  color: #16703a;
}

.operations-check.pending {
  border: 1px solid #f3d38b;
  background: #fff7e6;
  color: #9a6200;
}

.operations-action {
  margin-bottom: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.operations-action.danger {
  color: var(--danger);
  font-weight: 700;
}

.operations-audit-table th:nth-child(5),
.operations-audit-table td:nth-child(5) {
  min-width: 360px;
}

.billing-plan-table th:nth-child(1),
.billing-plan-table td:nth-child(1) {
  min-width: 180px;
}

.billing-plan-table th:nth-child(2),
.billing-plan-table td:nth-child(2) {
  min-width: 300px;
}

.billing-plan-table th:nth-child(3),
.billing-plan-table td:nth-child(3) {
  min-width: 260px;
}

.billing-table th:nth-child(4),
.billing-table td:nth-child(4) {
  min-width: 220px;
}

.billing-table th:nth-child(6),
.billing-table td:nth-child(6) {
  min-width: 360px;
}

.billing-log-table th:nth-child(4),
.billing-log-table td:nth-child(4),
.billing-log-table th:nth-child(6),
.billing-log-table td:nth-child(6) {
  min-width: 220px;
}

.billing-inline-field {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.billing-inline-field input,
.billing-plan-grid input,
.billing-plan-table select {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}

.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px;
}

.billing-plan-grid label {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.billing-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 8px;
}

.billing-feature-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.billing-feature-grid input {
  width: 16px;
  height: 16px;
}

.model-cost-summary-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.model-trend-summary-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.model-cost-period-card {
  display: grid;
  gap: 14px;
}

.model-cost-period-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.model-cost-period-head h2 {
  margin: 0 0 6px;
}

.model-cost-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-cost-period-tabs button {
  min-width: 82px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 700;
}

.model-cost-period-tabs button.active {
  border-color: rgba(37, 99, 235, 0.34);
  background: #eff6ff;
  color: #1d4ed8;
}

.model-cost-custom-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.model-cost-custom-period[hidden] {
  display: none;
}

.model-cost-custom-period label {
  margin: 0;
}

.model-cost-custom-period button {
  min-width: 80px;
}

.model-trend-filter-card {
  display: grid;
  gap: 14px;
}

.model-trend-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) minmax(240px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.model-trend-filter-form label,
.model-trend-granularity {
  margin: 0;
}

.model-trend-granularity > span {
  display: block;
  margin-bottom: 8px;
  color: #344054;
  font-weight: 600;
}

.model-trend-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.model-trend-chart-card {
  min-width: 0;
}

.model-trend-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.model-trend-chart-head h2 {
  display: inline-block;
  margin: 0 10px 0 0;
}

.model-trend-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
  gap: 8px;
  min-height: 260px;
  overflow-x: auto;
  padding: 8px 4px 2px;
}

.model-trend-bar-item {
  display: grid;
  grid-template-rows: 34px 180px 36px;
  align-items: end;
  justify-items: center;
  min-width: 28px;
}

.model-trend-bar-value {
  align-self: start;
  max-width: 72px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.model-trend-bar-track {
  position: relative;
  width: 100%;
  max-width: 21px;
  height: 180px;
  border-radius: 8px 8px 4px 4px;
  background: #eef2f7;
  overflow: hidden;
}

.model-trend-bar-track i {
  position: absolute;
  inset: auto 0 0;
  display: block;
  min-height: 0;
  border-radius: 8px 8px 0 0;
  background: #1769aa;
}

.model-trend-chart.cost .model-trend-bar-track i {
  background: #00856f;
}

.model-trend-chart.danger .model-trend-bar-track i {
  background: #dc2626;
}

.model-trend-chart.warn .model-trend-bar-track i {
  background: #d97706;
}

.model-trend-bar-label {
  align-self: start;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.model-trend-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: var(--muted);
  font-weight: 700;
}

.model-scene-table th:nth-child(1),
.model-scene-table td:nth-child(1),
.model-tenant-table th:nth-child(1),
.model-tenant-table td:nth-child(1) {
  min-width: 190px;
}

.model-scene-table th:nth-child(3),
.model-scene-table td:nth-child(3) {
  min-width: 108px;
  white-space: nowrap;
}

.scene-failure-cell {
  white-space: nowrap;
}

.scene-failure-cell .muted {
  display: inline;
  margin-left: 6px;
}

.model-tenant-table th:nth-child(6),
.model-tenant-table td:nth-child(6),
.model-log-table th:nth-child(8),
.model-log-table td:nth-child(8) {
  min-width: 300px;
}

.model-scene-table th:nth-child(7),
.model-scene-table td:nth-child(7) {
  min-width: 180px;
}

.model-name-cell {
  color: #334155;
  font-weight: 700;
  line-height: 1.5;
}

.model-log-table th:nth-child(2),
.model-log-table td:nth-child(2),
.model-log-table th:nth-child(4),
.model-log-table td:nth-child(4) {
  min-width: 190px;
}

.model-log-table th:nth-child(1),
.model-log-table td:nth-child(1) {
  min-width: 160px;
}

.list {
  display: grid;
  gap: 12px;
}

.list-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  line-height: 1.55;
}

.list-item strong {
  display: block;
  margin-bottom: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .sidebar {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  nav {
    display: flex;
  }

  .brand {
    margin: 0;
  }

  .page {
    margin-left: 0;
    padding: 18px;
  }

  .record-detail-hero {
    grid-template-columns: 1fr 1fr;
  }

  .record-detail-hero-main {
    grid-column: 1 / -1;
  }

  .record-detail-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-detail-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace,
  .admin-grid,
  .admin-forms,
  .settings-grid,
  .runtime-model-row.two-columns,
  .runtime-model-row.three-columns,
  .detailed-report-inline,
  .student-form-grid,
  .student-query-grid,
  .student-edit-grid,
  .org-form-grid,
  .org-query-grid,
  .org-import-grid,
  .permission-form-grid,
  .permission-scope-grid,
  .permission-query-grid,
  .course-query-form,
  .record-query-grid,
  .metrics {
    grid-template-columns: 1fr;
  }

  .provider-head {
    flex-direction: column;
  }

  .runtime-settings-actions {
    flex-direction: column;
    gap: 14px;
  }

  .runtime-save-action {
    flex-wrap: wrap;
  }

  .course-audio-maintenance {
    grid-template-columns: 1fr;
    min-width: 0;
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .course-audio-actions {
    justify-content: flex-start;
  }

  .course-header {
    height: auto;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }

  .wizard-steps,
  .model-select-panel,
  .model-fixed-panel,
  .course-toolbar,
  .course-title-row,
  .opening-row,
  .upload-hint,
  .dialogue-list,
  .course-footer-actions,
  .wizard-panel {
    margin-left: 0;
    margin-right: 0;
  }

  .wizard-steps,
  .model-select-panel,
  .model-fixed-panel,
  .course-toolbar,
  .score-item,
  .course-score-editor-labels,
  .course-script-opening,
  .course-script-round,
  .course-script-line,
  .course-script-keywords,
  .assign-picker-grid,
  .permission-role-grid,
  .permission-person-card-grid,
  .material-control-block,
  .material-context-grid,
  .record-detail-grid,
  .record-summary-grid,
  .operations-metric-grid,
  .operations-two-column,
  .table-actions,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .course-title-duplicate-hint {
    margin-left: 0;
  }

  .model-fixed-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .model-fixed-panel .model-status {
    min-width: 0;
    text-align: left;
  }

  .material-context-head {
    display: grid;
  }

  .material-context-head p {
    text-align: left;
  }

  .assign-split-layout {
    grid-template-columns: 1fr;
  }

  .assign-right-panel {
    position: static;
  }

  .table-actions {
    flex-wrap: wrap;
  }

  .dialogue-item {
    grid-template-columns: 1fr;
  }

  .dialogue-split {
    grid-template-columns: 1fr;
  }

  .dialogue-preview-keywords,
  .keyword-line {
    margin-left: 0;
  }

  .dialogue-footer-legend {
    flex-basis: 100%;
  }

  .dialogue-actions {
    justify-content: flex-end;
  }

  .model-grid {
    grid-template-columns: 1fr;
  }

  .course-audio-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .course-audio-filter-form {
    grid-template-columns: 1fr;
  }

  .course-search-page .course-query-form label,
  .course-search-page .course-query-actions {
    grid-column: auto;
  }

  .course-bookmark-tabs {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .course-bookmark-tab {
    min-height: 44px;
    font-size: 15px;
  }

  .course-search-page .course-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .course-row-actions {
    width: max-content;
  }

  .tenant-create-grid,
  .tenant-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .model-cost-period-head {
    align-items: stretch;
    flex-direction: column;
  }

  .model-cost-custom-period {
    grid-template-columns: 1fr;
  }

  .model-trend-filter-form,
  .model-trend-chart-grid {
    grid-template-columns: 1fr;
  }

  .tenant-filter-actions {
    grid-column: 1 / -1;
  }

  .course-audio-course-list {
    max-height: 48vh;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .sidebar {
    padding: 16px 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  nav {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .desktop-admin-link {
    display: none;
  }

  .page {
    padding: 14px;
  }

  h1 {
    font-size: 28px;
  }

  .status {
    align-self: flex-start;
  }

  .panel {
    padding: 14px;
  }

  .record-detail-hero {
    grid-template-columns: 1fr;
  }

  .record-detail-page-grid {
    grid-template-columns: 1fr;
  }

  .record-detail-tabs {
    grid-template-columns: 1fr;
  }

  .tenant-create-grid,
  .tenant-filter-grid,
  .billing-plan-grid,
  .billing-feature-grid,
  .operations-check-row,
  .operations-focus-item {
    grid-template-columns: 1fr;
  }

  .course-row-actions {
    width: max-content;
  }

  .record-detail-page-grid .record-summary-cell.is-wide {
    grid-column: auto;
  }

  .record-section-head {
    flex-direction: column;
  }

  .record-section-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .record-report-model-config {
    width: 100%;
    min-width: 0;
  }

  .student-home-workspace {
    grid-template-columns: 1fr;
  }

  .inline-row {
    grid-template-columns: 1fr;
  }

  .scenario-panel button {
    margin-top: 12px;
  }

  .scenario-detail {
    max-height: none;
  }

  .chat-panel {
    padding: 0;
  }

  .chat-log {
    height: min(48vh, 420px);
    padding: 14px;
  }

  .bubble {
    max-width: 92%;
    padding: 11px 12px;
  }

  .composer {
    padding: 12px;
  }

  .composer textarea {
    min-height: 108px;
  }

  .actions {
    flex-direction: column;
  }

  .actions button {
    width: 100%;
  }

  .student-stage-page {
    padding: 12px;
    gap: 12px;
  }

  .student-stage-card {
    grid-template-rows: auto minmax(34vh, 1fr) auto 82px auto 52px;
    gap: 8px;
    padding: 12px;
  }

  .student-stage-header {
    gap: 10px;
    flex-direction: column;
  }

  .student-stage-header .status {
    align-self: flex-start;
  }

  .student-stage-label {
    font-size: 14px;
  }

  .student-stage-box {
    padding: 10px;
    font-size: 15px;
  }

  .student-dialogue-box {
    min-height: 0;
  }

  .student-hint-box {
    min-height: 82px;
    max-height: 82px;
  }

  .student-input-box {
    min-height: 88px;
  }

  .student-stage-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .student-stage-actions button {
    padding: 10px 6px;
    font-size: 14px;
  }

  .record-meta {
    grid-template-columns: 1fr;
  }

  .dimension {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .student-mobile-urls {
    display: grid;
    grid-template-columns: 1fr;
  }

.student-mobile-url {
  width: 100%;
  border-radius: 12px;
}
}

.permission-matrix-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.student-app-body {
  min-height: 100vh;
  background: linear-gradient(180deg, #eef4fb 0%, #f8fafc 42%, #ffffff 100%);
}

.student-app-shell {
  width: min(680px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 16px 28px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.student-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
}

.student-app-logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
  line-height: 1.25;
}

.student-app-logo-main {
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
}

.student-app-logo-tail {
  font-size: 14px;
  font-weight: 700;
  color: #557086;
  letter-spacing: 0.02em;
}

.student-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 32, 42, 0.08);
}

.student-user-pill span {
  max-width: 96px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
}

.student-user-pill button,
.student-course-heading button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--ink);
  font-weight: 800;
}

.student-login-card,
.student-course-home {
  align-self: center;
  width: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 48px rgba(23, 32, 42, 0.10);
}

.student-login-card h1,
.student-course-heading h1 {
  font-size: 26px;
  margin-bottom: 8px;
}

.student-login-card p,
.student-course-heading p,
.student-empty-state p {
  color: var(--muted);
  line-height: 1.6;
}

.student-login-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.student-login-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.student-login-form input {
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 13px;
  font: inherit;
  background: #fff;
}

.student-login-form button {
  min-height: 50px;
  border-radius: 10px;
  font-size: 16px;
}

.student-login-message {
  margin-top: 14px;
  min-height: 24px;
  color: var(--muted);
  line-height: 1.6;
}

.student-course-home {
  align-self: start;
  display: grid;
  gap: 16px;
}

.student-course-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.student-course-list {
  display: grid;
  gap: 12px;
}

.student-course-card {
  width: 100%;
  min-height: 112px;
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border: 1px solid #d7e2ed;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(23, 32, 42, 0.08);
}

.student-course-card:active {
  transform: translateY(1px);
}

.student-course-card__tag {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1454a6;
  font-size: 12px;
  font-weight: 900;
}

.student-course-card strong {
  font-size: 18px;
}

.student-course-card small {
  color: var(--muted);
  line-height: 1.5;
}

.student-empty-state {
  padding: 22px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

@media (max-width: 560px) {
  .student-app-shell {
    padding: 14px 12px 22px;
    gap: 14px;
  }

  .student-app-header {
    align-items: flex-start;
  }

  .student-app-logo {
    gap: 1px;
  }

  .student-app-logo-main {
    font-size: 19px;
  }

  .student-app-logo-tail {
    font-size: 12px;
  }

  .student-user-pill {
    padding-left: 10px;
  }

  .student-user-pill span {
    max-width: 72px;
  }

  .student-login-card,
  .student-course-home {
    padding: 18px;
    border-radius: 12px;
  }

  .student-login-card h1,
  .student-course-heading h1 {
    font-size: 24px;
  }

  .student-course-heading {
    align-items: stretch;
  }

  .student-course-heading button {
    flex: 0 0 auto;
  }
}

.permission-matrix-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.permission-matrix-table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  font-size: 14px;
}

.permission-matrix-table th,
.permission-matrix-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}

.permission-matrix-table thead th {
  background: #f4f7fb;
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}

.permission-matrix-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 150px;
  min-width: 150px;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.permission-matrix-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.permission-matrix-table select {
  width: 126px;
  min-width: 126px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}

.permission-matrix-table select:disabled {
  color: #40506a;
  background: #f6f8fb;
  opacity: 1;
}

@media (max-width: 900px) {
  .assign-validity-panel,
  .assign-pass-panel {
    grid-template-columns: 1fr;
  }

  .assign-pass-score-main,
  .assign-pass-score-floor {
    grid-column: auto;
  }
}

/* Student practice mobile refinements */
.student-stage-page {
  min-height: 100dvh;
}

.student-practice-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
  overflow: hidden;
}

.student-practice-page .student-stage-header {
  flex-direction: row;
  align-items: flex-start;
}

.student-practice-page .student-stage-header h1 {
  font-size: 24px;
}

.student-practice-page .student-stage-header > div:first-child {
  min-width: 0;
}

.practice-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.practice-start-btn,
.practice-header-back {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #1769aa;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.practice-start-btn {
  background: #1769aa;
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 105, 170, 0.18);
}

.practice-start-btn:disabled,
.practice-start-btn.is-active {
  border-color: #c9ddf2;
  background: #e8f1fb;
  color: #1454a6;
  opacity: 1;
  cursor: default;
  box-shadow: none;
}

.practice-header-back {
  background: #e8eef5;
  color: #26415d;
  border-color: #d6e1ec;
}

.student-stage-card {
  grid-template-rows: auto minmax(220px, 1fr) auto minmax(72px, auto) auto minmax(92px, auto) auto auto;
}

.student-practice-card {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(102px, auto) auto auto;
}

.practice-dialogue-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.practice-course-meta {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #40506a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-main-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.practice-main-actions button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  border-radius: 12px;
}

.student-dialogue-list {
  min-height: 0;
  height: calc(100% - 10px);
  max-height: calc(100% - 10px);
  align-self: start;
  margin-bottom: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid #d8e2ec;
  border-radius: 12px;
  background: #f5f7fa;
  scroll-behavior: smooth;
}

.student-practice-card .practice-hint-label {
  transform: translateY(-10px);
}

.student-practice-card .student-hint-box {
  min-height: 131px;
  max-height: 131px;
  transform: translateY(-10px);
  margin-bottom: -5px;
}

.student-dialogue-bubble {
  max-width: 86%;
  display: grid;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid #dce4ec;
  border-radius: 16px 16px 16px 6px;
  background: #fff;
  color: var(--ink);
  line-height: 1.55;
  flex: 0 0 auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 6px 16px rgba(23, 32, 42, 0.06);
}

.student-dialogue-bubble.trainee {
  align-self: flex-end;
  border-color: #bfe8d6;
  border-radius: 16px 16px 6px 16px;
  background: #e7f8f1;
}

.student-dialogue-bubble.customer {
  align-self: flex-start;
}

.student-dialogue-bubble small {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.student-input-box {
  min-height: 96px;
}

.voice-input-row {
  display: grid;
  grid-template-columns: minmax(136px, auto) 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.voice-status-row {
  grid-template-columns: 1fr;
}

.voice-input-row button,
.voice-file-picker {
  min-height: 48px;
  border-radius: 999px;
}

.voice-input-row button {
  min-width: 136px;
}

.voice-status {
  min-height: 44px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  background: #f7f9fb;
  color: #40506a;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.student-stage-actions button {
  min-height: 50px;
  border-radius: 12px;
}

body.is-recording #practiceRecordBtn {
  background: #c9332b;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(201, 51, 43, 0.16);
}

body.is-recording .voice-status {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #b42318;
}

body.is-processing .voice-status {
  border-color: #bfdbfe;
  background: #eef6ff;
  color: #1454a6;
}

body.is-processing #practiceSendBtn:disabled {
  background: #1454a6;
  color: #fff;
  opacity: 0.88;
}

.student-stage-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .student-stage-page {
    min-height: 100dvh;
    padding: 10px;
    gap: 10px;
  }

  .student-practice-page {
    gap: 20px;
  }

  .student-stage-header {
    gap: 8px;
  }

  .student-practice-page .student-stage-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .practice-header-actions {
    gap: 6px;
  }

  .practice-start-btn,
  .practice-header-back {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }

  .student-practice-page .student-stage-header h1 {
    font-size: 19px;
  }

  .practice-course-meta {
    font-size: 12px;
  }

  .student-stage-card {
    grid-template-rows: auto minmax(32vh, 1fr) auto minmax(64px, auto) auto minmax(88px, auto) auto auto;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }

  .student-practice-card {
    grid-template-rows: auto minmax(0, 1fr) auto minmax(100px, auto) auto auto;
  }

  .practice-main-actions {
    gap: 8px;
  }

  .practice-main-actions button {
    min-height: 52px;
    padding: 0 10px;
    font-size: 15px;
  }

  .student-dialogue-list {
    min-height: 0;
    padding: 12px 10px;
  }

  .student-dialogue-bubble {
    max-width: 90%;
    padding: 10px 12px;
    font-size: 15px;
  }

  .student-hint-box {
    min-height: 70px;
    max-height: 70px;
  }

  .student-practice-card .student-hint-box {
    min-height: 105px;
    max-height: 105px;
  }

  .student-input-box {
    min-height: 86px;
  }

  .voice-input-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .voice-input-row button,
  .voice-file-picker {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 10px;
    font-size: 15px;
  }

  .voice-status {
    min-height: 42px;
  }

  .student-stage-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

}

/* Student mobile home polish */
.student-app-body {
  min-height: 100dvh;
  background: #eef3f7;
}

.student-app-body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 260px;
  background: linear-gradient(180deg, #dff1ec 0%, #edf4fb 68%, rgba(238, 243, 247, 0) 100%);
}

.student-app-shell {
  width: min(480px, 100%);
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
  gap: 18px;
}

.student-app-header {
  min-height: 58px;
  align-items: center;
}

.student-app-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.student-app-mark {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(23, 105, 170, 0.24);
}

.student-app-brand > div {
  min-width: 0;
}

.student-app-logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-wrap: wrap;
  line-height: 1.2;
}

.student-app-brand small {
  display: block;
  margin-top: 3px;
  color: #557086;
  font-size: 12px;
  font-weight: 800;
}

.student-brand-slogan {
  margin-top: 5px;
  color: #b78322;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.student-section-kicker {
  margin-bottom: 6px;
  color: #1769aa;
  font-size: 15px;
  font-weight: 900;
}

.student-user-pill {
  flex: 0 0 auto;
  min-height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.student-user-pill button,
.student-course-heading button {
  min-height: 38px;
  border-radius: 999px;
  background: #fff;
}

.student-login-card {
  align-self: start;
  justify-self: center;
  width: min(410px, calc(100% - 12px));
  margin-top: 6px;
  transform: none;
  padding: 22px 18px 18px;
  border-radius: 8px;
  border-color: #d7e5ee;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(36, 52, 71, 0.11);
}

.student-login-card h1,
.student-course-heading h1 {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.18;
}

.student-login-card p,
.student-course-heading p {
  margin: 0;
  font-size: 14px;
}

.student-login-form {
  gap: 14px;
  margin-top: 18px;
}

.student-login-form label {
  gap: 7px;
  color: #25364a;
  font-size: 15px;
}

.student-login-form input {
  min-height: 48px;
  border-color: #cfdae5;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(23, 32, 42, 0.03);
}

.student-login-form input:focus {
  border-color: #1769aa;
  outline: 3px solid rgba(23, 105, 170, 0.13);
}

.student-login-form button {
  min-height: 50px;
  border-radius: 8px;
  background: #1769aa;
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(23, 105, 170, 0.19);
}

.student-login-message {
  min-height: 22px;
  margin-top: 12px;
  font-size: 13px;
}

.student-course-home {
  align-self: start;
  padding: 18px 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 6px;
}

.student-course-heading {
  align-items: center;
  padding: 12px 2px 0;
}

.student-course-heading h1,
.student-course-heading h2 {
  margin: 0 0 6px;
  color: #1769aa;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.student-course-count {
  font-size: 13px;
  font-weight: 400;
}

.student-course-list {
  gap: 12px;
}

.student-course-card {
  min-height: 124px;
  gap: 10px;
  padding: 16px;
  border: 1px solid #d4e1eb;
  border-radius: 8px;
  background: #fff;
  cursor: default;
  box-shadow: 0 14px 30px rgba(36, 52, 71, 0.11);
}

.student-course-card__action:focus-visible {
  outline: 3px solid rgba(23, 105, 170, 0.16);
  outline-offset: 2px;
}

.student-course-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.student-course-card__tag {
  padding: 5px 10px;
  background: #e8f6f1;
  color: #00705d;
}

.student-course-card__tag.in_progress {
  background: #eef6ff;
  color: #1454a6;
}

.student-course-card__tag.completed {
  background: #edf7ed;
  color: #247342;
}

.student-course-card__tag.expired {
  background: #fff1f2;
  color: #b42318;
}

.student-course-card__action {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #1769aa;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.student-course-card__action.completed {
  background: #247342;
}

.student-course-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.student-course-card__actions .student-course-card__action {
  min-width: 74px;
  padding-left: 10px;
  padding-right: 10px;
}

.student-course-card__action.detailed {
  background: #1769aa;
}

.student-course-card__action.expired,
.student-course-card__action.expired:disabled {
  background: #b42318;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.student-course-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.student-course-card__validity {
  color: #697586;
  font-size: 12px;
  line-height: 1.45;
}

.student-course-card small {
  font-size: 13px;
}

.student-course-card.expired {
  border-color: #fecdd3;
}

/* Student profile drawer. */
.student-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.42);
  overflow: auto;
  overscroll-behavior: contain;
}

.student-profile-modal[hidden] {
  display: none;
}

.student-profile-dialog {
  width: min(480px, 100%);
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #d8e2ec;
  border-radius: 16px 16px 8px 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-4vh);
}

.student-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.student-profile-head h2 {
  margin: 0;
  color: #1769aa;
  font-size: 22px;
  line-height: 1.2;
}

.student-profile-close,
.student-profile-change-password,
.student-profile-logout {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d8e2ec;
  border-radius: 999px;
  background: #f8fafc;
  color: #26384f;
  font-weight: 900;
}

.student-profile-change-password {
  width: 100%;
  min-height: 44px;
  border-color: #bfd7ec;
  background: #eef6ff;
  color: #1769aa;
}

.student-profile-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  background: #f7fafc;
  color: #17202a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.student-profile-info span {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.student-profile-info span b {
  color: inherit;
  font-weight: inherit;
}

.student-profile-info strong {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  overflow-wrap: anywhere;
}

.student-startup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe5ef;
  border-radius: 10px;
  background: #fff;
}

.student-startup-card strong {
  display: block;
  color: #17202a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.student-startup-card span {
  display: block;
  margin-top: 3px;
  color: #607089;
  font-size: 13px;
  line-height: 1.45;
}

.student-startup-card button {
  min-width: 78px;
  min-height: 40px;
  border: 1px solid #bfd7ec;
  border-radius: 999px;
  background: #eef6ff;
  color: #1769aa;
  font-weight: 900;
}

.student-startup-card button.enabled {
  border-color: #f1c1bc;
  background: #fff3f1;
  color: #b42318;
}

.student-startup-message {
  min-height: 0;
  color: #40506a;
  font-size: 13px;
  line-height: 1.45;
}

.student-startup-message:empty {
  display: none;
}

.student-password-form {
  display: grid;
  gap: 2px;
}

.student-password-form label {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #25364a;
  font-weight: 900;
}

.student-password-form label span {
  white-space: nowrap;
}

.student-password-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfdae5;
  border-radius: 10px;
  padding: 0 13px;
  background: #fff;
  font: inherit;
  font-size: 16px;
}

.student-password-form input:focus {
  border-color: #1769aa;
  outline: 3px solid rgba(23, 105, 170, 0.13);
}

.student-password-form button {
  min-height: 46px;
  border-radius: 10px;
  background: #1769aa;
  font-size: 16px;
}

.student-password-message {
  min-height: 0;
  color: #40506a;
  font-size: 13px;
  line-height: 1.5;
}

.student-password-message:empty {
  display: none;
}

.student-profile-logout {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border-color: #fecdd3;
  background: #fff1f2;
  color: #b42318;
}

@media (min-width: 700px) {
  .student-profile-dialog {
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  .student-profile-dialog {
    gap: 10px;
    padding: 14px;
    border-radius: 14px 14px 8px 8px;
  }

  .student-profile-head h2 {
    font-size: 20px;
  }

  .student-profile-info {
    padding: 10px 12px;
  }

  .student-startup-card {
    padding: 10px 12px;
  }

  .student-startup-card button {
    min-width: 70px;
  }

  .student-password-form {
    gap: 0;
  }

  .student-password-form label {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
  }

  .student-password-form input {
    min-height: 40px;
  }

  .student-password-form button {
    min-height: 44px;
  }

  .student-profile-change-password {
    min-height: 42px;
  }

  .student-profile-logout {
    min-height: 44px;
  }
}

/* Student report mobile polish */
.student-report-body {
  min-height: 100dvh;
  background: #eef3f7;
}

.student-report-page {
  width: min(480px, 100%);
  max-width: 480px;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
  gap: 12px;
}

.student-report-header {
  align-items: center;
}

.student-report-brand .student-app-mark {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}

.student-report-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 0;
}

.student-report-titlebar h1 {
  margin: 0 0 4px;
  color: #1769aa;
  font-size: 20px;
  line-height: 1.2;
}

.student-report-titlebar p {
  margin: 0;
  color: #697586;
  font-size: 13px;
  line-height: 1.45;
}

.student-report-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.student-report-view {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.student-report-view.empty {
  padding: 18px;
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  background: #fff;
}

.report-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.report-mode-btn {
  min-height: 42px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  background: #fff;
  color: #40506a;
  font-weight: 900;
  cursor: pointer;
}

.report-mode-btn.active {
  border-color: #1769aa;
  background: #eaf4ff;
  color: #1769aa;
}

.detailed-report-status {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  background: #fff;
  color: #40506a;
  box-shadow: 0 12px 28px rgba(36, 52, 71, 0.08);
}

.detailed-report-status strong {
  color: #17202a;
  font-size: 14px;
}

.detailed-report-status span,
.detailed-report-status em {
  color: #697586;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.detailed-report-status button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #1769aa;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.detailed-report-status.running,
.detailed-report-status.pending {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.detailed-report-status.failed {
  border-color: #fecdd3;
  background: #fff1f2;
}

.student-report-score-card,
.student-report-section,
.student-report-view > .record-meta {
  border: 1px solid #d8e2ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(36, 52, 71, 0.08);
}

.student-report-score-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #edf7f4 100%);
}

.student-report-score-card span {
  display: block;
  color: #557086;
  font-size: 13px;
  font-weight: 900;
}

.student-report-score-card .score {
  margin-top: 4px;
  font-size: 56px;
  line-height: 0.95;
  color: #1769aa;
  font-weight: 900;
}

.student-report-score-card strong {
  color: #1769aa;
  font-size: 17px;
}

.student-report-view > .record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px;
}

.student-report-view > .record-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f4f7fb;
  color: #40506a;
  font-size: 12px;
  line-height: 1.35;
}

.student-report-section {
  padding: 14px;
}

.student-report-section h2 {
  margin: 0 0 12px;
  color: #17202a;
  font-size: 16px;
  line-height: 1.25;
}

.student-report-section p,
.student-report-section li {
  color: #344054;
  font-size: 14px;
  line-height: 1.7;
}

.student-report-section ul {
  margin: 0;
  padding-left: 18px;
}

.student-report-section .record-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0 0 12px;
}

.student-report-section .record-meta span {
  color: #697586;
  font-size: 12px;
}

.student-report-view .dimension {
  display: grid;
  grid-template-columns: 108px minmax(120px, 1fr) 56px;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  margin: 9px 0;
}

.student-report-view .dimension span {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.student-report-view .dimension b {
  color: #1769aa;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.student-report-view .bar {
  height: 8px;
  background: #edf2f7;
}

.student-report-view .bar i {
  background: #00856f;
}

.keypoint-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.keypoint-summary b {
  color: #1769aa;
  font-size: 28px;
  line-height: 1;
}

.keypoint-summary span {
  color: #697586;
  font-size: 12px;
  font-weight: 800;
}

.keypoint-groups {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.keypoint-groups div {
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.keypoint-groups strong {
  display: block;
  margin-bottom: 4px;
  color: #344054;
  font-size: 13px;
}

.keypoint-groups p {
  margin: 0;
}

.keypoint-detail-list {
  display: grid;
  gap: 7px;
  padding-left: 0 !important;
  list-style: none;
}

.keypoint-detail-list li {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #fff;
}

.keypoint-detail-list li.hit {
  border-color: #b9e6c9;
  background: #f3fbf6;
}

.keypoint-detail-list li.miss {
  border-color: #ffd6a8;
  background: #fff8ef;
}

.keypoint-detail-list strong {
  color: #17202a;
}

.keypoint-detail-list span,
.keypoint-detail-list em {
  color: #697586;
  font-size: 12px;
  font-style: normal;
}

.dimension-review-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d8e2ec;
  border-radius: 8px;
  background: #f8fafc;
}

.dimension-review-item + .dimension-review-item {
  margin-top: 8px;
}

.dimension-review-item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dimension-review-item strong {
  color: #17202a;
  font-size: 14px;
}

.dimension-review-item b {
  color: #1769aa;
}

.dimension-review-item p {
  margin: 0;
}

.dimension-review-item span {
  color: #697586;
  font-size: 12px;
  line-height: 1.5;
}

.student-report-script {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
}

.student-report-card .single-action {
  display: grid;
  grid-template-columns: 1fr;
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
}

.student-report-card .single-action button {
  min-height: 50px;
  border-radius: 10px;
}

@media (max-width: 560px) {
  .student-report-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .student-report-titlebar h1 {
    font-size: 19px;
  }

  .student-report-score-card {
    padding: 16px;
  }

  .student-report-score-card .score {
    font-size: 52px;
  }

  .student-report-view .dimension {
    grid-template-columns: 1fr 40px;
  }

  .student-report-view .dimension .bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.student-empty-state {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 560px) {
  .student-app-shell {
    padding-left: 14px;
    padding-right: 14px;
    gap: 16px;
  }

  .student-app-header {
    align-items: center;
  }

  .student-app-mark {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .student-app-logo {
    max-width: 190px;
  }

  .student-app-logo-main {
    font-size: 18px;
  }

  .student-app-logo-tail {
    font-size: 11px;
  }

  .student-user-pill span {
    max-width: 68px;
  }

  .student-login-card {
    margin-top: 4px;
    width: min(392px, calc(100% - 10px));
    padding: 21px 17px 17px;
  }

  .student-login-card h1 {
    font-size: 26px;
  }

  .student-course-heading h1 {
    font-size: 16px;
  }

  .student-course-heading {
    align-items: center;
  }

  .student-course-card {
    padding: 15px;
  }
}

/* Final student home overrides: keep mobile course list compact and close to the heading. */
.student-course-home {
  padding-top: 0;
  gap: 6px;
}

.student-course-heading {
  padding-top: 22px;
}

.student-course-heading h1,
.student-course-heading h2 {
  font-size: 16px;
}

.student-course-card strong {
  font-size: 16px;
  line-height: 1.22;
}

.student-course-card small {
  display: none;
}

.student-course-list,
.student-empty-state {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.student-course-list {
  margin-top: -12px;
}

.student-completed-heading {
  margin-top: 12px;
}

.student-course-card {
  min-height: 96px;
  gap: 6px;
  padding: 12px 13px;
}

@media (max-width: 560px) {
  .student-course-list,
  .student-empty-state {
    width: 100%;
  }

  .student-course-card {
    min-height: 92px;
    gap: 5px;
    padding: 11px 12px;
  }
}

/* Student course sections and status buttons. */
.student-course-card__validity {
  color: #697586;
  font-size: 12px;
  line-height: 1.25;
}

.student-course-card__meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: #697586;
  font-size: 12px;
  line-height: 1.25;
}

.student-course-card__course-id {
  flex: 0 0 auto;
  color: #40506a;
  font-weight: 800;
}

.student-course-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.25;
}

.student-course-card__stats {
  flex: 0 0 auto;
  color: #40506a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

.student-course-card.expired .student-course-card__stats {
  color: #b42318;
}

@media (max-width: 560px) {
  .student-course-card__bottom {
    display: grid;
    gap: 3px;
  }

  .student-course-card__meta {
    gap: 3px 7px;
  }

  .student-course-card__stats {
    text-align: left;
  }
}

.student-course-card__tag.in_progress {
  background: #eef6ff;
  color: #1454a6;
}

.student-course-card__tag.completed {
  background: #edf7ed;
  color: #247342;
}

.student-course-card__tag.expired {
  background: #fff1f2;
  color: #b42318;
}

.student-course-card__action.completed {
  background: #247342;
}

.student-course-card__action.expired,
.student-course-card__action.expired:disabled {
  background: #b42318;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.student-course-card.expired {
  border-color: #fecdd3;
}

/* ============================================================================
   PHASE 2 — 登录页 + 学员首页 现代化升级 (2026-05-05)
   策略:在文件末尾追加规则,利用 CSS 后定义优先,
   不修改文件中段已有的层叠覆盖,降低破坏其它页面的风险。
   ============================================================================ */

/* --- 登录页背景:加柔光晕 --- */
.login-page {
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

.login-page::before {
  content: "";
  position: fixed;
  inset: -10% -10% auto auto;
  z-index: 0;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, var(--brand-soft), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.login-page::after {
  content: "";
  position: fixed;
  inset: auto auto -15% -15%;
  z-index: 0;
  width: 460px;
  height: 460px;
  background: radial-gradient(closest-side, rgba(5, 150, 105, 0.16), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.login-shell {
  position: relative;
  z-index: 1;
}

/* --- 管理端登录卡片 --- */
.login-card {
  width: min(440px, 100%);
  padding: var(--space-7);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.login-brand {
  margin-bottom: var(--space-5);
  font-weight: var(--weight-bold);
  font-size: 18px;
  color: var(--brand);
  letter-spacing: 0.3px;
}

.login-card h1 {
  margin: 0 0 var(--space-2);
  font-size: 28px;
  font-weight: var(--weight-bold);
  color: var(--ink-primary);
  letter-spacing: -0.02em;
}

.login-card p {
  margin: 0 0 var(--space-5);
  color: var(--ink-secondary);
  font-size: 14px;
}

.admin-entry-shell {
  align-items: center;
}

.admin-entry-card {
  width: min(560px, 100%);
  padding: var(--space-7);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.admin-entry-card h1 {
  margin: 0 0 var(--space-2);
  font-size: 28px;
  font-weight: var(--weight-bold);
  color: var(--ink-primary);
  letter-spacing: 0;
}

.admin-entry-card p {
  margin: 0 0 var(--space-5);
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.admin-entry-actions {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.admin-entry-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  font-size: 15px;
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.tenant-entry-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.tenant-entry-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--ink-secondary);
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

.tenant-entry-form input {
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font: inherit;
  font-size: 15px;
  color: var(--ink-primary);
}

.tenant-entry-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.12);
}

.tenant-entry-form button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(23, 105, 170, 0.22);
  border-radius: var(--radius-md);
  background: #eef6ff;
  color: var(--brand-active);
  font-size: 15px;
  font-weight: var(--weight-bold);
}

@media (max-width: 620px) {
  .admin-entry-card {
    padding: var(--space-6);
  }

  .tenant-entry-form {
    grid-template-columns: 1fr;
  }
}

.login-form {
  gap: var(--space-4);
}

.login-form label {
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
  font-size: 14px;
  gap: var(--space-2);
}

.login-form input {
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font: inherit;
  font-size: 15px;
  color: var(--ink-primary);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.login-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.12);
}

.login-password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.login-password-row input {
  min-width: 0;
}

.login-password-toggle {
  margin-top: 0 !important;
  min-height: 46px !important;
  padding: 0 16px;
  border: 1px solid rgba(23, 105, 170, 0.18) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-elevated) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.login-password-toggle:hover {
  transform: none !important;
  box-shadow: none !important;
  background: rgba(23, 105, 170, 0.06) !important;
}

.login-password-toggle:active {
  transform: none !important;
}

.login-form button {
  margin-top: var(--space-2);
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(23, 105, 170, 0.24);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.login-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(23, 105, 170, 0.32);
}

.login-form button:active {
  transform: translateY(0);
}

.login-message {
  margin-top: var(--space-4);
  color: var(--ink-tertiary);
  font-size: 13px;
}

/* --- 学员端登录卡片 (与管理端共享视觉语言) --- */
.student-login-card {
  width: min(420px, calc(100% - 12px));
  padding: var(--space-7) var(--space-6) var(--space-6);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}

.student-section-kicker {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-active);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
}

.student-login-form {
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.student-login-form label {
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
  font-size: 14px;
  gap: var(--space-2);
}

.student-login-form input {
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font: inherit;
  font-size: 15px;
  color: var(--ink-primary);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.student-login-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.12);
}

.student-login-form button {
  margin-top: var(--space-2);
  min-height: 50px;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(23, 105, 170, 0.24);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.student-login-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(23, 105, 170, 0.32);
}

.student-login-form button:active {
  transform: translateY(0);
}

.student-login-message {
  color: var(--ink-tertiary);
  font-size: 13px;
}

/* --- 学员端首页背景 --- */
.student-app-body {
  background: var(--bg-page);
}

.student-app-body::before {
  height: 320px;
  background: linear-gradient(
    180deg,
    rgba(23, 105, 170, 0.08) 0%,
    rgba(23, 105, 170, 0.04) 30%,
    transparent 100%
  );
}

/* --- 顶部品牌区 --- */
.student-app-mark {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.student-app-logo {
  color: var(--ink-primary);
}

.student-app-logo-main {
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.student-brand-slogan {
  font-weight: var(--weight-semibold);
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* --- "我的" 用户 pill --- */
.student-user-pill {
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
}

.student-user-pill button {
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.student-user-pill button:hover {
  background: var(--brand-soft);
  color: var(--brand-active);
  border-radius: var(--radius-pill);
}

/* --- 学员首页课程区标题 --- */
.student-course-heading {
  padding: var(--space-5) var(--space-1) var(--space-3);
}

.student-course-heading h1,
.student-course-heading h2 {
  color: var(--ink-primary);
  font-size: 18px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.student-course-count {
  color: var(--ink-tertiary);
  font-weight: var(--weight-medium);
  font-size: 13px;
  margin-left: 6px;
}

.student-course-heading button {
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.student-course-heading button:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-active);
}

/* --- 课程卡片现代化 --- */
.student-course-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
}

/* 左侧 3px 品牌色条:状态可视识别 */
.student-course-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  opacity: 0.85;
}

.student-course-card.completed::before {
  background: var(--color-success);
}

.student-course-card.expired::before {
  background: var(--color-danger);
}

.student-course-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-soft);
}

.student-course-card.expired {
  opacity: 0.78;
  border-color: var(--color-danger-soft);
}

.student-course-card strong {
  color: var(--ink-primary);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.student-course-card__meta,
.student-course-card__validity {
  color: var(--ink-tertiary);
  font-size: 12px;
}

.student-course-card__course-id {
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
}

.student-course-card__stats {
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
}

/* --- 状态 pill --- */
.student-course-card__tag {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.4px;
}

.student-course-card__tag.in_progress {
  background: var(--brand-soft);
  color: var(--brand-active);
}

.student-course-card__tag.completed {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.student-course-card__tag.expired {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* --- 操作按钮 --- */
.student-course-card__action {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 14px;
  min-height: 32px;
  background: var(--brand);
  color: var(--brand-on);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.student-course-card__action:hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 105, 170, 0.24);
}

.student-course-card__action:active {
  transform: translateY(0);
  box-shadow: none;
}

.student-course-card__action.completed {
  background: var(--color-success);
}

.student-course-card__action.completed:hover {
  background: #047857;
}

.student-course-card__action.detailed {
  background: var(--bg-elevated);
  color: var(--brand);
  border: 1px solid var(--brand-soft);
  box-shadow: var(--shadow-sm);
}

.student-course-card__action.detailed:hover {
  background: var(--brand-soft);
  color: var(--brand-active);
  border-color: var(--brand);
}

.student-course-card__action.expired,
.student-course-card__action.expired:disabled {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  cursor: not-allowed;
  box-shadow: none;
}

.student-record-heading {
  padding-top: var(--space-5);
}

.student-training-record-more {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0 var(--space-2);
}

.student-training-record-more button {
  min-width: 112px;
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  color: var(--brand-active);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.student-training-record-more button:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.student-home-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.student-home-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 64px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

#studentGotoCompletedBtn {
  background: linear-gradient(135deg, #00856f, #1fa98b);
  box-shadow: 0 6px 14px rgba(0, 133, 111, 0.28);
}

#studentGotoRecordsBtn {
  background: linear-gradient(135deg, #1769aa, #2b8ed3);
  box-shadow: 0 6px 14px rgba(23, 105, 170, 0.28);
}

.student-home-nav button:hover {
  filter: brightness(1.05);
}

.student-home-nav button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(23, 32, 42, 0.2);
}

.student-home-nav__count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
}

.student-view-back {
  flex: 0 0 auto;
  cursor: pointer;
}

.student-training-record-card {
  min-height: 124px;
}

.student-training-record-card__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.student-training-record-card__content {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.student-training-record-card__score {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--ink-tertiary);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.student-training-record-score {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--brand) calc(var(--progress, 0) * 1%),
    var(--bg-subtle) 0
  );
}

.student-training-record-score::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--bg-elevated);
}

.student-training-record-score__num {
  position: relative;
  z-index: 1;
  color: var(--brand);
  font-size: 24px;
  line-height: 1;
  font-weight: var(--weight-heavy);
  font-variant-numeric: tabular-nums;
}

.student-training-record-score.score-good {
  background: conic-gradient(
    var(--color-success) calc(var(--progress, 0) * 1%),
    var(--color-success-soft) 0
  );
}

.student-training-record-score.score-mid {
  background: conic-gradient(
    var(--color-warn) calc(var(--progress, 0) * 1%),
    var(--color-warn-soft) 0
  );
}

.student-training-record-score.score-low {
  background: conic-gradient(
    var(--color-danger) calc(var(--progress, 0) * 1%),
    var(--color-danger-soft) 0
  );
}

.student-training-record-score.score-good .student-training-record-score__num {
  color: var(--color-success);
}

.student-training-record-score.score-mid .student-training-record-score__num {
  color: var(--color-warn);
}

.student-training-record-score.score-low .student-training-record-score__num {
  color: var(--color-danger);
}

@media (max-width: 560px) {
  .student-training-record-card {
    min-height: 132px;
  }

  .student-training-record-card__main {
    align-items: start;
    gap: var(--space-3);
  }

  .student-training-record-score {
    width: 64px;
    height: 64px;
  }

  .student-training-record-score__num {
    font-size: 21px;
  }
}

/* --- 空状态 --- */
.student-empty-state {
  padding: var(--space-7) var(--space-5);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  text-align: center;
}

.student-empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-primary);
  font-weight: var(--weight-semibold);
  font-size: 15px;
}

.student-empty-state p {
  margin: 0;
  color: var(--ink-tertiary);
  font-size: 13px;
  line-height: 1.6;
}

/* ============================================================================
   PHASE 3 — 训练页(对话气泡 + 录音按钮 + 提示卡片)现代化升级 (2026-05-05)
   策略:同 Phase 2,文件末尾追加,不动中段已有规则。
   ============================================================================ */

/* --- 训练页背景:与首页保持一致 --- */
.student-stage-body,
.student-stage-body.student-report-body {
  background: var(--bg-page);
}

.student-practice-page {
  background: transparent;
}

/* --- 训练卡片整体 --- */
.student-practice-card {
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line-soft);
}

/* --- 顶部:课程名 / 进度提示 --- */
.practice-course-meta {
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
}

.student-stage-label {
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* --- 顶部"返回"按钮 --- */
.practice-header-back {
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.practice-header-back:hover {
  background: var(--brand-soft);
  color: var(--brand-active);
  border-color: var(--brand);
}

/* --- 对话区背景:更柔和,凸显气泡 --- */
.student-dialogue-list {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, #fafbfd 0%, #f4f7fb 100%);
  padding: var(--space-4) var(--space-3);
}

/* 滚动条美化(WebKit) */
.student-dialogue-list::-webkit-scrollbar {
  width: 6px;
}
.student-dialogue-list::-webkit-scrollbar-track {
  background: transparent;
}
.student-dialogue-list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
}

/* --- 对话气泡基底 --- */
.student-dialogue-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  animation: kdn-bubble-in var(--dur-base) var(--ease-out) both;
  line-height: 1.6;
}

@keyframes kdn-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 客户气泡(左侧 / 灰白) --- */
.student-dialogue-bubble.customer {
  background: var(--bg-elevated);
  color: var(--ink-primary);
  border-radius: 18px 18px 18px 4px;
}

/* --- 学员气泡(右侧 / 品牌蓝渐变) --- */
.student-dialogue-bubble.trainee {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 4px 12px rgba(23, 105, 170, 0.24);
}

/* --- 气泡里的"销售/顾客"标签 --- */
.student-dialogue-bubble small {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.student-dialogue-bubble.trainee small {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

.student-dialogue-bubble.customer small {
  color: var(--ink-tertiary);
}

/* --- 当前话术提示 → 黄色卡片 + 💡 图标 --- */
.student-practice-card .practice-hint-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-warn);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: 0.3px;
}

.student-practice-card .practice-hint-label::before {
  content: "💡";
  font-size: 14px;
  line-height: 1;
}

.student-practice-card .student-hint-box {
  border: 0;
  border-left: 3px solid var(--color-warn);
  border-radius: var(--radius-md);
  background: var(--color-warn-soft);
  color: #78350f;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  resize: none;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.1);
}

.student-practice-card .student-hint-box:focus {
  outline: none;
}

/* --- 主操作区:单按钮与对话框同宽 --- */
.practice-main-actions {
  gap: var(--space-3);
}

.practice-main-actions button {
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* "开始讲话":主按钮(品牌渐变) */
#practiceRecordBtn {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  box-shadow: 0 8px 16px rgba(23, 105, 170, 0.26);
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#practiceRecordBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(23, 105, 170, 0.34);
}

#practiceRecordBtn:active {
  transform: translateY(0);
}

/* --- 录音中:覆盖默认按钮态 → 红色 + 心跳脉冲 --- */
body.is-recording #practiceRecordBtn {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
  animation: kdn-record-pulse 1.6s var(--ease-in-out) infinite;
}

@keyframes kdn-record-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55),
                0 8px 16px rgba(220, 38, 38, 0.35);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(220, 38, 38, 0),
                0 8px 16px rgba(220, 38, 38, 0.35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0),
                0 8px 16px rgba(220, 38, 38, 0.35);
  }
}

/* --- 状态条:加红点 + 现代色 --- */
.voice-status {
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast) var(--ease-out);
}

/* 录音中:红底 + 闪烁的红点 */
body.is-recording .voice-status {
  border-color: var(--color-danger-soft);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

body.is-recording .voice-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  animation: kdn-blink 1s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes kdn-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 处理中:蓝底 + 旋转 spinner */
body.is-processing .voice-status {
  border-color: var(--brand-soft);
  background: var(--brand-soft);
  color: var(--brand-active);
}

body.is-processing .voice-status::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid var(--brand);
  border-top-color: transparent;
  border-radius: 50%;
  animation: kdn-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes kdn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   PHASE 4 — 训练报告页(成绩 hero + 维度条 + 卡片)现代化升级 (2026-05-05)
   策略:同前几期,文件末尾追加;依赖 student_report.js 新加的
   .score-good / .score-mid / .score-low 状态类与 --progress 变量。
   ============================================================================ */

/* --- 报告页背景 + 标题 --- */
.student-report-titlebar h1 {
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.student-report-titlebar p {
  color: var(--ink-secondary);
  font-size: 13px;
}

/* --- 实时/详细 切换:做成 segmented control --- */
.report-mode-tabs {
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  gap: 0;
}

.report-mode-btn {
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  letter-spacing: 0.3px;
  min-height: 38px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.report-mode-btn:hover {
  color: var(--ink-primary);
}

.report-mode-btn.active {
  background: var(--bg-elevated);
  color: var(--brand-active);
  box-shadow: var(--shadow-sm);
}

/* --- 详细报告状态卡 --- */
.detailed-report-status {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.detailed-report-status strong {
  color: var(--ink-primary);
  font-weight: var(--weight-semibold);
}

.detailed-report-status span,
.detailed-report-status em {
  color: var(--ink-tertiary);
  font-size: 12px;
}

.detailed-report-status button {
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.detailed-report-status button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.detailed-report-status.running,
.detailed-report-status.pending {
  border-color: var(--brand-soft);
  background: var(--bg-elevated);
}

.detailed-report-status.failed {
  border-color: var(--color-danger-soft);
  background: var(--bg-elevated);
}

/* --- ⭐ 总分 Hero:大圆环(conic-gradient + 镂空) --- */
.student-report-score-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
  align-items: center;
  gap: var(--space-5);
}

.student-report-score-card > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.student-report-score-card > div > span {
  color: var(--ink-tertiary);
  font-weight: var(--weight-semibold);
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* 大圆环本体:conic-gradient 画弧,::before 镂空中心 */
.student-report-score-card .score {
  position: relative;
  width: 144px;
  height: 144px;
  margin-top: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--brand) calc(var(--progress, 0) * 1%),
    var(--bg-subtle) 0
  );
  font-size: 0;
  transition: background var(--dur-slow) var(--ease-out);
}

.student-report-score-card .score::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--bg-elevated);
}

.student-report-score-card .score-num {
  position: relative;
  z-index: 1;
  font-size: 48px;
  line-height: 1;
  font-weight: var(--weight-heavy);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* 按分段着色:绿(>=80) / 黄(60-79) / 红(<60) */
.student-report-score-card .score.score-good {
  background: conic-gradient(
    var(--color-success) calc(var(--progress, 0) * 1%),
    var(--color-success-soft) 0
  );
}
.student-report-score-card .score.score-mid {
  background: conic-gradient(
    var(--color-warn) calc(var(--progress, 0) * 1%),
    var(--color-warn-soft) 0
  );
}
.student-report-score-card .score.score-low {
  background: conic-gradient(
    var(--color-danger) calc(var(--progress, 0) * 1%),
    var(--color-danger-soft) 0
  );
}
.student-report-score-card .score.score-good .score-num { color: var(--color-success); }
.student-report-score-card .score.score-mid .score-num { color: var(--color-warn); }
.student-report-score-card .score.score-low .score-num { color: var(--color-danger); }

/* "分" 字单独显示 */
.student-report-score-card strong {
  color: var(--ink-tertiary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  align-self: center;
}

.student-report-score-card.score-good strong { color: var(--color-success); }
.student-report-score-card.score-mid strong { color: var(--color-warn); }
.student-report-score-card.score-low strong { color: var(--color-danger); }

/* --- 元数据 pill --- */
.student-report-view > .record-meta {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
}

.student-report-view > .record-meta span {
  background: var(--bg-subtle);
  color: var(--ink-secondary);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
}

/* --- 通用 section 卡片 --- */
.student-report-section {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.student-report-section h2 {
  color: var(--ink-primary);
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

.student-report-section p,
.student-report-section li {
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.65;
}

/* --- 维度条:按分段着色 + 平滑动画 --- */
.student-report-view .dimension {
  margin: 12px 0;
}

.student-report-view .dimension span {
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
}

.student-report-view .dimension b {
  color: var(--ink-primary);
  font-weight: var(--weight-bold);
}

.student-report-view .bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  overflow: hidden;
}

.student-report-view .bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease-out);
}

/* 按 .dimension 上的状态类切换条颜色 + 数字颜色 */
.dimension.score-good .bar i {
  background: linear-gradient(90deg, var(--color-success) 0%, #10b981 100%);
}
.dimension.score-mid .bar i {
  background: linear-gradient(90deg, var(--color-warn) 0%, #f59e0b 100%);
}
.dimension.score-low .bar i {
  background: linear-gradient(90deg, var(--color-danger) 0%, #ef4444 100%);
}
.dimension.score-good b { color: var(--color-success); }
.dimension.score-mid b { color: var(--color-warn); }
.dimension.score-low b { color: var(--color-danger); }

/* --- 维度点评卡 --- */
.dimension-review-item {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.dimension-review-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.dimension-review-item strong {
  color: var(--ink-primary);
  font-weight: var(--weight-semibold);
  font-size: 14px;
}

.dimension-review-item p {
  color: var(--ink-secondary);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.dimension-review-item span {
  color: var(--ink-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

/* --- 关键点命中 --- */
.keypoint-summary b {
  color: var(--brand);
  font-weight: var(--weight-heavy);
  font-size: 32px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.keypoint-summary span {
  color: var(--ink-tertiary);
  font-weight: var(--weight-medium);
}

.keypoint-groups div {
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--space-3) var(--space-4);
}

.keypoint-groups strong {
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
}

.keypoint-groups p {
  color: var(--ink-primary);
  font-size: 13px;
}

.keypoint-detail-list {
  margin: 0;
}

.keypoint-detail-list li {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 10px 12px 10px 36px;
  box-shadow: var(--shadow-sm);
}

/* ✓ / ✗ icon 前缀 */
.keypoint-detail-list li::before {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.keypoint-detail-list li.hit {
  border-color: var(--color-success-soft);
  background: linear-gradient(180deg, #ffffff 0%, var(--color-success-soft) 200%);
}

.keypoint-detail-list li.hit::before {
  content: "✓";
  background: var(--color-success);
  color: #ffffff;
}

.keypoint-detail-list li.miss {
  border-color: var(--color-warn-soft);
  background: linear-gradient(180deg, #ffffff 0%, var(--color-warn-soft) 200%);
}

.keypoint-detail-list li.miss::before {
  content: "!";
  background: var(--color-warn);
  color: #ffffff;
}

.keypoint-detail-list strong {
  color: var(--ink-primary);
  font-weight: var(--weight-semibold);
}

.keypoint-detail-list span,
.keypoint-detail-list em {
  color: var(--ink-tertiary);
  font-size: 12px;
}

/* --- 底部"返回"按钮 --- */
.student-report-card .single-action button {
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-active) 100%);
  color: var(--brand-on);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 16px rgba(23, 105, 170, 0.24);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.student-report-card .single-action button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(23, 105, 170, 0.32);
}

/* --- 移动端:hero 圆环略缩 --- */
@media (max-width: 560px) {
  .student-report-score-card .score {
    width: 124px;
    height: 124px;
  }
  .student-report-score-card .score-num {
    font-size: 40px;
  }
}

/* ============================================================================
   PHASE 5 — 品质打磨:暗色模式 + 可访问性 + 加载态 + 打印 (2026-05-05)
   说明:暗色模式只覆盖 Phase 1-4 用 token 的新组件,
        旧管理端页面继续保持亮色(因为它们用硬编码颜色)。
   ============================================================================ */

/* ----------------------------------------------------------------------------
   暗色模式:跟随系统设置(macOS 深色模式 / iOS 深色 / Windows 11 深色)
   ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* 背景:深 slate 系 */
    --bg-page:      #0b1220;
    --bg-elevated:  #1e293b;
    --bg-subtle:    #334155;
    --bg-overlay:   rgba(0, 0, 0, 0.7);

    /* 文字:浅 slate 反向 */
    --ink-primary:   #f1f5f9;
    --ink-secondary: #cbd5e1;
    --ink-tertiary:  #94a3b8;
    --ink-on-brand:  #ffffff;

    /* 分割线 */
    --line-soft:    #334155;
    --line-strong:  #475569;

    /* 品牌:更亮的蓝(深色背景下需要提亮) */
    --brand:        #60a5fa;
    --brand-hover:  #3b82f6;
    --brand-active: #93c5fd;
    --brand-soft:   rgba(96, 165, 250, 0.18);
    --brand-on:     #0b1220;

    /* 语义色:浅底改半透明 */
    --color-success-soft: rgba(5, 150, 105, 0.20);
    --color-warn-soft:    rgba(217, 119, 6, 0.20);
    --color-danger-soft:  rgba(220, 38, 38, 0.20);
    --color-info-soft:    rgba(2, 132, 199, 0.20);

    /* 阴影:深色下加重不透明度 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, .3), 0 10px 15px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, .35), 0 20px 40px rgba(0, 0, 0, .35);
  }

  /* 暗色模式下 Phase 2 的光晕调暗 */
  .login-page::before {
    background: radial-gradient(closest-side, rgba(96, 165, 250, 0.25), transparent 70%);
  }
  .login-page::after {
    background: radial-gradient(closest-side, rgba(5, 150, 105, 0.20), transparent 70%);
  }

  /* 暗色模式下 Phase 3 的对话区背景 */
  .student-dialogue-list {
    background: linear-gradient(180deg, #131c2e 0%, #0e1626 100%);
  }

  /* 暗色模式下提示卡片(暖黄底 → 暗暖底) */
  .student-practice-card .student-hint-box {
    background: rgba(217, 119, 6, 0.12);
    color: #fde68a;
    box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.18);
  }

  /* 报告页 hero 中央镂空保持深底 */
  .student-report-score-card .score::before {
    background: var(--bg-elevated);
  }

  /* 关键点 hit/miss 的渐变改深底 */
  .keypoint-detail-list li.hit {
    background: linear-gradient(180deg, var(--bg-elevated) 0%, rgba(5, 150, 105, 0.10) 200%);
  }
  .keypoint-detail-list li.miss {
    background: linear-gradient(180deg, var(--bg-elevated) 0%, rgba(217, 119, 6, 0.10) 200%);
  }
}

/* ----------------------------------------------------------------------------
   辅助功能:用户偏好"减少动画"时,关闭所有动画与过渡
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   全局焦点环:键盘 Tab 时清晰可见
   ---------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline-offset: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
}

/* 鼠标点击后不显示焦点环(保留键盘场景) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ----------------------------------------------------------------------------
   选区高亮 + 平滑滚动
   ---------------------------------------------------------------------------- */
::selection {
  background: var(--brand-soft);
  color: var(--brand-active);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------------------
   报告加载态:shimmer 骨架(加在 .empty 状态上,仍可显示加载文字)
   ---------------------------------------------------------------------------- */
.student-report-view.empty {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  color: var(--ink-tertiary);
  text-align: center;
  font-size: 14px;
  overflow: hidden;
}

.student-report-view.empty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(96, 165, 250, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: kdn-shimmer 1.6s ease-in-out infinite;
}

@keyframes kdn-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
   按钮微反馈:统一 active 下沉(没单独定义 active 的按钮也吃这个)
   ---------------------------------------------------------------------------- */
button:not(:disabled):active {
  transform: translateY(0.5px);
}

/* ----------------------------------------------------------------------------
   打印样式:报告页可直接 Ctrl+P 打印保存
   ---------------------------------------------------------------------------- */
@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  /* 隐藏交互元素 */
  .student-report-header,
  .student-report-card .single-action,
  .report-mode-tabs,
  .detailed-report-status button,
  .practice-header-actions {
    display: none !important;
  }

  /* 报告内容打开:无背景、无阴影、无边框圆角 */
  .student-stage-page,
  .student-report-card,
  .student-report-view,
  .student-report-section,
  .student-report-score-card,
  .dimension-review-item,
  .keypoint-detail-list li {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    page-break-inside: avoid;
    border-radius: 4px !important;
  }

  /* 圆环改为纯黑数字 */
  .student-report-score-card .score {
    background: none !important;
    border: 4px solid #000000 !important;
  }
  .student-report-score-card .score::before { display: none; }
  .student-report-score-card .score-num {
    color: #000000 !important;
  }

  /* 维度条改为黑边框 */
  .student-report-view .bar {
    border: 1px solid #000000 !important;
  }
  .student-report-view .bar i {
    background: #000000 !important;
  }

  /* 链接显示完整 URL,方便分享 */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
}

/* ============================================================================
   首页空状态美化:加圆形 emoji 图标 + 微弹入动画 (2026-05-05)
   ============================================================================ */

.student-empty-state {
  padding: var(--space-7) var(--space-5);
}

/* 顶部圆形 emoji 图标(默认 emoji,具体 emoji 由 ID 选择器覆盖) */
.student-empty-state::before {
  content: "✨";
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--brand-soft);
  font-size: 42px;
  line-height: 1;
  animation: kdn-empty-pop 0.6s var(--ease-out) both;
}

/* 待完成课程为空 → 庆祝(👏 + 浅绿底) */
#studentEmptyState::before {
  content: "👏";
  background: var(--color-success-soft);
}

/* 已完成课程为空 → 鼓励积累(🌱 + 浅蓝底) */
#studentCompletedEmptyState::before {
  content: "🌱";
  background: var(--brand-soft);
}

/* emoji 弹入:放大轻微回弹 */
@keyframes kdn-empty-pop {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   首页 hero greeting:你好 XX,今天还有 N 门课要练 (2026-05-05)
   ============================================================================ */

.student-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-1) var(--space-3);
}

.student-hero__text {
  flex: 1 1 auto;
  min-width: 0;
}

.student-hero__hi {
  margin: 0 0 var(--space-1);
  color: var(--ink-tertiary);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.3px;
}

.student-hero__name {
  display: inline-block;
  margin-left: 6px;
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.student-hero__line {
  margin: 0;
  color: var(--ink-primary);
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

/* "今天还有 N 门课要练" 中的数字单独高亮(用 brand 色) */
/* 数字混在文字里,无法直接选,这里改用整段文字微动效让它有"活力" */
.student-hero__line {
  background: linear-gradient(180deg, var(--ink-primary) 0%, var(--ink-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 摘要(没课时显示的鼓励文字)— 暂保留但隐藏在 hero 里 */
.student-hero__summary {
  margin: var(--space-2) 0 0;
  color: var(--ink-tertiary);
  font-size: 13px;
}

/* hero 里的"刷新"按钮:沿用 Phase 2 的视觉(已有规则适配) */
.student-hero #studentRefreshBtn {
  flex: 0 0 auto;
  align-self: flex-end;
  border: 1px solid var(--line-soft);
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  min-height: 36px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.student-hero #studentRefreshBtn:hover {
  background: var(--brand-soft);
  color: var(--brand-active);
  border-color: var(--brand);
}

/* 移动端:hero 字号略缩 */
@media (max-width: 560px) {
  .student-hero {
    padding: var(--space-4) var(--space-1) var(--space-2);
  }
  .student-hero__line {
    font-size: 17px;
  }
}

/* "已完成课程"标题:与 hero line 同字号同字重同色 */
.student-completed-heading h2 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--ink-primary) 0%, var(--ink-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 收紧"已完成课程"与下方课程卡的间距 */
.student-completed-heading {
  padding-bottom: 0;
}

@media (max-width: 560px) {
  .student-completed-heading h2 {
    font-size: 17px;
  }
}

/* 文字间距收紧,让段落像气泡卡片说明 */
.student-empty-state strong {
  font-size: 16px;
  margin-bottom: var(--space-2);
}

.student-empty-state p {
  max-width: 280px;
  margin: 0 auto;
}

.platform-maintenance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin: 0 0 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(219, 234, 254, 0.92), rgba(239, 246, 255, 0.92));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.platform-maintenance-banner__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: #1e3a8a;
  font-size: 13px;
}

.platform-maintenance-banner__copy strong {
  font-size: 14px;
  color: #1d4ed8;
}

.platform-maintenance-banner__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.platform-maintenance-banner__action:hover {
  background: #1d4ed8;
}

.tenant-maintenance-link {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
}


.platform-maintenance-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  margin: 0 0 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-left: 5px solid #2563eb;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.96));
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.10);
}

.platform-maintenance-banner--readonly {
  border-color: rgba(217, 119, 6, 0.24);
  border-left-color: #d97706;
  background: linear-gradient(90deg, rgba(255, 247, 237, 0.96), rgba(255, 251, 235, 0.96));
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.10);
}

.platform-maintenance-banner__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: #1e3a8a;
  font-size: 13px;
}

.platform-maintenance-banner--readonly .platform-maintenance-banner__copy {
  color: #92400e;
}

.platform-maintenance-banner__copy strong {
  font-size: 14px;
  color: #1d4ed8;
}

.platform-maintenance-banner--readonly .platform-maintenance-banner__copy strong {
  color: #b45309;
}

.platform-maintenance-banner__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.platform-maintenance-banner--readonly .platform-maintenance-banner__badge {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.18);
}

.platform-maintenance-banner__note {
  color: rgba(30, 58, 138, 0.82);
}

.platform-maintenance-banner--readonly .platform-maintenance-banner__note {
  color: rgba(146, 64, 14, 0.9);
}

.platform-maintenance-banner__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.platform-maintenance-banner--readonly .platform-maintenance-banner__action {
  background: #d97706;
  box-shadow: 0 10px 18px rgba(217, 119, 6, 0.18);
}

.platform-maintenance-banner__action:hover {
  background: #1d4ed8;
}

.platform-maintenance-banner--readonly .platform-maintenance-banner__action:hover {
  background: #b45309;
}

.tenant-maintenance-link {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
}

.tenant-maintenance-link--readonly {
  background: rgba(217, 119, 6, 0.10);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.18);
}


.status-pill.status-ok {
  color: #166534;
  background: rgba(22, 101, 52, 0.10);
  border-color: rgba(22, 101, 52, 0.18);
}

.status-pill.status-warn {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.22);
}

.table-actions .tenant-maintenance-link,
.table-actions .tenant-entry-disabled {
  min-width: 76px;
  justify-content: center;
}

.table-actions .tenant-maintenance-link + .tenant-maintenance-link,
.table-actions .tenant-entry-disabled + .tenant-maintenance-link,
.table-actions .tenant-maintenance-link + .tenant-entry-disabled {
  margin-left: 6px;
}

.tenant-maintenance-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.tenant-maintenance-link--editable {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.10));
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.tenant-maintenance-link--editable:hover {
  background: rgba(37, 99, 235, 0.18);
}

.tenant-maintenance-link--readonly:hover {
  background: rgba(217, 119, 6, 0.16);
}

.tenant-maintenance-confirm {
  width: min(460px, calc(100vw - 32px));
}

.tenant-maintenance-confirm__head h3 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;
}

.tenant-maintenance-confirm__head p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
}

.tenant-maintenance-confirm__body {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.tenant-maintenance-confirm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
}

.tenant-maintenance-confirm__row strong {
  color: #0f172a;
  font-size: 15px;
}

.tenant-maintenance-confirm__note {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.92), rgba(255, 251, 235, 0.92));
  border: 1px solid rgba(217, 119, 6, 0.18);
  color: #9a3412;
  font-size: 13px;
  line-height: 1.6;
}

.tenant-maintenance-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.tenant-maintenance-confirm__actions .button-link,
.tenant-maintenance-confirm__actions button {
  min-width: 96px;
  justify-content: center;
}

.training-workbench-page {
  gap: 20px;
}

.training-workbench-topbar {
  align-items: flex-start;
}

.training-workbench-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.training-workbench-quick-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.training-workbench-quick-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.training-workbench-quick-card__head h2 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;
}

.training-workbench-quick-card__head span {
  color: #64748b;
  font-size: 13px;
}

.training-workbench-quick-card p {
  margin: 0;
  color: #334155;
  line-height: 1.7;
}

.training-workbench-kpis {
  margin-top: 0;
}

.training-workbench-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.training-workbench-panel--wide {
  grid-column: 1 / -1;
}

.training-workbench-summary {
  margin-bottom: 14px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.training-workbench-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.training-workbench-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.training-workbench-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.training-workbench-item__title {
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
}

.training-workbench-item__title:hover {
  color: #2563eb;
}

.training-workbench-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #64748b;
  font-size: 12px;
}

.training-workbench-item__desc {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.7;
}

.training-workbench-item__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 180px;
}

.training-workbench-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #1e293b;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.training-workbench-pill--link {
  background: #dbeafe;
  color: #1d4ed8;
}

.training-workbench-empty {
  padding: 18px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
}

@media (max-width: 1080px) {
  .training-workbench-quick,
  .training-workbench-main {
    grid-template-columns: 1fr;
  }

  .training-workbench-item {
    flex-direction: column;
  }

  .training-workbench-item__stats {
    justify-content: flex-start;
    min-width: 0;
  }
}

.text-course-page {
  gap: 18px;
}

.text-course-topbar {
  align-items: flex-start;
}

.text-course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid #dbe5f4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.text-course-hero__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.text-course-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  width: fit-content;
  padding: 0 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.text-course-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.35;
}

.text-course-hero p {
  margin: 0;
  color: #475467;
  line-height: 1.8;
}

.text-course-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.text-course-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.text-course-kpis {
  margin-top: 0;
}

.text-course-template-grid,
.text-course-main-grid {
  display: grid;
  gap: 16px;
}

.text-course-template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-course-main-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-course-template-card,
.text-course-panel {
  border: 1px solid #dbe5f4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.text-course-template-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.text-course-template-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.text-course-template-card__head h2,
.text-course-panel .dashboard-panel-head h2 {
  margin: 0;
}

.text-course-template-card__head span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.text-course-template-card p,
.text-course-template-card li,
.text-course-panel__intro,
.text-course-steps li span,
.text-course-roadmap p {
  color: #475467;
  line-height: 1.75;
}

.text-course-template-card ul,
.text-course-steps {
  margin: 0;
  padding-left: 18px;
}

.text-course-template-card li + li,
.text-course-steps li + li {
  margin-top: 6px;
}

.text-course-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.text-course-panel__intro {
  margin: 0;
  font-size: 13px;
}

.text-course-list,
.text-course-checklist,
.text-course-roadmap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-course-stage-grid {
  display: grid;
  gap: 18px;
}

.text-course-stage-panel {
  border: 1px solid #dbe5f4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.text-course-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.text-course-two-column--spaced {
  margin-top: 16px;
}

.text-course-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-soft {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.text-course-list-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.text-course-record-card,
.text-course-task-card,
.text-course-list-item {
  border: 1px solid #dbe5f4;
  border-radius: 16px;
  background: #ffffff;
}

.text-course-task-card__summary {
  margin: 0;
  color: #475467;
  line-height: 1.75;
}

.text-course-form-grid textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid #d0d7e2;
  border-radius: 12px;
  resize: vertical;
  font: inherit;
  color: #0f172a;
  background: #fff;
}

@media (max-width: 1080px) {
  .text-course-two-column {
    grid-template-columns: 1fr;
  }
}

.text-course-list-item,
.text-course-check-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.text-course-list-item.is-highlighted {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.text-course-list-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.text-course-list-item__title {
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
}

.text-course-list-item__title:hover {
  color: #2563eb;
}

.text-course-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #64748b;
  font-size: 12px;
}

.text-course-list-item__body p {
  margin: 0;
  font-size: 13px;
}

.text-course-list-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: #64748b;
}

.text-course-list-item__links a {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
}

.text-course-list-item__links a:hover {
  color: #1d4ed8;
}

.text-course-list-item__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 180px;
}

.text-course-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
}

.text-course-status-pill.is-soft {
  background: #e2e8f0;
  color: #334155;
}

.text-course-check-item strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
}

.text-course-check-item p {
  margin: 0;
  font-size: 13px;
}

.text-course-check-item span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.text-course-check-item.is-ok span {
  background: #dcfce7;
  color: #166534;
}

.text-course-check-item.is-warn span {
  background: #fef3c7;
  color: #b45309;
}

.text-course-steps li strong {
  display: block;
  margin-bottom: 4px;
  color: #0f172a;
}

.text-course-roadmap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-course-roadmap > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.text-course-roadmap span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  width: fit-content;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.text-course-roadmap strong {
  color: #0f172a;
}

.text-course-roadmap p {
  margin: 0;
  font-size: 13px;
}

.text-course-empty {
  padding: 18px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
}

.text-course-panel--wide {
  grid-column: span 2;
}

.text-course-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.text-course-form-grid label,
.text-course-task-editor label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.text-course-form-grid input,
.text-course-form-grid select,
.text-course-task-editor input,
.text-course-task-editor select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: #0f172a;
}

.text-course-form-grid input:focus,
.text-course-form-grid select:focus,
.text-course-task-editor input:focus,
.text-course-task-editor select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
  outline: none;
}

.text-course-field-label,
.text-course-task-editor span {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.text-course-form-grid__full,
.text-course-task-editor__wide {
  grid-column: 1 / -1;
}

.text-course-form-grid__actions,
.text-course-task-editor__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.text-course-form-grid__actions {
  grid-column: 1 / -1;
}

.text-course-form-grid__actions button,
.text-course-task-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #2563eb;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.text-course-form-grid__actions button:hover,
.text-course-task-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.2);
}

.text-course-form-grid__actions button:disabled,
.text-course-task-save:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
  transform: none;
}

.text-course-inline-message {
  min-height: 20px;
  color: #64748b;
  font-size: 12px;
}

.text-course-inline-message[data-kind="ok"] {
  color: #166534;
}

.text-course-inline-message[data-kind="warn"] {
  color: #b45309;
}

.text-course-student-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.text-course-student-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.text-course-student-choice:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.text-course-student-choice input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #2563eb;
}

.text-course-student-choice span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.text-course-student-choice strong {
  color: #0f172a;
}

.text-course-student-choice small {
  color: #64748b;
  line-height: 1.5;
}

.text-course-student-choice:has(input:checked) {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

.text-course-task-list,
.text-course-record-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.text-course-task-card,
.text-course-record-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.text-course-task-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.text-course-task-card__head h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
}

.text-course-task-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.text-course-status-pill.is-warn {
  background: #fef3c7;
  color: #b45309;
}

.text-course-task-card__summary {
  margin: 0;
  color: #475467;
  line-height: 1.75;
}

.text-course-task-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #64748b;
  font-size: 12px;
}

.text-course-task-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed #dbe5f4;
}

.text-course-editor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.text-course-editor-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.text-course-editor-body-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.text-course-editor-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.text-course-editor-page-head h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  color: #122031;
}

.text-course-editor-page-head p {
  margin: 8px 0 0;
  color: #5f7087;
  line-height: 1.7;
}

.text-course-editor-page-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.text-course-editor-main,
.text-course-editor-sidecard,
.text-course-editor-form,
.text-course-editor-block,
.text-course-editor-preview-block,
.text-course-editor-sidebar,
.text-course-editor-sourcecard,
.text-course-editor-facts,
.text-course-editor-outline,
.text-course-editor-next-actions {
  display: grid;
  gap: 16px;
}

.text-course-form-grid--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.text-course-form-grid--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.text-course-editor-quiz-meta-grid {
  grid-template-columns: 2.5fr 1fr 0.5fr 0.5fr 0.5fr;
}

.text-course-form-grid--double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-course-editor-subhead {
  margin-top: 8px;
}

.text-course-editor-content-field {
  display: grid;
  gap: 8px;
}

.text-course-editor-content-field textarea,
.text-course-editor-quiz-form textarea {
  min-height: 420px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #d7e0ef;
  background: #fff;
  font: inherit;
  color: #122031;
  resize: vertical;
  line-height: 1.7;
}

.text-course-editor-quiz-form textarea {
  min-height: 140px;
}

.text-course-editor-paper-panel,
.text-course-editor-paper-box {
  display: grid;
  gap: 16px;
}

.text-course-editor-content-field textarea:focus,
.text-course-editor-quiz-form textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.text-course-editor-actions {
  display: grid;
  gap: 10px;
}

.text-course-editor-actions__buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.text-course-editor-actions button {
  min-width: 132px;
}

.text-course-editor-actions__buttons .button-link {
  min-width: 132px;
  justify-content: center;
}

.text-course-editor-content-actions {
  margin-top: 14px;
  justify-items: start;
}

.text-course-editor-content-actions .text-course-inline-message {
  width: 100%;
}

.text-course-editor-quiz-card,
.text-course-editor-quiz-form {
  display: grid;
  gap: 16px;
}

.text-course-editor-quiz-helper {
  margin: 0;
  color: #506176;
  line-height: 1.7;
}

.text-course-editor-quiz-form input[type="text"],
.text-course-editor-quiz-form input[type="number"] {
  width: 100%;
}

.text-course-editor-quiz-note {
  padding: 12px 14px;
  border: 1px solid #d7e0ef;
  border-radius: 14px;
  background: #f8fbff;
  color: #4b5f77;
  font-size: 13px;
  line-height: 1.7;
}

.text-course-editor-paper-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d7e0ef;
  border-radius: 14px;
  background: #f8fbff;
}

.text-course-editor-paper-box__head {
  display: grid;
  gap: 4px;
}

.text-course-editor-paper-box__head strong {
  color: #122031;
  font-size: 15px;
}

.text-course-editor-paper-box__head span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.text-course-editor-quiz-structure {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7e0ef;
  border-radius: 14px;
  background: #f8fbff;
}

.text-course-editor-quiz-structure__head {
  display: grid;
  gap: 4px;
}

.text-course-editor-quiz-structure__head strong {
  color: #122031;
  font-size: 15px;
}

.text-course-editor-quiz-structure__head span {
  color: #64748b;
  font-size: 12px;
}

.text-course-editor-quiz-structure__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.text-course-editor-quiz-structure__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.text-course-editor-quiz-structure__row > strong {
  grid-column: 1 / -1;
  color: #122031;
  font-size: 14px;
}

.text-course-editor-quiz-structure__row label {
  display: grid;
  gap: 6px;
}

.text-course-editor-quiz-structure__row label span {
  color: #64748b;
  font-size: 12px;
}

.text-course-editor-quiz-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.text-course-editor-quiz-actions button {
  min-width: 132px;
}

.text-course-editor-quiz-actions .ghost {
  border: 1px solid #c8d6eb;
  background: #fff;
  color: #1d4ed8;
}

.text-course-editor-quiz-actions .ghost:hover {
  background: #f0f6ff;
}

.text-course-editor-sourcecard__title {
  font-size: 18px;
  font-weight: 700;
  color: #122031;
}

.text-course-editor-sourcecard p,
.text-course-editor-outline-item p {
  margin: 0;
  color: #506176;
  line-height: 1.7;
}

.text-course-editor-fact,
.text-course-editor-outline-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.text-course-editor-fact span {
  font-size: 12px;
  color: #64748b;
}

.text-course-editor-fact strong,
.text-course-editor-outline-item strong {
  font-size: 15px;
  color: #122031;
}

.text-course-editor-next-actions .button-link {
  justify-content: center;
}

@media (max-width: 1180px) {
  .text-course-hero,
  .text-course-template-grid,
  .text-course-main-grid,
  .text-course-roadmap,
  .text-course-editor-layout,
  .text-course-editor-top-grid,
  .text-course-editor-body-grid {
    grid-template-columns: 1fr;
  }

  .text-course-editor-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .text-course-editor-page-head__actions {
    justify-content: flex-start;
  }

  .text-course-pill-row {
    justify-content: flex-start;
  }

  .text-course-panel--wide {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .text-course-list-item,
  .text-course-check-item,
  .text-course-task-card__head {
    flex-direction: column;
  }

  .text-course-list-item__stats {
    justify-content: flex-start;
    min-width: 0;
  }

  .text-course-form-grid,
  .text-course-form-grid--double,
  .text-course-form-grid--triple,
  .text-course-form-grid--five,
  .text-course-task-editor {
    grid-template-columns: 1fr;
  }

  .text-course-editor-quiz-structure__grid {
    grid-template-columns: 1fr;
  }

  .text-course-editor-quiz-structure__row {
    grid-template-columns: 1fr;
  }

  .text-course-task-card__badges {
    justify-content: flex-start;
  }
}

.marketing-design-page {
  gap: 18px;
}

.marketing-design-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: stretch;
}

.marketing-design-hero__main,
.marketing-design-hero__side,
.marketing-design-main,
.marketing-design-side__card,
.marketing-design-preview {
  border: 1px solid #dbe5f4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.marketing-design-hero__side h3,
.marketing-design-side__card h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 16px;
}

.marketing-design-checklist,
.marketing-design-tip-list {
  margin: 0;
  padding-left: 18px;
  color: #475467;
  line-height: 1.8;
}

.marketing-design-checklist li + li,
.marketing-design-tip-list li + li {
  margin-top: 4px;
}

.marketing-design-guidance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.marketing-design-guidance span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.marketing-design-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.marketing-design-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eef6ff;
  color: #175cd3;
  font-size: 13px;
  font-weight: 700;
}

.marketing-design-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.marketing-design-shell--optimize {
  grid-template-columns: minmax(420px, 0.88fr) minmax(640px, 1.12fr);
}

.marketing-design-main,
.marketing-design-side {
  min-width: 0;
}

.marketing-design-optimize-left,
.marketing-design-optimize-right {
  min-width: 0;
}

.marketing-design-side {
  display: grid;
  gap: 16px;
}

.marketing-design-section + .marketing-design-section {
  margin-top: 24px;
}

.marketing-design-section__head {
  margin-bottom: 14px;
}

.marketing-design-section__head--inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: baseline;
}

.marketing-design-section__head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.marketing-design-section__head p {
  margin: 6px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.marketing-design-section__head--inline p {
  margin: 0;
}

.marketing-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.marketing-design-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-design-grid--constraints {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-design-input-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: #f8fbff;
}

.marketing-design-input-card--double {
  grid-column: span 2;
}

.marketing-design-input-card__head {
  margin-bottom: 2px;
}

.marketing-design-grid--upload {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.marketing-design-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.marketing-design-field > span {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.marketing-design-field input,
.marketing-design-field textarea {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  padding: 11px 13px;
  font: inherit;
  line-height: 1.6;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.marketing-design-field textarea {
  min-height: 120px;
  resize: vertical;
}

.text-course-editor-content-field textarea {
  min-height: 720px;
}

.marketing-design-inline-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: -2px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid #dbe5f4;
}

.marketing-design-inline-tools > span {
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.marketing-design-inline-tools__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.marketing-design-inline-tools__actions button {
  min-height: 34px;
}

.marketing-design-grid--compact-cards .marketing-design-field textarea {
  height: 72px;
  min-height: 72px;
}

.marketing-design-field input:focus,
.marketing-design-field textarea:focus {
  border-color: #7aa2ff;
  box-shadow: 0 0 0 4px rgba(46, 117, 229, 0.12);
  outline: 0;
}

.marketing-design-field--wide {
  grid-column: 1 / -1;
}

.marketing-design-field--required > span {
  color: #172554;
}

.marketing-design-helper {
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.marketing-design-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.marketing-design-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.marketing-design-chip:hover {
  border-color: #bfd6ff;
  background: #eef4ff;
  color: #175cd3;
}

.marketing-design-actions {
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
}

.marketing-design-actions--stack {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  padding: 18px;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.marketing-design-section__head--compact {
  margin-bottom: 12px;
}

.marketing-design-actions__main {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.marketing-design-actions--stack .marketing-design-actions__main {
  flex-direction: column;
  align-items: stretch;
}

.marketing-design-actions__main button,
.marketing-design-actions__main .button-link {
  min-height: 40px;
}

.marketing-design-actions--stack #designOptimizeRunBtn {
  width: 100%;
  min-height: 46px;
  font-size: 15px;
  font-weight: 800;
}

.marketing-design-actions--stack .button-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.marketing-design-optimize-right {
  display: grid;
  gap: 18px;
  padding: 20px 20px 22px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.marketing-design-optimize-summary {
  padding: 18px;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.marketing-design-optimize-summary h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.marketing-design-optimize-note {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #cfe0ff;
}

.marketing-design-optimize-note strong {
  color: #1d4ed8;
  font-size: 13px;
}

.marketing-design-optimize-note span {
  color: #475467;
  font-size: 12px;
  line-height: 1.6;
}

.marketing-design-status {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.marketing-design-status--idle {
  background: #f8fafc;
  color: #667085;
}

.marketing-design-status--working {
  background: #eff8ff;
  color: #175cd3;
}

.marketing-design-status--success {
  background: #ecfdf3;
  color: #027a48;
}

.marketing-design-status--error {
  background: #fef3f2;
  color: #b42318;
}

.marketing-design-preview {
  padding-top: 0;
}

.marketing-design-preview--embedded {
  border: 1px solid #e5edf8;
  border-radius: 14px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.marketing-design-preview--embedded .course-table-head {
  margin-bottom: 12px;
}

.marketing-design-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.marketing-design-side__head h3 {
  margin: 0;
}

.marketing-design-side__hint {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.marketing-design-readiness-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
  font-weight: 800;
}

.marketing-design-readiness-badge[data-state="ready"] {
  background: #eff8ff;
  color: #175cd3;
}

.marketing-design-readiness-badge[data-state="complete"] {
  background: #ecfdf3;
  color: #027a48;
}

.marketing-design-readiness-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  margin-bottom: 14px;
}

.marketing-design-readiness-metric {
  padding: 12px 10px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}

.marketing-design-readiness-metric strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.marketing-design-readiness-metric span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
}

.marketing-design-readiness-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketing-design-readiness-item {
  padding: 12px 12px 12px 14px;
  border: 1px solid #e4e7ec;
  border-left: 4px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
}

.marketing-design-readiness-item strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.marketing-design-readiness-item span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.marketing-design-readiness-item[data-state="ready"] {
  border-left-color: #12b76a;
  background: #f6fef9;
}

.marketing-design-readiness-item[data-state="suggested"] {
  border-left-color: #f59e0b;
  background: #fffbeb;
}

.marketing-design-readiness-hint {
  margin: 14px 0 0;
  color: #475467;
  font-size: 12px;
  line-height: 1.7;
}

.marketing-design-scene-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-design-scene-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dbe5f4;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  text-align: left;
  transition: all 0.2s ease;
  min-height: 100%;
}

.marketing-design-scene-btn strong {
  color: #0f172a;
  font-size: 13px;
}

.marketing-design-scene-btn span {
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.marketing-design-scene-btn:hover {
  border-color: #bfd6ff;
  box-shadow: 0 10px 20px rgba(46, 117, 229, 0.08);
  transform: translateY(-1px);
}

.marketing-design-side__card--tight {
  padding: 18px;
}

.marketing-design-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.marketing-design-tabs button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.marketing-design-tabs button.active {
  border-color: #bfd6ff;
  background: #edf4ff;
  color: #175cd3;
}

.marketing-design-pane {
  min-width: 0;
}

.marketing-design-preview-body {
  min-height: 180px;
}

.marketing-design-preview-body--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d0d5dd;
  border-radius: 12px;
  background: #fbfdff;
  color: #98a2b3;
  padding: 24px;
  text-align: center;
}

.marketing-script-card,
.marketing-diagnosis-card {
  display: grid;
  gap: 18px;
}

.marketing-script-card__head,
.marketing-diagnosis-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  border: 1px solid #dbeafe;
}

.marketing-script-card__head h3,
.marketing-diagnosis-card__head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
}

.marketing-script-card__head p,
.marketing-diagnosis-card__head p {
  margin: 8px 0 0;
  color: #475467;
  line-height: 1.7;
}

.marketing-script-meta,
.marketing-diagnosis-insight {
  display: grid;
  gap: 8px;
  min-width: 240px;
  align-content: start;
}

.marketing-script-meta span,
.marketing-diagnosis-insight span {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.marketing-diagnosis-insight strong {
  color: #175cd3;
  font-size: 16px;
  line-height: 1.6;
}

.marketing-script-sections,
.marketing-diagnosis-section {
  display: grid;
  gap: 14px;
}

.marketing-diagnosis-section h4 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.marketing-script-section {
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px;
}

.marketing-script-section__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.marketing-script-section__head h4 {
  margin: 0;
  color: #101828;
  font-size: 17px;
}

.marketing-script-section__head p {
  margin: 6px 0 0;
  color: #667085;
  line-height: 1.7;
}

.marketing-script-section__head span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 800;
}

.marketing-script-blocks {
  display: grid;
  gap: 12px;
}

.marketing-script-block {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px;
}

.marketing-script-block > strong {
  display: block;
  color: #1d4ed8;
  font-size: 14px;
  margin-bottom: 10px;
}

.marketing-script-dialogue {
  display: grid;
  gap: 8px;
}

.marketing-script-line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
}

.marketing-script-line span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.marketing-script-line p {
  margin: 0;
  color: #344054;
  line-height: 1.75;
  word-break: break-word;
}

.marketing-script-line--sales span {
  background: #dbeafe;
  color: #1d4ed8;
}

.marketing-script-line--customer span {
  background: #dcfce7;
  color: #15803d;
}

.marketing-script-heart {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #eff8ff;
  border: 1px solid #dbeafe;
}

.marketing-script-heart strong {
  color: #175cd3;
}

.marketing-design-heart-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #344054;
  line-height: 1.8;
}

.marketing-dialogue-pair {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eaecf0;
}

.marketing-dialogue-pair:last-child {
  border-bottom: 0;
}

.marketing-dialogue-pair__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef6ff;
  color: #175cd3;
  font-weight: 800;
}

.marketing-dialogue-pair__body {
  display: grid;
  gap: 8px;
}

.marketing-design-table-wrap {
  overflow-x: auto;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
}

.marketing-design-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.marketing-design-table th,
.marketing-design-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eaecf0;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.marketing-design-table th {
  background: #f8fafc;
  color: #344054;
  font-size: 13px;
  font-weight: 800;
}

.marketing-design-table tbody tr:last-child td {
  border-bottom: 0;
}

.marketing-design-empty-cell {
  text-align: center !important;
  color: #98a2b3;
  padding: 24px !important;
}

.marketing-diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.marketing-diagnosis-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-diagnosis-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-diagnosis-item {
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.marketing-diagnosis-item strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  margin-bottom: 8px;
}

.marketing-diagnosis-item p,
.marketing-diagnosis-item small {
  margin: 0;
  color: #475467;
  line-height: 1.7;
}

.marketing-diagnosis-item p + p {
  margin-top: 6px;
}

.marketing-diagnosis-item small {
  display: block;
  margin-top: 8px;
  color: #98a2b3;
}

.marketing-design-source-preview {
  margin-top: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.marketing-design-source-preview__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #eaecf0;
}

.marketing-design-source-preview__head strong {
  color: #101828;
}

.marketing-design-source-preview__head span {
  color: #667085;
  font-size: 12px;
}

.marketing-design-source-preview pre {
  margin: 0;
  padding: 14px;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  color: #344054;
  font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

.knowledge-create-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.knowledge-create-shell .student-section-head h2 {
  color: #1769aa;
  font-weight: 800;
}

.knowledge-template-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.knowledge-import-form {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

.knowledge-import-editor {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eaecf0;
}

.knowledge-import-browser {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eaecf0;
  display: grid;
  gap: 12px;
}

.knowledge-import-browser--inline {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.knowledge-import-browser__content {
  margin: 0;
  height: 420px;
  overflow: auto;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px 14px;
  color: #344054;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
}

.knowledge-import-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
  gap: 16px;
  align-items: end;
}

.knowledge-import-note-field {
  margin: 0;
  min-width: 0;
}

.knowledge-import-note-field textarea {
  min-height: 60px;
}

#knowledgeContent {
  min-height: 360px;
}

.knowledge-import-submit-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 100%;
}

.knowledge-import-editor__actions {
  margin-top: 16px;
  justify-content: flex-end;
}

.text-import-confirm-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(23, 105, 170, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(23, 105, 170, 0.08), rgba(212, 160, 23, 0.08)),
    #ffffff;
  box-shadow: 0 16px 40px rgba(15, 35, 55, 0.08);
}

.text-import-confirm-panel__head,
.text-import-confirm-panel__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.text-import-confirm-panel__head span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23, 105, 170, 0.1);
  color: #1769aa;
  font-size: 12px;
  font-weight: 800;
}

.text-import-confirm-panel__head h3 {
  margin: 0;
  font-size: 20px;
  color: #10243d;
}

.text-import-confirm-panel__head p {
  margin: 8px 0 0;
  color: #5f7087;
  line-height: 1.7;
}

.text-import-confirm-panel__head > strong {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff7df;
  color: #9a6a00;
  border: 1px solid rgba(212, 160, 23, 0.28);
}

.text-import-confirm-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.text-import-confirm-panel__grid > div,
.text-import-confirm-sections article {
  padding: 12px;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.text-import-confirm-panel__grid span,
.text-import-confirm-sections span {
  display: block;
  margin-bottom: 6px;
  color: #66758a;
  font-size: 12px;
}

.text-import-confirm-panel__grid strong,
.text-import-confirm-sections strong {
  color: #122031;
  line-height: 1.6;
}

.text-import-confirm-panel__body {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.4fr);
  gap: 14px;
  margin-top: 14px;
}

.text-import-confirm-sections {
  display: grid;
  gap: 10px;
  align-content: start;
}

.text-import-confirm-sections p {
  margin: 6px 0 0;
  color: #5f7087;
  line-height: 1.65;
}

.text-import-confirm-preview {
  min-height: 260px;
  max-height: 420px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid #dbe5f4;
  border-radius: 14px;
  background: #f8fbff;
  color: #26384f;
  white-space: pre-wrap;
  line-height: 1.7;
}

.text-import-confirm-panel__actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.knowledge-template-card {
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 16px;
  text-align: left;
  color: #0f172a;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.knowledge-template-card:hover {
  transform: translateY(-1px);
  border-color: #98a2b3;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.knowledge-template-card[disabled] {
  cursor: not-allowed;
  opacity: 0.56;
  box-shadow: none;
  transform: none;
}

.knowledge-template-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.knowledge-template-card p {
  margin: 0;
  color: #475467;
  line-height: 1.65;
  font-size: 13px;
}

.knowledge-template-card span {
  display: block;
  margin-top: 10px;
  color: #667085;
  font-size: 12px;
}

.knowledge-editor-half-row {
  grid-column: span 2;
}

.knowledge-template-inline {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.knowledge-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.knowledge-template-grid--compact .knowledge-template-card {
  padding: 14px 12px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.knowledge-template-grid--compact .knowledge-template-card strong {
  margin-bottom: 0;
}

.knowledge-template-grid--compact .knowledge-template-card p,
.knowledge-template-grid--compact .knowledge-template-card span {
  display: none;
}

@media (max-width: 1180px) {
  .knowledge-import-submit-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-import-submit-actions {
    justify-content: flex-start;
  }
}

.knowledge-preview-dialog {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

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

.knowledge-preview-head h2 {
  margin-bottom: 6px;
}

.knowledge-preview-head p {
  margin: 0;
}

.knowledge-preview-alert {
  margin-top: 16px;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid #fecdca;
  background: #fff7ed;
  color: #9a3412;
  line-height: 1.7;
}

.knowledge-preview-alert.ok {
  border-color: #b7ebc6;
  background: #ecfdf3;
  color: #166534;
}

.knowledge-preview-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.knowledge-preview-card {
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #ffffff;
  padding: 16px;
}

.knowledge-preview-card--full {
  grid-column: 1 / -1;
}

.knowledge-preview-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #101828;
}

.knowledge-preview-meta {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px 14px;
  margin: 0;
}

.knowledge-preview-meta dt {
  color: #667085;
}

.knowledge-preview-meta dd {
  margin: 0;
  color: #101828;
  word-break: break-word;
}

.knowledge-preview-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knowledge-preview-edit-grid__full {
  grid-column: 1 / -1;
}

.knowledge-preview-edit-grid label {
  display: grid;
  gap: 6px;
}

.knowledge-preview-edit-grid label span {
  color: #344054;
  font-size: 13px;
}

.knowledge-preview-edit-grid input,
.knowledge-preview-edit-grid textarea {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: #101828;
  background: #fff;
  resize: vertical;
}

.knowledge-preview-copy {
  margin: 0;
  line-height: 1.8;
  color: #344054;
  white-space: pre-wrap;
}

.knowledge-preview-pills {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.knowledge-preview-pills strong {
  color: #344054;
  font-size: 13px;
}

.knowledge-preview-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-preview-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
}

.knowledge-preview-outline {
  display: grid;
  gap: 12px;
}

.knowledge-preview-outline section {
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px 14px;
}

.knowledge-preview-outline strong {
  display: block;
  color: #101828;
  margin-bottom: 6px;
}

.knowledge-preview-outline p,
.knowledge-preview-quiz p {
  margin: 0;
  color: #475467;
  line-height: 1.75;
  white-space: pre-wrap;
}

.knowledge-preview-quiz {
  display: grid;
  gap: 10px;
}

.knowledge-preview-quiz strong {
  color: #101828;
}

.student-section-head--compact {
  margin-bottom: 12px;
}

.student-section-head--compact h3 {
  margin: 0 0 6px;
  color: #101828;
  font-size: 16px;
}

.student-section-head--compact p {
  margin: 0;
  color: #667085;
  line-height: 1.7;
}

.knowledge-import-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.knowledge-import-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.knowledge-import-sidebar,
.knowledge-import-main {
  display: grid;
  gap: 16px;
}

.knowledge-import-card {
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

.knowledge-import-source-list,
.knowledge-import-draft-list {
  display: grid;
  gap: 12px;
}

.knowledge-import-source-card {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.knowledge-import-source-card:hover {
  border-color: #98a2b3;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.knowledge-import-source-card.active {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.knowledge-import-source-card__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.knowledge-import-source-card__head strong {
  color: #101828;
  line-height: 1.6;
}

.knowledge-import-source-card p {
  margin: 8px 0 0;
  color: #475467;
  line-height: 1.7;
}

.knowledge-import-source-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  color: #667085;
  font-size: 12px;
}

.knowledge-import-source-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.knowledge-import-source-meta__row {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #eaecf0;
  border-radius: 10px;
  background: #f8fafc;
}

.knowledge-import-source-meta__row span {
  color: #667085;
  font-size: 12px;
}

.knowledge-import-source-meta__row strong {
  color: #101828;
  line-height: 1.7;
  word-break: break-word;
}

.knowledge-import-draft-card {
  border: 1px solid #d0d5dd;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

.knowledge-import-draft-card.is-committed {
  border-color: #b7ebc6;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.knowledge-import-draft-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.knowledge-import-draft-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #101828;
  font-weight: 600;
}

.knowledge-import-draft-card__toggle input {
  margin: 0;
}

.knowledge-import-draft-card__meta {
  margin: 10px 0 14px;
  color: #667085;
  line-height: 1.7;
}

.knowledge-import-draft-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knowledge-import-draft-card__grid label {
  display: grid;
  gap: 6px;
}

.knowledge-import-draft-card__grid label span {
  color: #344054;
  font-size: 13px;
}

.knowledge-import-draft-card__grid input[type="text"],
.knowledge-import-draft-card__grid select,
.knowledge-import-draft-card__grid textarea {
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: #101828;
  background: #fff;
  resize: vertical;
}

.knowledge-import-draft-card__full {
  grid-column: 1 / -1;
}

.knowledge-import-draft-card__scope {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #344054;
}

.knowledge-import-draft-card__scope input {
  margin: 0;
}

@media (max-width: 1320px) {
  .knowledge-create-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-import-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-import-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-design-hero,
  .marketing-design-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-design-shell--optimize {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-design-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-query-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .knowledge-query-grid .record-query-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .knowledge-preview-layout,
  .knowledge-preview-edit-grid,
  .knowledge-template-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .text-import-confirm-panel__grid,
  .text-import-confirm-panel__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-import-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-import-summary-grid,
  .knowledge-import-source-meta,
  .knowledge-import-draft-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-preview-head {
    flex-direction: column;
  }

  .knowledge-preview-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-design-section__head--inline {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .marketing-design-grid,
  .marketing-design-grid--three,
  .marketing-design-grid--constraints,
  .marketing-design-grid--upload,
  .marketing-diagnosis-grid,
  .marketing-diagnosis-grid--three,
  .marketing-diagnosis-grid--two,
  .marketing-design-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketing-design-input-card--double {
    grid-column: auto;
  }

  .marketing-design-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-design-actions__main {
    flex-direction: column;
    align-items: stretch;
  }

  .marketing-design-actions__main .button-link,
  .marketing-design-actions__main button {
    width: 100%;
  }

  .marketing-design-guidance {
    flex-direction: column;
  }

  .marketing-design-inline-tools {
    align-items: flex-start;
  }

  .marketing-design-optimize-right {
    padding: 16px;
  }
}

@media (max-width: 680px) {
  .marketing-design-readiness-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}