:root {
  color-scheme: light;
  --rainbow-pink: #fbc2be;
  --rainbow-peach: #fed8c7;
  --rainbow-yellow: #fff2cc;
  --rainbow-mint: #b8e8b3;
  --rainbow-cyan: #bde1ff;
  --rainbow-blue: #d3deff;
  --rainbow-lavender: #d7cdfa;
  --rainbow-gradient: linear-gradient(90deg, var(--rainbow-pink), var(--rainbow-peach), var(--rainbow-yellow), var(--rainbow-mint), var(--rainbow-cyan), var(--rainbow-blue), var(--rainbow-lavender));
  --rainbow-glow: 0 0 14px rgba(189, 225, 255, 0.72), 0 0 26px rgba(251, 194, 190, 0.36), 0 0 42px rgba(215, 205, 250, 0.28);
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-soft: #f0f4f8;
  --text: #263044;
  --muted: #6c7485;
  --line: rgba(38, 48, 68, 0.1);
  --primary: #267a8d;
  --primary-dark: #14586a;
  --primary-soft: #e3f3f1;
  --primary-border: #b8deda;
  --primary-text: #14586a;
  --primary-shadow: rgba(38, 122, 141, 0.16);
  --line-strong: #d9e2ec;
  --font-caption: 12px;
  --font-small: 13px;
  --font-body: 15px;
  --font-body-strong: 16px;
  --font-card-title: 18px;
  --font-section-title: 22px;
  --font-page-title: 30px;
  --font-display: 40px;
  --font-metric: 28px;
  --font-metric-compact: 24px;
  --font-learning-text: 19px;
  --font-word-display: "Comic Sans MS", "Marker Felt", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif;
  --line-body: 1.55;
  --line-compact: 1.25;
  --green: #0f766e;
  --amber: #a16207;
  --rose: #be123c;
  --shadow: 0 16px 40px rgb(15 23 42 / 8%);
}

.essay-attachment-picker {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px dashed var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.essay-attachment-picker small,
.essay-attachment-list > small {
  color: var(--muted);
}

.essay-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.essay-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--primary-border);
  border-radius: 7px;
  background: #fff;
  color: var(--primary-text);
  font-size: var(--font-small);
}

.essay-attachment-chip > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.essay-attachment-chip button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--rose);
  font-size: var(--font-caption);
  font-weight: 800;
}

.writing-report-actions,
.writing-tutor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.writing-processing-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.writing-processing-state > div {
  display: grid;
  gap: 4px;
}

.writing-processing-state small {
  color: var(--muted);
  line-height: 1.5;
}

.writing-processing-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  border: 2px solid var(--primary-border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: writing-processing-spin 0.9s linear infinite;
}

@keyframes writing-processing-spin {
  to { transform: rotate(360deg); }
}

.writing-tutor-messages {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.writing-tutor-message {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.writing-tutor-message.user {
  justify-self: end;
  background: var(--primary-soft);
}

.writing-tutor-message strong,
.writing-tutor-message p {
  display: block;
  margin: 0;
}

.writing-tutor-message strong {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.writing-tutor-message p {
  white-space: pre-wrap;
  line-height: 1.55;
}

[data-writing-pdf-host] {
  position: absolute !important;
  left: -10000px !important;
  top: 0 !important;
  display: block !important;
  width: 794px !important;
  max-width: none !important;
  min-width: 794px !important;
  height: auto !important;
  min-height: 1px !important;
  overflow: visible !important;
}

.student-class-preview-head {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.student-class-preview-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.student-class-preview-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.student-class-preview-group {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.student-class-preview-list {
  display: grid;
  gap: 8px;
}

.student-class-preview-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.5fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-class-preview-row div {
  display: grid;
  gap: 3px;
}

.student-class-preview-row small,
.student-class-preview-row span {
  color: var(--muted);
}

.student-class-preview-row em,
.student-class-preview-row button {
  justify-self: end;
}

.student-class-preview-row em {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-style: normal;
  font-weight: 900;
}

.vocab-usage-page {
  display: grid;
  gap: 18px;
}

.vocab-usage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.vocab-usage-hero h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-page-title);
  line-height: var(--line-compact);
}

.vocab-usage-hero p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
}

.vocab-usage-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.vocab-usage-stats span {
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  text-align: center;
  font-size: var(--font-small);
  font-weight: 800;
}

.vocab-usage-stats strong {
  display: block;
  color: var(--primary-dark);
  font-size: var(--font-metric-compact);
  line-height: 1.1;
}

.vocab-usage-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) auto;
  gap: 10px;
  align-items: center;
}

.vocab-usage-toolbar .field,
.vocab-usage-toolbar .select {
  width: 100%;
  min-height: 42px;
}

.vocab-usage-segmented {
  display: flex;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}

.vocab-usage-segmented button {
  min-width: 72px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.vocab-usage-segmented button:last-child {
  border-right: 0;
}

.vocab-usage-segmented button.active {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.vocab-usage-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.vocab-usage-library,
.vocab-usage-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.vocab-usage-library {
  overflow: hidden;
}

.vocab-usage-library-head {
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-body-strong);
  font-weight: 800;
}

.vocab-usage-library-list {
  max-height: min(680px, calc(100vh - 360px));
  overflow: auto;
}

.vocab-usage-library-item {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 14px;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid rgba(38, 48, 68, 0.08);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.vocab-usage-library-item:hover,
.vocab-usage-library-item.active {
  background: var(--primary-soft);
}

.vocab-usage-library-item strong {
  display: block;
  color: #111827;
  font-size: var(--font-body-strong);
  line-height: 1.25;
}

.vocab-usage-library-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.vocab-usage-library-item i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d6dddc;
}

.vocab-usage-library-item i.done {
  background: var(--primary);
}

.vocab-usage-num {
  color: var(--primary);
  font-size: var(--font-card-title);
  font-weight: 900;
}

.vocab-usage-card {
  min-height: 620px;
  padding: 28px;
}

.vocab-usage-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.vocab-usage-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  color: var(--muted);
  font-weight: 800;
}

.vocab-usage-badge,
.vocab-usage-term-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--font-small);
  font-weight: 900;
}

.vocab-usage-review-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 900;
}

.vocab-usage-too-simple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #b8e1c9;
  border-color: #b8e1c9;
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 8px;
  background: #eef9f3;
  background: color-mix(in srgb, var(--green) 10%, #fff);
  color: var(--green);
  font-size: var(--font-small);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.vocab-usage-card h3 {
  margin: 28px 0 24px;
  color: #111827;
  font-size: 42px;
  line-height: 1.1;
}

.vocab-usage-term-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 24px;
}

.vocab-usage-section,
.vocab-usage-explanation {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.vocab-usage-section h4,
.vocab-usage-explanation h4 {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 900;
}

.vocab-usage-example {
  padding: 18px 22px;
  border-left: 5px solid;
  color: #172033;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--font-learning-text);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.vocab-usage-example.wrong {
  border-color: #b84238;
  background: #faecea;
}

.vocab-usage-example.correct {
  border-color: var(--green);
  background: #e7f4ed;
}

.vocab-usage-example.neutral {
  border-color: var(--line-strong);
  background: #f8fafc;
  font-family: inherit;
}

.vocab-usage-explanation {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.vocab-usage-explanation p {
  margin: 0;
  color: #34413c;
  line-height: 1.8;
  white-space: pre-wrap;
}

.vocab-usage-reveal {
  margin-top: 24px;
}

.vocab-usage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.vocab-usage-empty {
  padding: 42px 20px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .vocab-usage-hero,
  .vocab-usage-layout {
    grid-template-columns: 1fr;
  }

  .vocab-usage-stats {
    justify-content: flex-start;
  }

  .vocab-usage-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .vocab-usage-toolbar .field {
    grid-column: 1 / -1;
  }

  .vocab-usage-segmented {
    grid-column: 1 / -1;
    width: max-content;
    max-width: 100%;
  }

  .vocab-usage-library-list {
    max-height: 300px;
  }

  .vocab-usage-card {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .vocab-usage-hero,
  .vocab-usage-card {
    padding: 20px;
  }

  .vocab-usage-hero h2 {
    font-size: var(--font-section-title);
  }

  .vocab-usage-toolbar {
    grid-template-columns: 1fr;
  }

  .vocab-usage-segmented,
  .vocab-usage-actions .primary-button,
  .vocab-usage-actions .secondary-button,
  .vocab-usage-too-simple {
    width: 100%;
  }

  .vocab-usage-segmented button {
    flex: 1;
  }

  .vocab-usage-card-top {
    grid-template-columns: 1fr;
  }

  .vocab-usage-card h3 {
    font-size: 30px;
  }

  .vocab-usage-example {
    padding: 16px;
    font-size: 18px;
  }
}

/* 写作与听力共用的水豚工作台外壳。只承载导航，不触发模块业务加载。 */
.capybara-workspace-topbar {
  position: sticky;
  top: 12px;
  z-index: 55;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(1380px, 100%);
  min-height: 80px;
  margin: 0 auto 18px;
  padding: 9px;
  overflow: visible;
  border: 3px solid #f0dfba;
  border-radius: 24px;
  background: rgba(255, 253, 246, 0.95);
  box-shadow: 0 14px 30px rgba(96, 74, 46, 0.12);
}

.capybara-workspace-home-button {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 2px solid rgba(224, 211, 181, 0.86);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 0 rgba(219, 203, 166, 0.42);
  color: #47382e;
  font-weight: 950;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.capybara-workspace-home-button:hover {
  border-color: #75c9e9;
  background: #eefbff;
  color: #1685c1;
}

.capybara-workspace-module-menu {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.capybara-workspace-module-menu::-webkit-scrollbar {
  display: none;
}

.capybara-workspace-module-all,
.capybara-workspace-module-menu .module-menu-trigger {
  display: inline-flex;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 11px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  color: #47382e;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.capybara-workspace-module-menu .module-menu-trigger::after {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin: -3px 1px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.capybara-workspace-module-all:hover,
.capybara-workspace-module-all:focus-visible,
.capybara-workspace-module-menu .module-menu-trigger.active,
.capybara-workspace-module-menu .module-menu-group:hover .module-menu-trigger,
.capybara-workspace-module-menu .module-menu-group:focus-within .module-menu-trigger {
  border-color: #75c9e9;
  background: linear-gradient(180deg, #e6fbff, #caf0ff);
  box-shadow: 0 6px 0 rgba(118, 198, 232, 0.34);
  color: #1685c1;
}

.capybara-workspace-module-menu .module-menu-group {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}

.capybara-workspace-module-menu .module-menu-panel {
  position: fixed !important;
  top: var(--capybara-menu-panel-top, 92px) !important;
  right: auto !important;
  left: var(--capybara-menu-panel-left, 12px) !important;
  z-index: 90;
  width: min(460px, calc(100vw - 48px));
  padding: 14px;
  overflow: visible;
  border: 3px solid #f0dfba;
  border-radius: 22px;
  background:
    radial-gradient(circle, rgba(255, 213, 94, 0.13) 1px, transparent 2px) 0 0 / 18px 18px,
    #fffef9;
  box-shadow: 0 14px 30px rgba(96, 74, 46, 0.16);
}

.capybara-workspace-module-menu .module-menu-panel-head {
  border-bottom: 2px dashed #ead8a9;
  padding-bottom: 10px;
  color: #47382e;
}

.capybara-workspace-module-menu .module-menu-panel-head span {
  color: #948470;
}

.capybara-workspace-module-menu .module-menu-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  max-height: min(360px, calc(100vh - 170px));
}

.capybara-workspace-module-menu .module-menu-link {
  min-height: 72px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.capybara-workspace-module-menu .module-menu-link:hover,
.capybara-workspace-module-menu .module-menu-link:focus-visible,
.capybara-workspace-module-menu .module-menu-link.active {
  border-color: #a6daf0;
  background: #eefbff;
  box-shadow: 0 6px 0 rgba(118, 198, 232, 0.22);
}

.capybara-workspace-module-menu .module-menu-icon {
  border: 2px solid #b9e5f5;
  border-radius: 13px;
  background: #ddf6ff;
  color: #1685c1;
}

.capybara-workspace-account-zone {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.capybara-workspace-account-zone > [data-essay-review-account-mount],
.capybara-workspace-account-zone > [data-intensive-listening-account-mount],
.capybara-workspace-account-zone > [data-capybara-workspace-account-mount] {
  display: contents;
}

.capybara-workspace-account-zone .user-area,
.capybara-workspace-account-zone .desktop-user-toolbar {
  display: contents;
}

.capybara-workspace-topbar .language-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 2px solid rgba(224, 211, 181, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.capybara-workspace-topbar .locale-button {
  width: auto;
  min-width: 0;
  min-height: 29px;
  padding: 4px 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: #47382e;
  font-size: 12px;
  font-weight: 950;
}

.capybara-workspace-topbar .locale-button.active {
  background: #39ace4;
  color: #fff;
}

.capybara-workspace-topbar .desktop-notification-trigger,
.capybara-workspace-topbar .desktop-account-trigger {
  border: 2px solid rgba(224, 211, 181, 0.86);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 0 rgba(219, 203, 166, 0.42);
  color: #47382e;
}

.capybara-workspace-topbar .desktop-notification-trigger {
  width: 40px;
  min-height: 40px;
}

.capybara-workspace-topbar .desktop-account-trigger {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  min-width: 160px;
  min-height: 50px;
  max-width: 210px;
  padding: 5px 10px 5px 6px;
  border-color: #bde8b7;
  background: #f4fff1;
  text-align: left;
}

.capybara-workspace-topbar .desktop-account-avatar {
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 50%;
  background: #e8ffe8;
  object-fit: contain;
}

.capybara-workspace-topbar .desktop-account-popover,
.capybara-workspace-topbar .desktop-notification-popover {
  z-index: 80;
}

.capybara-workspace-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.capybara-workspace-mascot {
  display: grid;
  width: 72px;
  height: 72px;
  min-height: 72px;
  flex: 0 0 72px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(96, 74, 46, 0.16);
}

.capybara-workspace-mascot img {
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
  transform: translateY(3%);
}

.capybara-workspace-brand {
  color: #1685c1;
  font-family: "Comic Sans MS", "Marker Felt", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.95);
}

.capybara-workspace-side-nav {
  display: grid;
  gap: 10px;
  width: 100%;
}

.capybara-workspace-side-item {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 69px;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: 2px solid rgba(232, 219, 184, 0.88);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 7px 16px rgba(51, 137, 177, 0.11);
  color: #47382e;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.capybara-workspace-side-item:hover {
  border-color: #a6daf0;
  background: #f7fcff;
  transform: translateY(-1px);
}

.capybara-workspace-side-item.active {
  border-color: #58cf67;
  background: linear-gradient(180deg, #f7fff5, #eaffea);
  box-shadow: inset 0 0 0 2px rgba(88, 207, 103, 0.28), 0 9px 16px rgba(54, 174, 73, 0.15);
}

.capybara-workspace-side-icon,
.capybara-workspace-side-icon svg {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #1685c1;
}

.capybara-workspace-side-item strong {
  font-size: 14px;
}

.capybara-workspace-side-item[data-count]::after {
  position: absolute;
  top: -7px;
  right: -6px;
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ff8ea1;
  color: #fff;
  content: attr(data-count);
  font-size: 10px;
  font-weight: 950;
}

.capybara-workspace-side-extra {
  width: 100%;
  margin-top: auto;
}

.capybara-workspace-side-footer {
  display: grid;
  width: 100%;
  min-height: 40px;
  margin-top: auto;
  place-items: center;
  border: 2px solid #bfd7e4;
  border-radius: 14px;
  background: #fff;
  color: #66738a;
  font-weight: 850;
  text-decoration: none;
}

.capybara-workspace-mobile-bar {
  display: none;
}

@media (min-width: 1081px) and (max-width: 1500px) {
  .capybara-workspace-home-button {
    padding-inline: 10px;
  }

  .capybara-workspace-topbar .desktop-account-trigger {
    min-width: 145px;
    max-width: 185px;
  }
}

@media (max-width: 1080px) {
  .capybara-workspace-topbar {
    display: none !important;
  }

  .capybara-workspace-sidebar {
    gap: 8px;
  }

  .capybara-workspace-mascot {
    width: 48px;
    height: 48px;
    min-height: 48px;
    flex-basis: 48px;
  }

  .capybara-workspace-brand {
    font-size: 13px;
  }

  .capybara-workspace-side-nav {
    gap: 8px;
  }

  .capybara-workspace-side-item {
    min-height: 59px;
    padding: 5px 3px;
    border-radius: 16px;
  }

  .capybara-workspace-side-icon,
  .capybara-workspace-side-icon svg {
    width: 20px;
    height: 20px;
  }

  .capybara-workspace-side-item strong {
    font-size: 11px;
  }

  .capybara-workspace-side-item[data-count]::after {
    top: -5px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    font-size: 9px;
  }

  .capybara-workspace-side-footer {
    min-height: 34px;
    padding: 4px 2px;
    font-size: 9px;
    text-align: center;
  }

  .capybara-workspace-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 75;
    display: grid;
    grid-template-columns: 38px 38px minmax(0, 1fr) 58px 58px;
    gap: 6px;
    align-items: center;
    margin: -8px -8px 10px;
    padding: 7px;
    border-bottom: 3px dashed #a6daf0;
    background: rgba(223, 246, 255, 0.96);
  }

  .capybara-workspace-mobile-icon,
  .capybara-workspace-mobile-action {
    display: inline-grid;
    width: auto;
    min-width: 0;
    min-height: 38px;
    place-items: center;
    padding: 5px 7px;
    border: 2px solid #d9c599;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 0 rgba(219, 203, 166, 0.35);
    color: #47382e;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
  }

  .capybara-workspace-mobile-icon {
    width: 38px;
    padding: 0;
  }

  .capybara-workspace-mobile-title {
    overflow: hidden;
    color: #1685c1;
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .capybara-workspace-mobile-bar {
    grid-template-columns: 34px 34px minmax(0, 1fr) 50px 50px;
    gap: 5px;
  }

  .capybara-workspace-mobile-icon {
    width: 34px;
    min-height: 34px;
    border-radius: 12px;
  }

  .capybara-workspace-mobile-action {
    min-height: 34px;
    padding: 5px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--font-body);
  line-height: var(--line-body);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

body.module-sidebar-route .app-shell {
  grid-template-columns: 228px minmax(0, 1fr);
}

body.module-sidebar-route.sidebar-collapsed .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  isolation: isolate;
  display: none;
  flex-direction: column;
  gap: 12px;
  height: 100vh;
  padding: 14px;
  overflow: auto;
  color: var(--text);
  background: #ffffff;
  border-right: 1px solid var(--line);
  box-shadow: 12px 0 28px rgba(16, 24, 40, 0.06);
  backdrop-filter: blur(18px);
}

body.module-sidebar-route .sidebar {
  display: flex;
}

.sidebar::before {
  display: none;
  content: none;
}

body.module-sidebar-route.sidebar-collapsed .sidebar {
  display: none;
}

body.module-sidebar-route.sidebar-open .sidebar {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  width: min(320px, 86vw);
  overflow: auto;
  box-shadow: 24px 0 50px rgb(85 96 124 / 22%);
}

.sidebar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
}

.brand {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  margin: 6px 0 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
}

.brand > div {
  min-width: 0;
}

.brand-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(var(--primary-soft), var(--primary-soft)) padding-box,
    var(--primary-border) border-box;
  border: 5px solid transparent;
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 840;
  box-shadow: 0 8px 18px var(--primary-shadow);
  background-size: cover;
  background-position: center;
  line-height: 0;
}

.brand-mark .svg-icon,
.nav-link-icon .svg-icon,
.module-side-icon .svg-icon,
.module-menu-icon .svg-icon {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  width: 18px;
  height: 18px;
  overflow: visible;
}

.brand-mark.has-logo {
  border-width: 1px;
  background-color: #ffffff;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.brand span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

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

.nav-link {
  position: relative;
  min-height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  color: #344054;
  text-decoration: none;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.18;
  overflow-wrap: break-word;
  word-break: normal;
  background: #ffffff;
  border: 1px solid rgba(38, 48, 68, 0);
}

.nav-link-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 6px 14px rgba(16, 24, 40, 0.05);
  line-height: 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  box-shadow: 0 6px 14px var(--primary-shadow);
}

.nav-link.active,
.nav-link:hover {
  color: var(--primary-text);
  background: var(--primary-soft);
  border-color: var(--primary-border);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

.nav-link.active .nav-link-icon,
.nav-link:hover .nav-link-icon {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.nav-link.active::after,
.nav-link:hover::after {
  opacity: 1;
}

body.schedule-route .brand span,
body.module-sidebar-route .brand span {
  color: #667085;
  font-size: 12px;
  font-weight: 720;
}

body.schedule-route .nav-list,
body.module-sidebar-route .nav-list {
  gap: 6px;
}

body.schedule-route .nav-link,
body.module-sidebar-route .nav-link {
  min-height: 42px;
  padding: 4px 8px 4px 6px;
  font-size: 13px;
  font-weight: 760;
}

body.schedule-route .nav-link.active,
body.schedule-route .nav-link:hover,
body.module-sidebar-route .nav-link.active,
body.module-sidebar-route .nav-link:hover {
  color: var(--primary-text);
  background: var(--primary-soft);
}

.module-side-section {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.module-side-section strong {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.module-side-section a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  color: #344054;
  text-decoration: none;
  font-size: 13px;
  font-weight: 760;
  background: #ffffff;
}

.module-side-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 6px 14px rgba(16, 24, 40, 0.05);
}

.module-side-section a:hover {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.module-side-section a:hover .module-side-icon {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.sidebar-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: min(320px, 86vw);
  z-index: 70;
  padding: 0;
  border: 0;
  background: rgb(15 23 42 / 42%);
}

.main {
  min-width: 0;
  background: var(--bg);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(180px, max-content) minmax(480px, 1fr) minmax(230px, max-content);
  grid-template-areas: "brand menu user";
  gap: 16px;
  align-items: center;
  min-height: 104px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar-brandline {
  display: flex;
  grid-area: brand;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.topbar-brandline > div {
  min-width: 0;
  max-width: 100%;
}

body.module-sidebar-route .topbar-title-block {
  display: none;
}

.sidebar-toggle,
.home-return {
  flex: 0 0 auto;
}

button.sidebar-toggle {
  display: none;
}

body.module-sidebar-route button.sidebar-toggle {
  display: grid;
}

.sidebar-toggle-lines {
  display: grid;
  gap: 5px;
  width: 20px;
}

.sidebar-toggle-lines span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.home-return {
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  gap: 1px;
  width: 62px;
  height: 56px;
  min-height: 56px;
  padding: 5px 4px 4px;
  border-radius: 8px;
  border-color: var(--line);
  background: #ffffff;
  color: #1f2933;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(85, 96, 124, 0.08);
}

.home-return:hover {
  color: var(--primary-text);
  background: var(--primary-soft);
  border-color: var(--primary-border);
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.08);
}

.home-return-icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-return-label {
  display: block;
  color: inherit;
  font-size: var(--font-caption);
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.sidebar-close {
  position: relative;
  width: 32px;
  height: 32px;
  min-height: 32px;
  margin-top: 10px;
  color: transparent;
  background: #ffffff;
  border-color: var(--line);
}

.sidebar-close span {
  position: relative;
  color: transparent;
}

.sidebar-close::before,
.sidebar-close::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 2px;
  border-radius: 999px;
  background: #1f2933;
}

.sidebar-close::before {
  transform: rotate(45deg);
}

.sidebar-close::after {
  transform: rotate(-45deg);
}

.topbar-mark {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 900;
  background-size: cover;
  background-position: center;
}

.topbar-mark.has-logo {
  background-color: #ffffff;
}

.module-top-menu {
  grid-area: menu;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.module-top-menu[hidden] {
  display: none;
}

.module-top-menu-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: start;
  align-items: stretch;
  gap: 10px 8px;
  min-height: 62px;
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
}

.module-menu-group {
  position: relative;
  flex: 1 1 74px;
  min-width: 0;
}

.module-menu-group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 49;
  width: min(520px, calc(100vw - 48px));
  height: 14px;
  display: none;
  pointer-events: none;
}

.module-menu-group:nth-last-child(-n + 3)::after {
  right: 0;
  left: auto;
}

.module-menu-group:hover::after,
.module-menu-group:focus-within::after {
  display: block;
  pointer-events: auto;
}

.module-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 170px;
  min-height: 42px;
  margin: 0 auto;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #344054;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.14;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.module-menu-trigger.active,
.module-menu-group:hover .module-menu-trigger,
.module-menu-group:focus-within .module-menu-trigger {
  color: var(--primary-text);
  background: var(--primary-soft);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.module-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  width: min(520px, calc(100vw - 48px));
  display: none;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.module-menu-group:nth-last-child(-n + 3) .module-menu-panel {
  right: 0;
  left: auto;
}

.module-menu-group:hover .module-menu-panel,
.module-menu-group:focus-within .module-menu-panel {
  display: block;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.module-menu-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.module-menu-panel-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.module-menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-top: 10px;
}

.module-menu-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 74px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.module-menu-link:hover,
.module-menu-link.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

.module-menu-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
}

.module-menu-link span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.module-menu-link strong,
.module-menu-link small {
  overflow-wrap: break-word;
  word-break: normal;
}

.module-menu-link small {
  color: var(--muted);
  line-height: 1.35;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

h1 {
  margin: 0;
  font-size: var(--font-page-title);
  line-height: 1.2;
}

#page-title {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

h2 {
  margin: 0;
  font-size: 22px;
}

h3 {
  margin: 0;
  font-size: 16px;
}

.user-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  grid-area: user;
  justify-self: end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 8px;
}

.account-row,
.tenant-row,
.language-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
  min-width: 0;
  max-width: 100%;
}

.account-row,
.tenant-row {
  width: fit-content;
  margin-left: auto;
}

.account-row {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  justify-items: end;
}

.tenant-row {
  justify-content: flex-end;
}

.desktop-user-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.desktop-notification-menu {
  position: relative;
  flex: 0 0 auto;
}

.desktop-notification-trigger {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}

.desktop-notification-trigger:hover,
.desktop-notification-menu:focus-within .desktop-notification-trigger {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #e5484d;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.desktop-notification-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 32;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.desktop-notification-menu:hover .desktop-notification-popover,
.desktop-notification-menu:focus-within .desktop-notification-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.desktop-notification-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.desktop-notification-popover-head span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.desktop-notification-popover-head strong {
  color: var(--ink);
  font-size: var(--font-small);
}

.desktop-notification-popover-head small {
  color: var(--muted);
  font-size: var(--font-caption);
}

.notification-preview-list {
  display: grid;
  gap: 6px;
}

.notification-preview-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.notification-preview-item:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.notification-preview-item span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.notification-preview-item strong,
.notification-preview-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-preview-item strong {
  color: var(--ink);
  font-size: var(--font-small);
}

.notification-preview-item small,
.notification-preview-empty {
  color: var(--muted);
  font-size: var(--font-caption);
}

.notification-preview-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: #cbd5e1;
}

.notification-preview-item.unread .notification-preview-dot {
  background: var(--primary);
}

.desktop-notification-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  color: var(--primary-text);
  font-size: var(--font-small);
  font-weight: 850;
  text-decoration: none;
}

.desktop-notification-all-link:hover {
  background: var(--primary-soft);
}

.mobile-notification-center-link {
  position: relative;
  gap: 7px;
}

.desktop-account-menu {
  position: relative;
  min-width: 0;
}

.desktop-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: min(230px, 100%);
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}

.desktop-account-trigger:hover,
.desktop-account-menu:focus-within .desktop-account-trigger {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.desktop-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.account-avatar-image {
  overflow: hidden;
  padding: 0;
  background: #ffffff;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.account-avatar-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.desktop-account-brief {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.desktop-account-brief strong,
.desktop-account-brief span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-account-brief strong {
  color: var(--ink);
  font-size: var(--font-small);
  font-weight: 900;
  line-height: 1.15;
}

.desktop-account-brief span {
  color: #62708a;
  font-size: var(--font-caption);
  font-weight: 760;
  line-height: 1.15;
}

.desktop-account-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #667085;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.16s ease;
}

.desktop-account-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 12px;
  width: min(390px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.desktop-account-menu:hover .desktop-account-popover,
.desktop-account-menu:focus-within .desktop-account-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.desktop-account-menu:hover .desktop-account-chevron,
.desktop-account-menu:focus-within .desktop-account-chevron {
  transform: rotate(180deg);
}

.desktop-account-profile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.desktop-account-profile .desktop-account-avatar {
  width: 38px;
  height: 38px;
}

.desktop-account-profile .user-chip {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

.student-membership-entry {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin-inline: -14px;
  padding: 11px 14px;
  border-block: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
}

.student-membership-entry:hover,
.student-membership-entry:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: none;
}

.student-membership-entry:focus-visible {
  box-shadow: inset 0 0 0 2px var(--primary-border);
}

.student-membership-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary);
}

.student-membership-entry.is-active .student-membership-icon {
  background: var(--primary);
  color: #ffffff;
}

.student-membership-entry.is-institutional {
  cursor: default;
}

.student-membership-entry.is-institutional:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.student-membership-copy,
.student-membership-heading {
  min-width: 0;
}

.student-membership-copy {
  display: grid;
  gap: 3px;
}

.student-membership-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
}

.student-membership-heading strong {
  color: var(--ink);
  font-size: var(--font-small);
  line-height: 1.2;
}

.student-membership-heading small {
  padding: 2px 6px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.student-membership-copy > span:last-child {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.35;
}

.student-membership-link-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-weight: 800;
  white-space: nowrap;
}

.student-membership-link-text .svg-icon {
  flex: 0 0 auto;
}

.student-membership-redeem-shortcut {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  margin: -1px -14px 0;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  text-decoration: none;
}

.student-membership-redeem-shortcut:hover,
.student-membership-redeem-shortcut:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: none;
}

.student-membership-redeem-shortcut-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
}

.student-membership-redeem-shortcut > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.student-membership-redeem-shortcut strong {
  color: var(--ink);
  font-size: var(--font-caption);
}

.student-membership-redeem-shortcut small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.desktop-account-section {
  display: grid;
  gap: 8px;
}

.desktop-account-section-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.desktop-account-popover .identity-switcher {
  flex: 0 1 auto;
  justify-content: flex-start;
  max-width: none;
}

.desktop-account-control-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.desktop-account-control-grid .tenant-switcher,
.desktop-account-control-grid .tenant-chip {
  flex: 1 1 190px;
  justify-content: space-between;
}

.desktop-account-control-grid .tenant-switcher select {
  flex: 1 1 auto;
  max-width: none;
}

.desktop-account-control-grid .platform-link {
  flex: 0 0 auto;
}

.desktop-account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.desktop-account-actions .secondary-button {
  justify-content: center;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.locale-button {
  min-height: 34px;
  min-width: 54px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.locale-button.active,
.locale-button:disabled {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
  cursor: default;
  box-shadow: 0 8px 16px var(--primary-shadow);
}

.user-chip {
  flex: 0 1 auto;
  display: grid;
  gap: 2px;
  min-width: 0;
  width: fit-content;
  max-width: min(360px, 100%);
  margin-right: 2px;
  text-align: right;
}

.user-chip strong {
  min-width: 0;
  font-size: var(--font-body);
  line-height: 1.12;
  overflow-wrap: break-word;
  word-break: normal;
}

.user-chip span {
  min-width: 0;
  color: #62708a;
  font-size: var(--font-caption);
  line-height: 1.22;
  overflow-wrap: anywhere;
  word-break: normal;
}

.user-chip .user-referral-summary {
  color: #7a8498;
  font-size: var(--font-caption);
  line-height: 1.2;
  white-space: normal;
}

.user-referral-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.user-referral-block > small {
  grid-column: 1;
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.35;
  overflow-wrap: break-word;
}

.user-referral-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 4px;
  align-items: center;
}

.user-referral-actions .icon-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  color: var(--primary-text);
}

.user-referral-invite-button {
  min-height: 32px;
  padding: 5px 9px;
  gap: 6px;
  white-space: nowrap;
  color: var(--primary-text);
}

.user-referral-invite-button svg,
.referral-policy-copy-button svg {
  flex: 0 0 auto;
}

.action-dialog.referral-policy-dialog {
  width: min(540px, calc(100vw - 28px));
  max-height: min(88vh, 760px);
}

.referral-policy-dialog .referral-policy-dialog-panel {
  width: 100%;
  max-height: min(88vh, 760px);
}

.referral-policy-dialog-body {
  display: grid;
  gap: 15px;
}

.referral-policy-lead,
.referral-policy-terms,
.referral-policy-copy-note,
.referral-policy-copy-status,
.referral-policy-rewards p {
  margin: 0;
}

.referral-policy-lead {
  color: var(--text);
  line-height: 1.65;
}

.referral-policy-rewards {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.referral-policy-rewards article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  padding: 14px 0;
}

.referral-policy-rewards article + article {
  border-top: 1px solid var(--line);
}

.referral-policy-rewards article > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.referral-policy-rewards p {
  color: var(--muted);
  font-size: var(--font-small);
  line-height: 1.65;
}

.referral-policy-rewards b {
  color: var(--primary-text);
}

.referral-policy-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.referral-policy-code {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.referral-policy-code span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.referral-policy-code small,
.referral-policy-copy-note {
  color: var(--muted);
  font-size: var(--font-caption);
}

.referral-policy-code strong {
  color: var(--primary-text);
  overflow-wrap: anywhere;
}

.referral-policy-terms {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.6;
}

.referral-policy-copy-button {
  width: 100%;
}

.referral-policy-copy-note {
  text-align: center;
}

.referral-policy-copy-status {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: var(--font-caption);
  text-align: center;
}

.referral-policy-copy-status.is-success {
  background: #ecfdf5;
  color: var(--green);
}

.referral-policy-copy-status.is-error {
  background: #fff1f2;
  color: var(--rose);
}

@media (max-width: 560px) {
  .user-referral-block {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .user-referral-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .user-referral-invite-button {
    width: 100%;
  }

  .referral-policy-code {
    grid-template-columns: 1fr;
  }
}

.role-switcher {
  min-height: 38px;
  max-width: 150px;
}

.identity-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
  max-width: 360px;
}

.role-switch-button {
  flex: 0 1 auto;
  min-height: 30px;
  max-width: 132px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  font: inherit;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.14;
  text-align: center;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.role-switch-button:hover {
  border-color: var(--primary);
  color: var(--primary-text);
}

.role-switch-button.active,
.role-switch-button:disabled {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
  cursor: default;
  box-shadow: 0 8px 16px var(--primary-shadow);
}

.identity-switch-message {
  max-width: 260px;
  color: #b45309;
  font-size: 12px;
  font-weight: 900;
}

.role-pill {
  min-height: 30px;
  max-width: 160px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: #344054;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.14;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.tenant-switcher,
.tenant-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
  line-height: 1.18;
  text-decoration: none;
}

.tenant-switcher span,
.tenant-chip span {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 800;
}

.tenant-switcher strong,
.tenant-chip strong {
  min-width: 0;
  max-width: 190px;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tenant-switcher select {
  min-width: 0;
  max-width: 150px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 840;
  outline: none;
}

.platform-link {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.view {
  padding: 28px 32px 48px;
  background: var(--bg);
}

.parent-learning-context {
  width: min(1580px, 100%);
  min-width: 0;
  margin: 0 auto 24px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.06);
}

.parent-learning-context-main,
.parent-learning-context-actions,
.parent-learning-context-actions > label,
.parent-learning-context-actions > a {
  display: flex;
  align-items: center;
}

.parent-learning-context-main {
  min-width: 0;
  gap: 12px;
}

.parent-learning-context-main > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 8px;
}

.parent-learning-context-main span,
.parent-learning-context-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.parent-learning-context-main strong {
  min-width: 0;
  color: var(--text);
  font-size: 16px;
}

.parent-learning-context-main small {
  grid-column: 1 / -1;
}

.parent-learning-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text) !important;
  font-size: 15px !important;
  font-weight: 880 !important;
}

.parent-learning-context-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.parent-learning-context-actions select {
  width: min(240px, 100%);
  min-height: 40px;
  padding: 7px 34px 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-weight: 760;
}

.parent-learning-context-actions > a {
  gap: 7px;
  text-decoration: none;
}

.grammar-parent-progress-panel,
.grammar-parent-progress-list {
  display: grid;
  gap: 16px;
}

.grammar-parent-progress-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.grammar-parent-progress-summary > span {
  min-width: 0;
  padding: 16px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.grammar-parent-progress-summary strong {
  color: var(--text);
  font-size: 24px;
}

.grammar-parent-progress-list .grammar-progress-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

@media (max-width: 900px) {
  .parent-learning-context {
    align-items: stretch;
    flex-direction: column;
  }

  .parent-learning-context-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .parent-learning-context {
    margin-bottom: 16px;
    padding: 13px;
  }

  .parent-learning-context-actions,
  .parent-learning-context-actions > label,
  .parent-learning-context-actions select,
  .parent-learning-context-actions > a {
    width: 100%;
  }

  .parent-learning-context-actions > a {
    justify-content: center;
  }

  .grammar-parent-progress-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.home-route .app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

body.home-route .sidebar {
  display: none;
}

body.home-route.sidebar-collapsed .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.home-route.sidebar-collapsed .sidebar {
  display: none;
}

body.home-route.sidebar-open .sidebar {
  display: none;
}

body.home-route .topbar {
  position: sticky;
  display: grid;
  grid-template-columns: minmax(230px, max-content) minmax(0, 1fr);
  grid-template-areas: none;
  gap: 18px;
  align-items: center;
  min-height: 104px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
  backdrop-filter: blur(18px);
}

body.home-route .topbar-brandline {
  grid-area: auto;
  grid-column: 1;
  gap: 0;
}

body.home-route .topbar-mark {
  display: none;
}

body.home-route .home-return {
  display: none;
}

body.home-route .topbar .eyebrow {
  display: block;
  margin: 0 0 5px;
  color: #566581;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

body.home-route h1 {
  color: #1f2a3e;
  font-size: var(--font-page-title);
  line-height: 1.02;
  font-weight: 880;
  white-space: nowrap;
}

body.home-route .user-area {
  grid-area: auto;
  grid-column: 2;
  gap: 8px;
  justify-self: end;
}

body.home-route .view {
  width: 100%;
  margin: 0;
  padding: 30px 34px 56px;
  background: var(--bg);
}

.home-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 12px 24px var(--primary-shadow);
  font-size: 14px;
  font-weight: 820;
  white-space: nowrap;
}

.home-login-button:hover {
  background: var(--primary-dark);
  box-shadow: 0 14px 28px var(--primary-shadow);
}

.home-login-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.88fr) minmax(360px, 1.12fr);
  gap: 34px;
  align-items: center;
  min-height: 330px;
  max-width: none;
  margin: 0 0 20px;
  padding: 34px 26px 34px 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.home-hero::before {
  content: none;
}

.home-hero h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 650px;
  color: #1a2435;
  font-size: var(--font-display);
  line-height: 1.14;
  font-weight: 900;
}

.home-hero-visual {
  position: relative;
  aspect-ratio: 16 / 5;
  min-height: 272px;
  max-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 36px rgba(15, 23, 42, 0.06);
}

.home-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.home-hero-visual::before {
  content: none;
}

.home-catalog {
  position: relative;
  margin: 0 0 56px;
  padding: 0;
}

.home-catalog-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.home-catalog-shell::before {
  content: none;
}

.home-catalog-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 42px 44px 24px;
}

.home-catalog-head h2 {
  margin: 0;
  color: #1a2435;
  font-size: var(--font-page-title);
  line-height: 1.12;
  font-weight: 900;
}

.home-tabs {
  width: min(100%, 900px);
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: start;
  gap: 10px 8px;
  min-height: 62px;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.home-tab {
  width: auto;
  min-width: 72px;
  max-width: 170px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  color: #1f2a3e;
  background: transparent;
  font-size: 15px;
  font-weight: 820;
  line-height: 1.14;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.home-tab.active {
  color: var(--primary-text);
  background: var(--primary-soft);
  border-color: var(--primary-border);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.home-feature-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 44px 44px;
}

.home-feature-card {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  padding: 18px 18px 54px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  color: #263044;
  text-align: left;
}

.home-feature-card::before {
  content: none;
}

.home-feature-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.home-feature-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.home-feature-top > span:last-child {
  display: grid;
  gap: 0;
  min-width: 0;
}

.home-feature-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px rgba(15, 23, 42, 0.04);
}

.home-feature-icon .svg-icon {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.home-feature-card strong {
  margin: 0 0 7px;
  color: #1c273a;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 870;
}

.home-feature-card small {
  margin: 0;
  color: #62708a;
  font-size: 14px;
  line-height: 1.58;
  font-weight: 560;
}

.home-feature-tag {
  position: absolute;
  left: 74px;
  right: 18px;
  bottom: 16px;
  width: fit-content;
  max-width: calc(100% - 92px);
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary-soft);
  border: 1px solid var(--primary-border);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.home-feature-card[data-kind="teach"] { --accent: var(--rainbow-cyan); }
.home-feature-card[data-kind="service"] { --accent: var(--primary); }
.home-feature-card[data-kind="mock"] { --accent: var(--rainbow-blue); }
.home-feature-card[data-kind="write"] { --accent: var(--rainbow-pink); }
.home-feature-card[data-kind="speak"] { --accent: var(--rainbow-peach); }
.home-feature-card[data-kind="read"] { --accent: var(--rainbow-mint); }
.home-feature-card[data-kind="listen"] { --accent: var(--rainbow-cyan); }
.home-feature-card[data-kind="vocab"] { --accent: var(--rainbow-yellow); }
.home-feature-card[data-kind="grammar"] { --accent: var(--rainbow-mint); }
.home-feature-card[data-kind="grow"] { --accent: var(--rainbow-lavender); }
.home-feature-card[data-kind="custom"] { --accent: var(--rainbow-lavender); }

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-header p {
  max-width: 740px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 7px 11px;
  background: transparent;
  color: var(--muted);
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.segment.active {
  background: var(--primary);
  color: #ffffff;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.module-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 18px rgb(15 23 42 / 4%);
  text-align: left;
}

.module-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow);
}

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

.module-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
}

.badge {
  align-self: start;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
  word-break: normal;
}

.module-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.module-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.primary-button,
.secondary-button,
.danger-button,
.text-button,
.icon-button {
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.primary-button,
.secondary-button,
.danger-button,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  gap: 6px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.primary-button {
  padding: 9px 14px;
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  font-weight: 700;
}

.primary-button:hover {
  background: var(--primary-dark);
}

.secondary-button {
  padding: 9px 14px;
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

.danger-light {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #b91c1c;
}

.danger-button {
  padding: 9px 14px;
  background: #fff1f2;
  border-color: #fecdd3;
  color: #b91c1c;
  font-weight: 700;
}

.danger-button:disabled,
.secondary-button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.primary-button.is-busy,
.secondary-button.is-busy,
.danger-button.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-spinner,
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

.button-spinner {
  flex: 0 0 auto;
  opacity: 0.9;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.text-button {
  padding: 9px 10px;
  background: transparent;
  color: var(--primary);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  padding: 0;
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

.sidebar-toggle,
.home-return {
  border-radius: 8px;
  border-color: var(--line);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.06);
}

.sidebar-toggle {
  width: 42px;
  height: 42px;
  min-height: 42px;
}

.home-return {
  width: 62px;
  height: 56px;
  min-height: 56px;
}

.home-return {
  background: #ffffff;
  color: #1f2933;
  text-decoration: none;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 18px;
  align-items: start;
}

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

.module-hero {
  display: grid;
  gap: 18px;
}

.module-title-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.large-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.action-card {
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.action-card:hover {
  border-color: var(--primary-border);
}

.action-card.is-selected {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 1px var(--primary-border);
}

.ability-preserve-lines {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.ability-question-title,
.ability-question-prompt,
.ability-question-stem,
.ability-question-preview {
  display: block;
  max-width: 100%;
  line-height: 1.5;
}

.ability-question-title {
  font-size: 18px;
  font-weight: 900;
}

.ability-question-prompt,
.ability-question-stem,
.ability-question-preview {
  font-size: 17px;
}

.ability-template-item-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.ability-template-item-toolbar .secondary-button {
  min-height: 34px;
  padding: 7px 12px;
}

.ability-invite-panel .invitation-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.ability-invite-dialog-panel {
  width: min(860px, calc(100vw - 32px));
}

.ability-invite-dialog-panel .action-dialog-body {
  display: grid;
  gap: 14px;
}

.ability-template-sync-dialog-panel {
  width: min(720px, calc(100vw - 32px));
}

.ability-template-sync-dialog-panel .action-dialog-body {
  display: grid;
  gap: 14px;
}

.ability-invite-result {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.ability-invite-record-section {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.ability-invite-record-card {
  gap: 10px;
}

.ability-invite-display-panel {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.ability-invite-claim-panel {
  padding-top: 10px;
}

.ability-invite-claims-grid span {
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.ability-invite-claims-grid small,
.ability-invite-record-card p {
  overflow-wrap: break-word;
}

.ability-invite-result input[readonly] {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ability-invite-local-warning {
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.88);
  color: #92400e;
  padding: 10px 12px;
}

.ability-attempt-item-list {
  display: grid;
  gap: 28px;
}

.ability-attempt-item-card {
  display: grid;
  gap: 16px;
  min-height: auto;
  padding: 0 16px 18px;
  border-color: var(--primary-border);
  border-left: 4px solid var(--brand-primary, #267a8d);
  box-shadow: 0 12px 28px rgba(38, 122, 141, 0.08);
  overflow: hidden;
}

.ability-attempt-item-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 -16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f6fbfc;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.ability-attempt-item-header span {
  min-width: 0;
}

.learning-scope-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f4fbfc 100%);
  box-shadow: 0 12px 28px rgba(38, 122, 141, 0.08);
}

.learning-scope-toolbar > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learning-scope-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.learning-scope-toolbar strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.learning-scope-toolbar small {
  color: var(--muted);
  line-height: 1.5;
}

.learning-scope-toolbar label {
  display: grid;
  gap: 6px;
  min-width: min(260px, 100%);
}

.learning-scope-toolbar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.module-record-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.module-record-panel .list-stack {
  display: grid;
  gap: 10px;
}

.module-record-panel .action-card {
  display: grid;
  gap: 6px;
  min-height: auto;
}

.info-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.info-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.info-list span {
  color: var(--muted);
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

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

.metric-card strong {
  display: block;
  margin-top: 14px;
  font-size: var(--font-metric);
}

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

.admin-form {
  display: grid;
  gap: 12px;
  max-width: 680px;
}

.compact-form {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

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

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.form-actions.compact {
  gap: 8px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.ability-question-config,
.ability-question-materials,
.ability-table-editor,
.ability-table-row-editor,
.ability-audio-answer,
.ability-report-items,
.ability-review-form {
  display: grid;
  gap: 10px;
}

.ability-template-builder {
  margin-top: 18px;
}

.ability-builder-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ability-table-column-editor,
.ability-table-cell-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.ability-table-row-entry {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ability-table-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ability-question-audio {
  display: grid;
  gap: 6px;
  max-width: 520px;
}

.ability-question-audio audio {
  width: min(100%, 520px);
}

.ability-material-summary {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
}

.ability-material-summary-row {
  display: grid;
  grid-template-columns: minmax(160px, max-content) minmax(180px, 360px);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ability-material-summary-row span {
  min-width: 0;
  overflow-wrap: break-word;
}

.ability-material-summary-row audio {
  width: 100%;
  max-width: 360px;
}

.ability-material-summary.compact .ability-material-summary-row {
  grid-template-columns: minmax(0, 1fr);
}

.ability-material-summary.compact .ability-material-summary-row audio {
  max-width: 320px;
}

@media (max-width: 640px) {
  .ability-material-summary-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ability-material-summary-row audio {
    max-width: 100%;
  }
}

.ability-report-item,
.ability-answer-summary,
.ability-audio-playback {
  display: grid;
  gap: 8px;
}

.ability-report-item {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.ability-telemetry-summary {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.ability-audio-playback audio,
.ability-audio-answer audio {
  width: min(100%, 420px);
}

.ability-audio-answer .form-actions {
  order: 1;
}

.ability-audio-answer [data-ability-audio-status] {
  order: 2;
}

.ability-audio-answer [data-ability-audio-preview] {
  order: 3;
}

.ability-audio-note {
  order: 4;
  width: min(100%, 720px);
  min-height: 76px;
  font-size: 15px;
  color: var(--muted);
  background: #fbfdfe;
}

.ability-audio-playback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ability-audio-playback span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ability-audio-playback .secondary-button {
  min-height: 34px;
  padding: 7px 12px;
}

.audio-transcription-control {
  display: grid;
  width: 100%;
  gap: 8px;
}

.audio-transcription-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.audio-transcription-button {
  width: fit-content;
  min-height: 34px;
  padding: 7px 12px;
}

.audio-transcription-status {
  min-width: 0;
  line-height: 1.45;
}

.audio-transcription-status.is-error {
  color: #b91c1c;
}

.audio-transcription-result {
  display: grid;
  gap: 6px;
  width: min(100%, 840px);
  padding: 10px 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: #f8fbfc;
}

.audio-transcription-result[hidden] {
  display: none;
}

.audio-transcription-result strong {
  color: var(--text);
  font-size: 13px;
}

.audio-transcription-result pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--text);
  font: inherit;
  line-height: 1.65;
}

.ability-inline-blank-prompt {
  font-size: 17px;
  line-height: 1.9;
  overflow-wrap: normal;
  word-break: normal;
}

.ability-inline-blank-prompt p {
  margin: 0 0 8px;
}

.inline-blank-input {
  display: inline-block;
  width: min(160px, 45vw);
  min-width: 96px;
  height: 34px;
  margin: 0 4px;
  padding: 4px 8px;
  vertical-align: baseline;
}

.inline-blank-answer {
  display: inline-block;
  min-width: 72px;
  padding: 2px 8px;
  margin: 0 4px;
  border-bottom: 2px solid var(--brand-primary, #267a8d);
  color: var(--ink);
  font-weight: 700;
}

.ability-table-prompt {
  display: grid;
  gap: 10px;
  font-size: 17px;
  overflow-wrap: normal;
  word-break: normal;
}

.ability-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.ability-prompt-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: #fff;
}

.ability-prompt-table th,
.ability-prompt-table td {
  padding: 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 17px;
  line-height: 1.6;
}

.ability-prompt-table th {
  background: var(--panel-soft);
  font-weight: 800;
  font-size: 16px;
}

.ability-prompt-table p {
  margin: 0 0 8px;
  line-height: 1.7;
  font-size: 17px;
}

.ability-prompt-table p:last-child {
  margin-bottom: 0;
}

.file-like-button {
  cursor: pointer;
}

@media (max-width: 640px) {
  .ability-table-scroll {
    overflow: visible;
  }

  .ability-prompt-table,
  .ability-prompt-table thead,
  .ability-prompt-table tbody,
  .ability-prompt-table tr,
  .ability-prompt-table th,
  .ability-prompt-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ability-prompt-table {
    border: 0;
    background: transparent;
  }

  .ability-prompt-table thead {
    display: none;
  }

  .ability-prompt-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .ability-prompt-table td {
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .ability-prompt-table td:last-child {
    border-bottom: 0;
  }

  .ability-prompt-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-weight: 800;
  }

  .inline-blank-input {
    width: min(100%, 180px);
  }
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inline-check input[type="checkbox"],
.inline-check input[type="radio"],
.inline-toggle input[type="checkbox"],
.inline-toggle input[type="radio"] {
  align-self: center;
}

label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

input,
select,
textarea {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #ffffff;
  color: var(--text);
}

input[type="checkbox"],
input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--primary);
}

input[type="radio"] {
  border-radius: 999px;
}

textarea {
  resize: vertical;
  line-height: 1.5;
}

.login-dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.login-dialog::backdrop {
  background: rgb(15 23 42 / 45%);
}

.login-panel {
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  width: fit-content;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.role-checks {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.role-checks legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.role-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.register-referral-row > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.register-referral-row > span small {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 500;
}

.register-referral-status {
  margin: -4px 0 0;
  padding: 9px 11px;
  font-size: var(--font-caption);
  line-height: 1.45;
}

.register-referral-status.notice-info {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.register-referral-status.notice-success {
  border-color: #99d8cf;
  background: #ecfdf8;
  color: var(--green);
}

.register-referral-status.notice-error {
  border-color: #fecdd3;
  background: #fff1f2;
  color: var(--rose);
}

.register-trial-note {
  margin: -4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: var(--font-caption);
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .login-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .login-panel {
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 20px;
  }

  .auth-tabs {
    max-width: calc(100% - 40px);
    flex-wrap: wrap;
  }

  .dialog-close {
    top: 12px;
    right: 12px;
  }
}

.learning-onboarding-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.learning-onboarding-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.learning-onboarding-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
  background: #ffffff;
  color: var(--text);
  overflow: hidden;
}

.learning-onboarding-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
}

.learning-onboarding-head h2,
.learning-onboarding-head p {
  margin: 0;
}

.learning-onboarding-head h2 {
  margin-top: 3px;
  font-size: 24px;
  line-height: 1.2;
}

.learning-onboarding-head p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
}

.learning-onboarding-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 900;
}

.learning-onboarding-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 0 26px 18px;
  background: #f8fbfc;
}

.learning-onboarding-progress span {
  height: 6px;
  border-radius: 999px;
  background: #dce5eb;
}

.learning-onboarding-progress span.active {
  background: var(--primary);
}

.learning-onboarding-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.learning-onboarding-side {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 20px;
  border-right: 1px solid var(--line);
  background: #f8fafc;
  overflow: auto;
}

.learning-onboarding-step-pill {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
}

.learning-onboarding-step-pill strong,
.learning-onboarding-step-pill span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.learning-onboarding-step-pill strong {
  color: var(--text);
  font-size: 14px;
}

.learning-onboarding-step-pill span {
  font-size: 12px;
  line-height: 1.4;
}

.learning-onboarding-step-pill.active {
  border-color: var(--primary-border);
  background: #ffffff;
  box-shadow: 0 10px 22px var(--primary-shadow);
}

.learning-onboarding-step-pill.done {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.learning-onboarding-main {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 22px 26px 24px;
  overflow: auto;
}

.learning-onboarding-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.learning-onboarding-option {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.learning-onboarding-option input,
.learning-onboarding-chip input,
.learning-onboarding-levels input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.learning-onboarding-option-icon {
  display: inline-grid;
  grid-row: span 2;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.learning-onboarding-option strong,
.learning-onboarding-option small {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.learning-onboarding-option strong {
  align-self: end;
  font-size: 16px;
}

.learning-onboarding-option small {
  align-self: start;
  color: var(--muted);
  line-height: 1.45;
}

.learning-onboarding-option:hover,
.learning-onboarding-option:has(input:focus-visible),
.learning-onboarding-option:has(input:checked) {
  border-color: var(--primary-border);
  box-shadow: 0 10px 22px var(--primary-shadow);
}

.learning-onboarding-option:has(input:checked) {
  background: var(--primary-soft);
}

.learning-onboarding-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.learning-onboarding-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  overflow-wrap: break-word;
  word-break: normal;
}

.learning-onboarding-chip:has(input:checked),
.learning-onboarding-chip:has(input:focus-visible) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

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

.learning-onboarding-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.learning-onboarding-form-grid input,
.learning-onboarding-form-grid select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.learning-onboarding-baseline-list {
  display: grid;
  gap: 10px;
}

.learning-onboarding-baseline-list fieldset {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.learning-onboarding-baseline-list legend {
  padding: 0;
  color: var(--text);
  font-weight: 900;
}

.learning-onboarding-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.learning-onboarding-levels label {
  position: relative;
  display: inline-flex;
  justify-content: center;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.learning-onboarding-levels label:has(input:checked),
.learning-onboarding-levels label:has(input:focus-visible) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.learning-onboarding-preview {
  display: grid;
  gap: 14px;
}

.learning-onboarding-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.learning-onboarding-summary-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.learning-onboarding-summary-grid strong,
.learning-onboarding-summary-grid small {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.learning-onboarding-summary-grid small {
  color: var(--muted);
}

.learning-onboarding-task-preview {
  display: grid;
  gap: 10px;
}

.learning-onboarding-task-preview article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.learning-onboarding-task-preview article > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 900;
}

.learning-onboarding-task-preview article div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.learning-onboarding-task-preview article strong,
.learning-onboarding-task-preview article small,
.learning-onboarding-task-preview article em {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.learning-onboarding-task-preview article small {
  color: var(--muted);
}

.learning-onboarding-task-preview article em {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.learning-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.learning-onboarding-actions > div {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .learning-onboarding-body {
    grid-template-columns: 1fr;
  }

  .learning-onboarding-side {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }

  .learning-onboarding-step-pill {
    min-width: 150px;
  }

  .learning-onboarding-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .learning-onboarding-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .learning-onboarding-panel {
    max-height: calc(100dvh - 20px);
  }

  .learning-onboarding-head,
  .learning-onboarding-main,
  .learning-onboarding-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .learning-onboarding-head {
    display: grid;
  }

  .learning-onboarding-progress {
    padding-left: 16px;
    padding-right: 16px;
  }

  .learning-onboarding-option-grid,
  .learning-onboarding-form-grid,
  .learning-onboarding-summary-grid,
  .learning-onboarding-baseline-list fieldset {
    grid-template-columns: 1fr;
  }

  .learning-onboarding-levels {
    grid-template-columns: 1fr;
  }

  .learning-onboarding-task-preview article {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .learning-onboarding-task-preview article em {
    grid-column: 2;
    justify-self: start;
  }

  .learning-onboarding-actions,
  .learning-onboarding-actions > div,
  .learning-onboarding-actions .primary-button,
  .learning-onboarding-actions .secondary-button {
    width: 100%;
  }
}

.form-note,
.panel-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.hidden,
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.notice {
  min-height: 42px;
  padding: 11px 12px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.global-loading-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(420px, calc(100vw - 40px));
  min-height: 86px;
  padding: 20px 24px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.24);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
}

dialog:has(> .global-loading-toast) {
  position: fixed;
}

dialog > .global-loading-toast {
  position: absolute;
  z-index: 100;
}

.global-loading-toast[hidden] {
  display: none;
}

.global-loading-toast.is-success {
  border-color: #bbf7d0;
  background: rgba(240, 253, 244, 0.98);
  color: #166534;
}

.global-loading-toast.is-error {
  border-color: #fecaca;
  background: rgba(254, 242, 242, 0.98);
  color: #b91c1c;
}

.global-loading-toast .loading-spinner {
  width: 24px;
  height: 24px;
  border-width: 3px;
  flex: 0 0 auto;
}

.global-feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.route-loading-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 160px;
}

.route-loading-panel .loading-spinner {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.route-loading-panel h2 {
  margin: 2px 0 6px;
}

.route-loading-panel p:last-child {
  margin: 0;
  color: var(--muted);
}

/* 作文批改首屏：仅在直达作文路由和该路由的初始化阶段生效，避免旧通用壳先闪现。 */
.essay-review-bootstrap {
  display: none;
}

body[data-active-module="essay-review"] > .app-shell {
  display: block;
  min-height: 100vh;
}

body[data-active-module="essay-review"] > .app-shell > .sidebar,
body[data-active-module="essay-review"] > .app-shell > .main > .topbar {
  display: none !important;
}

body[data-active-module="essay-review"] > .app-shell > .main {
  min-width: 0;
  background: transparent;
}

body[data-active-module="essay-review"] > .app-shell > .main > .view {
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
}

html[data-initial-module="essay-review"] body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(255, 213, 94, 0.24) 1px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(circle, rgba(69, 174, 218, 0.16) 1px, transparent 2px) 11px 11px / 22px 22px,
    linear-gradient(180deg, #fffdf5, #fff7e8);
}

html[data-initial-module="essay-review"] body > .app-shell,
html[data-initial-module="essay-review"] body > .sidebar-backdrop,
html[data-initial-module="essay-review"] body > .mobile-topbar-scrim,
html[data-initial-module="essay-review"] body > .mobile-topbar-panel {
  visibility: hidden;
}

html[data-initial-module="essay-review"] .essay-review-bootstrap {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.essay-review-bootstrap-card,
.essay-review-route-state-card {
  width: min(520px, 100%);
  padding: 34px 30px 30px;
  border: 4px solid #ead8a9;
  border-radius: 32px;
  color: #493b33;
  background: rgba(255, 254, 250, 0.98);
  box-shadow: 0 10px 0 rgba(229, 216, 186, 0.48), 0 20px 44px rgba(96, 74, 46, 0.12);
  text-align: center;
}

.essay-review-bootstrap-mascot,
.essay-review-route-state-mascot {
  width: 90px;
  height: 90px;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border: 4px solid #a6daf0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 7px 0 rgba(166, 218, 240, 0.38);
}

.essay-review-bootstrap-mascot img,
.essay-review-route-state-mascot img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  transform: translateY(3%);
}

.essay-review-bootstrap-eyebrow,
.essay-review-route-state-eyebrow {
  margin: 0 0 5px;
  color: #bf4e63;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.essay-review-bootstrap-card h1,
.essay-review-route-state-card h2 {
  margin: 0;
  color: #087fac;
  font-family: "Comic Sans MS", "Marker Felt", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 950;
  line-height: 1.16;
}

.essay-review-bootstrap-card > p:last-of-type,
.essay-review-route-state-card > p:last-of-type {
  margin: 14px 0 0;
  color: #6f5d51;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.65;
}

.essay-review-bootstrap-progress,
.essay-review-route-state-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.essay-review-bootstrap-progress span,
.essay-review-route-state-progress span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #39ace4;
  animation: essay-review-loading-bounce 1.05s ease-in-out infinite;
}

.essay-review-bootstrap-progress span:nth-child(2),
.essay-review-route-state-progress span:nth-child(2) {
  animation-delay: 0.14s;
  background: #ffd45e;
}

.essay-review-bootstrap-progress span:nth-child(3),
.essay-review-route-state-progress span:nth-child(3) {
  animation-delay: 0.28s;
  background: #58cf67;
}

@keyframes essay-review-loading-bounce {
  0%, 70%, 100% { transform: translateY(0); }
  35% { transform: translateY(-8px); }
}

.essay-review-bootstrap.is-error .essay-review-bootstrap-progress,
.essay-review-route-state.is-error .essay-review-route-state-progress {
  display: none;
}

.essay-review-bootstrap-retry,
.essay-review-route-state-retry {
  min-height: 44px;
  margin-top: 18px;
  padding: 9px 22px;
  border: 3px solid #1685c1;
  border-radius: 14px;
  color: #fff;
  background: #39ace4;
  box-shadow: 0 5px 0 rgba(8, 127, 172, 0.24);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.essay-review-route-state {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle, rgba(255, 213, 94, 0.24) 1px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(circle, rgba(69, 174, 218, 0.16) 1px, transparent 2px) 11px 11px / 22px 22px,
    linear-gradient(180deg, #fffdf5, #fff7e8);
}

@media (max-width: 560px) {
  html[data-initial-module="essay-review"] .essay-review-bootstrap,
  .essay-review-route-state {
    padding: 14px;
  }

  .essay-review-bootstrap-card,
  .essay-review-route-state-card {
    padding: 27px 18px 24px;
    border-width: 3px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .essay-review-bootstrap-progress span,
  .essay-review-route-state-progress span {
    animation: none;
  }
}

.result-box {
  margin-top: 12px;
  padding: 14px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  white-space: pre-wrap;
}

.result-box pre {
  overflow: auto;
  margin: 12px 0 0;
  font-size: 13px;
  white-space: pre-wrap;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}

.linked-context {
  padding: 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.linked-context p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.workflow-list,
.timeline-list,
.material-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.material-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.workflow-card,
.timeline-item,
.material-card,
.org-card,
.schedule-card,
.task-detail-card {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 76px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.workflow-card:hover,
.timeline-item:hover,
.material-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 8px 18px rgb(15 23 42 / 5%);
}

.workflow-card span,
.timeline-item span,
.material-card span,
.org-card span,
.schedule-card span,
.task-detail-card span,
.workflow-card small,
.timeline-item small,
.material-card small,
.org-card small,
.schedule-card small,
.task-detail-card small {
  color: var(--muted);
  line-height: 1.4;
}

.org-card,
.schedule-card,
.task-detail-card {
  cursor: default;
}

.course-center-toolbar {
  align-items: end;
}

.course-center-shell {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.course-center-list,
.course-center-main,
.course-center-detail,
.course-center-player-panel {
  min-width: 0;
}

.course-center-course-list,
.course-center-lesson-nav,
.course-center-detail,
.course-center-config-stack,
.course-center-editor,
.course-center-editor-course-list,
.course-center-editor-lesson-list,
.course-center-asset-list,
.course-center-upload-queue {
  display: grid;
  align-content: start;
  gap: 10px;
}

.course-center-course-card,
.course-center-lesson-nav button,
.course-center-editor-course,
.course-center-editor-lesson,
.course-center-asset-row,
.course-center-upload-row {
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(85, 96, 124, 0.06);
}

.course-center-course-card,
.course-center-lesson-nav button {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 78px;
  padding: 14px;
  align-content: start;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.course-center-course-card:hover,
.course-center-lesson-nav button:hover,
.course-center-editor-course:hover,
.course-center-editor-lesson:hover,
.course-center-asset-row:hover {
  border-color: var(--primary-border);
  box-shadow: 0 16px 32px rgba(85, 96, 124, 0.12);
}

.course-center-course-card.active,
.course-center-lesson-nav button.active,
.course-center-editor-course.active,
.course-center-editor-lesson.active {
  border-color: var(--primary-border);
  box-shadow: inset 4px 0 0 var(--primary), 0 16px 32px rgba(85, 96, 124, 0.1);
}

.course-center-course-card span,
.course-center-course-card small,
.course-center-lesson-nav small,
.course-center-detail-head p,
.course-center-lesson-head p,
.course-center-editor-main-head p,
.course-center-editor-topbar span,
.course-center-editor-topbar small,
.course-center-editor-nav small,
.course-center-editor-course span,
.course-center-editor-lesson span,
.course-center-editor-lesson small,
.course-center-config-section p,
.course-center-asset-row span,
.course-center-asset-row small,
.course-center-asset-upload-panel small,
.course-center-upload-row span,
.course-center-upload-row small {
  color: var(--muted);
  line-height: 1.45;
}

.course-center-detail-head,
.course-center-lesson-head,
.course-center-editor-main-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.course-center-lesson-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
}

.course-center-player {
  position: relative;
  display: grid;
  min-height: 260px;
  border: 1px solid rgba(38, 48, 68, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: #111827;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), rgba(15, 23, 42, 0.1)),
    #111827;
}

.course-center-player-empty {
  display: grid;
  place-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 24px;
  color: #f8fafc;
  text-align: center;
}

.course-center-player-empty span {
  color: rgba(248, 250, 252, 0.78);
}

.protected-media-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 320px;
  background: #111827;
}

.protected-media-wrap video,
.protected-media-wrap audio,
.protected-media-wrap iframe,
.protected-media-wrap img {
  max-width: 100%;
  max-height: 72vh;
}

.protected-media-wrap img {
  object-fit: contain;
}

.course-center-watermark {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.course-center-homework,
.course-center-editor-homework-preview {
  display: grid;
  gap: 12px;
}

.course-center-manage-panels {
  margin-top: 16px;
}

.compact-course-tasks {
  margin-top: 0;
}

.course-center-editor-topbar {
  position: sticky;
  top: 104px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 38px rgba(85, 96, 124, 0.12);
  backdrop-filter: blur(16px);
}

.course-center-editor-topbar > div:nth-child(2),
.course-center-editor-main-head > div,
.course-center-editor-nav-head > div,
.course-center-config-subsection,
.course-center-asset-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

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

.course-center-editor-grid {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(330px, 390px);
  gap: 14px;
  align-items: start;
}

.course-center-editor-grid.is-drawer-collapsed {
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
}

.course-center-editor-nav,
.course-center-config-drawer {
  position: sticky;
  top: 178px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 198px);
  overflow: auto;
  padding-right: 2px;
}

.course-center-editor-nav-section,
.course-center-config-section,
.course-center-editor-lesson-panel,
.course-center-editor-empty,
.course-center-editor-homework-preview,
.course-center-asset-upload-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.course-center-editor-nav-section,
.course-center-config-section,
.course-center-asset-upload-panel {
  padding: 12px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(85, 96, 124, 0.07);
}

.course-center-editor-nav-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.course-center-editor-search,
.course-center-editor-create-lesson {
  display: grid;
  gap: 8px;
}

.course-center-editor-create-head {
  display: grid;
  gap: 2px;
}

.course-center-editor-create-head strong {
  font-size: 15px;
}

.course-center-editor-create-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.course-center-lesson-upload-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.course-center-lesson-upload-inline input[type="file"] {
  min-width: 0;
  width: 100%;
}

.course-center-editor-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.course-center-editor-course > button:first-child,
.course-center-editor-lesson > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.course-center-editor-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding: 0;
}

.course-center-editor-lesson > div:last-child {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 10px;
}

.course-center-editor-delete-button {
  align-self: center;
  min-height: 44px;
}

.course-center-config-section h3,
.course-center-editor-empty h3,
.course-center-editor-homework-preview h3 {
  margin: 0;
}

.course-center-config-head {
  display: grid;
  gap: 3px;
}

.course-center-config-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.course-center-security-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.course-center-security-summary strong {
  color: var(--primary-text);
}

.course-center-more-settings {
  display: grid;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.course-center-more-settings[open] {
  padding-bottom: 10px;
}

.course-center-more-settings summary {
  min-height: 42px;
  padding: 10px 0;
  color: var(--primary);
  font-weight: 900;
  cursor: pointer;
}

.course-center-config-subsection {
  padding-top: 10px;
  border-top: 1px solid rgba(38, 48, 68, 0.08);
}

.course-center-config-subsection strong {
  color: var(--text);
}

.course-center-asset-library {
  display: grid;
  gap: 14px;
}

.course-center-asset-upload-panel {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(189, 225, 255, 0.24), rgba(251, 194, 190, 0.18)),
    rgba(255, 255, 255, 0.94);
}

.course-center-file-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.course-center-file-input span {
  padding: 8px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 900;
}

.course-center-file-input input {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.course-center-upload-queue {
  grid-column: 1 / -1;
}

.course-center-upload-row {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.course-center-upload-row.uploading {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.course-center-upload-row.done {
  border-color: rgba(15, 118, 110, 0.28);
  background: #f0fdfa;
}

.course-center-upload-row.failed {
  border-color: #fecdd3;
  background: #fff1f2;
}

.course-center-asset-filter,
.course-center-asset-bulkbar,
.course-center-bulk-rename-form,
.course-center-asset-edit-form,
.course-center-asset-trash-actions {
  display: grid;
  gap: 10px;
  align-items: end;
}

.course-center-asset-filter {
  grid-template-columns: minmax(170px, 220px) minmax(170px, 220px) auto;
}

.course-center-asset-bulkbar {
  grid-template-columns: auto auto minmax(260px, 1fr) auto;
  padding: 10px 12px;
  border: 1px solid rgba(38, 48, 68, 0.09);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.82);
}

.course-center-select-all,
.course-center-asset-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-center-bulk-rename-form {
  grid-template-columns: minmax(160px, 1fr) auto;
}

.course-center-asset-row {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(360px, 1.7fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
}

.course-center-asset-row.is-trash {
  background: #fff7ed;
}

.course-center-asset-edit-form {
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.45fr) auto auto;
}

.course-center-asset-edit-form label {
  min-width: 0;
}

.course-center-asset-trash-actions {
  grid-template-columns: auto minmax(0, 1fr);
}

.course-center-detail .course-center-entitlement-panel {
  margin-top: 14px;
}

.course-center-entitlement-list {
  display: grid;
  gap: 8px;
}

.course-center-entitlement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.82);
}

.course-center-entitlement-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.course-center-entitlement-row span,
.course-center-entitlement-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.course-center-entitlement-row.is-disabled {
  background: #fff7ed;
  opacity: 0.86;
}

.course-center-course-dialog .action-dialog-panel {
  width: min(760px, calc(100vw - 32px));
}

.org-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.org-card-head > span {
  display: grid;
  gap: 4px;
}

.member-chip-list,
.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.member-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.task-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.task-card-head > div {
  display: grid;
  gap: 5px;
}

.task-detail-card p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.submission-rule,
.latest-submission {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  line-height: 1.45;
}

.latest-submission strong {
  color: var(--text);
}

.task-structured-fields {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.task-structured-fields > div {
  display: grid;
  gap: 3px;
}

.task-structured-fields strong {
  color: var(--text);
  font-size: 12px;
}

.task-structured-fields span {
  color: var(--muted);
  line-height: 1.45;
}

.submission-type-list,
.submission-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.submission-type-list span,
.submission-attachment-list a,
.submission-image-attachment {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.submission-image-attachment {
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.submission-image-attachment img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  background: #f1f5f9;
}

.submission-image-attachment.is-broken img {
  display: none;
}

.submission-image-attachment.is-broken::before {
  content: "图片加载失败";
  min-width: 82px;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
}

.submission-image-attachment span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-audio-attachment {
  display: grid;
  min-width: min(100%, 360px);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.submission-audio-player-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.submission-audio-player-row audio {
  width: min(100%, 420px);
}

.submission-audio-player-row a {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.submission-attachment-list a:hover,
.submission-image-attachment:hover {
  color: var(--primary);
  border-color: var(--primary-border);
}

.submission-dropzone-field {
  display: grid;
  gap: 8px;
}

.form-label {
  color: var(--text);
  font-weight: 800;
}

.submission-dropzone {
  display: grid;
  gap: 6px;
  min-height: 128px;
  padding: 18px;
  border: 1.5px dashed var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.submission-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.submission-dropzone strong {
  color: var(--text);
  font-size: 16px;
}

.submission-dropzone span,
.submission-dropzone small {
  font-size: 13px;
  line-height: 1.45;
}

.submission-dropzone.drag-over {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

.submission-file-list {
  display: grid;
  gap: 6px;
}

.submission-file-empty,
.submission-file-row {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
}

.submission-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.submission-file-row.has-image-preview {
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  min-height: 74px;
}

.submission-image-thumb {
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

.submission-image-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.submission-file-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-file-row small {
  color: var(--muted);
  white-space: nowrap;
}

.image-preview-dialog {
  width: min(92vw, 1040px);
  max-width: 1040px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}

.image-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.62);
}

.image-preview-panel {
  display: grid;
  max-height: 90vh;
}

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

.image-preview-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-preview-body {
  display: grid;
  place-items: center;
  min-height: 260px;
  max-height: calc(90vh - 64px);
  padding: 16px;
  overflow: auto;
  background: #0f172a;
}

.image-preview-body img {
  max-width: 100%;
  max-height: calc(90vh - 96px);
  border-radius: 8px;
  object-fit: contain;
  background: #ffffff;
}

.image-preview-loading {
  color: #ffffff;
  font-weight: 900;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--muted);
  font-weight: 800;
}

.checkbox-line input {
  width: 16px;
  height: 16px;
}

.basic-action-submission-field {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
}

.basic-action-submission-field legend,
.basic-action-color-field legend {
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 900;
}

.basic-action-color-field {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
}

.basic-action-color-swatch input {
  pointer-events: none;
}

.basic-action-color-swatch.active:not(:has(input:checked)) {
  border-color: #dbe5f0;
  box-shadow: none;
  transform: none;
}

.basic-action-color-swatch:has(input:checked) {
  border-color: #172033;
  box-shadow: 0 0 0 3px rgba(23, 32, 51, 0.08);
  transform: translateY(-1px);
}

.basic-action-submission-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.daily-task-dashboard {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.task-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  width: fit-content;
  max-width: 100%;
}

.daily-task-date-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  margin-top: 2px;
}

.daily-task-date-filter-main,
.daily-task-date-jumper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.daily-task-date-filter .task-filter-bar {
  padding: 4px;
}

.daily-task-date-jumper input {
  min-width: 150px;
}

.daily-task-date-range {
  color: var(--muted);
  font-weight: 900;
}

.student-task-board-panel .daily-task-date-filter,
.daily-task-personal-calendar > .daily-task-date-filter {
  border-color: #e6eaf0;
  background: #fbfdff;
}

.daily-task-view-mode {
  width: fit-content;
}

.daily-task-overdue-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-task-overdue-list {
  display: grid;
  gap: 10px;
}

.icon-button-like {
  width: 38px;
  min-width: 38px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.daily-plan-section,
.daily-plan-composer,
.daily-task-composer,
.task-context-panel,
.task-review-section,
.daily-task-list-section {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.task-context-panel.panel {
  padding-top: 16px;
}

.task-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.task-context-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
}

.task-context-card > span {
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.task-context-card strong {
  color: var(--text);
}

.task-context-card .secondary-button {
  width: fit-content;
}

.daily-task-assignment-context {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #cfe0d8;
  border-radius: 8px;
  background: #f8fcfa;
}

.daily-plan-assignment-context {
  display: grid;
  gap: 10px;
}

.daily-plan-assignment-context .daily-task-assignment-grid {
  grid-template-columns: 1fr;
}

.daily-plan-assignment-context .assignment-context-row {
  align-items: flex-start;
}

.daily-plan-assignment-context .assignment-context-row strong,
.daily-plan-assignment-context .assignment-context-row span,
.daily-plan-assignment-context .assignment-context-row small {
  overflow-wrap: normal;
  word-break: normal;
}

.daily-task-assignment-context .section-header {
  align-items: start;
}

.daily-task-assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.daily-task-assignment-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.assignment-block-head,
.assignment-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.assignment-block-head strong,
.assignment-context-row strong {
  color: var(--text);
}

.assignment-block-head span,
.assignment-context-row span,
.assignment-context-row small,
.assignment-context-empty {
  color: var(--muted);
  font-weight: 800;
}

.assignment-context-list {
  display: grid;
  gap: 8px;
}

.assignment-context-row {
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.assignment-context-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.assignment-context-row strong,
.assignment-context-row span,
.assignment-context-row small {
  overflow-wrap: break-word;
  word-break: normal;
}

.assignment-context-row .secondary-button,
.assignment-context-row .task-status-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

.assignment-context-empty {
  display: grid;
  place-items: center;
  min-height: 74px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.parent-task-summary {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.parent-task-switcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.parent-task-child-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.parent-task-child-card.active {
  border-color: var(--student-accent, var(--primary));
  box-shadow: 0 0 0 2px var(--primary-shadow);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--student-accent, var(--primary)) 18%, transparent);
}

.parent-task-child-card.family-card.active {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 2px var(--primary-shadow);
}

.parent-task-child-select {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.parent-task-child-select > span:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.parent-task-child-select strong {
  font-size: 15px;
  font-weight: 900;
}

.parent-task-child-select small {
  color: var(--muted);
  font-weight: 800;
}

.parent-task-child-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.parent-task-child-stats em {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--student-accent, var(--primary)) 12%, #ffffff);
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  font-style: normal;
}

.daily-task-calendar-panel,
.daily-task-personal-calendar {
  display: grid;
  gap: 12px;
}

.daily-task-calendar-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-task-calendar-grid {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.daily-task-calendar-grid.week-view,
.daily-task-calendar-grid.month-view {
  grid-template-columns: repeat(7, minmax(150px, 1fr));
}

.daily-task-calendar-grid.month-view .daily-task-calendar-day {
  min-height: 176px;
}

.daily-task-calendar-day {
  display: grid;
  gap: 10px;
  min-width: 150px;
  min-height: 220px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.daily-task-calendar-day.placeholder {
  border-style: dashed;
  background: #ffffff;
  opacity: 0.5;
}

.daily-task-calendar-day.today {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.daily-task-calendar-day-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.daily-task-calendar-day-head span {
  display: grid;
  gap: 2px;
}

.daily-task-calendar-day-head strong,
.daily-task-calendar-day-head em {
  color: var(--text);
  font-style: normal;
}

.daily-task-calendar-day-head small,
.daily-task-calendar-empty {
  color: var(--muted);
  font-weight: 800;
}

.daily-task-calendar-events {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 86px;
}

.daily-task-calendar-event {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 70px;
  padding: 9px 9px 9px 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.daily-task-calendar-event::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #cbd5e1;
}

.daily-task-calendar-event.task-event {
  border-color: rgba(23, 32, 51, 0.06);
  background: var(--task-type-bg, #ffffff);
  min-height: 88px;
  cursor: pointer;
}

.daily-task-calendar-event.task-event:has(.task-quick-complete-toggle) {
  padding-left: 38px;
}

.daily-task-calendar-event.task-event::before {
  background: var(--task-type-accent, #94a3b8);
}

.task-quick-complete-toggle {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--task-type-accent, var(--primary));
  border: 2px solid color-mix(in srgb, var(--task-type-accent, var(--primary)) 54%, #ffffff);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(23, 32, 51, 0.12);
}

.task-quick-complete-toggle span {
  width: 10px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}

.task-quick-complete-toggle.checked {
  border-color: var(--task-type-accent, var(--primary));
  background: var(--task-type-accent, var(--primary));
}

.task-quick-complete-toggle.checked span {
  opacity: 1;
}

.task-quick-complete-toggle:focus-visible {
  outline: 3px solid var(--primary-border);
  outline: 3px solid color-mix(in srgb, var(--task-type-accent, var(--primary)) 28%, transparent);
  outline-offset: 2px;
}

.task-quick-complete-toggle:disabled {
  cursor: wait;
  opacity: 0.7;
}

.daily-task-calendar-event-main {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-task-calendar-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.daily-task-calendar-event-actions .secondary-button {
  width: fit-content;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.daily-task-calendar-event:hover,
.daily-task-calendar-event:focus-visible,
.daily-task-calendar-event:has(.daily-task-calendar-event-main:focus-visible) {
  border-color: rgba(23, 32, 51, 0.08);
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.08);
}

.task-event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.daily-task-calendar-event .task-event-tags {
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.daily-task-calendar-event > .task-event-tags {
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.daily-task-calendar-event .task-event-tags em,
.daily-task-calendar-event > span:not(.task-event-tags) {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 900;
  font-style: normal;
}

.daily-task-calendar-event .parent-task-student-pill {
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--student-accent, var(--primary)) 18%, #ffffff);
  color: #172033;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--student-accent, var(--primary)) 36%, #ffffff);
}

.daily-task-calendar-event .task-type-chip {
  background: rgba(255, 255, 255, 0.66);
  color: #172033;
  border: 1px solid rgba(23, 32, 51, 0.08);
}

.daily-task-calendar-event .task-status-chip {
  background: var(--task-type-chip, #eef2ff);
  color: #172033;
}

.daily-task-calendar-event strong {
  min-width: 0;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.28;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  text-overflow: ellipsis;
}

.daily-task-calendar-event small {
  min-width: 0;
  color: #172033;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
}

.daily-task-calendar-event.schedule-event {
  border-color: transparent;
  background: #eefffc;
}

.parent-family-calendar-panel .daily-task-calendar-event.schedule-event {
  background: #edfffb;
}

.daily-task-calendar-event.schedule-event::before {
  background: #48daca;
}

.daily-task-calendar-event.schedule-event > span:not(.task-event-tags),
.daily-task-calendar-event.draft-event > span:not(.task-event-tags) {
  background: #e9f7f1;
  color: var(--accent);
}

.daily-task-calendar-event.draft-event {
  border-style: dashed;
  border-color: #fed7aa;
  background: #fffaf2;
}

.daily-task-calendar-event.draft-event::before {
  background: #f58f62;
}

.daily-task-calendar-event.task-event.pending_review .task-status-chip {
  background: #fff7ed;
  color: #9a3412;
}

.daily-task-calendar-event.task-event.revision_required .task-status-chip,
.daily-task-calendar-event.task-event.overdue .task-status-chip {
  background: #fef2f2;
  color: #b91c1c;
}

.daily-task-calendar-event.task-event.passed .task-status-chip,
.daily-task-calendar-event.task-event.completed .task-status-chip {
  background: #ecfdf5;
  color: #047857;
}

.daily-task-calendar-event.task-event.archived {
  opacity: 0.72;
}

.task-type-filter-segment {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.task-type-filter-segment span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--task-filter-accent, #94a3b8);
  box-shadow: 0 0 0 4px var(--task-filter-bg, #f8fafc);
}

.task-type-filter-segment.active {
  background: var(--task-filter-bg, #eef2ff);
  color: #172033;
  box-shadow: inset 0 0 0 1px var(--task-filter-accent, #94a3b8);
}

.daily-task-calendar-add {
  width: 100%;
  min-height: 38px;
}

.daily-plan-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.daily-plan-workspace.student-task-workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.daily-task-student-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-task-student-picker {
  display: flex;
  flex: 1 1 520px;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.daily-task-student-picker .daily-task-student-search {
  flex: 1 1 240px;
  max-width: 360px;
  margin: 0;
}

.daily-task-student-select {
  display: grid;
  flex: 1 1 220px;
  max-width: 320px;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.daily-task-student-select select {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-weight: 900;
}

.daily-task-student-toolbar-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.daily-plan-placement-shell {
  display: grid;
  gap: 14px;
}

.daily-plan-placement-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.daily-plan-placement-switch > span {
  color: var(--muted);
  font-weight: 900;
}

.daily-plan-placement-switch .segmented {
  gap: 8px;
  background: #f8fafc;
}

.daily-plan-placement-switch .segment {
  display: grid;
  gap: 2px;
  min-width: 150px;
  min-height: 48px;
  text-align: left;
}

.daily-plan-placement-switch .segment strong,
.daily-plan-placement-switch .segment small {
  line-height: 1.2;
}

.daily-plan-placement-switch .segment small {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.8;
}

.schedule-target-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 12px;
}

.schedule-target-mode label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.schedule-target-mode label.active {
  border-color: var(--accent);
  background: #eefaf6;
}

.schedule-target-mode label.readonly {
  cursor: default;
}

.schedule-target-mode label.readonly:not(.active) {
  opacity: 0.58;
}

.schedule-target-mode input:disabled {
  cursor: not-allowed;
}

.schedule-target-mode strong,
.schedule-target-mode small {
  display: block;
}

.schedule-target-mode small,
.schedule-class-preview {
  color: var(--muted);
  font-size: 13px;
}

.schedule-class-preview {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-class-member-picker {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.schedule-class-member-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.schedule-class-member-head strong,
.schedule-class-member-head small {
  display: block;
}

.schedule-class-member-head small {
  color: var(--muted);
  font-size: 13px;
}

.schedule-class-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 260px;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.schedule-class-member-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-class-member-option strong,
.schedule-class-member-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-class-member-option small {
  color: var(--muted);
  font-size: 12px;
}

.schedule-scope-audit {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-scope-audit.ok {
  border-color: #bfe8d8;
  background: #f0fdf8;
}

.schedule-scope-audit.compact {
  display: block;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.schedule-scope-audit.warn {
  border-color: #fed7aa;
  background: #fff7ed;
}

.schedule-scope-audit strong,
.schedule-scope-audit span {
  display: block;
}

.schedule-scope-audit span {
  color: var(--muted);
}

.schedule-scope-audit-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.schedule-scope-audit-metrics span {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.schedule-scope-audit-metrics b {
  display: block;
  color: var(--text);
}

.schedule-scope-audit-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}

.schedule-scope-audit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-personalization-preview {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.schedule-task-link-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-task-link-head strong,
.schedule-task-timing-title strong,
.schedule-manual-task-box strong {
  display: block;
}

.schedule-task-link-head span,
.schedule-task-timing-title span,
.schedule-linked-task-card span {
  color: var(--muted);
  font-size: 13px;
}

.schedule-task-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.schedule-task-timing-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.schedule-task-timing-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.schedule-linked-task-list {
  display: grid;
  gap: 8px;
}

.schedule-linked-task-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-linked-task-card > div,
.schedule-existing-attachments,
.task-attachment-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.schedule-existing-attachments {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.schedule-existing-attachments.readonly {
  margin-top: 10px;
}

.schedule-manual-task-box {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.schedule-manual-task-box.primary-task-box {
  padding: 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.schedule-existing-task-picker,
.schedule-linked-task-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.schedule-linked-task-section {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.schedule-task-timing-panel select[multiple] {
  min-height: 112px;
}

.schedule-task-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
}

.schedule-task-link-actions > div {
  flex: 1 1 240px;
  min-width: 0;
}

.schedule-task-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.schedule-task-status-badges span {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.schedule-task-status-badges .ok {
  background: #dcfce7;
  color: #166534;
}

.schedule-task-status-badges .pending {
  background: #f1f5f9;
  color: #64748b;
}

.schedule-task-status-badges .draft {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.schedule-task-status-badges.compact {
  gap: 4px;
}

.schedule-task-status-badges.compact span {
  padding: 2px 6px;
  font-size: var(--font-caption);
}

.schedule-post-feedback-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.schedule-post-feedback-panel.readonly {
  border-color: var(--line);
  background: #ffffff;
}

.post-feedback-readonly-grid {
  display: grid;
  gap: 10px;
}

.post-feedback-readonly-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.post-feedback-readonly-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.post-feedback-readonly-grid p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
}

.daily-plan-review-workspace {
  grid-template-columns: minmax(260px, 320px) minmax(280px, 380px) minmax(0, 1fr);
}

.daily-plan-student-sidebar,
.daily-plan-hero-card,
.daily-plan-rule-card,
.daily-plan-history-card,
.daily-plan-draft-list-card,
.daily-plan-review-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.daily-plan-student-sidebar {
  gap: 12px;
  padding: 16px;
}

.daily-plan-student-sidebar h2,
.daily-plan-hero-card h2,
.daily-plan-rule-card h2,
.daily-plan-draft-list-card h2,
.daily-plan-review-card h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-section-title);
  line-height: 1.25;
}

.daily-plan-student-sidebar h2 {
  font-size: 21px;
}

.daily-task-student-search {
  display: block;
  margin: -2px 0 -4px;
}

.daily-task-student-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.daily-task-student-search input:focus {
  border-color: var(--primary);
  outline: 3px solid var(--primary-shadow);
}

.daily-task-student-search input::placeholder {
  color: var(--muted);
  font-weight: 800;
}

.daily-task-student-sort {
  justify-content: stretch;
  margin: -4px 0;
}

.daily-task-student-sort .segment {
  flex: 1 1 88px;
  font-weight: 900;
  white-space: nowrap;
}

.daily-task-plan-scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #b7e2d7;
  border-radius: 8px;
  background: #f3fbf8;
}

.daily-task-plan-scope > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.daily-task-plan-scope strong {
  color: #0f4f44;
}

.daily-task-plan-scope span {
  color: var(--muted);
  font-weight: 800;
}

.daily-plan-hero-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.daily-plan-main {
  display: grid;
  gap: 20px;
}

.daily-plan-student-list {
  display: grid;
  gap: 12px;
}

.daily-plan-student-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.daily-plan-student-card:focus-visible {
  outline: 3px solid rgb(29 129 112 / 28%);
  outline-offset: 2px;
}

.daily-plan-student-card.active {
  border-color: #168171;
  background: #f3fbf8;
}

.daily-plan-class-card small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.daily-plan-student-info {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.daily-plan-student-card strong {
  color: var(--text);
  font-size: 18px;
}

.daily-plan-student-card em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.daily-plan-student-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-plan-student-tags small {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef4f1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.daily-plan-student-tags .student-sort-reason {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.daily-plan-student-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.daily-plan-student-actions .secondary-button {
  min-height: 34px;
  padding: 0 11px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .daily-plan-student-card {
    grid-template-columns: 1fr;
  }

  .daily-plan-student-actions {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
  }

  .daily-plan-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-task-plan-scope {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 最后加载的样例覆盖，避免历史模块规则重新包裹主流程。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-groups { display: grid; gap: 12px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-group { display: grid; gap: 7px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-group .material-group-label { margin: 2px 0 0; padding: 0 2px; color: var(--il-preview-muted); font-size: 11px; font-weight: 950; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card { gap: 7px; margin: 0; padding: 10px; border-width: 2px; border-radius: 14px; box-shadow: none; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.processing { border-color: #cfc0ed; background: #fbf8ff; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions { margin-top: 2px; padding-top: 7px; border-top: 1px dashed var(--il-preview-line-soft); }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions .button { min-height: 32px; padding: 6px 10px; border-radius: 11px; font-size: 11px; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h2,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h3 { margin: 0 0 5px; color: var(--il-preview-sky-600); font-family: var(--il-preview-font-cute); font-size: 24px; line-height: 1.16; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-stage > .content-heading,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-head { padding-top: 0; border-top: 0; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-count { flex: 0 0 auto; padding: 7px 11px; border: 2px solid var(--il-preview-sky-200); border-radius: 20px; background: var(--il-preview-sky-50); color: var(--il-preview-sky-600); font-size: 12px; font-weight: 900; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript-card { display: grid; gap: 12px; padding: 14px 0 0; border: 0; border-top: 2px dashed var(--il-preview-line); border-radius: 0; background: transparent; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form .prompt-block,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card { padding: 0; border-top: 0; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block > span,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block > h3,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block > label,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card h3 { display: block; margin: 0 0 7px; color: #5e4a3d; font-size: 14px; font-weight: 900; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block small { display: block; margin: -2px 0 8px; color: var(--il-preview-muted); font-size: 11px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block textarea,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced textarea,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced textarea { width: 100%; min-height: 92px; padding: 10px 12px; border: 2px solid #dce7e9; border-radius: 13px; background: #fff; line-height: 1.55; resize: vertical; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button { min-height: 52px; padding: 6px; border: 2px solid #dfdac9; border-radius: 13px; background: #fff; font-size: 11px; font-weight: 900; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button.active { border-color: var(--il-preview-sky-400); background: var(--il-preview-sky-50); color: var(--il-preview-sky-600); }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-card { display: grid; gap: 10px; margin-top: 0; padding: 15px; border: 2px dashed #d7c1f0; border-radius: 16px; background: #fbf8ff; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-structure article { border: 0; border-top: 1px dashed #e3d7ef; border-radius: 0; background: transparent; padding: 9px 0 0; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-next { padding-top: 10px; border-top: 1px dashed #e3d7ef; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .ghost-button { width: fit-content; min-height: 36px; padding: 7px 11px; border: 2px solid #d9c599; border-radius: 11px; background: #fff; color: var(--il-preview-ink); font-size: 12px; font-weight: 900; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript-card .full-transcript { max-height: 310px; margin-top: 0; padding: 15px; border: 2px dashed var(--il-preview-line); border-radius: 15px; background: #fff; line-height: 1.75; font-size: 13px; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-flow { margin-top: 14px; border-top: 2px dashed var(--il-preview-line); }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step { grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 16px 0; border-bottom: 2px dashed var(--il-preview-line-soft); }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; margin-top: 10px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box { min-width: 0; margin-top: 0; padding: 12px 13px; border-radius: 13px; line-height: 1.65; font-size: 13px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box { border: 2px solid #d5e8ed; background: #f8fdff; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box { border: 2px solid #eadcf2; background: #fcf9ff; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > .secondary-button { align-self: center; min-width: 82px; white-space: nowrap; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > span { min-width: 82px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-result { margin-top: 10px; padding: 12px 13px; border: 2px solid #c8eacb; border-radius: 13px; background: #f2fff3; line-height: 1.65; font-size: 13px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced-body { display: grid; gap: 9px; margin-top: 7px; padding-top: 10px; border-top: 1px dashed var(--il-preview-line-soft); }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-advanced-controls,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-more,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced { margin-top: 7px; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-advanced-controls > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-more > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced > summary { display: inline-flex; min-height: 26px; align-items: center; padding: 3px 2px; color: var(--il-preview-muted); font-size: 11px; font-weight: 850; cursor: pointer; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions { justify-self: end; }

@media (max-width: 760px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row { grid-template-columns: 1fr; }
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > .secondary-button { justify-self: start; }
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > span { display: none; }
}

/* 精听确认样例的最终结构层：主流程保持平面排版，次要能力收进可展开区。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-groups {
  display: grid;
  gap: 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-group {
  display: grid;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-group .material-group-label {
  margin: 2px 0 0;
  padding: 0 2px;
  color: var(--il-preview-muted);
  font-size: 11px;
  font-weight: 950;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card {
  gap: 7px;
  margin: 0;
  padding: 10px;
  border-width: 2px;
  border-radius: 14px;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.processing {
  border-color: #cfc0ed;
  background: #fbf8ff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card .material-icon {
  background: var(--il-preview-yellow-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.processing .material-icon {
  background: #f0eafd;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--il-preview-line-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions .button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 11px;
  font-size: 11px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-advanced-controls,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-more,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced {
  margin-top: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-advanced-controls > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-more > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced > summary {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 2px;
  color: var(--il-preview-muted);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-advanced-controls > summary::marker,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions > summary::marker,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-more > summary::marker,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced > summary::marker,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced > summary::marker,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced > summary::marker {
  color: var(--il-preview-sky-500);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-stage > .content-heading,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-head {
  padding-top: 0;
  border-top: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h2,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h3 {
  margin: 0 0 5px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 24px;
  line-height: 1.16;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 2px solid var(--il-preview-sky-200);
  border-radius: 20px;
  background: var(--il-preview-sky-50);
  color: var(--il-preview-sky-600);
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript-card {
  display: grid;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 2px dashed var(--il-preview-line);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form .prompt-block,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card {
  padding: 0;
  border-top: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block > span,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block > h3,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block > label,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card h3 {
  display: block;
  margin: 0 0 7px;
  color: #5e4a3d;
  font-size: 14px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block small {
  display: block;
  margin: -2px 0 8px;
  color: var(--il-preview-muted);
  font-size: 11px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .prompt-block textarea,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced textarea,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced textarea {
  width: 100%;
  min-height: 92px;
  padding: 10px 12px;
  border: 2px solid #dce7e9;
  border-radius: 13px;
  background: #fff;
  line-height: 1.55;
  resize: vertical;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card {
  gap: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card .intensive-listening-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button {
  min-height: 52px;
  padding: 6px;
  border: 2px solid #dfdac9;
  border-radius: 13px;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button.active {
  border-color: var(--il-preview-sky-400);
  background: var(--il-preview-sky-50);
  color: var(--il-preview-sky-600);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-card {
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 15px;
  border: 2px dashed #d7c1f0;
  border-radius: 16px;
  background: #fbf8ff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-structure article {
  border: 0;
  border-top: 1px dashed #e3d7ef;
  border-radius: 0;
  background: transparent;
  padding: 9px 0 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-next {
  padding-top: 10px;
  border-top: 1px dashed #e3d7ef;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .ghost-button {
  width: fit-content;
  min-height: 36px;
  padding: 7px 11px;
  border: 2px solid #d9c599;
  border-radius: 11px;
  background: #fff;
  color: var(--il-preview-ink);
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript-card .full-transcript,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript {
  max-height: 310px;
  margin-top: 0;
  padding: 15px;
  border: 2px dashed var(--il-preview-line);
  border-radius: 15px;
  background: #fff;
  line-height: 1.75;
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comparison .score-card {
  padding: 14px;
  border: 2px solid #e2dbc8;
  border-radius: 16px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comparison .score-card.after {
  border-color: #b7e7c1;
  background: var(--il-preview-green-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-flow {
  margin-top: 14px;
  border-top: 2px dashed var(--il-preview-line);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 16px 0;
  border-bottom: 2px dashed var(--il-preview-line-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step > .step-body {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > span {
  min-width: 82px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box {
  min-width: 0;
  margin-top: 0;
  padding: 12px 13px;
  border-radius: 13px;
  line-height: 1.65;
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box {
  border: 2px solid #d5e8ed;
  background: #f8fdff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box {
  border: 2px solid #eadcf2;
  background: #fcf9ff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > .secondary-button {
  align-self: center;
  min-width: 82px;
  white-space: nowrap;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-result {
  margin-top: 10px;
  padding: 12px 13px;
  border: 2px solid #c8eacb;
  border-radius: 13px;
  background: #f2fff3;
  line-height: 1.65;
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced-body {
  display: grid;
  gap: 9px;
  margin-top: 7px;
  padding: 10px 0 0;
  border-top: 1px dashed var(--il-preview-line-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced-body small {
  color: var(--il-preview-muted);
  line-height: 1.5;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-note-block {
  margin-top: 0;
  padding-top: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions {
  justify-self: end;
}

@media (max-width: 760px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comparison {
    grid-template-columns: 1fr;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > .secondary-button {
    justify-self: start;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > span {
    display: none;
  }
}

.daily-plan-generate-button {
  justify-self: start;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: #1d8170;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.daily-plan-generate-button:hover {
  background: #176e60;
}

.daily-plan-rule-grid {
  display: grid;
  gap: 12px;
}

.daily-plan-rule-grid > div {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.daily-plan-rule-grid strong {
  color: var(--text);
}

.daily-plan-rule-grid span,
.daily-plan-rule-grid small {
  color: var(--muted);
  line-height: 1.5;
}

.daily-plan-list,
.daily-plan-draft-list,
.daily-plan-item-editor,
.daily-plan-item-summary {
  display: grid;
  gap: 10px;
}

.daily-plan-history-mini,
.daily-plan-published-summary,
.daily-plan-published-task-manager {
  display: grid;
  gap: 12px;
}

.daily-plan-draft-list-card-item {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  text-align: left;
}

.daily-plan-draft-list-card-item.active {
  border-color: #168171;
  background: #f3fbf8;
}

.daily-plan-draft-list-card-main {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-plan-draft-list-card-main:focus-visible {
  border-radius: 6px;
  outline: 3px solid rgb(29 129 112 / 24%);
  outline-offset: 3px;
}

.daily-plan-draft-delete-button {
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
}

.daily-plan-draft-list-card-item strong {
  color: var(--text);
  font-size: 20px;
}

.daily-plan-draft-list-card-item em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.daily-plan-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.daily-plan-summary-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 800;
}

.daily-plan-summary-grid strong {
  color: var(--text);
  font-size: 20px;
}

.daily-plan-goal-box {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-plan-goal-box strong {
  color: var(--text);
}

.daily-plan-goal-box span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}

.daily-plan-inline-draft-form {
  display: grid;
  gap: 12px;
}

.daily-plan-inline-draft-form p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.daily-plan-class-target {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #b7e2d7;
  border-radius: 8px;
  background: #f3fbf8;
}

.daily-plan-class-target span {
  display: grid;
  gap: 4px;
}

.daily-plan-class-target strong {
  color: #0f4f44;
}

.daily-plan-class-target small {
  color: var(--muted);
  font-weight: 800;
}

.daily-plan-class-student-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.daily-plan-class-student-strip span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.daily-plan-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-plan-edit-toolbar,
.daily-plan-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.daily-plan-edit-toolbar {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.daily-plan-edit-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.daily-plan-item-form {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.daily-plan-item-form legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.daily-plan-item-form-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.daily-plan-item-form-head strong {
  color: var(--text);
}

.daily-plan-item-form-head .secondary-button,
.daily-plan-item-form-head .danger-button {
  min-height: 32px;
  padding: 0 10px;
}

.daily-plan-publish-preview,
.daily-plan-preview-card {
  display: grid;
  gap: 12px;
}

.daily-plan-preview-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.daily-plan-preview-card.expanded {
  padding: 16px;
  background: #ffffff;
}

.daily-plan-preview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.daily-plan-preview-summary span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.daily-plan-preview-summary strong {
  color: var(--text);
  font-size: 18px;
}

.daily-plan-preview-hint {
  padding: 10px 12px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.daily-plan-preview-list {
  display: grid;
  gap: 8px;
}

.daily-plan-preview-list article {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-plan-preview-list article > span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 900;
}

.daily-plan-preview-list article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.daily-plan-preview-list strong {
  color: var(--text);
}

.daily-plan-preview-list small {
  color: var(--muted);
  line-height: 1.45;
}

.daily-plan-publish-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.published-task-edit-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.task-detail-dialog {
  width: min(1120px, calc(100vw - 24px));
  max-height: min(90vh, 900px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.action-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.action-dialog.schedule-import-dialog {
  width: min(1360px, calc(100vw - 28px));
}

.action-dialog.student-class-select-dialog {
  width: min(520px, calc(100vw - 28px));
}

.daily-plan-publish-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.published-task-edit-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.task-detail-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.action-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.daily-plan-publish-dialog-panel {
  display: grid;
  max-height: min(88vh, 860px);
  overflow: auto;
  background: #ffffff;
}

.action-dialog-panel,
.published-task-edit-dialog-panel {
  display: grid;
  max-height: min(88vh, 860px);
  overflow: auto;
  background: #ffffff;
}

.task-detail-dialog-panel {
  display: grid;
  max-height: min(90vh, 900px);
  overflow: auto;
  background: #ffffff;
}

.daily-plan-publish-dialog-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--bg);
}

.action-dialog-body,
.published-task-edit-dialog-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--bg);
}

.task-detail-dialog-body {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--bg);
}

.task-detail-dialog-head {
  align-items: flex-start;
}

.task-detail-dialog-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 48px;
}

.schedule-import-dialog .schedule-import-section {
  align-items: start;
  grid-template-columns: minmax(340px, 0.85fr) minmax(520px, 1.25fr);
}

.action-dialog-entry {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.dialog-form {
  width: 100%;
  max-width: none;
  margin: 0;
}

.homework-export-dialog {
  width: min(980px, calc(100vw - 28px));
}

.student-task-board-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.homework-export-form {
  display: grid;
  gap: 14px;
}

.homework-export-form select[multiple] {
  min-height: 112px;
}

.homework-export-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-class-select-form {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-class-select-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.published-task-edit-preview {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.published-task-edit-dialog .published-task-edit-form,
.published-task-edit-dialog .task-classification-form {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-task-calendar-add-dialog {
  width: min(980px, calc(100vw - 28px));
}

.daily-task-create-mode-switch {
  width: fit-content;
  max-width: 100%;
}

.daily-task-calendar-add-dialog [data-daily-task-create-section] {
  min-width: 0;
}

.daily-task-manual-primary-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(300px, 1fr) minmax(180px, 0.65fr);
  gap: 12px;
  align-items: end;
}

.daily-task-deadline-field {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.daily-task-deadline-field legend {
  padding: 0;
  color: var(--text);
  font-weight: 800;
}

.daily-task-deadline-inputs {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(104px, 0.55fr);
  gap: 8px;
}

.daily-task-text-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 12px;
}

.daily-task-text-grid.single {
  grid-template-columns: 1fr;
}

.daily-task-text-grid textarea {
  min-height: 104px;
}

.daily-task-more-settings {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-task-more-settings summary {
  min-height: 44px;
  padding: 11px 14px;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.daily-task-more-settings[open] summary {
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.daily-task-more-settings-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.daily-task-repeat-field {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.daily-task-repeat-field legend {
  padding: 0 4px;
  color: var(--text);
  font-weight: 900;
}

.daily-task-weekday-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.daily-task-calendar-add-dialog .basic-action-submission-field {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.task-progress-panel,
.published-task-panel,
.published-task-list,
.published-task-card,
.published-task-edit-form {
  display: grid;
  gap: 12px;
}

.task-classification-form {
  display: grid;
  gap: 12px;
}

.task-progress-panel,
.published-task-panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.published-task-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.published-task-edit-form {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.daily-plan-item-summary > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.daily-plan-item-summary strong {
  color: var(--text);
}

.daily-task-list {
  display: grid;
  gap: 10px;
}

.daily-task-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.task-preview-card.highlighted {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

.task-preview-card-content {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
}

.task-preview-thumb {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #eef5f2;
  color: #1f7a68;
  font-size: 13px;
  font-weight: 900;
}

.task-preview-body {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.task-preview-submission {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.daily-task-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.daily-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.task-detail-page,
.task-detail-hero,
.task-detail-section,
.task-submission-timeline {
  display: grid;
  gap: 14px;
}

.task-detail-dialog-summary,
.task-detail-dialog-section,
.task-detail-dialog-stack {
  display: grid;
  gap: 14px;
}

.task-detail-dialog-summary,
.task-detail-dialog-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.task-detail-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 16px;
  align-items: start;
}

.file-task-detail-dialog-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.file-task-detail-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.file-task-detail-heading,
.file-task-detail-section,
.file-task-submit-panel,
.file-task-submission-form,
.file-task-review-panel,
.file-task-optional-review,
.file-task-submit-more-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.file-task-detail-heading h2,
.file-task-detail-section h3,
.file-task-submit-panel h3,
.file-task-review-panel h3,
.file-task-optional-review h3 {
  margin: 0;
  color: var(--text);
  letter-spacing: 0;
}

.file-task-detail-heading h2 {
  font-size: 30px;
  line-height: 1.2;
}

.file-task-detail-badges,
.file-task-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.file-task-kind-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.file-task-detail-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.file-task-detail-meta span + span::before {
  margin-right: 8px;
  color: var(--line-strong);
  content: "·";
}

.file-task-detail-close {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
}

.file-task-detail-content {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  min-height: 0;
  overflow-y: auto;
}

.file-task-detail-main,
.file-task-submit-panel {
  min-width: 0;
  padding: 22px;
}

.file-task-detail-main {
  border-right: 1px solid var(--line);
}

.file-task-detail-section + .file-task-detail-section,
.file-task-history {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.file-task-detail-copy,
.file-task-feedback-box p,
.file-task-submission-summary p {
  margin: 0;
  line-height: 1.75;
  white-space: pre-wrap;
}

.file-task-requirement-note {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border-left: 4px solid var(--amber);
  border-radius: 6px;
  background: #fff8e6;
  color: var(--text);
}

.file-task-detail-section .task-attachment-card,
.file-task-detail-section .task-linked-card {
  min-height: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.file-task-submit-panel {
  align-content: start;
  background: var(--panel-soft);
}

.file-task-submission-form {
  padding: 0;
  border: 0;
}

.file-task-submission-form > .primary-button,
.file-task-complete-action > .primary-button {
  width: 100%;
}

.file-task-submit-more {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.file-task-submit-more summary,
.file-task-history summary {
  padding: 10px 12px;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.file-task-submit-more-body {
  padding: 0 12px 12px;
}

.file-task-complete-action,
.file-task-submission-summary,
.file-task-submission-empty,
.file-task-feedback-box,
.file-task-review-panel,
.file-task-optional-review,
.file-task-manager-actions {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.file-task-complete-action p,
.file-task-submission-summary p,
.file-task-submission-summary small,
.file-task-feedback-box small {
  color: var(--muted);
}

.file-task-submission-summary > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.file-task-feedback-box {
  border-left: 4px solid var(--rose);
  background: #fff1f3;
}

.file-task-history .task-submission-timeline {
  margin-top: 10px;
}

.file-task-review-panel .workflow-list,
.file-task-review-panel .task-detail-card {
  gap: 10px;
}

.file-task-review-panel .task-detail-card {
  padding: 0;
  border: 0;
}

.file-task-manager-actions .row-actions {
  justify-content: flex-start;
}

.task-detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px;
}

.task-detail-meta-grid span,
.task-linked-card {
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 11px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  line-height: 1.45;
}

.task-detail-meta-grid strong,
.task-linked-card strong {
  color: var(--text);
}

.task-status-pill {
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.task-status-pill.pending_review {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.task-status-pill.pending {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.task-status-pill.warning {
  background: #fff7ed;
  color: #9a3412;
}

.task-status-pill.danger {
  background: #fef2f2;
  color: #b91c1c;
}

.task-status-pill.ok {
  background: #ecfdf5;
  color: var(--green);
}

.task-status-pill.revision_required,
.task-status-pill.overdue {
  background: #fff7ed;
  color: #9a3412;
}

.core-flow-panel {
  display: grid;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.core-flow-list {
  display: grid;
  gap: 10px;
}

.core-flow-card {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.core-flow-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.core-flow-head > div:first-child {
  display: grid;
  gap: 5px;
}

.core-flow-head strong {
  color: var(--text);
}

.core-flow-head small {
  color: var(--muted);
}

.core-flow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.core-flow-step {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.core-flow-step.done {
  background: #ecfdf5;
  color: #047857;
}

.core-flow-step.pending {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.core-flow-step.missing {
  background: #fff7ed;
  color: #9a3412;
}

.core-flow-step.muted {
  background: #f1f5f9;
  color: var(--muted);
}

.core-flow-step strong {
  color: var(--text);
}

.core-flow-hint {
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.task-status-pill.passed,
.task-status-pill.completed,
.task-status-pill.published {
  background: #ecfdf5;
  color: var(--green);
}

.task-status-pill.archived {
  background: #f1f5f9;
  color: var(--muted);
}

.schedule-card.has-conflict {
  border-color: #ef4444;
  background: #fff1f2;
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.18);
}

.conflict-list,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.schedule-conflict-save-prompt {
  display: grid;
  gap: 10px;
}

.schedule-conflict-save-copy {
  display: grid;
  gap: 4px;
}

.schedule-conflict-save-copy span {
  color: #9a3412;
  font-size: 13px;
  font-weight: 600;
}

.schedule-conflict-save-button {
  border-color: #fdba74;
  color: #9a3412;
}

.conflict-pill,
.status-line {
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.conflict-pill {
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px #fecaca;
}

.status-line.ok {
  background: #ecfdf5;
  color: var(--green);
}

.reference-list,
.log-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pagination-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.pagination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination-actions .secondary-button {
  min-width: 84px;
}

.reference-list span,
.log-list > div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 13px;
}

.operation-log-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.operation-log-item > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.operation-log-item .secondary-button {
  align-self: center;
  min-width: 64px;
}

.basics-maintenance-list {
  margin-top: 14px;
}

.basics-tabs {
  margin-top: 12px;
}

.basic-resource-row {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.basic-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.basic-row-head > span {
  display: grid;
  gap: 4px;
}

.basic-row-head small,
.basic-resource-row small {
  color: var(--muted);
}

.basic-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.basic-edit-details {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.basic-edit-details summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

.basic-edit-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.notification-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.notification-summary-row span {
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef2f7;
  color: var(--muted);
  font-weight: 800;
}

.notification-summary-row strong {
  margin-right: 4px;
  color: var(--text);
}

.notification-publisher,
.notification-filter-bar {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.notification-filter-bar {
  grid-template-columns: repeat(2, minmax(0, 220px));
  align-items: end;
}

.notification-card {
  border-left: 4px solid transparent;
}

.notification-card.unread {
  border-left-color: var(--primary);
  background: #f8fbff;
}

.notification-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.notification-card-head > span {
  display: grid;
  gap: 4px;
}

.notification-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.notification-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.notification-status-pill.unread {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.notification-status-pill.read {
  background: #f1f5f9;
  color: var(--muted);
}

.notification-center-page {
  width: min(1040px, 100%);
  min-width: 0;
  margin: 0 auto;
}

.notification-center-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.notification-center-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
}

.notification-center-head h2 {
  margin: 2px 0 4px;
}

.notification-center-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.product-update-announcement-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.product-update-announcement-dialog::backdrop {
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(2px);
}

.product-update-announcement-panel {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 72px rgba(16, 24, 40, 0.24);
}

.product-update-announcement-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary);
}

.product-update-announcement-panel h2 {
  color: var(--ink);
  font-size: 22px;
}

.product-update-announcement-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--text);
  line-height: 1.75;
}

.product-update-announcement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.log-list span,
.log-list small {
  color: var(--muted);
}

.compact-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.calendar-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.calendar-controls input {
  width: 150px;
}

.range-chip {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f0fdf4;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.range-chip.muted {
  background: var(--panel-soft);
  color: var(--muted);
}

.calendar-sample-title {
  margin: 18px 20px 10px;
}

.calendar-sample-title h3 {
  margin: 0;
  color: #172033;
  font-size: var(--font-section-title);
  font-weight: 900;
  letter-spacing: 0;
}

.calendar-sample-title span {
  display: block;
  margin-top: 4px;
  color: #5f6b7a;
  font-size: 14px;
  font-weight: 700;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(156px, 1fr));
  gap: 0;
  margin: 0 20px 20px;
  overflow-x: auto;
  padding-bottom: 2px;
  border-top: 1px solid #dce4ee;
  border-left: 1px solid #dce4ee;
}

.day-column,
.month-cell {
  min-width: 0;
  border: 0;
  border-right: 1px solid #dce4ee;
  border-bottom: 1px solid #dce4ee;
  border-radius: 0;
  background: #ffffff;
}

.day-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  min-height: 36px;
  padding: 10px 12px 6px;
  border-bottom: 0;
  background: #ffffff;
}

.day-header strong,
.month-cell-head strong {
  color: #5f6b7a;
  font-size: 13px;
  font-weight: 900;
}

.day-header span,
.empty-day,
.more-count {
  color: var(--muted);
  font-size: 12px;
}

.conflict-text {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
}

.calendar-stack,
.month-card-stack {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 7px 12px 14px;
}

.calendar-add-button {
  width: 20px;
  height: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.32;
  cursor: pointer;
}

.day-column:hover .calendar-add-button,
.month-cell:hover .calendar-add-button,
.calendar-add-button:focus-visible,
.calendar-add-button:hover {
  opacity: 1;
  border-color: var(--primary);
  color: var(--primary);
}

.calendar-card {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 74px;
  padding: 9px 9px 9px 15px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--teacher-card-bg, #fff2f4);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}

.calendar-card.batch-selectable {
  cursor: pointer;
  padding-right: 36px;
}

.calendar-card.selected-for-batch,
.schedule-table tr.selected-for-batch,
.schedule-card.selected-for-batch {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary-shadow);
}

.schedule-table tr.selected-for-batch {
  background: var(--primary-soft);
}

.calendar-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--teacher-card-accent, #f06f83);
}

button.calendar-card {
  cursor: pointer;
  font: inherit;
}

button.calendar-card:hover {
  border-color: rgba(23, 32, 51, 0.08);
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.08);
  transform: translateY(-1px);
}

.calendar-card strong {
  min-width: 0;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-card span,
.calendar-card small {
  min-width: 0;
  color: #172033;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-card.has-conflict {
  border-color: #ef4444;
  background: #fff1f2 !important;
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.2), 0 8px 18px rgba(185, 28, 28, 0.12);
}

.calendar-card.has-conflict::before {
  background: #ef4444;
}

.calendar-card.has-conflict strong,
.calendar-card.has-conflict span,
.calendar-card.has-conflict small {
  color: #7f1d1d;
}

.calendar-card.status-cancelled {
  opacity: 0.62;
  background: #f8fafc;
}

.calendar-card.status-cancelled::before {
  background: #94a3b8;
}

.calendar-card.status-cancelled strong {
  text-decoration: line-through;
}

.calendar-card.status-rescheduled {
  background: var(--primary-soft);
}

.calendar-card.status-rescheduled::before {
  background: var(--primary);
}

.calendar-status-text {
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 900;
}

.calendar-task-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  white-space: normal;
}

.calendar-card .calendar-task-status {
  overflow: visible;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(156px, 1fr));
  gap: 0;
  margin: 0 20px 24px;
  overflow-x: auto;
  border-top: 1px solid #dce4ee;
  border-left: 1px solid #dce4ee;
}

.month-cell {
  min-height: 390px;
  padding: 0;
}

.month-cell .month-card-stack {
  max-height: 350px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.month-cell-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  min-height: 32px;
  padding: 10px 12px 4px;
}

.month-cell.month-cell-placeholder {
  background: #f8fafc;
}

.month-cell .calendar-card {
  min-height: 62px;
  padding: 7px 8px 7px 14px;
}

.month-cell .calendar-card strong,
.month-cell .calendar-card span,
.month-cell .calendar-card small {
  line-height: 1.18;
}

.month-cell .calendar-add-button {
  width: 20px;
  height: 20px;
  font-size: 15px;
}

.role-schedule {
  display: grid;
  gap: 12px;
}

.parent-summary-panel,
.role-compact-section {
  display: grid;
  gap: 14px;
}

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

.teacher-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.teacher-student-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.teacher-student-card strong,
.teacher-student-card span,
.teacher-student-card small {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.teacher-student-card span,
.teacher-student-card small {
  color: var(--muted);
  line-height: 1.45;
}

.restore-preview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.schedule-module-content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.schedule-module-panel {
  min-width: 0;
}

.schedule-arrangement-panel {
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255, 246, 239, 0.92), rgba(240, 249, 255, 0.94)),
    #ffffff;
}

.schedule-dashboard-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.schedule-dashboard-card {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.schedule-dashboard-card:hover,
.schedule-dashboard-card.active {
  border-color: var(--primary-border);
  box-shadow: 0 10px 24px var(--primary-shadow);
  transform: translateY(-1px);
}

.schedule-dashboard-card span {
  color: #53647a;
  font-size: 13px;
  font-weight: 900;
}

.schedule-dashboard-card strong {
  color: var(--text);
  font-size: var(--font-metric-compact);
  line-height: 1;
}

.schedule-dashboard-card small {
  color: var(--muted);
  font-weight: 800;
}

.post-lesson-teacher-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.post-lesson-teacher-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #dbe5f0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.post-lesson-teacher-summary strong {
  color: var(--text);
}

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

.schedule-arrangement-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.schedule-arrangement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.schedule-green-button {
  background: var(--primary);
  border-color: var(--primary);
}

.schedule-green-button:hover {
  background: var(--primary-dark);
}

.schedule-filter-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(6, minmax(126px, 1fr)) minmax(126px, auto);
  gap: 10px;
  align-items: center;
  padding: 16px 20px 10px;
}

.schedule-filter-grid label,
.schedule-filter-grid .schedule-multi-filter {
  min-width: 0;
}

.schedule-filter-grid input,
.schedule-filter-grid select {
  width: 100%;
  min-height: 46px;
  border-radius: 8px;
}

.schedule-filter-grid input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  min-height: 18px;
}

.schedule-search-field input {
  font-weight: 700;
}

.schedule-multi-filter {
  position: relative;
  width: 100%;
}

.schedule-multi-filter summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.schedule-multi-filter summary::-webkit-details-marker {
  display: none;
}

.schedule-multi-filter[open] summary {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-shadow);
}

.schedule-multi-filter-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-multi-filter-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

.schedule-multi-filter-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 48px));
  max-height: 340px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgb(15 23 42 / 16%);
}

.schedule-multi-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.schedule-multi-filter-actions button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 900;
  cursor: pointer;
}

.schedule-multi-filter-options {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.schedule-multi-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.schedule-multi-filter-option:hover {
  background: #f1f5f9;
}

.schedule-multi-filter-option span {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  font-weight: 800;
}

.schedule-multi-filter-empty {
  padding: 10px 8px;
  color: var(--muted);
  font-weight: 800;
}

.schedule-conflict-check {
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.25;
}

.schedule-view-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 20px 18px;
}

.schedule-view-tabs {
  background: #ffffff;
}

.schedule-view-tabs .segment {
  min-height: 42px;
  padding-inline: 16px;
  color: var(--text);
  font-weight: 900;
}

.schedule-view-tabs .segment.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.schedule-calendar-panel {
  margin: 0 20px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255, 246, 239, 0.78), rgba(240, 249, 255, 0.84)),
    rgba(255, 255, 255, 0.92);
  overflow: hidden;
}

.schedule-calendar-panel .schedule-view-row,
.schedule-calendar-panel .schedule-table-wrap {
  margin: 0;
}

.schedule-calendar-panel .schedule-table {
  background: rgba(255, 255, 255, 0.78);
}

.schedule-inline-panel {
  display: grid;
  gap: 12px;
  margin: 0 20px 18px;
  padding: 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.schedule-inline-panel > .panel,
.schedule-inline-panel .admin-form {
  box-shadow: none;
}

.schedule-inline-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.schedule-edit-dialog {
  width: min(1040px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.schedule-edit-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.schedule-dialog-panel-loading {
  min-height: 240px;
}

.student-profile-dialog {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(88vh, 860px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.student-profile-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.student-profile-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(88vh, 860px);
  overflow: hidden;
  background: #ffffff;
}

.student-profile-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.student-profile-dialog-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.student-profile-dialog-head strong {
  color: var(--text);
  font-size: 20px;
}

.student-profile-dialog-head small {
  color: var(--muted);
  font-weight: 800;
}

.student-profile-dialog-body {
  display: block;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
  background: var(--bg);
}

.membership-balance-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(86vh, 720px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.membership-balance-dialog::backdrop {
  background: rgb(15 23 42 / 50%);
}

.membership-balance-panel {
  display: grid;
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #ffffff;
}

.membership-balance-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg);
}

.membership-balance-body p {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  line-height: 1.65;
}

.membership-balance-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.membership-balance-details span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.membership-balance-details strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.membership-balance-details small {
  color: var(--muted);
  font-weight: 800;
}

.membership-balance-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.schedule-conflict-dialog {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  border: 0;
  padding: 14px;
  background: rgb(15 23 42 / 50%);
}

.schedule-conflict-panel {
  display: grid;
  width: min(620px, calc(100vw - 28px));
  max-height: min(86vh, 720px);
  border-radius: 8px;
  overflow: auto;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.schedule-conflict-dialog-body {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg);
}

.schedule-conflict-dialog-body p {
  margin: 0;
  color: var(--text);
  font-weight: 850;
  line-height: 1.65;
}

.schedule-conflict-dialog-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-conflict-dialog-list li {
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 750;
  line-height: 1.5;
}

.schedule-conflict-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.student-profile-modal-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-profile-modal-hero > div:first-child {
  display: grid;
  gap: 5px;
}

.student-profile-modal-hero h2 {
  margin: 0;
  color: var(--text);
}

.student-profile-modal-hero span {
  color: var(--muted);
}

.student-profile-modal-metrics {
  margin: 0;
}

.student-profile-dialog-form {
  margin: 20px;
  box-shadow: none;
}

.student-profile-review-setting {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft, #f8fafc);
}

.student-profile-review-setting legend {
  padding: 0 6px;
  color: var(--text);
  font-weight: 800;
}

.student-profile-review-setting small {
  color: var(--muted);
  line-height: 1.5;
}

.student-profile-shared-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(300px, auto);
  align-items: center;
  gap: 15px;
  margin: 16px 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 8px;
  background: #ffffff;
}

.student-profile-shared-avatar {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--primary-text);
  background: var(--primary-soft);
  font-size: 23px;
  font-weight: 900;
}

.student-profile-shared-main {
  min-width: 0;
}

.student-profile-shared-main h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
}

.student-profile-shared-main p {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  line-height: 1.5;
}

.student-profile-shared-main .student-hero-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.student-profile-shared-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px 20px;
  min-width: 0;
  margin: 0;
}

.student-profile-shared-facts div {
  min-width: 0;
}

.student-profile-shared-facts dt {
  color: var(--muted);
  font-size: var(--font-caption);
}

.student-profile-shared-facts dd {
  margin: 3px 0 0;
  color: var(--text);
  line-height: 1.45;
  font-weight: 850;
}

.student-profile-domain-tabs {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 14px 20px 0;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-profile-domain-tabs button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}

.student-profile-domain-tabs button.active {
  color: var(--primary-text);
  border-color: var(--primary-border);
  border-color: color-mix(in srgb, var(--primary) 28%, white);
  background: var(--primary-soft);
}

.student-profile-domain-tabs [data-student-application-case-count]:not(:empty) {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary-soft);
  font-size: var(--font-caption);
}

.student-profile-domain-view {
  display: none;
  min-width: 0;
  gap: 16px;
  padding: 16px 20px 22px;
}

.student-profile-domain-view.active {
  display: grid;
}

.student-profile-domain-loading,
.student-profile-domain-error {
  min-height: 300px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px;
  text-align: center;
}

.student-profile-domain-error p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.student-profile-basic-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 16px;
}

.student-profile-basic-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.student-profile-basic-panel {
  min-width: 0;
  box-shadow: none;
}

.student-profile-basic-panel .section-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.student-profile-basic-panel .section-header h3,
.student-entitlement-section-head h3 {
  margin: 0;
}

.student-profile-basic-panel .section-header p,
.student-entitlement-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.student-profile-basic-panel .student-info-list {
  padding: 4px 16px;
}

.student-entitlement-overview {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.student-entitlement-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.student-entitlement-section-head .action-dialog-entry {
  flex: 0 0 auto;
}

.student-entitlement-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.student-entitlement-metrics > span {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-entitlement-metrics small,
.student-entitlement-primary small,
.student-entitlement-usage small,
.student-entitlement-transaction-list small {
  color: var(--muted);
}

.student-entitlement-metrics strong {
  font-size: 22px;
}

.student-entitlement-metrics strong.compact {
  font-size: 14px;
}

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

.student-entitlement-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-entitlement-card-head,
.student-entitlement-actions,
.student-entitlement-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.student-entitlement-card-head > span:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.student-entitlement-card-head strong {
  color: var(--text);
}

.student-entitlement-card-head small {
  color: var(--muted);
  line-height: 1.45;
}

.student-entitlement-primary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 14px;
}

.student-entitlement-primary strong {
  font-size: 22px;
}

.student-entitlement-usage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.student-entitlement-usage span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.student-entitlement-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.student-entitlement-actions {
  justify-content: flex-start;
  margin-top: 10px;
}

.student-entitlement-actions .action-dialog-entry {
  display: inline-flex;
}

.student-entitlement-actions .text-button,
.student-entitlement-actions .action-dialog-trigger {
  min-height: 30px;
  padding: 0;
  border: 0;
  color: var(--primary-text);
  background: transparent;
  font-weight: 850;
}

.text-button.danger-text,
.student-entitlement-actions .danger-text {
  color: #b42318;
}

.student-entitlement-transactions {
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}

.student-entitlement-inline-loading {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
}

.student-entitlement-transaction-list {
  display: grid;
}

.student-entitlement-transaction-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.student-entitlement-transaction-list > div:last-child {
  border-bottom: 0;
}

.student-entitlement-transaction-list > div > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.student-entitlement-transaction-list .positive {
  color: #067647;
  text-align: right;
}

.student-entitlement-transaction-list .negative {
  color: #b42318;
  text-align: right;
}

.student-entitlement-action-form {
  display: grid;
  gap: 14px;
}

.student-entitlement-accuracy-note {
  margin: 0;
}

.student-profile-event-history {
  display: grid;
  gap: 10px;
}

.student-profile-event-card {
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: #ffffff;
  box-shadow: none;
}

.student-profile-event-card:hover {
  border-color: var(--primary-border);
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--primary-soft) 46%, white);
}

.student-profile-event-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.student-profile-event-kind {
  color: var(--primary-text);
}

.student-profile-event-card strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--font-body);
}

.student-profile-event-card small {
  color: var(--muted);
  line-height: 1.55;
}

.student-profile-event-card em {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary-soft);
  font-style: normal;
  font-size: var(--font-caption);
  font-weight: 850;
}

@media (max-width: 900px) {
  .student-profile-shared-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .student-profile-shared-facts {
    grid-column: 1 / -1;
  }

  .student-profile-basic-workspace,
  .student-profile-basic-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-entitlement-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .student-profile-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .student-profile-dialog-panel {
    min-height: 100vh;
    max-height: 100vh;
  }

  .student-profile-shared-header {
    align-items: start;
    margin: 12px 12px 0;
    padding: 14px;
  }

  .student-profile-shared-avatar {
    width: 48px;
    height: 48px;
  }

  .student-profile-shared-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .student-profile-domain-tabs {
    margin: 12px 12px 0;
  }

  .student-profile-domain-view {
    padding: 12px 12px 22px;
  }

  .student-profile-dialog-form {
    margin: 14px;
  }

  .student-entitlement-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .student-entitlement-metrics,
  .student-entitlement-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-entitlement-transaction-list > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* 反馈管理仅用于平台超级管理员，不跟随当前机构上下文切换。 */
.platform-admin-tab-feedback {
  padding: 0;
  border: 0;
  background: transparent;
}

.platform-feedback-admin {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.platform-feedback-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 10px;
}

.platform-feedback-stats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.platform-feedback-stats button:hover,
.platform-feedback-stats button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.platform-feedback-stats button.active {
  box-shadow: inset 0 3px 0 var(--primary);
}

.platform-feedback-stats button > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-feedback-stats strong {
  font-size: var(--font-body);
}

.platform-feedback-stats small {
  color: var(--muted);
  font-size: var(--font-caption);
}

.platform-feedback-stats b {
  color: var(--primary-text);
  font-size: 24px;
}

.platform-feedback-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.platform-feedback-filters label,
.platform-feedback-reply-form label,
.platform-feedback-internal label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.platform-feedback-filters input,
.platform-feedback-filters select,
.platform-feedback-reply-form textarea,
.platform-feedback-internal select,
.platform-feedback-internal textarea {
  width: 100%;
  min-width: 0;
}

.platform-feedback-filters > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.platform-feedback-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 400px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.platform-feedback-table-panel,
.platform-feedback-detail {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.platform-feedback-panel-head,
.platform-feedback-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

.platform-feedback-panel-head > span,
.platform-feedback-detail-head > span:not(.platform-feedback-avatar) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.platform-feedback-panel-head h3,
.platform-feedback-detail-head h3,
.platform-feedback-detail h4 {
  margin: 0;
  font-size: 16px;
}

.platform-feedback-panel-head small,
.platform-feedback-detail-head small {
  color: var(--muted);
}

.platform-feedback-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.platform-feedback-table-wrap table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.platform-feedback-table-wrap th:nth-child(1) { width: 23%; }
.platform-feedback-table-wrap th:nth-child(2) { width: 19%; }
.platform-feedback-table-wrap th:nth-child(3) { width: 13%; }
.platform-feedback-table-wrap th:nth-child(4) { width: 11%; }
.platform-feedback-table-wrap th:nth-child(5) { width: 11%; }
.platform-feedback-table-wrap th:nth-child(6) { width: 12%; }
.platform-feedback-table-wrap th:nth-child(7) { width: 11%; }

.platform-feedback-table-wrap th,
.platform-feedback-table-wrap td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: var(--font-small);
}

.platform-feedback-table-wrap th {
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--font-caption);
  white-space: nowrap;
}

.platform-feedback-table-wrap tr.selected td {
  background: var(--primary-soft);
}

.platform-feedback-table-wrap td > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-feedback-table-wrap td:first-child {
  min-width: 0;
}

.platform-feedback-table-wrap td:nth-child(2) {
  min-width: 0;
}

.platform-feedback-table-wrap td small {
  color: var(--muted);
}

.platform-feedback-table-wrap td:last-child {
  padding-inline: 6px;
}

.platform-feedback-table-wrap td:last-child .compact {
  padding-inline: 8px;
  white-space: nowrap;
}

.platform-feedback-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  color: var(--muted);
  font-size: var(--font-small);
}

.platform-feedback-pagination > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.platform-feedback-detail {
  position: sticky;
  top: 12px;
}

.platform-feedback-detail-head {
  justify-content: flex-start;
}

.platform-feedback-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 900;
}

.platform-feedback-detail-scroll {
  display: grid;
  max-height: min(72vh, 820px);
  overflow-y: auto;
}

.platform-feedback-detail-scroll > section {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 15px;
  border-bottom: 1px solid var(--line);
}

.platform-feedback-detail-scroll > section:last-child {
  border-bottom: 0;
}

.feedback-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feedback-detail-badges > span:not(.feedback-status-pill):not(.feedback-impact-pill) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #526074;
  font-size: var(--font-caption);
  font-weight: 900;
}

.feedback-impact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #526074;
  font-size: var(--font-caption);
  font-weight: 900;
  white-space: nowrap;
}

.feedback-impact-pill.partial {
  background: #fff6d8;
  color: #8a5a00;
}

.feedback-impact-pill.blocked {
  background: #fff0ee;
  color: #b42318;
}

.platform-feedback-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.platform-feedback-context > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.platform-feedback-context dt {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.platform-feedback-context dd {
  min-width: 0;
  margin: 0;
  font-size: var(--font-small);
  overflow-wrap: break-word;
}

.platform-feedback-reply-form,
.platform-feedback-internal form {
  display: grid;
  gap: 9px;
}

.platform-feedback-reply-form > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
}

.platform-feedback-reply-form button,
.platform-feedback-internal button {
  justify-self: end;
}

.platform-feedback-internal {
  background: #f8fafc;
}

@media (max-width: 1180px) {
  .platform-feedback-stats {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .platform-feedback-filters {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .platform-feedback-filters > div {
    align-self: stretch;
    justify-content: flex-end;
    align-items: end;
  }

  .platform-feedback-content {
    grid-template-columns: 1fr;
  }

  .platform-feedback-detail {
    position: static;
  }

  .platform-feedback-detail-scroll {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 760px) {
  .platform-feedback-stats,
  .platform-feedback-filters,
  .platform-feedback-context {
    grid-template-columns: 1fr 1fr;
  }

  .platform-feedback-filters .search,
  .platform-feedback-filters > div {
    grid-column: 1 / -1;
  }

  .platform-feedback-filters > div {
    justify-content: stretch;
  }

  .platform-feedback-filters > div > * {
    flex: 1 1 130px;
  }
}

@media (max-width: 560px) {
  .platform-feedback-filters,
  .platform-feedback-context {
    grid-template-columns: 1fr;
  }

  .platform-feedback-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-feedback-filters .search,
  .platform-feedback-filters > div {
    grid-column: auto;
  }

  .platform-feedback-stats button {
    min-height: 62px;
  }

  .platform-feedback-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .platform-feedback-pagination a,
  .platform-feedback-reply-form button,
  .platform-feedback-internal button {
    width: 100%;
  }
}

.schedule-dialog-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(86vh, 820px);
  overflow: hidden;
  background: #ffffff;
}

.schedule-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.schedule-dialog-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.schedule-dialog-head strong {
  color: var(--text);
  font-size: 20px;
}

.schedule-dialog-head small {
  color: var(--muted);
  font-weight: 800;
}

.schedule-dialog-panel .admin-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  max-width: none;
  max-height: calc(min(86vh, 820px) - 82px);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.schedule-action-dialog {
  width: min(1120px, calc(100vw - 28px));
}

.schedule-edit-dialog:has(.schedule-editor-shell) {
  width: min(1120px, calc(100vw - 28px));
}

.schedule-action-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: #f8fafc;
}

.schedule-action-shell.with-unified-actions {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.schedule-action-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.schedule-action-summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-action-summary strong {
  color: var(--muted);
  font-size: 12px;
}

.schedule-action-summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-action-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.schedule-action-tab {
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.schedule-action-tab.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.schedule-action-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 18px 20px;
  overflow: auto;
}

.schedule-action-footer {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
}

.schedule-action-footer-message {
  flex: 1 1 260px;
  min-width: 0;
}

.schedule-action-footer-message:empty {
  display: none;
}

.schedule-action-footer .row-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-left: auto;
}

.schedule-action-task-form,
.schedule-action-feedback-form {
  margin: 0;
}

.schedule-create-task-button {
  justify-self: start;
}

.schedule-editor-action-body {
  padding: 18px 20px 0;
}

.schedule-action-section {
  display: grid;
  gap: 14px;
}

.class-session-member-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.class-session-member-summary span,
.class-session-member-option {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.class-session-member-summary span {
  display: grid;
  gap: 4px;
}

.class-session-member-summary strong,
.class-session-member-option span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-session-member-summary small,
.class-session-member-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-session-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.class-session-member-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.class-session-member-preview {
  margin-top: 0;
}

.schedule-editor-scroll {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 18px 20px;
  overflow: auto;
  background: #f8fafc;
  scroll-behavior: smooth;
}

.schedule-editor-action-body .schedule-editor-scroll {
  padding: 0 0 18px;
}

.schedule-editor-scroll.without-index {
  grid-template-columns: minmax(0, 1fr);
}

.schedule-editor-main {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.schedule-editor-index {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  gap: 6px;
  max-height: calc(min(86vh, 820px) - 132px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.schedule-editor-index strong {
  margin-bottom: 2px;
  color: var(--text);
  font-size: 13px;
}

.schedule-editor-index button {
  min-height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.schedule-editor-index button:hover,
.schedule-editor-index button:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: none;
}

.schedule-editor-section,
.schedule-task-link-editor,
.schedule-post-feedback-panel {
  scroll-margin-top: 12px;
}

.schedule-editor-section,
.schedule-task-link-editor,
.schedule-post-feedback-panel {
  border-radius: 8px;
}

.schedule-editor-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.schedule-editor-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.schedule-editor-section-head strong {
  color: var(--text);
  font-size: 16px;
}

.schedule-editor-teacher-field {
  max-width: 50%;
}

.schedule-editor-form .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-editor-form .form-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.schedule-time-grid label {
  min-width: 0;
}

.readonly-field.compact {
  min-height: 62px;
}

.readonly-field.compact small {
  display: none;
}

.schedule-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06);
}

.schedule-editor-form.task-tab-active .schedule-editor-actions {
  border-top: 0;
}

.schedule-task-picker {
  display: grid;
  gap: 8px;
}

.schedule-task-picker select[multiple] {
  min-height: 132px;
  padding: 10px;
}

.schedule-task-picker small {
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 760px) {
  .schedule-edit-dialog {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .schedule-dialog-panel {
    max-height: 100vh;
  }

  .schedule-dialog-panel .admin-form {
    max-height: calc(100vh - 76px);
  }

  .schedule-action-dialog {
    width: 100vw;
  }

  .schedule-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 14px;
  }

  .schedule-action-tabs {
    overflow-x: auto;
    padding: 10px 14px;
  }

  .schedule-action-tab {
    flex: 0 0 auto;
  }

  .schedule-action-body {
    padding: 14px;
  }

  .schedule-action-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px;
  }

  .schedule-action-footer-message {
    flex-basis: auto;
  }

  .schedule-action-footer .row-actions {
    justify-content: stretch;
    margin-left: 0;
  }

  .schedule-action-footer button {
    flex: 1 1 auto;
  }

  .schedule-task-link-grid {
    grid-template-columns: 1fr;
  }

  .schedule-editor-scroll {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .schedule-editor-index {
    display: none;
  }

  .schedule-editor-form .form-grid.two,
  .schedule-editor-form .form-grid.five,
  .schedule-target-mode,
  .schedule-task-link-grid {
    grid-template-columns: 1fr;
  }

  .schedule-class-member-head {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-editor-teacher-field {
    max-width: none;
  }

  .schedule-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-editor-actions .row-actions {
    justify-content: stretch;
  }

  .schedule-editor-actions button {
    flex: 1 1 auto;
  }
}

.schedule-table-wrap {
  margin: 0 20px 20px;
  overflow: auto;
}

.schedule-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.schedule-table th,
.schedule-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.schedule-table th {
  background: #eef3f8;
  color: #53647a;
  font-size: 13px;
  font-weight: 900;
}

.schedule-table td {
  color: var(--text);
  line-height: 1.45;
}

.schedule-table td strong,
.schedule-table td small {
  display: block;
}

.schedule-table td small {
  margin-top: 3px;
  color: var(--muted);
}

.schedule-table tbody tr.has-conflict {
  background: #fff1f2;
  box-shadow: inset 4px 0 0 #ef4444;
}

.schedule-table tbody tr.has-conflict td {
  border-color: #fecdd3;
}

.schedule-table tbody tr.schedule-row-status-cancelled {
  background: #f8fafc;
  color: #64748b;
}

.schedule-table tbody tr.schedule-row-status-cancelled td {
  opacity: 0.72;
}

.schedule-table tbody tr.schedule-row-status-cancelled td:nth-child(3) strong {
  text-decoration: line-through;
}

.schedule-table tbody tr.schedule-row-status-rescheduled {
  background: var(--primary-soft);
}

.schedule-table tbody tr.schedule-row-status-completed {
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--primary) 7%, #ffffff);
}

.schedule-status-pill,
.empty-task-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-status-pill.rescheduled {
  background: #fef3c7;
  color: #92400e;
}

.schedule-status-pill.completed {
  background: #ecfdf5;
  color: var(--green);
}

.schedule-status-pill.cancelled {
  background: #f1f5f9;
  color: #64748b;
}

.schedule-status-pill.pending {
  background: #fff7ed;
  color: #9a3412;
}

.schedule-status-pill.approved {
  background: #dcfce7;
  color: #166534;
}

.schedule-status-pill.rejected {
  background: #fee2e2;
  color: #991b1b;
}

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

.schedule-request-filter {
  width: fit-content;
}

.request-origin-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.request-origin-card span,
.request-origin-card small {
  color: var(--muted);
}

.request-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.empty-task-pill {
  background: #f1f5f9;
  color: var(--muted);
}

.schedule-task-cell,
.schedule-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.schedule-row-actions .secondary-button,
.schedule-row-actions .danger-button {
  min-height: 36px;
  padding: 7px 12px;
}

.schedule-stat-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.schedule-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.schedule-stat-row[data-launch] {
  cursor: pointer;
}

.schedule-stat-row[data-launch]:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.schedule-stat-row[data-launch]::after {
  content: "›";
  color: var(--muted);
  font-weight: 900;
}

.schedule-stat-list span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.membership-risk-list {
  margin-top: 14px;
}

.membership-risk-list > strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.schedule-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: -4px;
}

.schedule-active-filters span,
.schedule-active-filters strong {
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.schedule-active-filters strong {
  background: #ecfdf5;
  color: #146052;
}

.role-schedule-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.role-schedule-head > div {
  display: grid;
  gap: 4px;
}

.role-schedule-head span,
.schedule-agenda-date span,
.personal-schedule-card span,
.personal-schedule-card small {
  color: var(--muted);
  line-height: 1.4;
}

.role-chip {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.student-type-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.student-type-chip.formal {
  background: #f0fdf4;
  color: #166534;
}

.student-type-chip.self_study {
  background: #fff7ed;
  color: #9a3412;
}

.schedule-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.schedule-summary-grid > span,
.schedule-summary-grid > button {
  display: grid;
  gap: 3px;
  min-height: 62px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

.schedule-summary-grid > button {
  cursor: pointer;
  font-family: inherit;
  transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.schedule-summary-grid > button:hover,
.schedule-summary-grid > button.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.schedule-summary-grid > button:hover strong,
.schedule-summary-grid > button.active strong {
  color: var(--primary-text);
}

.schedule-summary-grid > button:focus-visible {
  outline: 3px solid var(--primary-shadow);
  outline-offset: 2px;
}

.student-task-filter-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.schedule-summary-grid strong {
  color: var(--text);
  font-size: 22px;
}

.schedule-agenda {
  display: grid;
  gap: 12px;
}

.schedule-agenda-day {
  display: grid;
  gap: 8px;
}

.schedule-agenda-date {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  min-height: 34px;
}

.schedule-agenda-list {
  display: grid;
  gap: 8px;
}

.personal-schedule-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.personal-schedule-card > div {
  display: grid;
  gap: 4px;
}

.schedule-post-lesson-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-post-lesson-status span {
  width: fit-content;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.personal-schedule-feedback {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.personal-schedule-feedback strong {
  color: var(--primary-text);
}

.schedule-task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schedule-task-chips > span,
.task-chip {
  width: fit-content;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.task-chip {
  border: 1px solid var(--line);
  color: var(--primary);
}

.role-schedule-timeline {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.batch-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 14px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background: #f0fdfa;
}

.schedule-batch-bar {
  position: sticky;
  bottom: 14px;
  z-index: 24;
  margin: 20px;
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(240, 253, 250, 0.96);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
}

.batch-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.batch-head > div:first-child {
  display: grid;
  gap: 4px;
}

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

.schedule-picker-list {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
}

.schedule-pick-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 400;
}

.schedule-pick-row input {
  min-height: 18px;
  margin-top: 2px;
}

.schedule-pick-row span {
  display: grid;
  gap: 4px;
}

.schedule-pick-row small {
  color: var(--muted);
  line-height: 1.35;
}

.schedule-batch-form {
  padding-bottom: 0;
  border-bottom: 0;
}

.schedule-select-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 900;
}

.schedule-select-control input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.schedule-select-control.floating {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.schedule-select-control.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.batch-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.batch-action-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.batch-action-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary-shadow);
}

.batch-action-option input {
  margin-top: 2px;
}

.batch-action-option span,
.batch-selected-preview,
.batch-selected-list {
  display: grid;
  gap: 4px;
}

.batch-action-option small,
.batch-selected-preview span,
.batch-selected-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.batch-selected-preview {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.batch-preview-panel {
  display: grid;
  gap: 10px;
}

.batch-preview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.batch-preview-metrics span {
  display: grid;
  gap: 2px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.batch-preview-metrics strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.batch-preview-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 3px;
}

.batch-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.batch-preview-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.batch-preview-row small {
  color: var(--muted);
  line-height: 1.35;
}

.batch-preview-change {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-text) !important;
  font-weight: 800;
}

.batch-preview-row.status-ready,
.batch-preview-row.status-ready_with_conflict {
  border-color: rgba(16, 185, 129, 0.28);
  background: #f0fdf4;
}

.batch-preview-row.status-conflict {
  border-color: rgba(245, 158, 11, 0.38);
  background: #fffbeb;
}

.batch-preview-row.status-failed {
  border-color: rgba(239, 68, 68, 0.34);
  background: #fef2f2;
}

.batch-action-fields[hidden] {
  display: none;
}

.status-box {
  min-height: 42px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.status-box.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: var(--green);
}

.schedule-import-loading {
  display: grid;
  gap: 4px;
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.schedule-import-loading span {
  color: #475569;
}

.import-result-box {
  margin: 10px 0;
}

.import-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.import-stats span {
  display: grid;
  gap: 2px;
  min-height: 40px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 800;
}

.import-stats strong {
  font-size: 16px;
}

.import-template-help {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.import-template-help summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

.import-template-grid {
  display: grid;
  gap: 8px;
  margin: 10px 0 8px;
}

.import-template-grid code {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  white-space: normal;
}

.import-confirm-form {
  margin-top: 12px;
}

.import-preview-table-wrap {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.import-preview-table {
  width: 100%;
  min-width: 1220px;
  border-collapse: collapse;
}

.import-preview-table th,
.import-preview-table td {
  padding: 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.import-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.import-preview-table input,
.import-preview-table select {
  width: 100%;
  min-height: 36px;
  font-size: 13px;
}

.import-preview-row.invalid {
  background: #fff1f2;
}

.import-preview-row.duplicate {
  background: #fffbeb;
}

.import-time-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.import-student-picker {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.import-student-picker input {
  min-width: 0;
}

.import-row-flags {
  min-width: 190px;
}

.import-flag-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.import-flag-list span,
.import-mark {
  width: fit-content;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-weight: 900;
}

.import-mark {
  display: inline-flex;
  margin-top: 5px;
}

.import-mark.warn {
  background: #fff7ed;
  color: #9a3412;
}

.import-mark.ok {
  background: #ecfdf5;
  color: #047857;
}

.import-match-list {
  display: grid;
  gap: 14px;
}

.import-match-group {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  padding: 12px;
}

.import-match-group legend {
  padding: 0 6px;
  color: var(--muted);
  font-weight: 900;
}

.import-match-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.import-match-option span {
  display: grid;
  gap: 2px;
}

.compact-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}

.import-preview-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.import-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 400;
}

.import-row input {
  min-height: 18px;
  margin-top: 2px;
}

.import-row span {
  display: grid;
  gap: 4px;
}

.import-row small {
  color: var(--muted);
  line-height: 1.4;
}

.import-row.invalid {
  border-color: #fecaca;
  background: #fff1f2;
}

.import-row.ready {
  border-color: #bbf7d0;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.timeline-kind {
  width: fit-content;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.mini-grid span {
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 700;
}

.platform-admin-panel {
  display: grid;
  gap: 16px;
}

.platform-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 14px;
}

.student-membership-commerce {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.student-membership-commerce-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.student-membership-commerce-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  background: #ffffff;
}

.student-membership-commerce-summary strong {
  color: var(--ink);
  font-size: 22px;
}

.student-membership-commerce-summary small {
  color: var(--muted);
  font-weight: 700;
}

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

.student-membership-commerce-form,
.student-membership-generated-codes,
.student-membership-commerce-list {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-membership-commerce-form .primary-button {
  width: fit-content;
}

.student-membership-generated-codes {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.student-membership-generated-codes textarea {
  max-height: 240px;
  resize: vertical;
  background: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.6;
}

.student-membership-commerce-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.student-membership-commerce-table-wrap table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.student-membership-commerce-table-wrap th,
.student-membership-commerce-table-wrap td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.student-membership-commerce-table-wrap th {
  color: var(--muted);
  font-size: var(--font-caption);
}

.student-membership-commerce-table-wrap td > span:not(.badge) {
  display: grid;
  gap: 3px;
}

.student-membership-commerce-table-wrap td small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.student-membership-redeem-page {
  display: grid;
  gap: 18px;
  width: min(1120px, 100%);
  margin-inline: auto;
}

.student-membership-redeem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.student-membership-redeem-form,
.student-membership-redeem-guide,
.student-membership-redeem-success {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-membership-redeem-form > .primary-button {
  width: fit-content;
}

.student-membership-redeem-beneficiary {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.student-membership-redeem-beneficiary small,
.student-membership-redeem-beneficiary span,
.student-membership-redeem-guide p,
.student-membership-redeem-guide li small {
  color: var(--muted);
}

.student-membership-redeem-guide ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.student-membership-redeem-guide li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.student-membership-redeem-guide li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 900;
}

.student-membership-redeem-guide li > div {
  display: grid;
  gap: 3px;
}

.student-membership-redeem-support {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.student-membership-redeem-success {
  grid-template-columns: 42px minmax(0, 1fr);
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.student-membership-redeem-success-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
}

.student-membership-redeem-success > div {
  display: grid;
  gap: 4px;
}

.student-membership-redeem-success p {
  margin: 0;
  color: var(--text);
}

.student-membership-redeem-success small {
  color: var(--muted);
}

@media (max-width: 900px) {
  .student-membership-commerce-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-membership-commerce-forms,
  .student-membership-redeem-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .student-membership-commerce-summary {
    grid-template-columns: 1fr;
  }

  .student-membership-commerce-form,
  .student-membership-generated-codes,
  .student-membership-commerce-list,
  .student-membership-redeem-form,
  .student-membership-redeem-guide {
    padding: 12px;
  }

  .student-membership-commerce-form .primary-button,
  .student-membership-redeem-form > .primary-button,
  .student-membership-generated-codes .row-actions > *,
  .student-membership-redeem-page .section-header > .secondary-button {
    width: 100%;
    justify-content: center;
  }
}

.platform-card,
.tenant-list-panel,
.tenant-members-panel,
.invitation-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-card-head,
.tenant-card,
.tenant-member-row,
.tenant-invitation-row,
.tenant-trial-row,
.tenant-trial-invite {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.platform-card-head span,
.tenant-card span,
.tenant-member-row > span,
.tenant-invitation-row > span,
.tenant-trial-row > span,
.tenant-trial-invite > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-card-head small,
.tenant-card small,
.tenant-member-row small,
.tenant-invitation-row small,
.tenant-trial-row small,
.tenant-trial-invite small,
.platform-card > small {
  color: var(--muted);
}

.platform-card-head strong,
.tenant-card strong,
.tenant-member-row strong,
.tenant-invitation-row strong,
.tenant-trial-row strong,
.tenant-trial-invite strong {
  color: var(--text);
}

.platform-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
}

.platform-metric-grid span {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.platform-metric-grid strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.platform-quick-actions {
  gap: 14px;
}

.platform-quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.platform-quick-action {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: inherit;
  text-decoration: none;
}

.platform-quick-action:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.platform-quick-action strong {
  color: var(--text);
}

.platform-quick-action small {
  color: var(--muted);
}

.platform-tenant-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.tenant-list-grid {
  display: grid;
  gap: 10px;
}

.tenant-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-card.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.platform-tenant-context-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(38, 48, 68, 0.04);
}

.platform-tenant-context-main {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.platform-tenant-context-icon {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.platform-tenant-context-icon::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 15px;
  height: 21px;
  border: 2px solid var(--primary);
  border-radius: 4px 4px 2px 2px;
  background: #ffffff;
}

.platform-tenant-context-icon::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
  box-shadow:
    6px 0 0 var(--primary),
    0 6px 0 var(--primary),
    6px 6px 0 var(--primary),
    3px 12px 0 var(--primary);
}

.platform-tenant-context-main > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-tenant-context-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.platform-tenant-context-main strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.platform-tenant-context-main em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}

.platform-tenant-context-meta,
.platform-tenant-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.platform-tenant-context-meta span {
  max-width: 220px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.platform-tenant-switcher-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.platform-tenant-switcher-list {
  display: grid;
  gap: 8px;
}

.platform-tenant-switcher-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-tenant-switcher-row.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.platform-tenant-switcher-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-tenant-switcher-row strong {
  color: var(--text);
}

.platform-tenant-switcher-row small {
  color: var(--muted);
}

.tenant-trial-panel {
  display: grid;
  gap: 14px;
}

.tenant-trial-form {
  gap: 14px;
}

.tenant-trial-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tenant-trial-options .inline-toggle {
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-trial-actions,
.tenant-trial-result .tenant-onboarding-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.tenant-trial-invite,
.tenant-trial-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-trial-invite small {
  word-break: break-all;
}

.tenant-trial-list {
  display: grid;
  gap: 10px;
}

.tenant-trial-row.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.tenant-convert-dialog .action-dialog-panel {
  width: min(720px, calc(100vw - 32px));
}

.tenant-convert-form {
  display: grid;
  gap: 12px;
}

.tenant-convert-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-convert-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.tenant-convert-summary small {
  color: var(--muted);
}

.tenant-convert-effects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tenant-convert-effects span {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-convert-effects strong {
  color: var(--text);
  font-weight: 900;
}

.tenant-convert-effects small {
  color: var(--muted);
  line-height: 1.45;
}

.tenant-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tenant-card-editing {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) auto;
  align-items: end;
}

.tenant-card-editing label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.tenant-resource-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tenant-public-registration-toggle {
  min-height: 52px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-resource-summary {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  margin-top: 4px;
}

.tenant-member-add-form,
.tenant-invitation-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.5fr) auto;
  gap: 10px;
  align-items: end;
}

.tenant-invitation-form {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.5fr) minmax(120px, 0.35fr) minmax(160px, 0.45fr) auto;
}

.tenant-onboarding-admin-grid,
.tenant-onboarding-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tenant-existing-user-toggle {
  grid-column: span 2;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-onboarding-result {
  display: grid;
  gap: 12px;
}

.tenant-onboarding-result-grid span {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-onboarding-result-grid small {
  color: var(--muted);
}

.tenant-onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.tenant-billing-panel {
  display: grid;
  gap: 12px;
}

.tenant-ai-points-panel {
  display: grid;
  gap: 12px;
}

.tenant-ai-points-tabs {
  width: max-content;
  max-width: 100%;
}

.tenant-ai-point-ledger-view,
.tenant-ai-point-grants-view {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tenant-ai-point-ledger-filters {
  display: grid;
  grid-template-columns: minmax(130px, 0.65fr) minmax(190px, 1fr) repeat(3, minmax(150px, 0.8fr));
  gap: 10px;
  align-items: end;
}

.tenant-ai-point-ledger-filters > label:not(.inline-toggle) {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.tenant-ai-point-ledger-filters input,
.tenant-ai-point-ledger-filters select {
  min-width: 0;
  width: 100%;
}

.tenant-ai-point-high-filter {
  min-height: 46px;
  align-self: end;
}

.tenant-ai-point-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}

.tenant-ai-point-ledger-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 180px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  text-align: center;
}

.tenant-ai-point-ledger-state.error {
  border-color: #fecaca;
  background: #fff7f7;
  color: #991b1b;
}

.tenant-ai-point-ledger-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-ai-point-ledger-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: fixed;
}

.tenant-ai-point-ledger-table th,
.tenant-ai-point-ledger-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  vertical-align: middle;
}

.tenant-ai-point-ledger-table th {
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tenant-ai-point-ledger-table th:nth-child(1) { width: 140px; }
.tenant-ai-point-ledger-table th:nth-child(2) { width: 130px; }
.tenant-ai-point-ledger-table th:nth-child(3) { width: 170px; }
.tenant-ai-point-ledger-table th:nth-child(4) { width: 130px; }
.tenant-ai-point-ledger-table th:nth-child(5) { width: 170px; }
.tenant-ai-point-ledger-table th:nth-child(6) { width: 100px; }
.tenant-ai-point-ledger-table th:nth-child(7) { width: 90px; }
.tenant-ai-point-ledger-table th:nth-child(8) { width: 80px; }

.tenant-ai-point-ledger-table td strong,
.tenant-ai-point-ledger-table td small {
  display: block;
}

.tenant-ai-point-ledger-table td small {
  margin-top: 2px;
  color: var(--muted);
  overflow-wrap: break-word;
}

.tenant-ai-point-ledger-table tbody tr:last-child td {
  border-bottom: 0;
}

.ai-point-ledger-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ai-point-ledger-status.settled {
  background: #ecfdf5;
  color: #047857;
}

.ai-point-ledger-status.reserved {
  background: #fff7ed;
  color: #b45309;
}

.ai-point-ledger-status.released,
.ai-point-ledger-status.expired {
  background: #f1f5f9;
  color: #64748b;
}

.ai-point-ledger-points {
  color: var(--text);
  white-space: nowrap;
}

.ai-point-ledger-points.settled {
  color: #047857;
}

.ai-point-ledger-points.reserved {
  color: #b45309;
}

.ai-point-ledger-detail-row td {
  padding: 0;
  background: #f8fafc;
}

.ai-point-ledger-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 14px;
}

.ai-point-ledger-detail > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-point-ledger-detail dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.ai-point-ledger-detail dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.tenant-ai-point-ledger-mobile-list {
  display: none;
}

.tenant-ai-point-ledger-pagination {
  margin-top: 0;
}

.tenant-ai-point-grant-form {
  grid-template-columns: minmax(180px, 0.6fr) minmax(240px, 1fr) auto;
  align-items: end;
}

.tenant-ai-point-grant-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.tenant-ai-point-grant-form .primary-button {
  width: max-content;
}

@media (max-width: 1100px) {
  .tenant-ai-point-ledger-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tenant-ai-point-ledger-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tenant-ai-point-user-search,
  .tenant-ai-point-filter-actions {
    grid-column: 1 / -1;
  }

  .tenant-ai-point-ledger-table-wrap {
    display: none;
  }

  .tenant-ai-point-ledger-mobile-list {
    display: grid;
    gap: 8px;
  }

  .tenant-ai-point-ledger-mobile-item {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
  }

  .tenant-ai-point-ledger-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .tenant-ai-point-ledger-mobile-head > span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .tenant-ai-point-ledger-mobile-head small {
    color: var(--muted);
  }

  .tenant-ai-point-ledger-mobile-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12px;
  }

  .tenant-ai-point-ledger-mobile-meta > span:not(.ai-point-ledger-status) {
    padding-right: 6px;
    border-right: 1px solid var(--line);
  }

  .tenant-ai-point-ledger-mobile-item > .secondary-button {
    width: max-content;
  }

  .ai-point-ledger-detail {
    grid-template-columns: 1fr;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .tenant-ai-points-tabs {
    width: 100%;
  }

  .tenant-ai-points-tabs .segment {
    flex: 1 1 0;
  }

  .tenant-ai-point-ledger-filters {
    grid-template-columns: 1fr;
  }

  .tenant-ai-point-user-search,
  .tenant-ai-point-filter-actions {
    grid-column: auto;
  }

  .tenant-ai-point-filter-actions > button {
    flex: 1 1 120px;
  }
}

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

.tenant-billing-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tenant-billing-meta span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-billing-meta small,
.tenant-invoice-row small,
.tenant-event-row small {
  color: var(--muted);
}

.tenant-billing-actions,
.tenant-invoice-row,
.tenant-event-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.tenant-invoice-list,
.tenant-event-list {
  display: grid;
  gap: 8px;
}

.tenant-invoice-row,
.tenant-event-row {
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-invoice-row > span,
.tenant-event-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tenant-config-panel {
  display: grid;
  gap: 12px;
}

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

.tenant-config-module-list {
  display: grid;
  gap: 8px;
}

.tenant-config-module-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.65fr) minmax(160px, 0.7fr) 96px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-config-module-row label,
.tenant-feature-item {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.inline-toggle,
.tenant-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.platform-tenant-form label.inline-toggle,
.tenant-config-module-row label.inline-toggle,
.tenant-role-permission-row label.inline-toggle {
  display: flex;
  align-items: center;
}

.inline-toggle span,
.tenant-feature-item span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.inline-toggle strong,
.tenant-feature-item strong {
  color: var(--text);
}

.inline-toggle small,
.tenant-feature-item small {
  color: var(--muted);
}

.tenant-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tenant-feature-item {
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-config-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.platform-card-head.inline {
  padding: 0;
  border: 0;
}

.tenant-branding-grid,
.tenant-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tenant-rule-section {
  display: grid;
  gap: 10px;
}

.tenant-rule-section + .tenant-rule-section {
  margin-top: 14px;
}

.tenant-branding-grid label,
.tenant-rule-item {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.brand-theme-picker {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brand-theme-picker legend {
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.brand-theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.brand-theme-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.brand-theme-option input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.brand-theme-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid var(--swatch-color);
  border: 1px solid color-mix(in srgb, var(--swatch-color) 42%, #ffffff);
  border-radius: 8px;
  background: var(--swatch-color);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--swatch-color) 24%, #ffffff), var(--swatch-color));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px var(--primary-shadow);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px color-mix(in srgb, var(--swatch-color) 18%, transparent);
}

.brand-theme-option strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 860;
  line-height: 1.2;
}

.brand-theme-option:hover,
.brand-theme-option:has(input:focus-visible) {
  border-color: var(--primary-border);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.brand-theme-option:has(input:checked) {
  border-color: var(--swatch-color);
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--swatch-color) 10%, #ffffff);
  box-shadow: 0 0 0 2px var(--primary-shadow), 0 10px 22px var(--primary-shadow);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch-color) 18%, transparent), 0 10px 22px color-mix(in srgb, var(--swatch-color) 12%, transparent);
}

.brand-theme-option:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--swatch-color);
}

.brand-theme-picker:disabled .brand-theme-option,
.brand-theme-option:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.68;
}

.tenant-rule-item {
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-rule-item span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.tenant-rule-item strong {
  color: var(--text);
}

.tenant-rule-item small {
  color: var(--muted);
}

.platform-service-page,
.platform-service-admin-panel {
  display: grid;
  gap: 16px;
}

.platform-service-hero,
.platform-service-market-panel,
.platform-service-bookings-panel,
.platform-service-booking-form {
  display: grid;
  gap: 14px;
}

.platform-service-summary-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.platform-service-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.platform-service-card,
.platform-service-booking-row,
.platform-service-admin-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-service-card {
  align-content: start;
}

.platform-service-card-head,
.platform-service-booking-row,
.platform-service-admin-row,
.platform-service-resource-line,
.platform-service-booking-side {
  min-width: 0;
}

.platform-service-card-head,
.platform-service-admin-row,
.platform-service-booking-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.platform-service-card-head span,
.platform-service-resource-line,
.platform-service-booking-main,
.platform-service-admin-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-service-card-head small,
.platform-service-resource-line small,
.platform-service-card p,
.platform-service-booking-main small,
.platform-service-admin-row small {
  color: var(--muted);
}

.platform-service-card-head strong,
.platform-service-resource-line strong,
.platform-service-booking-main strong,
.platform-service-admin-row strong {
  color: var(--text);
}

.platform-service-card p,
.platform-service-booking-main p {
  margin: 0;
  line-height: 1.55;
}

.platform-service-tag-row,
.platform-service-booking-side .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.platform-service-tag-row span {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.platform-service-card-meta,
.platform-service-admin-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.platform-service-admin-metrics {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.platform-service-card-meta span,
.platform-service-admin-metrics span {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 9px;
  border-radius: 8px;
  background: #f8fafc;
}

.platform-service-card-meta strong,
.platform-service-admin-metrics strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.platform-service-card-meta small,
.platform-service-admin-metrics small {
  color: var(--muted);
}

.platform-service-booking-list,
.platform-service-admin-list {
  display: grid;
  gap: 10px;
}

.platform-service-booking-main {
  flex: 1 1 420px;
}

.platform-service-booking-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

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

.platform-service-admin-form {
  align-content: start;
}

.platform-service-admin-list-card {
  align-content: start;
  max-height: 560px;
  overflow: auto;
}

.platform-service-admin-row {
  align-items: center;
}

.platform-teacher-workbench {
  display: grid;
  gap: 16px;
}

.platform-teacher-hero,
.platform-teacher-section,
.platform-teacher-empty {
  display: grid;
  gap: 14px;
}

.platform-teacher-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.platform-teacher-list {
  display: grid;
  gap: 10px;
}

.platform-teacher-row {
  display: grid;
  grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--teacher-card-accent, var(--primary));
  border-radius: 8px;
  background: var(--teacher-card-bg, #ffffff);
}

.platform-teacher-row.todo.overdue {
  border-color: #fecaca;
  border-left-color: #ef4444;
  background: #fff7f7;
}

.platform-teacher-row.notification.unread {
  border-left-color: var(--primary);
}

.platform-teacher-row-time,
.platform-teacher-row-main,
.platform-teacher-row-side {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-teacher-row-main strong,
.platform-teacher-row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-teacher-row-time strong,
.platform-teacher-row-main strong {
  color: var(--text);
  font-weight: 900;
}

.platform-teacher-row-time small,
.platform-teacher-row-main small {
  color: var(--muted);
}

.platform-teacher-row-side {
  justify-items: end;
}

.platform-teacher-color-field {
  display: grid;
  gap: 7px;
}

.platform-teacher-color-field > span {
  color: var(--text);
  font-weight: 800;
}

.platform-teacher-color-swatches {
  align-items: center;
}

.platform-teacher-auto-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.platform-teacher-auto-color.active,
.platform-teacher-auto-color:has(input:checked),
.teacher-color-swatch:has(input:checked) {
  border-color: #172033;
  box-shadow: 0 0 0 3px rgba(23, 32, 51, 0.08);
}

.platform-material-page,
.platform-material-admin,
.platform-material-admin-grid,
.platform-material-tenant-list,
.platform-material-side-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.platform-material-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.platform-material-summary span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
}

.platform-material-summary small,
.platform-material-summary em,
.platform-material-table-title small,
.platform-material-package-tile small,
.platform-material-side-section h4 + .notice,
.platform-material-detail-block p {
  color: var(--muted);
}

.platform-material-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.platform-material-summary em {
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
}

.platform-material-admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-material-admin-grid.wide {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  align-items: start;
}

.platform-material-workbench-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.platform-material-workbench-actions,
.platform-material-current-actions,
.platform-material-package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.platform-material-package-index-card,
.platform-material-workspace-card,
.platform-material-admin-forms-panel,
.platform-material-catalog-edit-stack,
.platform-material-lower-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.platform-material-package-index-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.platform-material-package-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-material-package-card.selected {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  box-shadow: inset 4px 0 0 var(--primary);
}

.platform-material-package-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-material-package-main strong {
  color: var(--text);
  font-size: 16px;
}

.platform-material-package-main small {
  color: var(--muted);
  font-weight: 720;
}

.platform-material-current-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
}

.platform-material-current-head > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.platform-material-current-head > span > strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}

.platform-material-current-head > span > small {
  color: var(--muted);
  font-weight: 720;
}

.platform-material-workspace-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.platform-material-workspace-tabs span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 850;
}

.platform-material-workspace-tabs span.active {
  background: var(--primary);
  color: #ffffff;
}

.platform-material-admin-forms-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.platform-material-lower-grid {
  grid-template-columns: minmax(0, 0.75fr) minmax(320px, 1fr);
  align-items: start;
}

.platform-material-form,
.platform-material-list-card,
.platform-material-detail,
.platform-material-tenant-panel {
  align-content: start;
}

.platform-material-list-card {
  overflow: hidden;
}

.platform-material-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.platform-material-table-wrap table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

.platform-material-table-wrap th,
.platform-material-table-wrap td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.platform-material-table-wrap th {
  color: var(--muted);
  font-size: var(--font-caption);
  background: #f8fafc;
}

.platform-material-table-wrap tr.selected td {
  background: var(--primary-soft);
}

.platform-material-table-title,
.platform-material-package-tile > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.platform-material-table-title strong,
.platform-material-package-tile strong,
.platform-material-side-section h4,
.platform-material-detail-block h4 {
  color: var(--text);
}

.platform-material-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.platform-material-page .badge.success {
  border-color: #bbf7d0;
  background: #e8f8ed;
  color: #15803d;
}

.platform-material-page .badge.warning {
  border-color: #fde68a;
  background: #fff7df;
  color: #b7791f;
}

.platform-material-detail {
  max-height: 760px;
  overflow: auto;
}

.platform-material-workspace-card {
  max-height: none;
  overflow: visible;
}

.platform-material-detail-block {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.platform-material-detail-block:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.platform-material-detail-block h4,
.platform-material-side-section h4 {
  margin: 0;
  font-size: 15px;
}

.platform-material-item-summary {
  display: grid;
  gap: 8px;
}

.platform-material-item-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.platform-material-item-summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-material-item-summary small {
  color: var(--muted);
}

.platform-material-item-summary b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.platform-material-catalog-tree {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.platform-material-catalog-tree.compact {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.platform-material-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 760;
}

.platform-material-catalog-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--line);
}

.platform-material-catalog-node {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.platform-material-catalog-node + .platform-material-catalog-node {
  margin-top: 6px;
}

.platform-material-catalog-node summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  font-weight: 850;
  list-style: none;
}

.platform-material-catalog-node summary::-webkit-details-marker {
  display: none;
}

.platform-material-catalog-node summary::before {
  content: "›";
  flex: 0 0 auto;
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

.platform-material-catalog-node[open] > summary::before {
  transform: rotate(90deg);
}

.platform-material-catalog-node summary span {
  min-width: 0;
}

.platform-material-catalog-node summary small {
  color: var(--muted);
  font-size: var(--font-caption);
  white-space: nowrap;
}

.platform-material-catalog-children {
  display: grid;
  gap: 6px;
  padding: 0 10px 10px 18px;
}

.platform-material-catalog-entry,
.platform-material-catalog-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
}

.platform-material-catalog-entry span {
  min-width: 0;
}

.platform-material-catalog-entry small {
  color: var(--muted);
  font-size: var(--font-caption);
  white-space: nowrap;
}

.platform-material-catalog-more {
  display: block;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 760;
}

.platform-material-catalog-manager {
  gap: 14px;
}

.platform-material-catalog-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(360px, 1.26fr);
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.platform-material-catalog-workbench-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  min-width: 0;
  align-items: start;
}

.platform-material-catalog-form,
.platform-material-catalog-tree-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-material-catalog-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.platform-material-catalog-form input,
.platform-material-catalog-form select,
.platform-material-entry-toolbar input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.platform-material-catalog-form input,
.platform-material-catalog-form select {
  min-height: 40px;
  padding: 8px 10px;
}

.platform-material-entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.platform-material-entry-toolbar input {
  flex: 1 1 220px;
  min-height: 38px;
  padding: 8px 10px;
}

.module-material-move-status {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 780;
  line-height: 1.45;
}

.module-material-move-status.info,
.module-material-move-status.ready,
.module-material-move-status.progress {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.module-material-move-status.danger {
  border-color: rgba(190, 18, 60, 0.25);
  background: #fff1f2;
  color: var(--rose);
}

.platform-material-entry-picker {
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow: auto;
  padding-right: 3px;
}

.platform-material-entry-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.platform-material-entry-row input {
  width: 16px;
  height: 16px;
}

.platform-material-entry-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-material-entry-row strong,
.platform-material-entry-row small {
  min-width: 0;
}

.platform-material-entry-row small,
.platform-material-entry-row em,
.platform-material-catalog-editor-node summary small {
  color: var(--muted);
  font-size: var(--font-caption);
}

.platform-material-entry-row em {
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.platform-material-catalog-editor-tree {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.platform-material-catalog-tree-panel {
  align-content: start;
}

.platform-material-catalog-editor-node summary {
  align-items: flex-start;
}

.platform-material-catalog-editor-node summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.platform-material-catalog-node-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
  min-width: fit-content;
}

.platform-material-tenant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
  gap: 14px;
  align-items: start;
}

.platform-material-package-tile {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-material-tenant-side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.platform-material-side-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.platform-material-check-list {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 760;
}

.platform-material-check-list span {
  position: relative;
  padding-left: 18px;
}

.platform-material-check-list span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.module-material-page {
  gap: 16px;
}

.module-material-redesign-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.module-material-redesign-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.module-material-redesign-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
}

.module-material-redesign-actions,
.module-material-toolbar-actions,
.module-material-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.module-material-redesign-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.module-material-redesign-metrics span,
.module-material-panel,
.module-material-upload-card,
.module-material-category-pane,
.module-material-list-pane,
.module-material-detail-pane {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.module-material-redesign-metrics span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 11px 12px;
}

.module-material-redesign-metrics strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.module-material-redesign-metrics small,
.module-material-panel-title small,
.module-material-title small,
.module-material-detail-title small,
.module-material-upload-title small,
.module-material-queue-row small {
  color: var(--muted);
  font-weight: 720;
}

.module-material-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.module-material-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 850;
}

.module-material-tab.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.module-material-upload-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr) minmax(360px, 1.25fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(15, 35, 52, 0.05);
}

.module-material-upload-card.category-targeted {
  border-color: var(--primary-border);
  box-shadow: 0 16px 38px rgba(15, 154, 181, 0.12);
}

.module-material-upload-title,
.module-material-detail-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.module-material-upload-title strong,
.module-material-panel-title strong,
.module-material-detail-title strong,
.module-material-title strong,
.module-material-package-card strong {
  display: block;
}

.module-material-upload-title em {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-style: normal;
  font-weight: 900;
}

.module-material-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px dashed var(--primary-border);
  border-radius: 8px;
  background: #f2fbfd;
  color: var(--primary-text);
}

.module-material-dropzone input {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.module-material-dropzone strong {
  display: block;
  color: var(--text);
}

.module-material-upload-fields {
  display: grid;
  grid-template-columns: 1.2fr 0.95fr 0.8fr auto;
  gap: 8px;
  align-items: end;
}

.module-material-upload-fields label,
.module-material-detail-form label {
  display: grid;
  gap: 5px;
  color: #344256;
  font-size: var(--font-caption);
  font-weight: 850;
}

.module-material-upload-fields input,
.module-material-upload-fields select,
.module-material-detail-form input,
.module-material-detail-form select,
.module-material-search-row input,
.module-material-list-toolbar input,
.module-material-list-toolbar select,
.module-material-batch-bar select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.module-material-upload-fields input:focus,
.module-material-upload-fields select:focus,
.module-material-detail-form input:focus,
.module-material-detail-form select:focus,
.module-material-search-row input:focus,
.module-material-list-toolbar input:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px rgba(15, 154, 181, 0.12);
  outline: 0;
}

.module-material-workbench {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 360px);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.module-material-category-pane,
.module-material-list-pane,
.module-material-detail-pane,
.module-material-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  box-shadow: 0 18px 44px rgba(15, 35, 52, 0.08);
}

.module-material-category-pane,
.module-material-detail-pane {
  position: sticky;
  top: 14px;
}

.module-material-panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.module-material-search-row,
.module-material-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.module-material-list-toolbar {
  grid-template-columns: minmax(260px, 1fr) auto;
}

.module-material-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-material-filters select {
  width: auto;
  min-width: 128px;
}

.module-material-category-tree,
.module-material-tree-group,
.module-material-tree-children,
.module-material-list,
.module-material-detail-form,
.module-material-package-list {
  display: grid;
  gap: 7px;
}

.module-material-tree-group {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.module-material-tree-children {
  padding-left: 14px;
}

.module-material-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
}

.module-material-tree-row.active {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.module-material-tree-row strong {
  display: block;
  font-weight: 900;
}

.module-material-tree-row small {
  color: var(--muted);
  font-weight: 720;
}

.module-material-tree-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.module-material-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #526174;
  font-size: var(--font-caption);
  font-weight: 900;
}

.module-material-category-plus {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary-text);
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
}

.module-material-tree-row.active .module-material-category-plus,
.module-material-category-plus:hover {
  border-color: var(--primary-border);
  background: var(--primary);
  color: #ffffff;
}

.module-material-batch-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #bee5ed;
  border-radius: 8px;
  background: #f0fbfd;
}

.module-material-batch-bar span {
  display: grid;
  gap: 2px;
}

.module-material-move-status {
  color: var(--text);
  font-weight: 900;
}

.module-material-move-status.danger {
  color: var(--rose);
}

.module-material-row {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.module-material-row.selected {
  border-color: var(--primary-border);
  background: #f2fbfd;
  box-shadow: inset 3px 0 0 var(--primary);
}

.module-material-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--primary);
}

.module-material-file-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.module-material-file-icon.doc {
  background: #eef2ff;
  color: #4338ca;
}

.module-material-file-icon.video {
  background: #fff7ed;
  color: #c2410c;
}

.module-material-title {
  min-width: 0;
}

.module-material-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 900;
}

.module-material-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.module-material-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #526174;
  font-size: var(--font-caption);
  font-weight: 850;
}

.module-material-pill.ok {
  background: #e8f8ef;
  color: #15803d;
}

.module-material-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.module-material-row-actions .secondary-button,
.module-material-row-actions .compact-danger-button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: var(--font-caption);
}

.module-material-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.module-material-asset-box,
.module-material-queue-row {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.module-material-asset-box dl {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 0;
}

.module-material-asset-box dt {
  color: var(--muted);
  font-weight: 760;
}

.module-material-asset-box dd {
  min-width: 0;
  margin: 0;
  font-weight: 800;
}

.module-material-queue-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

@media (max-width: 1320px) {
  .module-material-workbench {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }

  .module-material-detail-pane {
    position: static;
    grid-column: 1 / -1;
  }

  .module-material-detail-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-material-detail-form > label,
  .module-material-detail-form .module-material-asset-box,
  .module-material-detail-form .module-material-button-row {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .module-material-redesign-head,
  .module-material-upload-card,
  .module-material-workbench,
  .module-material-redesign-metrics,
  .module-material-detail-form {
    grid-template-columns: 1fr;
  }

  .module-material-category-pane,
  .module-material-detail-pane {
    position: static;
  }

  .module-material-redesign-actions,
  .module-material-toolbar-actions,
  .module-material-button-row {
    justify-content: flex-start;
  }

  .module-material-list-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .module-material-upload-fields,
  .module-material-two-col {
    grid-template-columns: 1fr;
  }

  .module-material-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .module-material-file-icon,
  .module-material-row-actions {
    grid-column: 2;
  }

  .module-material-redesign-actions .primary-button,
  .module-material-redesign-actions .secondary-button,
  .module-material-toolbar-actions .primary-button,
  .module-material-toolbar-actions .secondary-button,
  .module-material-toolbar-actions .compact-danger-button,
  .module-material-button-row .primary-button,
  .module-material-button-row .secondary-button,
  .module-material-button-row .compact-danger-button {
    width: 100%;
  }
}

/* 听力精听确认稿同构层：预览结构是该模块唯一视觉基准。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-preview-page-shell .intensive-listening-page {
  display: grid;
  width: 100%;
  max-width: none;
  gap: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .module-heading {
  min-height: 86px;
  margin: 0;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 3px solid var(--il-preview-line);
  border-radius: 22px;
  background: rgba(255, 253, 246, 0.94);
  box-shadow: var(--il-preview-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-title h1 {
  margin: 0 0 4px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-title p {
  margin: 0;
  color: var(--il-preview-muted);
  font-size: 14px;
  font-weight: 700;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .secondary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 2px solid #d9c599;
  border-radius: 14px;
  background: #fff;
  color: var(--il-preview-ink);
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 4px 0 rgba(118, 93, 52, 0.08);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .button.primary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button {
  border-color: var(--il-preview-sky-500);
  background: var(--il-preview-sky-500);
  color: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .button.small {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 11px;
  box-shadow: none;
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .mode-pill {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 2px solid var(--il-preview-line);
  border-radius: 13px;
  background: var(--il-preview-paper-strong);
  color: var(--il-preview-muted);
  font-size: 13px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill::before {
  content: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .training-view,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .training-layout {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .training-layout {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .paper-panel {
  min-width: 0;
  overflow: hidden;
  border: 3px solid var(--il-preview-line);
  border-radius: 24px;
  background: rgba(255, 253, 246, 0.97);
  box-shadow: var(--il-preview-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .library-panel {
  position: sticky;
  top: 116px;
  max-height: calc(100vh - 134px);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .panel-head {
  padding: 16px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 2px dashed var(--il-preview-line);
  background: linear-gradient(180deg, #fffef9, #fffaf0);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .panel-head h3 {
  margin: 0 0 2px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 21px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .panel-head p {
  margin: 0;
  color: var(--il-preview-muted);
  font-size: 12px;
  font-weight: 700;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .capy-sticker {
  font-size: 29px;
  transform: rotate(5deg);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .library-tools {
  padding: 13px 14px 10px;
  display: grid;
  gap: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .tool-row .button {
  flex: 1 1 120px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .search-box {
  position: relative;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .search-box > svg {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #7b8a97;
  pointer-events: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .search-box label {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .search-box input {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 39px;
  border: 2px solid #dbe7ec;
  border-radius: 13px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e3e8eb;
  border-radius: 13px;
  background: #f6f8f9;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .segmented button {
  min-width: 0;
  min-height: 32px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #77808a;
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .segmented button.active {
  color: var(--il-preview-sky-600);
  background: #fff;
  box-shadow: 0 2px 8px rgba(53, 76, 88, 0.09);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .select-line,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .select-line label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--il-preview-muted);
  font-size: 12px;
  font-weight: 800;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .select-line {
  grid-template-columns: 1fr;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .select-line select {
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #dbe4e8;
  border-radius: 10px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-list {
  min-height: 280px;
  max-height: calc(100vh - 500px);
  overflow: auto;
  padding: 3px 0 6px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-group-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin: 9px 3px 6px;
  color: #8e7e72;
  font-size: 11px;
  font-weight: 900;
  list-style: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-group-label::-webkit-details-marker {
  display: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-group-label strong,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-group-label small {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-group-label small {
  margin-top: 2px;
  color: var(--il-preview-muted);
  font-weight: 700;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-card {
  position: relative;
  margin-bottom: 9px;
  padding: 12px;
  border: 2px solid #e7d6b1;
  border-radius: 17px;
  background: #fff;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-card.active {
  border-color: var(--il-preview-sky-400);
  background: var(--il-preview-sky-50);
  box-shadow: inset 5px 0 var(--il-preview-sky-400);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-title {
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-icon {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 12px;
  background: var(--il-preview-yellow-soft);
  font-size: 20px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-title strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-title .intensive-listening-source-copy > span {
  display: block;
  margin-top: 3px;
  color: var(--il-preview-muted);
  font-size: 11px;
  line-height: 1.35;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--il-preview-green-soft);
  color: #557065;
  font-size: 10px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .status-tag.purple {
  background: #f0eafd;
  color: #725d9d;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-menu {
  position: relative;
  margin-left: auto;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-menu > summary {
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  list-style: none;
  padding: 0;
  border: 2px solid #e4d7bb;
  border-radius: 11px;
  background: #fff;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-menu > summary::-webkit-details-marker {
  display: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-popover {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 39px;
  min-width: 170px;
  padding: 5px;
  border: 2px solid #e4d7bb;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--il-preview-soft-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-popover .menu-action {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--il-preview-ink);
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-popover .menu-action:hover {
  background: var(--il-preview-sky-50);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-more-popover .menu-action.danger {
  color: #b84d44;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .library-summary {
  border-top: 1px dashed var(--il-preview-line);
  padding-top: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .library-summary > summary {
  color: var(--il-preview-muted);
  font-size: 11px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .workspace {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .processing-banner {
  margin: 14px 16px 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #cfc0ed;
  border-radius: 15px;
  background: #f8f5ff;
  color: #6f5c9b;
  font-size: 13px;
  font-weight: 800;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .processing-banner.failed {
  border-color: #ffc1b8;
  background: #fff4f1;
  color: #b55248;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 3px solid #dfd7ef;
  border-top-color: var(--il-preview-purple);
  border-radius: 50%;
  animation: il-preview-spin 1s linear infinite;
}

@keyframes il-preview-spin {
  to { transform: rotate(360deg); }
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stage-content {
  display: none;
  padding: 18px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stage-content.active {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h3 {
  margin: 0 0 5px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 24px;
  letter-spacing: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading p {
  margin-bottom: 0;
  color: var(--il-preview-muted);
  font-size: 13px;
  font-weight: 700;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .audio-deck {
  padding: 14px;
  border: 2px solid #edd9a9;
  border-radius: 18px;
  background: linear-gradient(120deg, #fff7d9, #f3fcff 68%, #eafbea);
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .audio-deck .intensive-listening-wave-panel {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-strip {
  margin-bottom: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-strip .intensive-listening-current-progress {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(12, minmax(28px, 1fr));
  gap: 6px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell button {
  min-width: 0;
  aspect-ratio: 1;
  border: 2px solid #ddd8c9;
  border-radius: 10px;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell button.done {
  border-color: var(--il-preview-green);
  background: var(--il-preview-green);
  color: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell button.active {
  border-color: var(--il-preview-sky-400);
  background: var(--il-preview-sky-50);
  color: var(--il-preview-sky-600);
  box-shadow: 0 0 0 3px rgba(70, 185, 223, 0.15);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-toolbar {
  margin: 11px 0 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-steps {
  margin-top: 14px;
  border-top: 2px dashed var(--il-preview-line);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px 13px;
  padding: 16px 0;
  border: 0;
  border-bottom: 2px dashed var(--il-preview-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step:last-child {
  border-bottom: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step::before {
  content: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step > :not(.step-badge) {
  grid-column: 2;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-badge {
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  align-self: start;
  border-radius: 14px;
  background: var(--il-preview-sky-500);
  color: #fff;
  font-family: var(--il-preview-font-cute);
  font-weight: 900;
  box-shadow: 0 4px 0 rgba(8, 127, 172, 0.18);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step:nth-child(2) .step-badge {
  background: var(--il-preview-yellow);
  color: #7e5917;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step:nth-child(3) .step-badge {
  background: var(--il-preview-purple);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step:nth-child(4) .step-badge {
  background: var(--il-preview-green);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-title-line h4 {
  margin: 2px 0 3px;
  font-size: 16px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-title-line p {
  margin-bottom: 0;
  color: var(--il-preview-muted);
  font-size: 11px;
  line-height: 1.45;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-actions {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .original-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .translation-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .result-box {
  margin-top: 0;
  padding: 12px 13px;
  border-radius: 13px;
  box-shadow: none;
  line-height: 1.65;
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .original-box {
  border: 2px solid #d5e8ed;
  background: #f8fdff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .translation-box {
  border: 2px solid #eadcf2;
  background: #fcf9ff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .result-box {
  border: 2px solid #c8eacb;
  background: #f2fff3;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .check-grid {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .answer-paper {
  margin-top: 12px;
  padding: 15px;
  border: 2px dashed #d7c1f0;
  border-radius: 16px;
  background: #fbf8ff;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-toolbar.final {
  margin: 0 0 14px;
  padding: 12px 0 0;
  justify-content: flex-end;
  border-top: 2px dashed var(--il-preview-line);
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions {
  position: sticky;
  bottom: 10px;
  z-index: 12;
  margin: 0 14px 14px;
  padding: 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 2px solid #d7e4e8;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px rgba(60, 83, 93, 0.14);
  backdrop-filter: blur(10px);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

@media (max-width: 1080px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .training-layout {
    grid-template-columns: 1fr;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .library-panel {
    position: static;
    max-height: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-list {
    min-height: 0;
    max-height: 360px;
  }
}

@media (max-width: 620px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .module-heading {
    align-items: flex-start;
    padding: 13px;
    border-radius: 18px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-title h1 {
    font-size: 25px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-actions {
    max-width: 120px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-actions .mode-pill,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-actions .secondary-button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .heading-actions small {
    display: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .paper-panel {
    border-radius: 19px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stage-content {
    padding: 13px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-title-line {
    display: grid;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell {
    grid-template-columns: repeat(6, minmax(28px, 1fr));
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .step-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions > div {
    align-items: stretch;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions .button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions .primary-button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sticky-actions .secondary-button {
    flex: 1 1 100%;
  }
}

.module-material-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.module-material-summary span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.module-material-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.module-material-summary small {
  color: var(--muted);
  font-weight: 760;
}

.module-material-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.module-material-catalog-panel,
.module-material-import-panel,
.module-material-package-list,
.module-material-package-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

.module-material-catalog-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.module-material-import-panel {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 140px);
  overflow: auto;
}

.module-material-package-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.module-material-package-card .platform-material-entry-toolbar {
  padding-top: 2px;
}

.module-material-platform-entry-picker {
  max-height: 260px;
}

.module-material-tree-entry {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
}

.module-material-tree-entry > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.module-material-tree-entry > span:first-child strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 820;
}

.module-material-tree-entry > span:first-child small {
  color: var(--muted);
}

.module-material-entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.module-material-entry-actions .secondary-button,
.module-material-entry-actions .compact-danger-button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: var(--font-caption);
}

.module-material-entry-form {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.module-material-redesign-page {
  --module-material-focus: rgba(15, 154, 181, 0.14);
  --module-material-shadow: 0 18px 44px rgba(15, 35, 52, 0.08);
  --module-material-soft-shadow: 0 12px 32px rgba(15, 35, 52, 0.05);
  align-content: start;
}

.module-material-redesign-page .primary-button,
.module-material-redesign-page .secondary-button,
.module-material-redesign-page .compact-danger-button,
.module-material-redesign-page .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 38px;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.module-material-redesign-page .primary-button svg,
.module-material-redesign-page .secondary-button svg,
.module-material-redesign-page .compact-danger-button svg,
.module-material-redesign-page .icon-button svg {
  flex: 0 0 auto;
}

.module-material-redesign-page .primary-button {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 154, 181, 0.14);
}

.module-material-redesign-page .primary-button:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 12px 26px rgba(15, 154, 181, 0.18);
}

.module-material-redesign-page .secondary-button,
.module-material-redesign-page .icon-button {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 8px 18px rgba(15, 35, 52, 0.04);
}

.module-material-redesign-page .secondary-button:hover,
.module-material-redesign-page .icon-button:hover {
  border-color: var(--primary-border);
  background: #f2fbfd;
  color: var(--primary-text);
}

.module-material-redesign-page .compact-danger-button {
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
  box-shadow: 0 8px 18px rgba(185, 28, 28, 0.04);
}

.module-material-redesign-page .compact-danger-button:hover {
  border-color: #fca5a5;
  background: #fff1f2;
}

.module-material-redesign-page .primary-button.compact,
.module-material-redesign-page .secondary-button.compact,
.module-material-redesign-page .compact-danger-button,
.module-material-redesign-page .icon-button.compact {
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--font-caption);
}

.module-material-redesign-page .icon-button,
.module-material-redesign-page .icon-button.compact {
  width: 38px;
  padding: 0;
}

.module-material-redesign-page .icon-button.compact {
  width: 34px;
}

.module-material-redesign-page button:disabled,
.module-material-redesign-page .primary-button:disabled,
.module-material-redesign-page .secondary-button:disabled,
.module-material-redesign-page .compact-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
  transform: none;
}

.module-material-redesign-page input,
.module-material-redesign-page select,
.module-material-redesign-page textarea {
  border-radius: 8px;
}

.module-material-redesign-page input:focus,
.module-material-redesign-page select:focus,
.module-material-redesign-page textarea:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--module-material-focus);
  outline: 0;
}

.module-material-redesign-head {
  padding: 2px 0;
}

.module-material-redesign-actions {
  align-self: start;
}

.module-material-redesign-metrics span {
  box-shadow: 0 10px 26px rgba(15, 35, 52, 0.035);
}

.module-material-tabs {
  box-shadow: 0 12px 30px rgba(15, 35, 52, 0.04);
}

.module-material-tab {
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.module-material-tab:hover {
  background: #f8fbfd;
}

.module-material-tab.active {
  box-shadow: inset 0 0 0 1px rgba(15, 154, 181, 0.08);
}

.module-material-upload-card {
  grid-template-columns: minmax(280px, 0.92fr) minmax(300px, 1.02fr) minmax(420px, 1.28fr);
  align-items: stretch;
  border-color: #dce6ef;
  box-shadow: var(--module-material-soft-shadow);
}

.module-material-upload-title,
.module-material-dropzone,
.module-material-upload-fields {
  min-width: 0;
}

.module-material-upload-title {
  padding: 4px 0;
}

.module-material-upload-title strong,
.module-material-detail-title strong,
.module-material-panel-title strong {
  color: var(--text);
  line-height: 1.25;
}

.module-material-dropzone {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-color: rgba(15, 154, 181, 0.46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.module-material-dropzone:hover,
.module-material-dropzone:focus-within,
.module-material-dropzone.has-file {
  border-color: var(--primary);
  background: #ecfbfe;
  box-shadow: 0 0 0 3px var(--module-material-focus);
}

.module-material-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.module-material-dropzone > svg,
.module-material-dropzone > span {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.module-material-dropzone small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-material-upload-fields {
  grid-template-columns: minmax(160px, 1.12fr) minmax(148px, 0.9fr) minmax(124px, 0.76fr) auto;
  gap: 8px;
}

.module-material-upload-fields label,
.module-material-detail-form label {
  min-width: 0;
}

.module-material-upload-fields > .primary-button {
  align-self: end;
  min-height: 38px;
  padding-inline: 14px;
}

.module-material-category-pane,
.module-material-list-pane,
.module-material-detail-pane,
.module-material-panel {
  border-color: #dce6ef;
  box-shadow: var(--module-material-shadow);
}

.module-material-panel-title {
  min-width: 0;
}

.module-material-panel-title > span,
.module-material-detail-title > span,
.module-material-title {
  min-width: 0;
}

.module-material-search-row input,
.module-material-list-toolbar input,
.module-material-list-toolbar select,
.module-material-batch-bar select,
.module-material-detail-form input,
.module-material-detail-form select,
.module-material-upload-fields input,
.module-material-upload-fields select {
  border-color: #dce6ef;
  box-shadow: inset 0 1px 0 rgba(15, 35, 52, 0.02);
}

.module-material-tree-group {
  border-color: #dce6ef;
  background: #f8fbfd;
}

.module-material-tree-row {
  cursor: pointer;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.module-material-tree-row:hover {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 154, 181, 0.16);
}

.module-material-tree-row.active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 1px rgba(15, 154, 181, 0.1);
}

.module-material-category-plus {
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(15, 35, 52, 0.04);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.module-material-category-plus:hover {
  transform: translateY(-1px);
}

.module-material-count {
  flex: 0 0 auto;
}

.module-material-list-toolbar {
  gap: 10px;
}

.module-material-filters {
  justify-content: flex-end;
}

.module-material-batch-bar {
  border-color: #bee5ed;
  background: #f0fbfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.module-material-row {
  border-color: #dce6ef;
  box-shadow: 0 8px 20px rgba(15, 35, 52, 0.035);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.module-material-row:hover {
  border-color: rgba(15, 154, 181, 0.3);
  box-shadow: 0 12px 26px rgba(15, 35, 52, 0.06);
}

.module-material-row.selected {
  border-color: var(--primary-border);
  box-shadow: inset 3px 0 0 var(--primary), 0 12px 28px rgba(15, 154, 181, 0.1);
}

.module-material-row-actions {
  min-width: 0;
}

.module-material-row-actions .secondary-button,
.module-material-row-actions .compact-danger-button,
.module-material-entry-actions .secondary-button,
.module-material-entry-actions .compact-danger-button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: var(--font-caption);
}

.module-material-title strong {
  max-width: 100%;
}

.module-material-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 730;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-material-file-icon {
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.module-material-asset-box,
.module-material-queue-row,
.module-material-package-card {
  border-color: #dce6ef;
  background: #f8fbfd;
}

.module-material-package-card {
  box-shadow: 0 10px 26px rgba(15, 35, 52, 0.045);
}

.module-material-redesign-page .platform-material-entry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.module-material-redesign-page .platform-material-entry-toolbar input {
  flex: 1 1 240px;
  min-height: 38px;
  padding: 8px 10px;
  border-color: #dce6ef;
  border-radius: 8px;
}

.module-material-redesign-page .platform-material-entry-row {
  border-color: #dce6ef;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 35, 52, 0.035);
}

.module-material-redesign-page .platform-material-entry-row:hover {
  border-color: rgba(15, 154, 181, 0.3);
  background: #f8fbfd;
}

.module-material-redesign-page .platform-material-entry-row input[type="checkbox"] {
  accent-color: var(--primary);
}

.module-material-redesign-page .badge {
  border-color: rgba(15, 154, 181, 0.18);
  background: #edf9fc;
  color: var(--primary-text);
}

.module-material-redesign-page .badge.success {
  border-color: #bbf7d0;
  background: #e8f8ef;
  color: #15803d;
}

.module-material-redesign-page .badge.warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

@media (max-width: 1320px) {
  .module-material-upload-card {
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.2fr);
  }

  .module-material-upload-fields {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .module-material-upload-card,
  .module-material-workbench {
    grid-template-columns: 1fr;
  }

  .module-material-filters {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .module-material-upload-fields,
  .module-material-list-toolbar,
  .module-material-batch-bar,
  .module-material-batch-bar .module-material-toolbar-actions,
  .module-material-two-col {
    grid-template-columns: 1fr;
  }

  .module-material-upload-fields > .primary-button,
  .module-material-batch-bar .secondary-button,
  .module-material-batch-bar select,
  .module-material-redesign-actions .primary-button,
  .module-material-redesign-actions .secondary-button {
    width: 100%;
  }
}

.tenant-collaboration-panel {
  display: grid;
  gap: 14px;
}

.tenant-collaboration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.tenant-collaboration-toolbar,
.tenant-collaboration-form,
.tenant-collaboration-template-card,
.tenant-collaboration-list-card {
  align-content: start;
}

.tenant-collaboration-template-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.tenant-collaboration-template-form,
.tenant-collaboration-template-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.tenant-collaboration-template-subsection {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-collaboration-template-subsection h4,
.tenant-collaboration-template-subsection p {
  margin: 0;
}

.tenant-collaboration-referrer-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  align-items: center;
}

.tenant-collaboration-referrer-candidate {
  display: grid;
  width: fit-content;
  max-width: 100%;
  justify-items: start;
  gap: 2px;
  text-align: left;
}

.tenant-collaboration-referrer-candidate small,
.tenant-collaboration-referrer-identity small {
  color: var(--muted);
  font-size: 12px;
}

.tenant-collaboration-referrer-editor,
.tenant-collaboration-default-member-editor {
  display: grid;
  gap: 8px;
}

.tenant-collaboration-referrer-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) auto 36px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tenant-collaboration-referrer-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
  align-self: center;
}

.tenant-collaboration-referrer-aliases {
  min-width: 0;
}

.tenant-collaboration-default-member-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) 36px;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tenant-collaboration-inline-loading {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.tenant-collaboration-list {
  display: grid;
  gap: 10px;
}

.tenant-collaboration-row,
.tenant-collaboration-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-collaboration-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.tenant-collaboration-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.tenant-collaboration-title-row strong {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.tenant-collaboration-meta,
.tenant-collaboration-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.tenant-collaboration-meta span,
.tenant-collaboration-tags span {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
}

.tenant-collaboration-side {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
}

.tenant-collaboration-detail {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.tenant-collaboration-detail summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.tenant-collaboration-update-form,
.tenant-collaboration-member-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.tenant-collaboration-member-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tenant-collaboration-member {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.tenant-collaboration-member strong {
  color: var(--text);
}

.tenant-collaboration-member small,
.tenant-collaboration-note {
  color: var(--muted);
}

.tenant-collaboration-note {
  margin: 10px 0 0;
  white-space: pre-wrap;
}

.tenant-role-permission-table {
  display: grid;
  gap: 10px;
}

.tenant-role-permission-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(140px, 0.5fr) minmax(0, 1.5fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-role-permission-row > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.tenant-role-permission-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.tenant-role-permission-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.tenant-member-add-form label,
.tenant-invitation-form label,
.auth-inline-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.tenant-member-list,
.tenant-invitation-list {
  display: grid;
  gap: 10px;
}

.tenant-member-row,
.tenant-invitation-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-member-row.disabled,
.tenant-invitation-row.disabled {
  background: #f8fafc;
  color: var(--muted);
}

.tenant-subsection-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
}

.tenant-subsection-title small {
  color: var(--muted);
}

.invitation-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.invitation-summary span,
.invitation-accept-box,
.auth-inline-form {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.invitation-summary small,
.auth-inline-form small {
  color: var(--muted);
}

.tenant-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tenant-member-actions select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
}

.tenant-scope-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.user-management-panel {
  display: grid;
  gap: 14px;
}

.user-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(132px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.user-search-field {
  min-width: 0;
}

.user-management-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-management-summary span {
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef2f7;
  color: var(--muted);
  font-weight: 800;
}

.user-management-summary strong {
  margin-right: 4px;
  color: var(--text);
}

.user-management-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.user-create-trigger {
  flex: 0 0 auto;
}

.managed-user-create-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.managed-user-create-form h3 {
  margin: 0;
}

.user-create-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.user-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.user-row.disabled {
  background: #f8fafc;
  color: var(--muted);
}

.user-main {
  display: grid;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.user-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.user-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.user-row span,
.user-row-head span {
  display: grid;
  gap: 4px;
}

.user-row small {
  color: var(--muted);
  line-height: 1.4;
}

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

.user-note {
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}

.module-user-summary-grid {
  margin-bottom: 12px;
}

.user-info-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.user-info-scope-grid span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.user-info-scope-grid strong {
  color: var(--text);
}

.user-info-scope-grid small {
  color: var(--muted);
  line-height: 1.5;
}

.user-module-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.user-quick-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.user-quick-summary.low-balance {
  border-color: #fed7aa;
  background: #fff7ed;
}

.user-quick-summary-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-quick-summary-metrics span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 86px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.user-quick-summary-metrics span:last-child {
  border-right: 0;
}

.user-quick-summary-metrics strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.user-quick-summary-metrics small {
  white-space: nowrap;
}

.user-summary-detail-trigger {
  white-space: nowrap;
}

.user-summary-detail-body {
  display: grid;
  gap: 12px;
}

.user-membership-summary.low-balance {
  border-color: #fed7aa;
  background: #fff7ed;
}

.user-module-summary .student-card-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.user-module-summary .student-card-stats span {
  min-height: 46px;
  padding: 8px;
  background: #ffffff;
}

.user-module-summary .student-card-stats strong {
  font-size: 18px;
}

.user-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #157347;
  font-size: 12px;
  font-weight: 900;
}

.user-status-pill.disabled {
  background: #f1f5f9;
  color: var(--muted);
}

.user-edit-form {
  display: grid;
  gap: 12px;
}

.managed-user-edit-dialog .action-dialog-panel {
  width: 100%;
  min-width: 0;
}

.managed-user-edit-dialog .action-dialog-body,
.managed-user-edit-dialog .user-edit-form,
.managed-user-edit-dialog .user-edit-form .form-grid,
.managed-user-edit-dialog .user-edit-form label,
.managed-user-edit-dialog .user-edit-form input:not([type="checkbox"]):not([type="radio"]),
.managed-user-edit-dialog .user-edit-form select,
.managed-user-edit-dialog .user-edit-form textarea {
  min-width: 0;
}

.managed-user-edit-dialog .user-edit-form input:not([type="checkbox"]):not([type="radio"]),
.managed-user-edit-dialog .user-edit-form select,
.managed-user-edit-dialog .user-edit-form textarea {
  width: 100%;
}

.user-edit-trigger {
  justify-self: start;
}

.managed-family-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.managed-family-head,
.managed-family-section-head,
.managed-family-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.managed-family-head {
  align-items: center;
}

.managed-family-head strong,
.managed-family-section-head span {
  font-weight: 900;
}

.managed-family-section {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.managed-family-list {
  display: grid;
  gap: 8px;
}

.managed-family-row {
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.managed-family-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.family-bind-inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px) auto;
  gap: 10px;
  align-items: end;
}

.teacher-color-picker {
  display: grid;
  gap: 7px;
  min-width: 228px;
}

.teacher-color-picker small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.teacher-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.teacher-color-swatch {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid #dbe5f0;
  border-radius: 8px;
  background: var(--swatch-bg);
  cursor: pointer;
  overflow: hidden;
}

.teacher-color-swatch::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--swatch-accent);
}

.teacher-color-swatch::after {
  content: "";
  position: absolute;
  inset: 8px 8px 8px 13px;
  border-radius: 999px;
  background: var(--swatch-chip);
}

.teacher-color-swatch:hover,
.teacher-color-swatch.active {
  border-color: #172033;
  box-shadow: 0 0 0 3px rgba(23, 32, 51, 0.08);
}

.teacher-color-swatch.active {
  transform: translateY(-1px);
}

.compact-role-checks {
  padding: 9px;
}

.student-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.student-summary-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-card-head,
.student-hero {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.student-card-badges,
.sales-order-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.student-card-head > div,
.student-card-meta,
.student-action-stack,
.student-task-list,
.student-submission-list,
.student-family-list,
.student-writing-list {
  display: grid;
  gap: 8px;
}

.student-card-head span,
.student-card-meta,
.student-summary-card small,
.student-task-row small,
.student-submission-card small,
.student-family-card small,
.student-writing-card small,
.student-hero span {
  color: var(--muted);
  line-height: 1.4;
}

.student-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.student-card-stats span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.student-card-stats strong {
  color: var(--text);
  font-size: 20px;
}

.student-module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-module-chips span {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.student-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.student-module-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-module-head,
.student-module-latest {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.student-module-head > div,
.student-module-latest {
  min-width: 0;
}

.student-module-head > div {
  display: grid;
  gap: 7px;
}

.student-module-head > span {
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
}

.student-module-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.student-module-metrics span {
  display: grid;
  gap: 2px;
  min-height: 50px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.student-module-metrics strong {
  color: var(--text);
  font-size: 18px;
}

.student-module-card p,
.student-module-latest span,
.student-module-latest small {
  color: var(--muted);
  line-height: 1.45;
}

.student-module-latest {
  display: grid;
  padding: 10px;
  border-radius: 8px;
  background: #fbfdff;
}

.student-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.student-mini-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.student-mini-row > span:first-child {
  display: grid;
  gap: 3px;
}

.student-mini-row small,
.student-mini-row > span:last-child {
  color: var(--muted);
  line-height: 1.4;
}

.student-mini-actions {
  margin-top: 12px;
}

.student-hero {
  margin-bottom: 14px;
}

.student-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.student-hero-tags span {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.student-hero-tags .student-type-chip {
  min-height: 30px;
}

.student-info-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.student-info-list li {
  display: grid;
  grid-template-columns: minmax(88px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.student-info-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.student-info-list span {
  color: var(--muted);
}

.student-info-list strong {
  line-height: 1.45;
}

.sales-management-page,
.sales-management-hero,
.sales-order-panel,
.sales-order-form,
.sales-order-list,
.sales-order-card {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sales-management-page {
  max-width: 100%;
  overflow-x: clip;
}

.sales-management-page .panel,
.sales-management-page .module-hero {
  min-width: 0;
}

.sales-management-page .role-schedule-head {
  flex-wrap: wrap;
}

.sales-management-page .role-schedule-head > div:first-child {
  min-width: min(260px, 100%);
}

.sales-management-page .role-schedule-head .row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.sales-management-page .role-schedule-head .row-actions button {
  flex: 0 1 auto;
  width: auto;
  min-width: 104px;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  white-space: normal;
  line-height: 1.2;
}

.sales-management-page .role-schedule-head .sales-management-head-actions {
  max-width: min(560px, 100%);
}

.sales-management-page .role-schedule-head .sales-management-head-actions .primary-button {
  min-width: 108px;
}

.sales-management-page .schedule-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.sales-customer-workbench {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.action-dialog.sales-customer-profile-dialog {
  width: min(1240px, calc(100vw - 28px));
}

.sales-customer-profile-dialog .action-dialog-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.sales-customer-profile-dialog .action-dialog-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.sales-customer-profile-dialog .student-profile-dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
}

.sales-customer-profile-form {
  display: grid;
  gap: 0;
  min-width: 0;
  background: var(--bg);
}

.sales-customer-linked-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 14px 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, white);
  border-radius: 8px;
  color: var(--primary-text);
  background: var(--primary-soft);
}

.sales-customer-linked-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #ffffff;
  background: var(--primary);
  font-weight: 900;
}

.sales-customer-linked-banner > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sales-customer-linked-banner small {
  line-height: 1.45;
}

.sales-customer-profile-tabs {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 0 16px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.sales-customer-profile-tabs button {
  min-height: 51px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}

.sales-customer-profile-tabs button.active {
  color: var(--primary-text);
  border-bottom-color: var(--primary);
}

.sales-customer-profile-panel {
  display: none;
  min-width: 0;
  gap: 14px;
  padding: 14px 16px;
}

.sales-customer-profile-panel.active {
  display: grid;
}

.sales-customer-profile-panel[data-sales-customer-profile-panel="basic"].active {
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.72fr);
  align-items: start;
}

.sales-customer-profile-panel[data-sales-customer-profile-panel="basic"] > [data-sales-lead-account-mode-section],
.sales-customer-basic-section,
.sales-customer-followup-section {
  grid-column: 1;
}

.sales-customer-profile-panel[data-sales-customer-profile-panel="basic"] > [data-sales-lead-account-mode-section] {
  grid-row: 1;
}

.sales-customer-basic-section {
  grid-row: 2;
}

.sales-customer-followup-section {
  grid-row: 3;
}

.sales-customer-entitlement-section {
  position: static;
}

.sales-customer-profile-side {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: sticky;
  top: 12px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sales-customer-entitlement-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px;
}

.sales-customer-entitlement-metrics > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}

.sales-customer-entitlement-metrics small,
.sales-customer-entitlement-list small,
.sales-customer-entitlement-more {
  color: var(--muted);
}

.sales-customer-entitlement-metrics strong {
  font-size: 20px;
}

.sales-customer-entitlement-list {
  display: grid;
  margin: 0 14px 14px;
}

.sales-customer-entitlement-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.sales-customer-entitlement-list article:last-child {
  border-bottom: 0;
}

.sales-customer-entitlement-list article > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sales-customer-entitlement-list article > span:last-child {
  text-align: right;
}

.sales-customer-entitlement-more {
  margin: 0 14px 14px;
  font-size: 12px;
}

.sales-followup-history-head {
  align-items: flex-start;
}

.sales-followup-history-counts {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sales-followup-history-counts span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--primary-text);
  background: var(--primary-soft);
  font-size: var(--font-caption);
  font-weight: 850;
}

.sales-followup-history-counts span.muted {
  color: var(--muted);
  background: var(--surface-soft);
}

.sales-followup-history-list {
  display: grid;
  gap: 10px;
  margin: 14px;
}

.sales-followup-history-card {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: #ffffff;
}

.sales-followup-history-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.sales-followup-history-type {
  color: var(--primary-text);
}

.sales-followup-history-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.sales-followup-history-card small {
  color: var(--muted);
  line-height: 1.45;
}

.sales-followup-system-log {
  margin: 0 14px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
}

.sales-followup-system-log summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  font-weight: 850;
}

.sales-followup-system-log summary::-webkit-details-marker {
  display: none;
}

.sales-followup-system-log summary::after {
  content: "展开";
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.sales-followup-system-log[open] summary::after {
  content: "收起";
}

.sales-followup-system-log summary small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 700;
  line-height: 1.45;
}

.sales-followup-system-list {
  display: grid;
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.sales-followup-system-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.sales-followup-system-row:last-child {
  border-bottom: 0;
}

.sales-followup-system-row > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sales-followup-system-row strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--font-body);
  line-height: 1.45;
  font-weight: 750;
}

.sales-followup-system-row small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.4;
}

.sales-customer-profile-section {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-customer-profile-section > .section-header {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

.sales-customer-profile-section > .section-header h3 {
  margin: 0;
}

.sales-customer-profile-section > .section-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.sales-customer-profile-section > .form-grid,
.sales-customer-profile-section > label,
.sales-customer-profile-section > .student-entitlement-grid,
.sales-customer-profile-section > .student-entitlement-metrics,
.sales-customer-profile-section > .student-entitlement-section-head,
.sales-customer-profile-section > .student-entitlement-accuracy-note,
.sales-customer-profile-section > .task-detail-meta-grid,
.sales-customer-profile-section > .student-card-meta,
.sales-customer-profile-section > .sales-lead-collaboration-list,
.sales-customer-profile-section > .sales-lead-collaboration-create,
.sales-customer-profile-section > .sales-customer-application-list {
  margin: 14px;
}

.sales-customer-profile-section > .student-profile-domain-loading {
  min-height: 160px;
}

.sales-customer-profile-section .sales-lead-account-mode {
  border: 0;
}

.sales-customer-profile-wide-field {
  grid-column: 1 / -1;
}

.sales-customer-profile-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 22px rgb(15 23 42 / 6%);
}

.sales-application-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.sales-application-link-grid span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
}

.sales-application-link-grid small {
  color: var(--muted);
}

.sales-collaboration-readonly-notice {
  margin: 0 0 12px;
}

.sales-lead-collaboration-list {
  display: grid;
  gap: 8px;
}

.sales-lead-collaboration-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.sales-lead-collaboration-row > span:first-child {
  display: grid;
  gap: 3px;
  min-width: min(100%, 280px);
}

.sales-lead-collaboration-row small,
.sales-lead-collaboration-hint {
  color: var(--muted);
  line-height: 1.45;
}

.sales-lead-collaboration-create {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sales-lead-collaboration-template-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  align-items: center;
  align-self: end;
  padding: 9px 11px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.sales-lead-collaboration-template-summary[hidden] {
  display: none;
}

.sales-customer-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-customer-recent-learning {
  display: grid;
  gap: 7px;
}

.sales-customer-application-list {
  display: grid;
}

.sales-customer-application-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.sales-customer-application-list article:last-child {
  border-bottom: 0;
}

.sales-customer-application-list article > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sales-customer-application-list small {
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .sales-customer-profile-panel[data-sales-customer-profile-panel="basic"].active {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-customer-profile-panel[data-sales-customer-profile-panel="basic"] > [data-sales-lead-account-mode-section],
  .sales-customer-basic-section,
  .sales-customer-followup-section,
  .sales-customer-profile-side {
    grid-column: 1;
    grid-row: auto;
  }

  .sales-customer-profile-side {
    position: static;
  }

  .sales-application-link-grid,
  .sales-customer-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .action-dialog.sales-customer-profile-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .sales-customer-profile-dialog .action-dialog-panel {
    min-height: 100vh;
    max-height: 100vh;
  }

  .sales-customer-linked-banner {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 10px 10px 0;
  }

  .sales-customer-linked-banner .secondary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .sales-customer-profile-tabs {
    margin-top: 10px;
    padding: 0 8px;
  }

  .sales-customer-profile-tabs button {
    padding: 0 10px;
  }

  .sales-customer-profile-panel {
    padding: 10px;
  }

  .sales-customer-profile-section > .form-grid,
  .sales-customer-profile-section > label,
  .sales-customer-profile-section > .student-entitlement-grid,
  .sales-customer-profile-section > .student-entitlement-metrics,
  .sales-customer-profile-section > .student-entitlement-section-head,
  .sales-customer-profile-section > .student-entitlement-accuracy-note,
  .sales-customer-profile-section > .task-detail-meta-grid,
  .sales-customer-profile-section > .student-card-meta,
  .sales-customer-profile-section > .sales-lead-collaboration-list,
  .sales-customer-profile-section > .sales-lead-collaboration-create,
  .sales-customer-profile-section > .sales-customer-application-list,
  .sales-followup-history-list,
  .sales-followup-system-log {
    margin: 10px;
  }

  .sales-application-link-grid,
  .sales-customer-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-customer-profile-actions {
    align-items: stretch;
    padding: 10px;
  }

  .sales-customer-profile-actions button {
    flex: 1 1 140px;
  }

  .sales-customer-application-list article {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sales-lead-account-mode {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
  min-width: 0;
}

.sales-application-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sales-application-scope legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.sales-application-scope label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  width: auto;
}

.sales-lead-account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sales-lead-account-tabs button {
  flex: 0 1 auto;
  width: auto;
  min-width: 110px;
  min-height: 40px;
  padding: 8px 12px;
  white-space: nowrap;
}

.sales-existing-student-row {
  max-width: min(520px, 100%);
}

.sales-existing-student-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.sales-existing-student-preview span {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef4f8;
  color: #516273;
  word-break: break-word;
}

.sales-lead-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #e3e9f0;
  background: #f8fafc;
}

.sales-lead-search-field,
.sales-lead-toolbar-control {
  display: block;
  min-width: 0;
}

.sales-lead-search-field {
  flex: 1 1 260px;
  max-width: 360px;
}

.sales-lead-toolbar-control {
  flex: 0 1 142px;
  max-width: 158px;
}

.sales-lead-sort-control {
  flex-basis: 176px;
  max-width: 196px;
}

.sales-lead-search-field input,
.sales-lead-toolbar-control select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 15px;
  font-weight: 850;
}

.sales-lead-search-field input::placeholder {
  color: #7b8794;
}

.sales-lead-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 1 auto;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.sales-lead-toolbar-actions .secondary-button,
.sales-lead-toolbar-actions .primary-button {
  flex: 0 1 auto;
  width: auto;
  min-width: 88px;
  max-width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  line-height: 1.25;
}

.sales-lead-toolbar-actions .primary-button {
  min-width: 118px;
}

.sales-lead-toolbar-actions .sales-add-lead-button {
  min-width: 104px;
}

.sales-lead-toolbar-actions .sales-add-lead-button {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.sales-lead-table-shell {
  overflow-x: visible;
  max-width: 100%;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: grid;
  min-width: 0;
}

.sales-lead-empty-notice {
  margin: 14px;
}

.sales-lead-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.sales-lead-col-student {
  width: 13%;
}

.sales-lead-col-course {
  width: 11%;
}

.sales-lead-col-intent {
  width: 10%;
}

.sales-lead-col-status {
  width: 10%;
}

.sales-lead-col-source {
  width: 9%;
}

.sales-lead-col-referrer {
  width: 10%;
}

.sales-lead-col-owner {
  width: 9%;
}

.sales-lead-col-next {
  width: 13%;
}

.sales-lead-col-actions {
  width: 15%;
}

.sales-lead-table th,
.sales-lead-table td {
  box-sizing: border-box;
  padding: 18px clamp(8px, 0.9vw, 20px);
  border-bottom: 1px solid #e8edf3;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
}

.sales-lead-table th {
  background: #fbfcfe;
  color: #64748b;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.sales-lead-table tbody tr:last-child td {
  border-bottom: 0;
}

.sales-lead-table tbody tr:hover {
  background: #fbfffd;
}

.sales-lead-table tbody tr.sales-lead-row-colored {
  background: var(--sales-row-color-bg, #ffffff);
}

.sales-lead-table tbody tr.sales-lead-row-colored:hover {
  background: var(--sales-row-color-hover, #fbfffd);
}

.sales-lead-table tbody tr.sales-lead-row-colored td {
  background: var(--sales-row-color-bg, #ffffff);
}

.sales-lead-table tbody tr.sales-lead-row-colored:hover td {
  background: var(--sales-row-color-hover, #fbfffd);
}

.sales-lead-table tbody tr.sales-lead-row-colored td:first-child {
  box-shadow: inset 4px 0 0 var(--sales-row-color-accent, var(--primary));
}

.sales-lead-name-cell strong,
.sales-lead-next-cell strong {
  display: block;
  font-weight: 900;
  line-height: 1.42;
  overflow-wrap: break-word;
  word-break: normal;
}

.sales-lead-table td.sales-lead-owner-cell {
  vertical-align: middle;
}

.sales-lead-name-cell small,
.sales-lead-course-cell small,
.sales-lead-next-cell small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}

.sales-lead-name-cell .sales-lead-acquired-date {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.sales-lead-student-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 850;
}

.sales-lead-student-chip.unlinked {
  background: #f8fafc;
  color: #64748b;
}

.sales-lead-scope-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.sales-lead-scope-badge.own {
  border: 1px solid #dbe4ee;
  background: #ffffff;
  color: #64748b;
}

.sales-lead-scope-badge.collaboration {
  border: 1px solid #bae6fd;
  background: #ecfeff;
  color: #0e7490;
}

.sales-lead-collaboration-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.sales-inline-select {
  width: min(100%, 180px);
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.sales-inline-course,
.sales-inline-owner,
.sales-inline-next-action {
  width: min(100%, 170px);
}

.sales-inline-course,
.sales-inline-source {
  width: min(100%, 145px);
}

.sales-inline-owner,
.sales-inline-referrer {
  width: min(100%, 150px);
}

.sales-inline-referrer {
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.sales-inline-referrer:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-shadow);
  outline: none;
}

.sales-inline-next-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
}

.sales-inline-next-date {
  width: min(100%, 176px);
  min-width: 0;
  min-height: 38px;
  padding: 0 4px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: #263044;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.sales-inline-next-date:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-shadow);
  outline: none;
}

.sales-inline-next-action {
  width: min(100%, 176px);
  min-height: 42px;
}

.sales-inline-select:disabled {
  opacity: 0.7;
}

.sales-product-form-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 800;
}

.sales-product-multi-select {
  position: relative;
  min-width: 0;
  font-weight: 700;
}

.sales-product-multi-select[open] {
  z-index: 40;
}

.sales-product-multi-select > summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.sales-product-multi-select > summary::-webkit-details-marker {
  display: none;
}

.sales-product-multi-select > summary::after {
  content: "⌄";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.sales-product-multi-select[open] > summary {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-shadow);
}

.sales-product-multi-summary {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.sales-product-multi-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 260px);
  max-width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgb(15 23 42 / 18%);
}

.sales-product-multi-options {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
}

.sales-product-multi-options > label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.sales-product-multi-options > label:hover {
  background: var(--primary-soft);
}

.sales-product-multi-options input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.sales-product-multi-options label > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sales-product-multi-options strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.sales-product-multi-options small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.sales-product-multi-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.sales-product-multi-actions button {
  min-height: 34px;
  padding: 6px 10px;
}

.sales-product-multi-message:empty {
  display: none;
}

.sales-product-multi-message:not(:empty) {
  margin-top: 8px;
}

.sales-product-multi-inline .sales-product-multi-menu {
  width: 260px;
}

.action-dialog.sales-export-dialog {
  width: min(1080px, calc(100vw - 28px));
}

.sales-export-dialog .action-dialog-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.sales-export-dialog .action-dialog-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.sales-export-dialog-content,
.sales-export-form {
  min-width: 0;
}

.sales-export-form {
  display: grid;
  background: var(--bg);
}

.sales-export-section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.sales-export-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.sales-export-filter-grid > label,
.sales-export-product-filter,
.sales-export-field-group-body {
  min-width: 0;
}

.sales-export-filter-grid > label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.sales-export-filter-grid input,
.sales-export-filter-grid select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
}

.sales-export-filter-wide {
  grid-column: span 2;
}

.sales-export-product-filter {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sales-export-product-filter legend {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.sales-export-option-grid,
.sales-export-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 6px 10px;
}

.sales-export-option-grid > label,
.sales-export-field-grid > label,
.sales-export-group-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 34px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}

.sales-export-option-grid input,
.sales-export-field-grid input,
.sales-export-group-toggle input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.sales-export-option-grid span,
.sales-export-field-grid span {
  min-width: 0;
  overflow-wrap: break-word;
}

.sales-export-field-grid > label.is-required {
  color: var(--primary-text);
}

.sales-export-field-grid > label.is-required input:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.sales-export-required-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  vertical-align: middle;
}

.sales-export-visual-section {
  gap: 8px;
}

.sales-export-row-color-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.sales-export-row-color-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.sales-export-more-filters,
.sales-export-field-group {
  border-top: 1px solid var(--line);
}

.sales-export-more-filters > summary,
.sales-export-field-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  cursor: pointer;
  color: var(--text);
  font-weight: 850;
}

.sales-export-more-filters[open] > summary,
.sales-export-field-group[open] > summary {
  color: var(--primary-text);
}

.sales-export-more-filters > .sales-export-filter-grid {
  padding-top: 10px;
}

.sales-export-fields-head {
  align-items: center;
}

.sales-export-fields-head .row-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sales-export-fields-head button {
  min-height: 34px;
  padding: 6px 10px;
}

.sales-export-field-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  min-width: 0;
}

.sales-export-field-group {
  min-width: 0;
}

.sales-export-field-group > summary span {
  color: var(--muted);
  font-size: 12px;
}

.sales-export-field-group-body {
  display: grid;
  gap: 8px;
  padding: 0 0 12px;
}

.sales-export-group-toggle {
  color: var(--primary-text);
  font-weight: 850;
}

.sales-export-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 20px rgb(15 23 42 / 6%);
}

.sales-export-preview {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.sales-export-footer .user-create-dialog-actions {
  margin: 0;
  padding: 0;
  border: 0;
}

.sales-export-form > [data-sales-export-message]:not(:empty) {
  padding: 0 18px 14px;
  background: #ffffff;
}

.sales-ai-import-rules-field {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.sales-ai-import-rules-field textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
}

@media (max-width: 760px) {
  .sales-export-filter-wide {
    grid-column: auto;
  }

  .sales-export-field-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-export-option-grid,
  .sales-export-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-export-fields-head {
    align-items: flex-start;
  }

  .sales-export-fields-head .row-actions {
    justify-content: flex-start;
  }

  .sales-export-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-export-footer .user-create-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .sales-export-footer button {
    width: 100%;
  }
}

@media (max-width: 300px) {
  .sales-export-option-grid,
  .sales-export-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.action-dialog.sales-import-preview-dialog {
  width: min(1120px, calc(100vw - 28px));
}

.sales-import-preview-dialog .action-dialog-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.sales-import-preview-dialog .action-dialog-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.sales-import-preview-content {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  background: var(--bg);
}

.sales-import-preview-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.sales-import-preview-summary > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sales-import-preview-summary > div:first-child strong {
  color: var(--text);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.sales-import-preview-summary > div:first-child span {
  color: var(--muted);
  font-size: 13px;
}

.sales-import-preview-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sales-import-preview-stat,
.sales-import-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.sales-import-preview-stat {
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.sales-import-preview-stat:hover {
  border-color: var(--primary-border);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.sales-import-preview-stat.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(45, 139, 161, 0.16);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.sales-import-preview-stat strong {
  color: var(--text);
  font-size: 14px;
}

.sales-import-preview-stat.is-create,
.sales-import-preview-stat.is-followup,
.sales-import-action.is-create {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.sales-import-preview-stat.is-conflict,
.sales-import-preview-stat.is-confirm,
.sales-import-action.is-confirm,
.sales-import-action.is-conflict {
  border-color: #f4c975;
  background: #fff8e8;
  color: #8a5200;
}

.sales-import-preview-stat.is-error,
.sales-import-action.is-error {
  border-color: #efb7b7;
  background: #fff1f1;
  color: #a12626;
}

.sales-import-preview-filter-note,
.sales-import-preview-empty {
  color: var(--muted);
  font-size: 13px;
}

.sales-import-preview-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.sales-import-preview-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
}

.sales-import-preview-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.sales-import-preview-table th,
.sales-import-preview-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.sales-import-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f9fb;
  color: var(--muted);
  font-weight: 850;
}

.sales-import-preview-table th:nth-child(1) { width: 76px; }
.sales-import-preview-table th:nth-child(2) { width: 180px; }
.sales-import-preview-table th:nth-child(3) { width: 112px; }

.sales-import-preview-table tbody tr:last-child td {
  border-bottom: 0;
}

.sales-import-preview-table td > strong,
.sales-import-preview-table td > small {
  display: block;
}

.sales-import-preview-table td > small {
  margin-top: 3px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.sales-import-change {
  display: grid;
  grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
}

.sales-import-change > strong {
  color: var(--muted);
  font-size: 12px;
}

.sales-import-change > span {
  min-width: 0;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.sales-import-change del,
.sales-import-change ins {
  text-decoration: none;
}

.sales-import-change del {
  color: var(--muted);
}

.sales-import-change ins {
  color: var(--primary-text);
  font-weight: 800;
}

.sales-import-change i {
  padding: 0 6px;
  color: var(--muted);
  font-style: normal;
}

.sales-import-row-message {
  margin: 3px 0;
  color: #9b2c2c;
  white-space: pre-wrap;
}

.sales-import-row-message.is-confirm {
  color: #8a5200;
}

.sales-import-preview-footer {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 20px rgb(15 23 42 / 6%);
}

.sales-import-preview-footer > span {
  color: var(--muted);
  font-size: 13px;
}

.sales-import-preview-footer .user-create-dialog-actions {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 760px) {
  .sales-import-preview-summary,
  .sales-import-preview-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sales-import-preview-stats {
    justify-content: flex-start;
  }

  .sales-import-preview-footer .user-create-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .sales-import-preview-footer button {
    width: 100%;
  }
}

.sales-inline-readonly {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.sales-inline-next-stack.readonly {
  gap: 5px;
}

.sales-inline-intent.intent-high {
  border-color: #f3cf7a;
  background: #fff7df;
  color: #a55b00;
}

.sales-inline-intent.intent-medium {
  border-color: #bfd7ff;
  background: #eff6ff;
  color: #1d4ed8;
}

.sales-inline-intent.intent-low {
  border-color: #dbe4ee;
  background: #ffffff;
  color: #64748b;
}

.sales-inline-status {
  min-width: 0;
}

.sales-inline-status.status-new,
.sales-inline-status.status-pending_friend,
.sales-inline-status.status-friend_added,
.sales-inline-status.status-needs_confirmed,
.sales-inline-status.status-trial_to_schedule,
.sales-inline-status.status-trial_scheduled,
.sales-inline-status.status-trial_done_followup,
.sales-inline-status.status-renewing {
  border-color: #bfdfd4;
  background: #e8f6f1;
  color: #0f766e;
}

.sales-inline-status.status-won {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #047857;
}

.sales-inline-status.status-deferred {
  border-color: #fde68a;
  background: #fffbeb;
  color: #a16207;
}

.sales-inline-status.status-lost {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.sales-inline-source {
  min-width: 0;
  background: #ffffff;
}

.sales-lead-table-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.sales-lead-table-actions .secondary-button {
  flex: 0 1 auto;
  width: auto;
  min-width: 66px;
  max-width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border-color: var(--primary-border);
  color: var(--primary-text);
  font-weight: 900;
  white-space: nowrap;
  line-height: 1.25;
}

.sales-order-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.sales-order-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-order-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.sales-order-head > span {
  display: grid;
  gap: 4px;
}

.sales-order-head small,
.sales-order-card .student-card-meta {
  color: var(--muted);
  line-height: 1.45;
}

.sales-order-actions {
  justify-content: flex-start;
}

.sales-today-inline-grid {
  align-items: stretch;
}

.sales-today-inline-cell {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 70px;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  line-height: 1.35;
}

.sales-today-inline-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.sales-today-inline-cell .sales-inline-select,
.sales-today-inline-cell .sales-inline-trial-time {
  width: 100%;
  max-width: 100%;
}

.sales-today-inline-follow-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.sales-today-inline-follow-controls .sales-inline-next-date {
  width: 100%;
  max-width: 100%;
}

.sales-inline-trial-time {
  min-width: 0;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.sales-inline-trial-time:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-shadow);
  outline: none;
}

.sales-today-inline-message {
  min-height: 0;
}

.sales-today-inline-message:empty {
  display: none;
}

.sales-recontact-date-dialog .action-dialog-panel {
  width: min(520px, calc(100vw - 32px));
}

.sales-recontact-date-form {
  display: grid;
  gap: 12px;
}

.sales-recontact-date-form input[type="date"] {
  width: 100%;
}

.sales-recontact-date-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.sales-recontact-date-actions button {
  width: auto;
  min-width: 96px;
  flex: 0 1 auto;
}

.sales-order-payment-grid {
  align-items: end;
}

.sales-order-entitlement-section,
.sales-order-item-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.section-head-row > div {
  display: grid;
  gap: 4px;
  min-width: min(280px, 100%);
}

.section-head-row small {
  color: var(--muted);
  line-height: 1.45;
}

.section-head-row button {
  width: auto;
  min-width: 92px;
  padding: 8px 12px;
}

.sales-order-item-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #fbfcfe;
}

.sales-order-item-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sales-order-item-head .compact-danger-button {
  width: auto;
  min-width: 64px;
  min-height: 34px;
  padding: 6px 10px;
  color: #b42318;
}

.sales-order-item-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) minmax(180px, 1.3fr) minmax(92px, 0.65fr) minmax(84px, 0.55fr) minmax(130px, 0.8fr) minmax(120px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.sales-order-item-grid label {
  min-width: 0;
}

.sales-order-item-grid input,
.sales-order-item-grid select {
  width: 100%;
}

.sales-order-item-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-order-item-chip {
  display: inline-grid;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
}

.sales-order-item-chip strong,
.sales-order-item-chip small {
  overflow-wrap: break-word;
}

.sales-order-item-chip small {
  color: var(--muted);
}

.sales-new-student-fieldset {
  display: grid;
  gap: 10px;
}

.sales-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .sales-two-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sales-kanban {
  display: grid;
  grid-template-columns: repeat(10, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.sales-kanban-column {
  min-height: 240px;
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px;
}

.sales-kanban-column > strong {
  display: block;
  margin-bottom: 10px;
}

.sales-mini-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.sales-mini-card span,
.sales-mini-card small {
  color: var(--muted);
  font-size: 0.85rem;
}

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

.sales-row-color-settings {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sales-row-color-settings .section-header h3 {
  margin: 0;
}

.sales-row-color-settings .section-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.sales-row-color-form {
  display: grid;
  gap: 14px;
}

.sales-row-color-toggle-grid,
.sales-row-color-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.sales-row-color-toggle-grid label,
.sales-row-color-picker-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.sales-row-color-toggle-grid label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-row-color-toggle-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.sales-row-color-toggle-grid select,
.sales-row-color-picker-grid input[type="color"] {
  width: 100%;
  min-height: 40px;
}

.sales-row-color-picker-grid input[type="color"] {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sales-row-color-preview {
  display: grid;
  gap: 8px;
}

.sales-row-color-preview-row {
  display: block;
  min-height: 38px;
  padding: 9px 12px 9px 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid var(--sales-row-color-accent, var(--primary));
  border-radius: 8px;
  background: var(--sales-row-color-bg, #ffffff);
  color: var(--text);
  font-weight: 900;
}

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

.sales-stat-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.sales-stat-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(120px, 2fr) auto;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  color: var(--muted);
}

.sales-stat-row div {
  height: 8px;
  background: #edf2f7;
  border-radius: 999px;
  overflow: hidden;
}

.sales-stat-row i {
  display: block;
  height: 100%;
  background: #0f766e;
}

.sales-option-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.sales-option-row-owner {
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.3fr) auto auto auto;
}

.sales-option-row-course {
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 0.9fr) auto auto auto;
}

.sales-option-linked-user,
.sales-option-business-type {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sales-option-linked-user select,
.sales-option-business-type select {
  width: 100%;
  min-width: 0;
}

.wework-binding-panel,
.wework-binding-table-shell {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.wework-binding-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.wework-binding-head-actions .secondary-button {
  flex: 0 1 auto;
  width: auto;
  min-width: 104px;
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}

.wework-binding-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.wework-binding-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #f8fafc;
}

.wework-binding-search-field,
.wework-binding-toolbar-control {
  display: block;
  min-width: 0;
}

.wework-binding-search-field {
  flex: 1 1 260px;
  max-width: 420px;
}

.wework-binding-toolbar-control {
  flex: 0 1 150px;
  max-width: 170px;
}

.wework-binding-search-field input,
.wework-binding-toolbar-control select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-weight: 850;
}

.wework-binding-search-field input::placeholder {
  color: #7b8794;
}

.wework-binding-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 1 auto;
  gap: 8px;
  margin-left: auto;
}

.wework-binding-toolbar-actions .secondary-button {
  flex: 0 1 auto;
  width: auto;
  min-width: 80px;
  min-height: 40px;
  padding: 8px 12px;
  white-space: nowrap;
}

.wework-binding-table-shell {
  overflow-x: visible;
  max-width: 100%;
  border: 1px solid #e3e9f0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.wework-binding-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.wework-binding-col-user {
  width: 19%;
}

.wework-binding-col-role {
  width: 11%;
}

.wework-binding-col-channel {
  width: 14%;
}

.wework-binding-col-target {
  width: 27%;
}

.wework-binding-col-reminder {
  width: 14%;
}

.wework-binding-col-actions {
  width: 15%;
}

.wework-binding-table th,
.wework-binding-table td {
  box-sizing: border-box;
  padding: 16px clamp(8px, 0.85vw, 18px);
  border-bottom: 1px solid #e8edf3;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
}

.wework-binding-table th {
  background: #fbfcfe;
  color: #64748b;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
}

.wework-binding-table tbody tr:last-child td {
  border-bottom: 0;
}

.wework-binding-table tbody tr:hover {
  background: #fbfffd;
}

.wework-binding-user-cell,
.wework-binding-target-cell {
  min-width: 0;
}

.wework-binding-target-cell [data-wework-binding-target] {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.wework-binding-supplement {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px dashed #dbe4ee;
}

.wework-binding-user-cell strong,
.wework-binding-user-cell small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.wework-binding-user-cell strong {
  font-weight: 900;
  line-height: 1.42;
}

.wework-binding-user-cell small,
.wework-binding-help {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.wework-role-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.wework-role-chip-list span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.wework-binding-channel {
  width: min(100%, 150px);
  min-height: 42px;
}

.wework-binding-target-label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wework-binding-target-label span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.wework-binding-target-input {
  width: 100%;
  min-height: 42px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.wework-binding-target-input:focus,
.wework-reminder-time:focus,
.wework-binding-search-field input:focus,
.wework-binding-toolbar-control select:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-shadow);
  outline: none;
}

.wework-reminder-toggle {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.wework-reminder-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.wework-reminder-time {
  width: min(100%, 128px);
  min-height: 38px;
  padding: 0 9px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #ffffff;
  color: #263044;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}

.wework-reminder-cell {
  display: grid;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.wework-reminder-style-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wework-reminder-tone {
  width: min(100%, 92px);
  min-height: 38px;
}

.wework-reminder-emoji-toggle {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.wework-reminder-emoji-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.wework-reminder-preview-dialog .action-dialog-panel {
  width: min(620px, calc(100vw - 32px));
}

.wework-reminder-preview-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.wework-reminder-preview-text {
  max-height: min(56vh, 560px);
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.wework-binding-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wework-binding-actions .secondary-button {
  flex: 0 1 auto;
  width: auto;
  min-width: 78px;
  max-width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border-color: var(--primary-border);
  color: var(--primary-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .sales-management-page .role-schedule-head .row-actions {
    justify-content: flex-start;
  }

  .sales-lead-search-field {
    flex-basis: 280px;
  }

  .sales-lead-toolbar-control {
    flex-basis: 160px;
  }

  .sales-lead-toolbar-actions {
    margin-left: 0;
    justify-content: flex-start;
  }

  .wework-binding-head-actions,
  .wework-binding-toolbar-actions {
    justify-content: flex-start;
  }

  .wework-binding-toolbar-actions {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .sales-order-item-grid {
    grid-template-columns: 1fr;
  }

  .sales-lead-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sales-lead-search-field,
  .sales-lead-toolbar-control,
  .sales-lead-toolbar-actions {
    grid-column: 1 / -1;
  }

  .sales-lead-search-field input,
  .sales-lead-toolbar-control select,
  .sales-lead-toolbar-actions .secondary-button,
  .sales-lead-toolbar-actions .primary-button {
    min-height: 48px;
    font-size: 14px;
  }

  .sales-lead-toolbar-actions {
    justify-content: flex-start;
  }

  .sales-lead-toolbar-actions .secondary-button,
  .sales-lead-toolbar-actions .primary-button {
    flex: 0 1 auto;
    min-width: 108px;
  }

  .sales-lead-table-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .sales-lead-table,
  .sales-lead-table tbody,
  .sales-lead-table tr,
  .sales-lead-table td {
    display: block;
    width: 100%;
  }

  .sales-lead-table colgroup,
  .sales-lead-table thead {
    display: none;
  }

  .sales-lead-table tbody {
    display: grid;
    gap: 12px;
  }

  .sales-lead-table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e3e9f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .sales-lead-table td {
    display: grid;
    gap: 6px;
    padding: 0;
    border: 0;
    align-content: start;
  }

  .sales-lead-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
  }

  .sales-lead-table .sales-inline-select,
  .sales-lead-table .sales-inline-referrer {
    width: 100%;
    max-width: 100%;
  }

  .sales-inline-next-stack,
  .sales-inline-next-date,
  .sales-inline-next-action {
    width: 100%;
    max-width: 100%;
  }

  .sales-option-row,
  .sales-option-row-owner,
  .sales-option-row-course {
    grid-template-columns: 1fr;
  }

  .wework-binding-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wework-binding-search-field,
  .wework-binding-toolbar-control,
  .wework-binding-toolbar-actions {
    width: 100%;
    max-width: 100%;
  }

  .wework-binding-table-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .wework-binding-table,
  .wework-binding-table tbody,
  .wework-binding-table tr,
  .wework-binding-table td {
    display: block;
    width: 100%;
  }

  .wework-binding-table colgroup,
  .wework-binding-table thead {
    display: none;
  }

  .wework-binding-table tbody {
    display: grid;
    gap: 12px;
  }

  .wework-binding-table tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    border: 1px solid #e3e9f0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .wework-binding-table td {
    display: grid;
    gap: 6px;
    padding: 0;
    border: 0;
    align-content: start;
  }

  .wework-binding-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
  }

  .wework-binding-channel,
  .wework-reminder-time,
  .wework-reminder-tone,
  .wework-binding-target-input {
    width: 100%;
    max-width: 100%;
  }
}

.student-workbook-list,
.student-workbook-choice-list {
  display: grid;
  gap: 8px;
}

.student-workbook-item,
.student-workbook-choice {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-workbook-item span,
.student-workbook-choice small {
  color: var(--muted);
  line-height: 1.4;
}

.student-workbook-picker {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.student-workbook-picker legend {
  padding: 0 6px;
  font-weight: 900;
}

.student-workbook-choice {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.student-workbook-choice input {
  margin-top: 4px;
}

.student-workbook-choice span {
  display: grid;
  gap: 3px;
}

.daily-plan-item-source {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

.student-task-row,
.student-submission-card,
.student-family-card,
.student-writing-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.student-task-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.student-task-row > div {
  display: grid;
  gap: 5px;
}

.student-family-card span,
.student-writing-card > span,
.student-writing-card p {
  display: grid;
  gap: 5px;
}

.student-writing-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.essay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.essay-workbench,
.essay-history-panel,
.writing-report {
  display: grid;
  gap: 14px;
}

.writing-profile-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(112px, 0.5fr) minmax(120px, 0.5fr);
  gap: 8px;
}

.writing-profile-strip span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  line-height: 1.4;
}

.writing-profile-strip strong {
  color: var(--text);
}

.essay-live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.essay-live-stats span {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.writing-history-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.writing-history-item {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.writing-history-item.active,
.writing-history-item:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.writing-history-item span,
.writing-report-head span,
.writing-report p,
.sentence-correction-card small {
  color: var(--muted);
  line-height: 1.45;
}

.writing-report-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.writing-report-head > div {
  display: grid;
  gap: 4px;
}

.writing-score {
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 58px;
  padding: 8px;
  border-radius: 8px;
  background: #ecfdf5;
  color: var(--green);
  font-size: 22px;
  font-weight: 900;
}

.writing-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.writing-score-grid span {
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.writing-score-grid strong {
  color: var(--text);
  font-size: 22px;
}

.writing-report-section {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.writing-report-section h4 {
  margin: 0;
  font-size: 14px;
}

.writing-report-section pre {
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel-soft);
  white-space: pre-wrap;
  line-height: 1.55;
}

.sentence-correction-card {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.sentence-correction-card p {
  margin: 0;
}

.error-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.error-summary-grid span {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.error-summary-grid strong {
  color: var(--text);
}

.writing-ops-section {
  align-items: stretch;
}

.writing-exam-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 8px;
}

.writing-exam-tabs .segment {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.writing-exam-tabs .segment small {
  color: var(--muted);
}

.writing-exam-tabs .segment.active {
  border-color: #6ea8fe;
  background: #eef5ff;
  color: #124f9f;
}

.writing-track-board {
  display: grid;
  gap: 12px;
}

.writing-track-group {
  display: grid;
  gap: 10px;
}

.writing-track-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.writing-track-head strong {
  color: var(--text);
}

.writing-profile-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.writing-profile-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-height: 138px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  text-decoration: none;
}

.writing-profile-card span {
  display: grid;
  gap: 5px;
}

.writing-profile-card small {
  color: var(--muted);
  line-height: 1.4;
}

.writing-profile-card.active {
  border-color: #36b37e;
  background: #f0fdf4;
}

.writing-profile-meta {
  grid-template-columns: 1fr;
}

.writing-profile-manager,
.writing-library-list,
.writing-review-workbench,
.writing-case-grid {
  display: grid;
  gap: 12px;
}

.writing-config-card,
.writing-library-card,
.writing-review-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.writing-config-card.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.writing-config-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.writing-config-head span {
  display: grid;
  gap: 4px;
}

.writing-config-head small,
.writing-library-card small,
.writing-library-card p,
.writing-review-card p {
  color: var(--muted);
  line-height: 1.45;
}

.writing-rule-grid,
.writing-review-stats,
.writing-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.writing-rule-grid span,
.writing-review-stats span,
.writing-reference-grid span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px;
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
}

.writing-rule-grid strong,
.writing-review-stats strong,
.writing-reference-grid strong {
  color: var(--text);
}

.writing-library-card pre {
  overflow: auto;
  max-height: 220px;
  margin: 0;
  padding: 11px;
  border-radius: 8px;
  background: var(--panel-soft);
  line-height: 1.5;
  white-space: pre-wrap;
}

.writing-case-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.essay-module-content {
  display: grid;
  gap: 18px;
}

.essay-module-head-panel,
.essay-section-panel,
.essay-management-panel,
.writing-report-panel {
  display: grid;
  gap: 16px;
}

.essay-module-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  gap: 12px;
  align-items: stretch;
}

.essay-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.essay-summary-metrics span {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
}

.essay-summary-metrics strong {
  color: var(--text);
  font-size: 18px;
}

.essay-section-head,
.essay-form-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.essay-section-head > div,
.essay-form-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.essay-section-head h3,
.essay-form-head h3 {
  margin: 0;
}

.essay-section-head span,
.essay-form-head span {
  color: var(--muted);
  line-height: 1.45;
}

.essay-submit-panel {
  gap: 18px;
}

.essay-form {
  gap: 16px;
}

.essay-form textarea[name="essayText"] {
  min-height: 360px;
  line-height: 1.65;
}

.essay-form-actions {
  display: grid;
  gap: 8px;
}

.essay-form-actions .primary-button {
  min-height: 54px;
  font-size: 17px;
}

.essay-side-panel {
  position: sticky;
  top: 104px;
  padding: 16px;
}

.essay-side-panel .module-list,
.essay-side-panel .task-list,
.essay-side-panel .writing-rule-list {
  gap: 8px;
}

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

.writing-report-panel {
  min-width: 0;
}

.writing-management-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.writing-management-tabs .segment {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.writing-management-tabs .segment.active,
.writing-management-tabs .segment:hover {
  border-color: #c9d8ef;
  background: #ffffff;
  color: var(--text);
}

.writing-rule-center {
  display: grid;
  gap: 16px;
}

.writing-rule-profile-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.writing-rule-profile-switcher .segment {
  display: grid;
  gap: 3px;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-decoration: none;
}

.writing-rule-profile-switcher .segment small {
  color: var(--muted);
}

.writing-rule-profile-switcher .segment.active {
  border-color: #36b37e;
  background: #f0fdf4;
}

.writing-rule-status-card,
.writing-rule-core-card,
.writing-rule-library-overview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.writing-rule-status-main {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.writing-rule-status-main > div:first-child {
  display: grid;
  gap: 5px;
}

.writing-rule-status-main h4 {
  margin: 0;
  font-size: 20px;
}

.writing-rule-status-main span,
.writing-rule-status-foot,
.writing-rule-note span,
.writing-rule-library-entry small {
  color: var(--muted);
  line-height: 1.45;
}

.writing-rule-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.writing-rule-status-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
}

.writing-rule-core-form {
  display: grid;
  gap: 12px;
}

.writing-rule-core-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}

.writing-rule-core-card {
  align-content: start;
  min-width: 0;
}

.writing-rule-core-card textarea {
  min-height: 104px;
}

.writing-rule-note {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.writing-rule-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.writing-rule-library-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.writing-rule-library-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  text-decoration: none;
}

.writing-rule-library-entry span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.writing-rule-library-entry em {
  min-width: 34px;
  height: 34px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.writing-rule-library-entry:hover {
  border-color: #b8cbe6;
  background: #ffffff;
}

.writing-history-item {
  gap: 7px;
}

.writing-history-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.writing-history-item-head strong {
  min-width: 0;
}

.writing-history-item-head em {
  min-width: 44px;
  padding: 4px 7px;
  border-radius: 8px;
  background: #ecfdf5;
  color: var(--green);
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.writing-history-item small {
  color: var(--muted);
  font-weight: 800;
}

.writing-local-analysis-editor {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #f0f9ff;
}

.writing-local-analysis-editor textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.segmented-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.segmented-toolbar .segment {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 700;
}

.segmented-toolbar .segment.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.pet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.pet-profile-panel,
.pet-companions-panel,
.pet-onboarding-panel,
.pet-quest-panel,
.pet-growth-path-panel,
.pet-shop-panel,
.pet-activities-panel,
.pet-inventory-panel,
.pet-rules-panel,
.pet-events-panel {
  display: grid;
  gap: 14px;
}

.pet-shop-panel,
.pet-onboarding-panel,
.pet-quest-panel,
.pet-growth-path-panel,
.pet-activities-panel,
.pet-inventory-panel,
.pet-events-panel {
  grid-column: 1 / -1;
}

.pet-layout > .learning-scope-toolbar,
.pet-layout > .notice {
  grid-column: 1 / -1;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.section-heading-row h3,
.section-heading-row p {
  margin: 0;
}

.pet-subtitle {
  margin: 4px 0 0;
  font-size: var(--font-card-title);
}

.pet-profile-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.pet-avatar {
  display: grid;
  place-items: center;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(145deg, #eef9fb, #ffffff);
  border: 1px solid #b8d8de;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.08);
}

.pet-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.pet-avatar-face {
  position: relative;
  display: block;
  width: 54px;
  height: 42px;
  border-radius: 50% 50% 46% 46%;
  background: #ffffff;
  border: 2px solid #5f98a5;
}

.pet-avatar-face::before,
.pet-avatar-face::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 18px 0 0 var(--primary);
}

.pet-avatar-face::before {
  left: 14px;
}

.pet-avatar-face::after {
  left: 23px;
  top: 27px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  box-shadow: none;
}

.pet-avatar-cat .pet-avatar-face {
  border-radius: 42% 42% 50% 50%;
}

.pet-avatar-cat .pet-avatar-face::before {
  top: -10px;
  left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background: #ffffff;
  border-left: 2px solid #5f98a5;
  border-top: 2px solid #5f98a5;
  transform: rotate(45deg);
  box-shadow: 28px -28px 0 -1px #ffffff, 28px -28px 0 1px #5f98a5;
}

.pet-avatar-dog .pet-avatar-face {
  border-radius: 48% 48% 42% 42%;
}

.pet-profile-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.pet-profile-main h3 {
  margin: 0 0 4px;
  font-size: var(--font-section-title);
}

.pet-profile-main span,
.pet-rule-card span,
.pet-rule-card small,
.pet-event-card span,
.pet-event-card small,
.pet-quest-row span,
.pet-quest-row small,
.pet-growth-phase span,
.pet-growth-phase small,
.pet-activity-card span,
.pet-activity-card small,
.pet-muted,
.pet-companion-card span,
.pet-shop-card p,
.pet-shop-card small,
.pet-inventory-row span,
.pet-ledger-row span,
.pet-ledger-row small,
.pet-room-preview span {
  color: var(--muted);
}

.pet-progress {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
}

.pet-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.pet-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.pet-stat-grid span {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 10px;
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 12px;
}

.pet-stat-grid strong {
  color: var(--text);
  font-size: 22px;
}

.pet-unlock-list,
.pet-mini-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pet-unlock-list span,
.pet-mini-stat-row span,
.pet-points-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-unlock-list .is-unlocked,
.pet-points-pill {
  border-color: #b8d8de;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.pet-companion-grid,
.pet-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.pet-companion-card,
.pet-shop-card,
.pet-inventory-row,
.pet-ledger-row,
.pet-room-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pet-companion-card,
.pet-shop-card {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.pet-companion-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.pet-companion-head .pet-avatar {
  width: 72px;
}

.pet-companion-head .pet-avatar-face {
  width: 38px;
  height: 30px;
}

.pet-companion-card h4,
.pet-shop-card strong,
.pet-inventory-row strong,
.pet-ledger-row strong,
.pet-room-preview strong {
  margin: 0;
  color: var(--text);
}

.pet-description {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
}

.pet-inline-form,
.pet-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.pet-inline-form input,
.pet-inline-form textarea,
.pet-create-form input,
.pet-create-form select {
  min-width: 160px;
  flex: 1 1 160px;
}

.pet-inline-form textarea {
  flex-basis: 100%;
  resize: vertical;
}

.pet-visual-customizer {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.pet-visual-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.pet-visual-preview strong,
.pet-photo-dropzone span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.pet-visual-preview span,
.pet-photo-dropzone small,
.pet-visual-message {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pet-visual-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary-text);
}

.pet-visual-image img,
.pet-visual-image video,
.pet-visual-image canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: none;
  filter: none;
}

.pet-visual-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
}

.pet-visual-status[data-status="running"],
.pet-visual-status[data-status="queued"] {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #075985;
}

.pet-visual-status[data-status="succeeded"],
.pet-visual-status[data-status="source_ready"] {
  border-color: #b8d8de;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.pet-visual-status[data-status="failed"] {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}

.pet-visual-form {
  display: grid;
  gap: 10px;
}

.pet-photo-dropzone {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px dashed #b8d8de;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.pet-photo-dropzone input {
  width: 100%;
  color: var(--muted);
  font-size: 12px;
}

.pet-visual-form textarea {
  min-height: 76px;
  resize: vertical;
}

.pet-visual-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pet-visual-controls select {
  width: auto;
  min-width: min(220px, 100%);
  flex: 1 1 220px;
}

.pet-visual-error {
  color: #b91c1c;
}

.pet-visual-message .notice {
  margin: 0;
  padding: 8px 10px;
}

.pet-item-visual {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--primary-soft);
  border: 1px solid #b8d8de;
}

.pet-item-visual span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--primary);
}

.pet-item-visual span[data-mark="food"] {
  border-radius: 50% 50% 44% 44%;
  background: #ef7f65;
}

.pet-item-visual span[data-mark="toy"] {
  border-radius: 50%;
  background: #5c91d6;
}

.pet-item-visual span[data-mark="furniture"] {
  border-radius: 4px;
  background: #7a8fa3;
}

.pet-item-visual span[data-mark="house"] {
  clip-path: polygon(50% 4%, 96% 42%, 86% 42%, 86% 96%, 14% 96%, 14% 42%, 4% 42%);
  background: #2f9c95;
}

.pet-item-visual span[data-mark="outfit"] {
  border-radius: 12px 12px 6px 6px;
  background: #8b78c9;
}

.pet-item-visual span[data-mark="pet_slot"] {
  border-radius: 50%;
  background: #c48a36;
}

.pet-item-title-row,
.pet-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pet-item-title-row span,
.pet-card-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-inventory-list,
.pet-activity-list,
.pet-ledger-list,
.pet-onboarding-steps,
.pet-quest-list,
.pet-growth-path-list {
  display: grid;
  gap: 10px;
}

.pet-quest-soft-cap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pet-quest-soft-cap span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-onboarding-step,
.pet-quest-row,
.pet-growth-phase {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pet-quest-row,
.pet-growth-phase {
  grid-template-columns: minmax(0, 1fr) auto;
}

.pet-onboarding-step strong,
.pet-quest-row strong,
.pet-growth-phase strong,
.pet-onboarding-bonus strong {
  display: block;
  margin: 0 0 4px;
  color: var(--text);
}

.pet-onboarding-step span,
.pet-quest-row span,
.pet-growth-phase span,
.pet-onboarding-bonus span {
  color: var(--muted);
}

.pet-onboarding-step[data-status="claimable"] {
  border-color: #b8d8de;
  background: var(--primary-soft);
}

.pet-onboarding-step[data-status="in_progress"] {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.pet-onboarding-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.pet-onboarding-bonus[data-status="claimed"],
.pet-quest-row[data-status="completed"],
.pet-growth-phase[data-status="completed"] {
  border-color: #b8d8de;
  background: var(--primary-soft);
}

.pet-quest-row[data-status="claimable"] {
  border-color: #99d8e4;
  background: #eefcff;
}

.pet-quest-progress,
.pet-growth-phase-state span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pet-growth-phase-state {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.pet-activity-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pet-activity-card strong {
  display: block;
  margin: 0 0 4px;
  color: var(--text);
}

.pet-activity-card small {
  display: block;
  margin-top: 4px;
}

.pet-activity-state {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.pet-activity-state span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-activity-card[data-status="completed"] .pet-activity-state span {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.pet-activity-card[data-status="in_progress"] .pet-activity-state span {
  background: #e0f2fe;
  color: #075985;
}

.pet-activity-card[data-status="cooldown"] .pet-activity-state span {
  background: #fef3c7;
  color: #92400e;
}

.pet-inventory-row,
.pet-ledger-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.pet-ledger-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.pet-ledger-row[data-direction="earn"] small {
  color: #0f766e;
}

.pet-ledger-row[data-direction="spend"] small {
  color: #a16207;
}

.pet-compact-select {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-compact-select select {
  width: auto;
  min-width: 120px;
  min-height: 32px;
}

.pet-room-preview {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
}

.pet-room-scene {
  position: relative;
  overflow: hidden;
  height: 86px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fbfc 0%, #eef3f6 100%);
  border: 1px solid var(--line);
}

.pet-room-window,
.pet-room-rug,
.pet-room-desk {
  position: absolute;
  display: block;
}

.pet-room-window {
  top: 14px;
  left: 16px;
  width: 34px;
  height: 28px;
  border: 2px solid #78a7b0;
  border-radius: 5px;
  background: #d9eef2;
}

.pet-room-rug {
  right: 14px;
  bottom: 10px;
  width: 54px;
  height: 18px;
  border-radius: 50%;
  background: #d7e7ea;
}

.pet-room-desk {
  left: 54px;
  bottom: 18px;
  width: 48px;
  height: 24px;
  border-radius: 5px 5px 2px 2px;
  background: #9eb2bd;
}

.pet-rule-list,
.pet-event-list {
  display: grid;
  gap: 10px;
}

.pet-rule-card,
.pet-event-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pet-event-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.pet-layout.pet-workbench {
  grid-template-columns: 1fr;
  gap: 16px;
}

.pet-workbench-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.pet-workbench-topbar .module-title-row {
  min-width: 0;
}

.pet-workbench-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.pet-workbench-toolbar .svg-icon,
.pet-room-panel .svg-icon {
  flex: 0 0 auto;
}

.pet-workbench [data-pet-open-panel],
.pet-workbench [data-pet-close-panel],
.pet-panel-dialog {
  scroll-margin-top: 120px;
}

.pet-workbench-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.46fr);
  gap: 16px;
  align-items: start;
}

.pet-workbench-main,
.pet-workbench-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.pet-room-panel,
.pet-level-panel,
.pet-daily-panel,
.pet-active-care-panel,
.pet-quick-panel {
  display: grid;
  gap: 14px;
}

.pet-room-panel {
  overflow: hidden;
}

.pet-stage {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 360px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fcfd 0%, #edf4f8 100%);
}

.pet-stage-window,
.pet-stage-rug,
.pet-stage-desk {
  position: absolute;
  display: block;
}

.pet-stage-window {
  top: 22px;
  left: 24px;
  width: 86px;
  height: 58px;
  border: 2px solid #8bb8c1;
  border-radius: 7px;
  background: #d9eef2;
}

.pet-stage-window::before,
.pet-stage-window::after {
  content: "";
  position: absolute;
  background: #8bb8c1;
}

.pet-stage-window::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

.pet-stage-window::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
}

.pet-stage-rug {
  left: 50%;
  bottom: 26px;
  width: min(260px, 72%);
  height: 72px;
  border-radius: 50%;
  background: #dce9ed;
  transform: translateX(-50%);
}

.pet-stage-desk {
  right: 36px;
  bottom: 58px;
  width: 116px;
  height: 58px;
  border-radius: 7px 7px 4px 4px;
  background: #a7b8c4;
  box-shadow: inset 0 -12px 0 rgba(37, 48, 68, 0.08);
}

.pet-stage-desk::before,
.pet-stage-desk::after {
  content: "";
  position: absolute;
  bottom: -34px;
  width: 10px;
  height: 36px;
  border-radius: 4px;
  background: #8799a8;
}

.pet-stage-desk::before {
  left: 18px;
}

.pet-stage-desk::after {
  right: 18px;
}

.pet-stage-bubble {
  position: absolute;
  z-index: 3;
  top: 88px;
  left: calc(50% + 60px);
  display: grid;
  gap: 3px;
  width: min(240px, 42%);
  padding: 10px 12px;
  border: 1px solid #b8d8de;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(37, 48, 68, 0.08);
}

.pet-stage-bubble strong {
  color: var(--text);
}

.pet-stage-bubble span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pet-stage-figure {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(224px, 58vw);
  min-height: 164px;
  margin: 0 auto 10px;
  animation: pet-stage-breathe 2.8s ease-in-out infinite;
}

.pet-stage-figure.has-image img,
.pet-stage-figure.has-video video,
.pet-stage-figure.has-video canvas {
  width: min(214px, 100%);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
  filter: none;
}

.pet-stage-figure.has-chroma-video .pet-chroma-source,
.pet-visual-image .pet-chroma-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pet-stage-figure.has-chroma-video .pet-chroma-canvas,
.pet-visual-image .pet-chroma-canvas {
  display: block;
}

.pet-stage-figure.pet-chroma-failed .pet-chroma-source,
.pet-visual-image.pet-chroma-failed .pet-chroma-source {
  position: static;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.pet-stage-body {
  position: relative;
  width: 142px;
  height: 116px;
  border: 3px solid #5f98a5;
  border-radius: 48% 48% 42% 42%;
  background: #ffffff;
  box-shadow: 0 14px 26px rgba(37, 48, 68, 0.12);
}

.pet-stage-body::before,
.pet-stage-body::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 36px;
  height: 36px;
  border-top: 3px solid #5f98a5;
  border-left: 3px solid #5f98a5;
  border-radius: 5px 0 0 0;
  background: #ffffff;
}

.pet-stage-body::before {
  left: 18px;
  transform: rotate(42deg);
}

.pet-stage-body::after {
  right: 18px;
  transform: rotate(48deg) scaleX(-1);
}

.pet-stage-dog .pet-stage-body::before,
.pet-stage-dog .pet-stage-body::after {
  top: 8px;
  width: 28px;
  height: 50px;
  border-top: 0;
  border-radius: 18px;
  background: #eef6f8;
}

.pet-stage-dog .pet-stage-body::before {
  left: -16px;
  transform: rotate(12deg);
}

.pet-stage-dog .pet-stage-body::after {
  right: -16px;
  transform: rotate(-12deg);
}

.pet-stage-eyes {
  position: absolute;
  top: 45px;
  left: 44px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 42px 0 0 var(--primary);
}

.pet-stage-mouth {
  position: absolute;
  top: 71px;
  left: 61px;
  width: 22px;
  height: 10px;
  border-bottom: 3px solid #5f98a5;
  border-radius: 0 0 20px 20px;
}

.pet-stage-tail {
  position: absolute;
  right: -38px;
  bottom: 34px;
  width: 52px;
  height: 36px;
  border: 9px solid #5f98a5;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 34px 0 0;
  transform-origin: left bottom;
  animation: pet-stage-tail 2s ease-in-out infinite;
}

@keyframes pet-stage-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes pet-stage-tail {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(8deg);
  }
}

.pet-level-stack {
  display: grid;
  gap: 8px;
}

.pet-level-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pet-level-card strong {
  color: var(--text);
  font-size: 16px;
}

.pet-progress-growth span {
  background: #c88422;
}

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

.pet-status-grid span {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-status-grid strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.pet-compact-quest-list,
.pet-quick-grid {
  display: grid;
  gap: 8px;
}

.pet-compact-quest,
.pet-chest-card,
.pet-quick-tile {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.pet-compact-quest,
.pet-chest-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.pet-compact-quest strong,
.pet-chest-card strong,
.pet-quick-tile strong {
  color: var(--text);
}

.pet-compact-quest span,
.pet-chest-card span,
.pet-quick-tile span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.pet-compact-quest[data-status="completed"],
.pet-chest-card[data-status="completed"],
.pet-chest-card[data-status="claimable"] {
  border-color: #b8d8de;
  background: var(--primary-soft);
}

.pet-quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pet-quick-tile {
  min-height: 84px;
  text-align: left;
}

.pet-panel-is-open {
  overflow: hidden;
}

.pet-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  background: rgba(37, 48, 68, 0.42);
}

.pet-panel-backdrop.is-open {
  display: block;
}

.pet-panel-dialog {
  position: fixed;
  z-index: 710;
  display: none;
  gap: 14px;
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 36px));
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(37, 48, 68, 0.18);
}

.pet-panel-dialog.is-open {
  display: grid;
}

.pet-panel-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pet-panel-modal.wide {
  width: min(980px, calc(100vw - 32px));
}

.pet-panel-drawer {
  top: 18px;
  right: 18px;
  width: min(540px, calc(100vw - 32px));
}

.pet-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.pet-panel-head h3 {
  margin: 0 0 2px;
}

.pet-panel-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.pet-panel-inline-head {
  margin-bottom: 2px;
}

.pet-panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pet-panel-tabs button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-weight: 800;
}

.pet-panel-tabs button.is-active {
  border-color: #b8d8de;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.pet-panel-tab-pane {
  display: none;
}

.pet-panel-tab-pane.is-active {
  display: grid;
  gap: 10px;
}

.pet-panel-dialog .pet-growth-path-panel,
.pet-panel-dialog .pet-quest-panel {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.pet-panel-dialog .pet-shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pet-panel-dialog .pet-companion-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

@media (max-width: 980px) {
  .pet-workbench-topbar,
  .pet-workbench-shell {
    grid-template-columns: 1fr;
  }

  .pet-workbench-toolbar {
    justify-content: flex-start;
  }

  .pet-stage {
    min-height: 320px;
  }

  .pet-stage-bubble {
    top: 80px;
    left: 18px;
    width: min(240px, calc(100% - 36px));
  }
}

@media (max-width: 720px) {
  .pet-stage-desk {
    right: 18px;
    width: 92px;
  }

  .pet-status-grid,
  .pet-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pet-activity-card,
  .pet-inventory-row,
  .pet-ledger-row,
  .pet-quest-row,
  .pet-growth-phase,
  .pet-compact-quest,
  .pet-chest-card,
  .pet-visual-preview {
    grid-template-columns: 1fr;
  }

  .pet-activity-state,
  .pet-growth-phase-state {
    justify-items: start;
    text-align: left;
  }

  .pet-compact-select {
    flex-wrap: wrap;
  }

  .pet-compact-select select {
    width: 100%;
  }

  .pet-visual-controls select,
  .pet-visual-controls button {
    width: 100%;
  }

  .pet-panel-dialog {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 20px);
    transform: none;
  }

  .pet-panel-head {
    align-items: center;
  }
}

@media (max-width: 560px) {
  .pet-workbench-toolbar .compact-button span {
    display: none;
  }

  .pet-workbench-toolbar .compact-button {
    min-width: 38px;
  }

  .pet-room-panel .section-heading-row,
  .pet-level-panel .section-heading-row,
  .pet-daily-panel .section-heading-row,
  .pet-active-care-panel .section-heading-row,
  .pet-quick-panel .section-heading-row,
  .pet-panel-inline-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pet-stage {
    min-height: 292px;
  }

  .pet-stage-window {
    width: 64px;
    height: 48px;
  }

  .pet-stage-body {
    width: 124px;
    height: 102px;
  }

  .pet-stage-eyes {
    top: 40px;
    left: 38px;
    box-shadow: 38px 0 0 var(--primary);
  }

  .pet-stage-mouth {
    top: 64px;
    left: 53px;
  }

  .pet-status-grid,
  .pet-quick-grid {
    grid-template-columns: 1fr;
  }
}

.grammar-translation-shell {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.grammar-translation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.9)),
    #ffffff;
  box-shadow: var(--shadow);
}

.grammar-translation-head > div:first-child {
  display: grid;
  gap: 6px;
  align-content: center;
  min-width: 0;
}

.grammar-translation-head h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-page-title);
  line-height: 1.12;
}

.grammar-translation-head span {
  color: var(--muted);
  line-height: 1.5;
}

.grammar-translation-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.grammar-translation-metrics span {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-size: 12px;
}

.grammar-translation-metrics strong {
  color: var(--text);
  font-size: var(--font-metric-compact);
  line-height: 1;
}

.grammar-practice-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.grammar-practice-sidebar,
.grammar-practice-panel,
.grammar-list-panel,
.grammar-workbook-layout > .panel,
.grammar-rule-pack-panel {
  min-width: 0;
}

.grammar-practice-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  padding: 16px;
}

.grammar-practice-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.grammar-selector-form,
.grammar-wrong-filter {
  display: grid;
  gap: 12px;
}

.grammar-selector-form label,
.grammar-wrong-filter label,
.grammar-workbook-rule-form label,
.grammar-rule-pack-editor label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.grammar-selector-form select,
.grammar-wrong-filter select,
.grammar-attempt-form textarea,
.grammar-workbook-rule-form select,
.grammar-rule-pack-editor input,
.grammar-rule-pack-editor select,
.grammar-rule-pack-editor textarea {
  width: 100%;
  border: 1px solid rgba(38, 48, 68, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
}

.grammar-selector-form select,
.grammar-wrong-filter select,
.grammar-workbook-rule-form select,
.grammar-rule-pack-editor input,
.grammar-rule-pack-editor select {
  min-height: 42px;
  padding: 8px 10px;
}

.grammar-rule-pack-editor textarea,
.grammar-attempt-form textarea {
  padding: 10px 12px;
  line-height: 1.6;
  resize: vertical;
}

.grammar-progress-list {
  display: grid;
  gap: 10px;
}

.grammar-progress-list h3,
.grammar-list-panel h3,
.grammar-workbook-layout h3 {
  margin: 0;
  font-size: 16px;
}

.grammar-progress-row {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(38, 48, 68, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.grammar-progress-row strong {
  color: var(--text);
}

.grammar-progress-row span,
.grammar-progress-row small {
  color: var(--muted);
  line-height: 1.4;
}

.grammar-progress-row progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e7edf5;
}

.grammar-progress-row progress::-webkit-progress-bar {
  border-radius: 999px;
  background: #e7edf5;
}

.grammar-progress-row progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--primary);
}

.grammar-progress-row progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--primary);
}

.grammar-practice-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(236, 253, 245, 0.82), rgba(239, 246, 255, 0.88)),
    #ffffff;
}

.grammar-practice-toolbar > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.grammar-practice-toolbar strong {
  color: var(--text);
  font-size: 16px;
}

.grammar-practice-toolbar span:not(.range-chip) {
  color: var(--muted);
  line-height: 1.45;
}

.range-chip {
  display: inline-grid;
  place-items: center;
  min-width: 68px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary-text);
  font-weight: 900;
  box-shadow: inset 0 0 0 1px var(--primary-border);
}

.grammar-question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 8px;
}

.grammar-question-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(38, 48, 68, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-weight: 900;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.grammar-question-grid button:hover {
  transform: translateY(-1px);
  border-color: var(--primary-border);
}

.grammar-question-grid button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.grammar-question-grid button.passed {
  border-color: rgba(15, 118, 110, 0.35);
  background: #ecfdf5;
  color: #0f766e;
}

.grammar-question-grid button.wrong {
  border-color: rgba(190, 18, 60, 0.28);
  background: #fff1f2;
  color: #be123c;
}

.grammar-question-grid button.pending {
  border-color: rgba(161, 98, 7, 0.32);
  background: #fffbeb;
  color: #854d0e;
}

.grammar-question-grid button.target-gap {
  border-color: rgba(180, 83, 9, 0.28);
  background: #fff7ed;
  color: #9a3412;
}

.grammar-question-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.grammar-question-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.grammar-question-card h3 {
  margin: 0;
  font-size: var(--font-section-title);
  line-height: 1.35;
}

.grammar-question-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.grammar-attempt-form {
  display: grid;
  gap: 12px;
}

.grammar-attempt-form label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.grammar-attempt-form textarea {
  min-height: 150px;
  font-size: 16px;
}

.grammar-attempt-form textarea[readonly] {
  background: #f8fafc;
  color: var(--muted);
}

#grammar-attempt-message:not(:empty) {
  flex: 1 1 100%;
  padding: 9px 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  text-align: center;
  line-height: 1.45;
}

.grammar-answer-lock {
  padding: 10px 12px;
  border: 1px solid rgba(161, 98, 7, 0.22);
  border-radius: 8px;
  background: #fffbeb;
  color: #8a5a05;
  line-height: 1.5;
}

.grammar-feedback-panel {
  display: grid;
  gap: 22px;
  padding: 18px 0 0;
}

.grammar-feedback-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: #f7fbfb;
  color: var(--muted);
  font-weight: 800;
}

.grammar-feedback-panel.needs-work .grammar-feedback-status {
  border-color: rgba(190, 18, 60, 0.18);
  background: #fff8f8;
}

.grammar-feedback-panel.pending-review .grammar-feedback-status {
  border-color: rgba(161, 98, 7, 0.24);
  background: #fffbeb;
}

.grammar-feedback-panel.pending-review .grammar-feedback-status strong {
  font-size: 16px;
}

.grammar-feedback-panel.target-gap .grammar-feedback-status {
  border-color: rgba(180, 83, 9, 0.22);
  background: #fff7ed;
}

.grammar-feedback-panel.target-gap .grammar-feedback-status strong {
  color: #9a3412;
  font-size: 16px;
}

.grammar-feedback-status span {
  color: var(--muted);
  font-size: 12px;
}

.grammar-feedback-status strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.grammar-feedback-status em {
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.grammar-feedback-section {
  display: grid;
  gap: 14px;
}

.grammar-feedback-section h3 {
  margin: 0;
  color: #13586a;
  font-size: var(--font-section-title);
  line-height: 1.25;
}

.grammar-example-card {
  display: grid;
  gap: 18px;
  padding: 26px 28px;
  border: 1px solid rgba(102, 122, 148, 0.22);
  border-radius: 8px;
  background: #fbfdff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.grammar-standard-badge {
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  background: #e8f7fa;
  color: #13586a;
  font-weight: 900;
}

.grammar-example-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.5;
}

.grammar-example-card b {
  color: #667085;
}

.grammar-example-card span {
  min-width: 0;
}

.grammar-example-english strong {
  min-width: 0;
  color: #111827;
  font-size: var(--font-learning-text);
  line-height: 1.35;
}

.grammar-example-hint {
  font-size: 18px;
}

.grammar-reference-alts {
  display: grid;
  gap: 8px;
}

.grammar-reference-alts small {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.grammar-issue-list {
  display: grid;
  gap: 12px;
}

.grammar-issue-card {
  display: grid;
  gap: 12px;
  padding: 20px 24px;
  border-left: 5px solid #c6281d;
  border-radius: 0 8px 8px 0;
  background: #fff0f0;
}

.grammar-issue-card.ok {
  border-left-color: #0f766e;
  background: #f0fdfa;
}

.grammar-issue-card.pending {
  border-left-color: #a16207;
  background: #fffbeb;
}

.grammar-issue-card h4 {
  margin: 0;
  color: #c6281d;
  font-size: 20px;
  line-height: 1.3;
}

.grammar-issue-card.ok h4 {
  color: #0f766e;
}

.grammar-issue-card.pending h4 {
  color: #854d0e;
}

.grammar-issue-card p {
  margin: 0;
  color: #667085;
  font-size: 17px;
  line-height: 1.55;
}

.grammar-issue-card b {
  color: #667085;
}

.grammar-issue-rewrite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.grammar-issue-rewrite span {
  color: #c6281d;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.grammar-issue-rewrite i {
  color: #475467;
  font-style: normal;
  font-weight: 900;
}

.grammar-issue-rewrite strong {
  color: #28865f;
  font-weight: 900;
}

.grammar-issue-location span,
.grammar-issue-reason span,
.grammar-issue-suggestion span {
  overflow-wrap: anywhere;
}

.grammar-issue-location span {
  color: #111827;
  font-weight: 900;
}

.grammar-ai-review.grammar-feedback-section {
  padding: 18px 20px;
  border: 1px solid rgba(38, 48, 68, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.grammar-ai-review.grammar-feedback-section.failed {
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
}

.grammar-ai-review.grammar-feedback-section h3 {
  font-size: 20px;
}

.grammar-ai-review.grammar-feedback-section > div {
  display: grid;
  gap: 8px;
}

.grammar-ai-review.grammar-feedback-section span {
  color: var(--muted);
  font-weight: 900;
}

.grammar-ai-review.grammar-feedback-section p,
.grammar-ai-review.grammar-feedback-section ul {
  margin: 0;
  line-height: 1.55;
}

.grammar-ai-issue-category strong {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-size: 14px;
  line-height: 1.35;
}

.grammar-ai-issue-rewrite {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.grammar-ai-issue-rewrite span {
  color: #be123c;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.grammar-ai-issue-rewrite i {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.grammar-ai-issue-rewrite strong {
  color: #15803d;
  font-weight: 900;
}

.grammar-review-timing {
  color: var(--muted);
  font-size: 12px;
}

.grammar-result-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(190, 18, 60, 0.18);
  border-radius: 8px;
  background: #fff7f7;
}

.grammar-result-card.passed {
  border-color: rgba(15, 118, 110, 0.2);
  background: #f4fbf8;
}

.grammar-result-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.grammar-result-head strong {
  display: grid;
  place-items: center;
  min-width: 70px;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(38, 48, 68, 0.08);
}

.grammar-result-head span {
  color: var(--muted);
  font-weight: 800;
}

.grammar-dimension-bars {
  display: grid;
  gap: 9px;
}

.grammar-dimension-bars > div {
  display: grid;
  grid-template-columns: minmax(70px, 110px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.grammar-dimension-bars span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.grammar-dimension-bars div div {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(38, 48, 68, 0.1);
}

.grammar-dimension-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.grammar-reference-box,
.grammar-ai-review,
.grammar-import-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(38, 48, 68, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

.grammar-reference-box span,
.grammar-ai-review span,
.grammar-import-preview strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.grammar-reference-box p,
.grammar-ai-review p,
.grammar-ai-review ul {
  margin: 0;
  line-height: 1.55;
}

.grammar-question-editor .section-header {
  margin-bottom: 2px;
}

.grammar-semantic-config-grid label > small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.grammar-record-answer {
  min-width: 260px;
}

.grammar-record-answer strong,
.grammar-record-answer span,
.grammar-record-answer small {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.grammar-record-answer span,
.grammar-record-answer small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.grammar-record-review {
  display: grid;
  gap: 8px;
  min-width: min(320px, 70vw);
  margin-top: 10px;
}

.grammar-record-review textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}

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

.grammar-result-grid > div {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.grammar-result-grid h4 {
  margin: 0;
  font-size: 14px;
}

.grammar-result-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.grammar-ai-review.failed {
  border-color: rgba(190, 18, 60, 0.2);
  background: #fff1f2;
}

.grammar-ai-review > div {
  display: grid;
  gap: 3px;
}

.grammar-ai-review strong {
  color: var(--text);
}

/* AI 点评中的修改前后表达需要优先于通用辅助文字样式，保证删除线和重点内容清楚可读。 */
.grammar-ai-review > div > span:first-child {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.grammar-ai-review .grammar-ai-issue-rewrite {
  gap: 10px;
  font-size: 18px;
  line-height: 1.5;
}

.grammar-ai-review .grammar-ai-issue-rewrite span {
  color: #991b1b;
  font-size: 18px;
  font-weight: 850;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
}

.grammar-ai-review .grammar-ai-issue-rewrite i {
  color: #0f766e;
  font-size: 20px;
  font-weight: 900;
}

.grammar-ai-review .grammar-ai-issue-rewrite strong {
  color: #0f766e;
  font-size: 18px;
  font-weight: 900;
}

.grammar-ai-review p,
.grammar-ai-review li {
  color: var(--text);
}

.grammar-list-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.grammar-wrong-filter {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.grammar-wrong-filter span {
  grid-column: 1 / -1;
}

.grammar-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.grammar-list-card > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.grammar-list-card strong {
  color: var(--text);
  line-height: 1.35;
}

.grammar-list-card span,
.grammar-list-card small {
  color: var(--muted);
  line-height: 1.45;
}

.grammar-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.grammar-workbook-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.grammar-workbook-layout > .panel {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.grammar-rule-pack-panel {
  grid-column: 1 / -1;
}

.grammar-workbook-list,
.grammar-question-list,
.grammar-rule-pack-list {
  display: grid;
  gap: 10px;
}

.grammar-workbook-list button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
}

.grammar-workbook-list button span {
  color: var(--muted);
}

.grammar-workbook-list button.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.grammar-workbook-rule-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(38, 48, 68, 0.08);
  border-radius: 8px;
  background: #f8fafc;
}

.grammar-workbook-rule-form span {
  grid-column: 1 / -1;
}

.grammar-import-form textarea[name="text"] {
  min-height: 140px;
}

.grammar-import-preview {
  margin-top: 4px;
}

.grammar-rule-pack-editor {
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.grammar-rule-pack-editor summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.grammar-rule-pack-editor summary span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 12px;
}

.grammar-rule-pack-editor[open] summary {
  border-bottom: 1px solid rgba(38, 48, 68, 0.08);
  background: #f8fafc;
}

.grammar-rule-pack-editor form {
  padding: 14px;
}

.grammar-rule-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(38, 48, 68, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.grammar-rule-checkboxes legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.grammar-rule-checkboxes .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  font-size: 13px;
}

.grammar-rule-pack-editor .inline-check {
  display: flex;
  align-items: center;
  gap: 7px;
}

.grammar-rule-pack-editor input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
}

@media (max-width: 1180px) {
  .grammar-translation-head,
  .grammar-practice-layout,
  .grammar-workbook-layout {
    grid-template-columns: 1fr;
  }

  .grammar-practice-sidebar {
    position: static;
  }

  .grammar-translation-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grammar-rule-pack-panel {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .grammar-translation-head,
  .grammar-practice-sidebar,
  .grammar-practice-panel,
  .grammar-list-panel,
  .grammar-workbook-layout > .panel {
    padding: 14px;
  }

  .grammar-translation-metrics,
  .grammar-result-grid,
  .grammar-wrong-filter,
  .grammar-workbook-rule-form {
    grid-template-columns: 1fr;
  }

  .grammar-practice-toolbar,
  .grammar-result-head,
  .grammar-list-card {
    grid-template-columns: 1fr;
  }

  .range-chip {
    justify-self: start;
  }

  .grammar-question-grid {
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  }

  .grammar-dimension-bars > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .grammar-feedback-section h3 {
    font-size: 20px;
  }

  .grammar-example-card,
  .grammar-issue-card {
    padding: 18px;
  }

  .grammar-example-card p,
  .grammar-issue-card p {
    font-size: 16px;
  }

  .grammar-example-english strong {
    font-size: 19px;
  }

  .grammar-list-actions {
    justify-content: stretch;
  }

  .grammar-list-actions button,
  .grammar-list-card > button,
  .grammar-workbook-rule-form button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .grammar-translation-shell {
    gap: 14px;
  }

  .grammar-translation-head h2 {
    font-size: var(--font-section-title);
  }

  .grammar-translation-metrics span {
    min-height: 70px;
  }

  .grammar-question-card h3 {
    font-size: 20px;
  }

  .grammar-attempt-form textarea {
    min-height: 132px;
  }

  .grammar-rule-pack-editor summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1420px) {
  .topbar {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "brand user"
      "menu menu";
    align-items: start;
    row-gap: 12px;
  }

  .module-top-menu {
    width: 100%;
    max-width: none;
  }

  .user-area {
    width: min(100%, 760px);
    justify-self: end;
    align-items: flex-end;
  }

  .schedule-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .schedule-search-field {
    grid-column: span 2;
  }

  .user-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .user-search-field {
    grid-column: span 2;
  }

  .daily-plan-review-workspace {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }

  .daily-plan-review-workspace .daily-plan-review-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1680px) {
  body.module-sidebar-route .topbar {
    grid-template-columns: max-content minmax(560px, 1fr) minmax(250px, max-content);
    grid-template-areas: "brand menu user";
    align-items: center;
    column-gap: 14px;
  }

  body.module-sidebar-route .module-top-menu {
    width: 100%;
    max-width: none;
  }

  body.module-sidebar-route .user-area {
    width: fit-content;
    justify-self: end;
    align-items: flex-end;
  }
}

@media (min-width: 1181px) and (max-width: 1679px) {
  body.module-sidebar-route .topbar {
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "brand user"
      "menu menu";
    align-items: start;
    row-gap: 12px;
  }

  body.module-sidebar-route .module-top-menu {
    width: 100%;
    max-width: none;
  }

  body.module-sidebar-route .user-area {
    width: min(100%, 760px);
    justify-self: end;
    align-items: flex-end;
  }

  body.module-sidebar-route .account-row,
  body.module-sidebar-route .tenant-row {
    width: 100%;
  }
}

@media (max-width: 1380px) {
  .account-row,
  .tenant-row {
    width: 100%;
  }

  .user-chip {
    max-width: 100%;
  }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "menu"
      "user";
    align-items: start;
  }

  .module-top-menu {
    max-width: none;
    min-width: 0;
  }

  .topbar-brandline,
  .module-top-menu,
  .user-area {
    grid-column: 1;
  }

  .user-area {
    justify-self: stretch;
    justify-content: flex-start;
    align-items: stretch;
  }

  .desktop-user-toolbar {
    justify-content: flex-start;
  }

  .desktop-account-popover {
    right: auto;
    left: 0;
  }

  .account-row {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
  }

  .identity-switcher {
    flex-basis: 100%;
    max-width: none;
    justify-content: flex-start;
  }

  .account-row,
  .tenant-row,
  .language-switcher {
    justify-content: flex-start;
  }

  .schedule-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .schedule-dashboard-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-search-field {
    grid-column: span 2;
  }
}

.ielts-module-content,
.ielts-attempt-page {
  display: grid;
  gap: 18px;
}

.exam-linked-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.exam-linked-entry h3,
.exam-start-card strong,
.exam-question-card strong {
  display: block;
  overflow-wrap: break-word;
  word-break: normal;
}

.exam-action-list,
.exam-card-grid {
  display: grid;
  gap: 12px;
}

.exam-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ielts-rainbow-module {
  --ielts-pink: #fbc2be;
  --ielts-peach: #fed8c7;
  --ielts-yellow: #fff2cc;
  --ielts-mint: #b8e8b3;
  --ielts-cyan: #bde1ff;
  --ielts-blue: #d3deff;
  --ielts-lavender: #d7cdfa;
  --ielts-ink: #263044;
  --ielts-muted: #6c7485;
  --ielts-paper: #f5f7fa;
  --ielts-line: rgba(38, 48, 68, 0.1);
  --ielts-rainbow: linear-gradient(90deg, var(--ielts-pink), var(--ielts-peach), var(--ielts-yellow), var(--ielts-mint), var(--ielts-cyan), var(--ielts-blue), var(--ielts-lavender));
  --ielts-glow: 0 0 14px rgba(189, 225, 255, 0.72), 0 0 26px rgba(251, 194, 190, 0.36), 0 0 42px rgba(215, 205, 250, 0.28);
  min-height: calc(100vh - 104px);
  margin: -28px -32px -48px;
  padding: 30px 34px 44px;
  color: var(--ielts-ink);
  background: var(--ielts-paper);
}

.ielts-rainbow-home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.ielts-rainbow-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.ielts-rainbow-summary,
.ielts-rainbow-mode-panel,
.ielts-rainbow-entry-card {
  border: 1px solid var(--ielts-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 44px rgba(85, 96, 124, 0.1);
}

.ielts-rainbow-summary {
  position: relative;
  min-height: 308px;
  overflow: hidden;
  padding: 26px;
  background:
    radial-gradient(circle at 86% 30%, rgba(189, 225, 255, 0.56), transparent 18%),
    radial-gradient(circle at 92% 22%, rgba(255, 242, 204, 0.5), transparent 13%),
    radial-gradient(ellipse at 86% 82%, rgba(251, 194, 190, 0.28), transparent 23%),
    radial-gradient(ellipse at 95% 84%, rgba(184, 232, 179, 0.28), transparent 20%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.92) 54%, rgba(255, 255, 255, 0.48) 100%);
}

.ielts-rainbow-summary::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 8px;
  border-radius: 0 0 999px 999px;
  background: var(--ielts-rainbow);
  box-shadow: var(--ielts-glow);
}

.ielts-rainbow-summary::after {
  content: "";
  position: absolute;
  right: 42px;
  top: 64px;
  width: min(36vw, 420px);
  height: 178px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(251, 194, 190, 0.46), rgba(254, 216, 199, 0.46), rgba(255, 242, 204, 0.5), rgba(184, 232, 179, 0.46), rgba(189, 225, 255, 0.5), rgba(211, 222, 255, 0.48), rgba(215, 205, 250, 0.46));
  filter: blur(28px);
  opacity: 0.54;
  pointer-events: none;
}

.ielts-rainbow-summary-main {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.ielts-rainbow-summary-art {
  position: absolute;
  right: 20px;
  top: 18px;
  width: min(38vw, 510px);
  height: 272px;
  z-index: 0;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.46) 22%, rgba(255, 255, 255, 0) 48%),
    url("/assets/rainbow-cloud-clean-v19.jpg") center 39% / cover no-repeat;
  box-shadow: 0 22px 50px rgba(85, 96, 124, 0.13);
  pointer-events: none;
}

.ielts-rainbow-summary-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22));
}

.ielts-rainbow-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin: 8px 0 26px;
}

.ielts-rainbow-label {
  display: block;
  margin-bottom: 8px;
  color: #64728d;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.03em;
}

.ielts-rainbow-summary h2 {
  margin: 0 0 8px;
  font-size: var(--font-page-title);
  line-height: 1.18;
  font-weight: 860;
}

.ielts-rainbow-desc {
  margin: 0;
  color: #576682;
  font-size: 15px;
  line-height: 1.6;
}

.ielts-rainbow-class-pill {
  min-width: 46px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #08715c;
  background: rgba(184, 232, 179, 0.48);
  font-size: 13px;
  font-weight: 820;
  box-shadow: 0 0 14px rgba(184, 232, 179, 0.28);
}

.ielts-rainbow-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ielts-rainbow-stat {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 16px;
  border: 1px solid rgba(38, 48, 68, 0.06);
  border-radius: 8px;
  background: rgba(246, 248, 252, 0.9);
}

.ielts-rainbow-stat strong {
  display: block;
  margin-bottom: 9px;
  font-size: var(--font-metric-compact);
  line-height: 1;
}

.ielts-rainbow-stat span {
  color: #60708d;
  font-size: 14px;
  font-weight: 650;
}

.ielts-rainbow-progress {
  position: relative;
  height: 14px;
  margin-top: 22px;
  padding: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(238, 241, 247, 0.9);
  box-shadow: inset 0 1px 2px rgba(38, 48, 68, 0.08);
}

.ielts-rainbow-progress i {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--ielts-rainbow);
  box-shadow: var(--ielts-glow);
}

.ielts-rainbow-progress i::after {
  content: "";
  position: absolute;
  inset: -16px -8px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent);
  animation: ieltsRainbowShine 2.8s ease-in-out infinite;
}

@keyframes ieltsRainbowShine {
  0% { transform: translateX(-65%); opacity: 0; }
  28% { opacity: 0.72; }
  62% { transform: translateX(110%); opacity: 0; }
  100% { transform: translateX(110%); opacity: 0; }
}

.ielts-rainbow-mode-panel {
  min-height: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background:
    linear-gradient(90deg, rgba(189, 225, 255, 0.22), rgba(255, 242, 204, 0.18), rgba(215, 205, 250, 0.18)),
    rgba(255, 255, 255, 0.9);
}

.ielts-rainbow-type {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid rgba(38, 48, 68, 0.08);
  border-radius: 8px;
  color: var(--ielts-ink);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.86);
}

.ielts-rainbow-type.active {
  border-color: rgba(77, 168, 225, 0.35);
  box-shadow: inset 0 0 0 1px rgba(77, 168, 225, 0.18), 0 0 0 4px rgba(189, 225, 255, 0.1), 0 0 18px rgba(189, 225, 255, 0.34);
}

.ielts-rainbow-type-dot {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 5px solid #4da8e1;
  background: #fff;
  box-shadow: 0 0 12px rgba(77, 168, 225, 0.28);
}

.ielts-rainbow-type-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
}

.ielts-rainbow-type.active .ielts-rainbow-type-dot::after {
  background: #4da8e1;
}

.ielts-rainbow-type strong {
  display: block;
  font-size: 27px;
  line-height: 1.14;
  font-weight: 880;
  overflow-wrap: break-word;
  word-break: normal;
}

.ielts-rainbow-type span {
  display: block;
  margin-top: 4px;
  color: var(--ielts-muted);
  font-size: 13px;
  font-weight: 700;
}

.ielts-rainbow-type.muted:not(.active) {
  color: #4b5364;
}

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

.ielts-rainbow-entry-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 174px;
  align-items: stretch;
  color: var(--ielts-ink);
  text-decoration: none;
  background:
    radial-gradient(circle at 10% 8%, rgba(251, 194, 190, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(85, 96, 124, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ielts-rainbow-entry-card:not(.disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(85, 96, 124, 0.16);
}

.ielts-rainbow-entry-card.disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

.ielts-rainbow-entry-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--ielts-rainbow);
  box-shadow: var(--ielts-glow);
}

.ielts-rainbow-entry-card::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 18px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(251, 194, 190, 0.28), rgba(255, 242, 204, 0.28), rgba(189, 225, 255, 0.28), rgba(215, 205, 250, 0.28));
}

.ielts-rainbow-entry-card.test-card {
  background:
    radial-gradient(circle at 12% 9%, rgba(251, 194, 190, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
}

.ielts-rainbow-entry-card.practice-card {
  background:
    radial-gradient(circle at 12% 9%, rgba(189, 225, 255, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)),
    rgba(255, 255, 255, 0.92);
}

.ielts-rainbow-entry-copy {
  position: relative;
  z-index: 1;
  padding: 24px 18px 32px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ielts-rainbow-entry-kicker {
  min-height: 28px;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 999px;
  color: #1472f6;
  background: rgba(211, 222, 255, 0.55);
  box-shadow: 0 0 12px rgba(189, 225, 255, 0.34);
  font-size: 14px;
  font-weight: 830;
}

.ielts-rainbow-entry-title {
  margin: 22px 0 9px;
  color: #172238;
  font-size: var(--font-display);
  line-height: 0.96;
  font-weight: 840;
  letter-spacing: 0;
}

.ielts-rainbow-entry-sub {
  color: #172238;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 840;
}

.ielts-rainbow-entry-link {
  width: fit-content;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 0 12px;
  border-radius: 8px;
  color: #218ceb;
  background: rgba(189, 225, 255, 0.28);
  font-size: 13px;
  font-weight: 820;
}

.ielts-rainbow-entry-desc {
  max-width: 430px;
  margin: 14px 0 0;
  color: #218ceb;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 820;
}

.ielts-rainbow-art-zone {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.95), transparent 30%),
    linear-gradient(180deg, rgba(189, 225, 255, 0.42), rgba(255, 255, 255, 0.48), rgba(215, 205, 250, 0.24));
}

.ielts-rainbow-entry-card.test-card .ielts-rainbow-art-zone {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), transparent 28%),
    linear-gradient(180deg, rgba(251, 194, 190, 0.18), rgba(189, 225, 255, 0.5), rgba(215, 205, 250, 0.22));
}

.ielts-rainbow-entry-card.practice-card .ielts-rainbow-art-zone {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), transparent 28%),
    linear-gradient(180deg, rgba(189, 225, 255, 0.5), rgba(255, 242, 204, 0.2), rgba(215, 205, 250, 0.24));
}

.ielts-rainbow-art-zone::before {
  content: "";
  position: absolute;
  left: -36px;
  right: -36px;
  bottom: -34px;
  height: 108px;
  border-radius: 50%;
  background: var(--ielts-rainbow);
  opacity: 0.38;
  filter: blur(2px);
}

.ielts-rainbow-art-zone::after {
  content: "";
  position: absolute;
  width: 106px;
  height: 40px;
  right: 24px;
  top: 35px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  filter: blur(1px);
}

.ielts-rainbow-scene {
  position: relative;
  width: 154px;
  height: 164px;
  z-index: 1;
}

.ielts-rainbow-scene::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 10px;
  bottom: 6px;
  height: 20px;
  border-radius: 999px;
  background: rgba(80, 95, 123, 0.12);
  filter: blur(8px);
}

.ielts-rainbow-scene-ribbon {
  position: absolute;
  left: 38px;
  top: 22px;
  width: 78px;
  height: 14px;
  border-radius: 999px;
  background: var(--ielts-rainbow);
  opacity: 0.74;
  box-shadow: var(--ielts-glow);
}

.ielts-rainbow-exam-ring {
  position: absolute;
  left: 31px;
  top: 36px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(var(--ielts-pink) 0 22%, var(--ielts-yellow) 22% 45%, var(--ielts-mint) 45% 66%, var(--ielts-cyan) 66% 82%, var(--ielts-lavender) 82% 100%);
  box-shadow: var(--ielts-glow), 0 16px 30px rgba(85, 96, 124, 0.14);
}

.ielts-rainbow-exam-ring::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(38, 48, 68, 0.08);
}

.ielts-rainbow-exam-ring::after {
  content: "";
  position: absolute;
  left: 45px;
  top: 22px;
  width: 4px;
  height: 27px;
  border-radius: 999px;
  background: #40506c;
  transform-origin: 50% 24px;
  transform: rotate(42deg);
}

.ielts-rainbow-exam-dot {
  position: absolute;
  left: 70px;
  top: 74px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #40506c;
  box-shadow: 0 0 0 6px rgba(189, 225, 255, 0.45);
}

.ielts-rainbow-exam-bubble,
.ielts-rainbow-practice-tool {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(38, 48, 68, 0.08);
  box-shadow: 0 10px 22px rgba(85, 96, 124, 0.1);
}

.ielts-rainbow-exam-bubble::before,
.ielts-rainbow-exam-bubble::after,
.ielts-rainbow-practice-tool::before,
.ielts-rainbow-practice-tool::after {
  content: "";
  position: absolute;
  background: #51617e;
  border-radius: 999px;
}

.ielts-rainbow-exam-bubble.listen,
.ielts-rainbow-practice-tool.headset {
  left: 8px;
  top: 48px;
  background: rgba(189, 225, 255, 0.72);
}

.ielts-rainbow-practice-tool.headset {
  left: 7px;
  top: 30px;
}

.ielts-rainbow-exam-bubble.listen::before,
.ielts-rainbow-practice-tool.headset::before {
  width: 14px;
  height: 14px;
  left: 10px;
  top: 9px;
  border: 3px solid #51617e;
  border-bottom-color: transparent;
  background: transparent;
  border-radius: 50%;
}

.ielts-rainbow-practice-tool.headset::before {
  width: 18px;
  height: 18px;
  left: 9px;
  top: 8px;
}

.ielts-rainbow-exam-bubble.listen::after,
.ielts-rainbow-practice-tool.headset::after {
  width: 4px;
  height: 10px;
  left: 15px;
  top: 18px;
}

.ielts-rainbow-practice-tool.headset::after {
  left: 16px;
  top: 19px;
}

.ielts-rainbow-exam-bubble.read,
.ielts-rainbow-practice-tool.book {
  right: 5px;
  top: 45px;
  background: rgba(255, 242, 204, 0.78);
}

.ielts-rainbow-practice-tool.book {
  right: 8px;
  top: 30px;
}

.ielts-rainbow-exam-bubble.read::before,
.ielts-rainbow-practice-tool.book::before {
  width: 18px;
  height: 14px;
  left: 8px;
  top: 10px;
  border: 3px solid #51617e;
  background: transparent;
  border-radius: 4px;
}

.ielts-rainbow-practice-tool.book::before {
  width: 20px;
  height: 15px;
  top: 11px;
  border-radius: 5px;
}

.ielts-rainbow-exam-bubble.read::after,
.ielts-rainbow-practice-tool.book::after {
  width: 3px;
  height: 16px;
  left: 16px;
  top: 9px;
}

.ielts-rainbow-practice-tool.book::after {
  left: 17px;
  top: 10px;
  height: 17px;
}

.ielts-rainbow-exam-bubble.speak,
.ielts-rainbow-practice-tool.mic {
  left: 16px;
  bottom: 20px;
  background: rgba(251, 194, 190, 0.72);
}

.ielts-rainbow-practice-tool.mic {
  left: 26px;
  bottom: 16px;
}

.ielts-rainbow-exam-bubble.speak::before,
.ielts-rainbow-practice-tool.mic::before {
  width: 10px;
  height: 15px;
  left: 12px;
  top: 7px;
  border: 3px solid #51617e;
  background: transparent;
  border-radius: 999px;
}

.ielts-rainbow-practice-tool.mic::before {
  height: 16px;
  left: 13px;
}

.ielts-rainbow-exam-bubble.speak::after,
.ielts-rainbow-practice-tool.mic::after {
  width: 18px;
  height: 3px;
  left: 8px;
  top: 25px;
}

.ielts-rainbow-practice-tool.mic::after {
  left: 9px;
  top: 27px;
}

.ielts-rainbow-exam-bubble.write,
.ielts-rainbow-practice-tool.pen {
  right: 14px;
  bottom: 20px;
  background: rgba(215, 205, 250, 0.72);
}

.ielts-rainbow-practice-tool.pen {
  right: 26px;
  bottom: 16px;
}

.ielts-rainbow-exam-bubble.write::before,
.ielts-rainbow-practice-tool.pen::before {
  width: 18px;
  height: 4px;
  left: 8px;
  top: 15px;
  transform: rotate(-35deg);
}

.ielts-rainbow-practice-tool.pen::before {
  width: 20px;
  top: 17px;
}

.ielts-rainbow-exam-bubble.write::after,
.ielts-rainbow-practice-tool.pen::after {
  width: 8px;
  height: 8px;
  left: 22px;
  top: 9px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 0;
}

.ielts-rainbow-practice-tool.pen::after {
  left: 24px;
  top: 10px;
}

.ielts-rainbow-practice-cloud {
  position: absolute;
  left: 20px;
  top: 60px;
  width: 118px;
  height: 70px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 28px 22px, rgba(255, 255, 255, 0.95) 0 24px, transparent 25px),
    radial-gradient(circle at 62px 14px, rgba(255, 255, 255, 0.95) 0 30px, transparent 31px),
    radial-gradient(circle at 92px 28px, rgba(255, 255, 255, 0.9) 0 25px, transparent 26px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(189, 225, 255, 0.7));
  border: 2px solid rgba(62, 83, 120, 0.22);
  box-shadow: 0 16px 30px rgba(85, 96, 124, 0.14);
}

.ielts-rainbow-practice-cloud::before,
.ielts-rainbow-practice-cloud::after {
  content: "";
  position: absolute;
  left: 30px;
  height: 6px;
  border-radius: 999px;
  background: rgba(64, 80, 108, 0.75);
}

.ielts-rainbow-practice-cloud::before {
  top: 32px;
  width: 52px;
}

.ielts-rainbow-practice-cloud::after {
  top: 49px;
  width: 36px;
}

.toefl-rainbow-home {
  gap: 18px;
}

.toefl-rainbow-home .ielts-rainbow-summary {
  min-height: 308px;
}

.toefl-rainbow-home .ielts-rainbow-summary h2 {
  font-size: var(--font-page-title);
}

.toefl-rainbow-home .ielts-rainbow-class-pill {
  color: #08715c;
  background: rgba(184, 232, 179, 0.48);
}

.toefl-rainbow-home .ielts-rainbow-entry-grid {
  margin-top: 0;
}

.toefl-rainbow-home .ielts-rainbow-entry-card {
  min-height: 330px;
}

.toefl-rainbow-home .ielts-rainbow-entry-title {
  font-size: var(--font-display);
}

.ielts-home-gateway {
  display: grid;
  gap: 30px;
  justify-items: center;
  padding: 10px 0 28px;
}

.ielts-track-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 22px;
  width: min(820px, 100%);
  padding: 18px;
  border: 3px dashed #43a3df;
  border-radius: 8px;
  background: #f8fcff;
}

.ielts-track-option {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 58px;
  color: #111827;
  text-decoration: none;
}

.ielts-track-option strong {
  font-size: var(--font-page-title);
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: normal;
}

.ielts-track-option small {
  grid-column: 2;
  margin-top: -10px;
  color: var(--muted);
}

.ielts-track-radio {
  width: 34px;
  height: 34px;
  border: 6px solid #43a3df;
  border-radius: 999px;
  background: #fff;
}

.ielts-track-option.active .ielts-track-radio::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 999px;
  background: #43a3df;
}

.ielts-gateway-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 72px;
  width: min(920px, 100%);
}

.ielts-gateway-card {
  display: grid;
  min-height: 438px;
  border-radius: 6px;
  background: #fff;
  color: #132033;
  text-align: center;
  text-decoration: none;
  box-shadow: 14px 14px 0 rgba(50, 70, 155, 0.58), 0 4px 18px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ielts-gateway-card:not(.disabled):hover {
  transform: translateY(-3px);
  box-shadow: 14px 18px 0 rgba(50, 70, 155, 0.52), 0 10px 24px rgba(15, 23, 42, 0.12);
}

.ielts-gateway-card.disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

.ielts-gateway-head {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 116px;
  padding: 18px;
  background: #42a3e0;
  color: #fff;
}

.ielts-gateway-head strong {
  font-size: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.ielts-gateway-head span {
  font-size: 18px;
  font-weight: 700;
}

.ielts-gateway-body {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 12px 24px 28px;
}

.ielts-gateway-body small,
.ielts-gateway-body p {
  margin: 0;
  color: #238fe0;
  font-weight: 700;
}

.ielts-gateway-body p {
  line-height: 1.5;
}

.ielts-gateway-stat {
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 700;
}

.ielts-gateway-illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 174px;
  height: 174px;
  margin-top: 10px;
}

.ielts-gateway-illustration.answers {
  grid-template-columns: 62px 70px;
  grid-template-rows: 78px 78px;
  width: 174px;
  height: 174px;
  border: 5px solid #4a2b55;
  border-radius: 6px;
  background: #c6ebff;
  color: #4a2b55;
  font-size: var(--font-page-title);
  font-weight: 500;
}

.answer-dot {
  width: 42px;
  height: 42px;
  border: 5px solid #4a2b55;
  border-radius: 999px;
}

.answer-dot.red {
  background: #ee646c;
}

.answer-dot.yellow {
  background: #fee084;
}

.answer-line {
  line-height: 1;
}

.ielts-gateway-illustration.pencil {
  width: 190px;
  height: 178px;
}

.ielts-gateway-illustration.pencil::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 44px;
  width: 154px;
  height: 106px;
  border: 5px solid #4a2b55;
  border-radius: 5px;
  background: #c6ebff;
}

.paper-lines {
  position: absolute;
  left: 34px;
  top: 78px;
  width: 34px;
  height: 6px;
  border-radius: 99px;
  background: #4a2b55;
  box-shadow: 0 23px 0 #4a2b55;
}

.pencil-body {
  position: absolute;
  right: 28px;
  top: 16px;
  width: 48px;
  height: 144px;
  border: 5px solid #4a2b55;
  border-radius: 8px;
  background: #ffe783;
  transform: rotate(19deg);
}

.pencil-body::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -28px;
  width: 54px;
  height: 32px;
  border: 5px solid #4a2b55;
  border-radius: 12px 12px 6px 6px;
  background: #ed666f;
}

.pencil-body::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: -37px;
  width: 28px;
  height: 34px;
  border-left: 5px solid #4a2b55;
  border-right: 5px solid #4a2b55;
  border-bottom: 5px solid #4a2b55;
  background: #fff;
  transform: skewY(-18deg);
}

.ielts-home-recent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(920px, 100%);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ielts-home-recent div {
  display: grid;
  gap: 3px;
}

.ielts-home-recent span {
  color: var(--muted);
}

.exam-start-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.exam-start-card span,
.exam-start-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

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

.exam-section-card {
  display: grid;
  gap: 14px;
}

.section-header.compact {
  margin-bottom: 0;
}

.exam-passage {
  padding: 14px;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.exam-passage p {
  margin: 8px 0 0;
  line-height: 1.7;
  color: var(--text);
}

.exam-question-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.exam-question-card textarea,
.exam-question-card input[type="text"],
.exam-question-card input:not([type]) {
  width: 100%;
}

.exam-option-list {
  display: grid;
  gap: 8px;
}

.exam-option-list label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.workflow-card.static {
  text-align: left;
  cursor: default;
}

.vocab-shell {
  display: grid;
  gap: 18px;
}

.vocab-shell-learn-clean {
  gap: 16px;
}

.vocab-head,
.vocab-story-title-row,
.vocab-progress-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.vocab-head {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.vocab-workbench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.68fr);
  gap: 16px;
  align-items: stretch;
}

.vocab-workbench-head-clean {
  grid-template-columns: minmax(0, 1fr);
}

.vocab-head-main {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
}

.vocab-head-main h2 {
  font-size: var(--font-page-title);
  line-height: var(--line-compact);
}

.vocab-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.vocab-head h2,
.vocab-story-title-row h3 {
  margin: 0;
}

.vocab-head span,
.vocab-story-title-row span,
.vocab-progress-group-head span {
  color: var(--muted);
}

.vocab-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
  min-width: min(360px, 100%);
}

.vocab-workbench-head .vocab-metrics {
  grid-template-columns: repeat(4, minmax(86px, 1fr));
  min-width: 0;
}

.vocab-metrics span {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-metrics strong {
  font-size: 20px;
  color: var(--text);
}

.vocab-review-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

.vocab-review-card,
.vocab-review-quiz,
.vocab-review-empty,
.vocab-review-start,
.vocab-review-report {
  display: grid;
  gap: 14px;
}

.vocab-review-card {
  position: relative;
}

.vocab-review-empty,
.vocab-review-start {
  justify-items: start;
}

.vocab-review-empty h3,
.vocab-review-empty p,
.vocab-review-start h3,
.vocab-review-start p,
.vocab-review-report h3,
.vocab-review-report p {
  margin: 0;
}

.vocab-review-start-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  width: 100%;
}

.vocab-review-start-grid span {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.vocab-review-start-grid strong {
  color: var(--text);
  font-size: var(--font-metric-compact);
  line-height: 1;
}

.vocab-review-start-actions,
.vocab-review-report-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.vocab-learn-report-top {
  display: flex;
  justify-content: flex-start;
}

.vocab-review-report-head > div {
  display: grid;
  gap: 4px;
}

.vocab-review-report-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-soft);
}

.vocab-review-report-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.vocab-review-report-summary {
  color: var(--muted);
  font-weight: 800;
}

.vocab-review-report-list {
  display: grid;
  gap: 8px;
}

.vocab-review-report-list h4 {
  margin: 0;
  color: var(--text);
}

.vocab-review-report-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-review-report-list span,
.vocab-review-report-list small {
  color: var(--muted);
  font-weight: 800;
}

.vocab-review-meta,
.vocab-review-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 800;
}

.vocab-review-word {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  text-align: left;
  word-break: break-word;
}

.vocab-review-word:hover,
.vocab-review-word:focus-visible {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 6px;
  outline: none;
}

.vocab-review-word.muted {
  color: var(--primary-text);
  font-size: var(--font-page-title);
}

.vocab-review-prompt {
  display: grid;
  gap: 8px;
}

.vocab-review-prompt > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.vocab-review-prompt > strong {
  color: var(--text);
  font-size: var(--font-page-title);
  line-height: 1.2;
}

.vocab-review-prompt > p {
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
}

.vocab-review-card > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-section-title);
  font-weight: 800;
  line-height: 1.45;
}

.vocab-review-collocations {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vocab-review-collocations span {
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--line));
  border-radius: 6px;
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
  padding: 5px 8px;
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 800;
}

.vocab-review-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  border-left: 3px solid var(--primary-border);
  border-left: 3px solid color-mix(in srgb, var(--brand-primary) 42%, var(--line));
  background: #f8fafc;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vocab-review-source-meta .secondary-button {
  min-height: 30px;
  padding: 5px 9px;
}

.vocab-review-source-meta small {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.vocab-review-actions,
.vocab-review-decision {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.vocab-stubborn-button {
  border-color: #f1c27d;
  background: #fff7ed;
  color: #9a5a10;
}

.vocab-stubborn-button:hover,
.vocab-stubborn-button:focus-visible {
  border-color: #e7a84c;
  background: #ffedd5;
  color: #7c3f08;
}

.vocab-flow-hint,
.vocab-review-hidden-note {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
}

.vocab-review-annotation {
  display: grid;
  gap: 12px;
}

.vocab-review-annotation > p {
  margin: 0;
}

.vocab-review-annotation .vocab-learn-phonetic {
  color: var(--primary-text);
  font-size: 18px;
  font-weight: 900;
}

.vocab-review-annotation-meaning {
  color: var(--text);
  font-size: var(--font-section-title);
  font-weight: 900;
  line-height: 1.45;
}

.vocab-review-annotation-block {
  display: grid;
  gap: 8px;
}

.vocab-review-annotation-block h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.vocab-review-synonym-detail-list {
  display: grid;
  gap: 6px;
}

.vocab-review-synonym-detail-list article {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
}

.vocab-review-synonym-detail-list strong {
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 900;
}

.vocab-review-synonym-detail-list span,
.vocab-review-synonym-detail-list small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.vocab-review-example {
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vocab-review-example strong {
  color: var(--text);
  line-height: 1.6;
}

.vocab-review-example span {
  color: var(--muted);
  font-weight: 700;
}

.vocab-rescue-card {
  display: grid;
  gap: 12px;
  justify-self: center;
  width: min(820px, 100%);
  padding: 16px;
  border: 1px solid #f1c27d;
  border-left: 4px solid #e7a84c;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf3, #fff);
  box-shadow: 0 14px 30px rgb(154 90 16 / 8%);
}

.vocab-rescue-card-head {
  display: grid;
  gap: 5px;
}

.vocab-rescue-card-head span {
  color: #9a5a10;
  font-size: 13px;
  font-weight: 950;
}

.vocab-rescue-card-head strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.35;
}

.vocab-rescue-card article {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgb(241 194 125 / 55%);
  border-radius: 8px;
  background: #fff;
}

.vocab-rescue-card h4 {
  margin: 0;
  color: #9a5a10;
  font-size: 15px;
  font-weight: 950;
}

.vocab-rescue-card p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 820;
  line-height: 1.65;
  white-space: pre-wrap;
}

.vocab-rescue-card small {
  color: #a36a22;
  font-size: 12px;
  font-weight: 850;
}

.vocab-activation-card {
  display: grid;
  gap: 14px;
  justify-self: center;
  width: min(860px, 100%);
  padding: 16px;
  border: 1px solid var(--primary-border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--primary-soft), #fff);
  box-shadow: 0 14px 30px var(--primary-shadow);
}

.vocab-activation-head {
  display: grid;
  gap: 5px;
}

.vocab-activation-head span,
.vocab-activation-prompt small,
.vocab-activation-answer span,
.vocab-activation-result-grid small,
.vocab-activation-definition small {
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 950;
}

.vocab-activation-head strong {
  color: var(--text);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
}

.vocab-activation-prompt,
.vocab-activation-result-grid article,
.vocab-activation-definition,
.vocab-activation-answer {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-activation-prompt p,
.vocab-activation-result-grid p,
.vocab-activation-definition p {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.65;
  white-space: pre-wrap;
}

.vocab-activation-answer textarea {
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  line-height: 1.55;
}

.vocab-activation-answer textarea:focus {
  outline: 2px solid var(--primary-border);
  outline-offset: 2px;
  border-color: var(--primary-border);
}

.vocab-activation-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vocab-activation-message {
  margin: 0;
  color: #9a5a10;
  font-size: 14px;
  font-weight: 850;
}

.vocab-synonym-detail-list {
  display: grid;
  gap: 6px;
}

.vocab-synonym-detail-list article {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.vocab-synonym-term-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--primary-text);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  padding: 0;
  text-align: left;
}

.vocab-synonym-term-button:hover,
.vocab-synonym-term-button:focus-visible,
.vocab-synonym-detail-list article.revealed .vocab-synonym-term-button {
  background: transparent;
  outline: none;
}

.vocab-synonym-meaning {
  display: grid;
  gap: 3px;
  padding: 0 0 8px 14px;
  border-left: 2px solid var(--line);
}

.vocab-synonym-detail-list p,
.vocab-synonym-detail-list small,
.vocab-synonym-detail-list em {
  margin: 0;
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.vocab-synonym-detail-list small {
  color: var(--muted-2);
}

.vocab-review-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vocab-review-options button {
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

.vocab-review-options button:hover,
.vocab-review-options button:focus-visible {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: none;
}

.vocab-review-options button.correct {
  border-color: rgba(15, 118, 110, 0.35);
  background: #f0fdfa;
  color: var(--green);
}

.vocab-review-options button.wrong {
  border-color: rgba(185, 28, 28, 0.32);
  background: #fff1f2;
  color: var(--rose);
}

.vocab-learn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.vocab-learn-panel form,
.vocab-learn-card,
.vocab-learn-side,
.vocab-learn-preview,
.vocab-learn-report {
  display: grid;
  gap: 14px;
}

.vocab-learn-card {
  position: relative;
  overflow: hidden;
  align-content: stretch;
  grid-template-rows: auto auto minmax(80px, 1fr) auto;
  gap: 22px;
  min-height: 470px;
  padding: 26px 32px 34px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(255 253 248 / 98%)),
    var(--panel);
  box-shadow: var(--shadow);
}

.vocab-learn-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), #91bfc8, #ead08b);
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--brand-primary, #267a8d) 48%, #ffffff), #ead08b);
  content: "";
}

.vocab-learn-card::after {
  position: absolute;
  right: 34px;
  bottom: 30px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(38, 122, 141, .1), transparent 64%);
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary, #267a8d) 10%, transparent), transparent 64%);
  content: "";
  pointer-events: none;
}

.vocab-learn-card > * {
  position: relative;
  z-index: 1;
}

.vocab-workbench-page {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.48fr);
  gap: 18px;
  align-items: start;
}

.vocab-workbench-main,
.vocab-workbench-rail,
.vocab-study-desk-panel form,
.vocab-workbench-rail-panel,
.vocab-book-plan-overview {
  display: grid;
  gap: 14px;
}

.vocab-plan-page {
  display: grid;
  gap: 14px;
}

.vocab-new-words-page {
  display: grid;
  gap: 18px;
}

.vocab-new-words-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.vocab-new-words-head h2,
.vocab-new-words-head p {
  margin: 0;
}

.vocab-new-words-head h2 {
  color: var(--text);
  font-size: var(--font-page-title);
  line-height: var(--line-compact);
}

.vocab-new-words-head p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.vocab-today-start-panel {
  display: grid;
  gap: 16px;
}

.vocab-today-start-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.vocab-today-start-main h3,
.vocab-today-start-main p {
  margin: 0;
}

.vocab-today-start-main h3 {
  color: var(--text);
  font-size: var(--font-page-title);
  line-height: var(--line-compact);
}

.vocab-today-start-main p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
}

.vocab-today-count {
  display: grid;
  min-width: 120px;
  gap: 3px;
  justify-items: end;
  color: var(--muted);
  font-weight: 900;
}

.vocab-today-count strong {
  color: var(--primary-text);
  font-size: var(--font-metric);
  line-height: var(--line-compact);
}

.vocab-today-start-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.vocab-today-start-stats span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 800;
}

.vocab-today-start-stats strong {
  color: var(--text);
  font-size: var(--font-card-title);
  line-height: var(--line-compact);
}

.vocab-study-order {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-soft), #fff);
  color: var(--primary-text);
  font-weight: 900;
}

.vocab-study-order span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.vocab-study-order i {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.vocab-today-start-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-content: start;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.vocab-today-plan-summary {
  display: grid;
  min-width: min(100%, 280px);
  gap: 3px;
}

.vocab-today-plan-summary strong {
  color: var(--text);
  font-size: var(--font-card-title);
}

.vocab-today-plan-summary span {
  color: var(--muted);
  font-weight: 800;
}

.vocab-today-start-actions,
.vocab-plan-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vocab-today-start-actions.prominent {
  padding: 8px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: #f3fafb;
  background: color-mix(in srgb, var(--brand-primary) 6%, #fff);
}

.vocab-today-start-actions.prominent .primary-button {
  min-width: 150px;
  min-height: 44px;
  font-weight: 900;
}

.vocab-active-plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.vocab-active-plan-chip {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.vocab-active-plan-chip:hover,
.vocab-active-plan-chip:focus-visible {
  border-color: var(--primary-border);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.vocab-active-plan-chip strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-body);
  font-weight: 900;
  line-height: var(--line-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-active-plan-chip span {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-workbench-rail {
  position: sticky;
  top: 90px;
}

.vocab-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.vocab-panel-head > div {
  display: grid;
  min-width: min(100%, 320px);
  gap: 4px;
}

.vocab-panel-head h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-section-title);
  line-height: var(--line-compact);
}

.vocab-panel-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.vocab-study-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.72fr) minmax(180px, 0.45fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-study-picker-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.vocab-learn-focus-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.vocab-learn-focus-card.empty {
  background: #f8fafc;
}

.vocab-learn-focus-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
}

.vocab-learn-focus-card .vocab-learn-phonetic {
  color: var(--primary-text);
  font-size: 18px;
}

.vocab-workbench-rail-panel .vocab-learn-queue {
  padding: 0;
  border: 0;
}

.vocab-today-task-list,
.vocab-book-plan-grid {
  display: grid;
  gap: 10px;
}

.vocab-today-task-list > div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-today-task-list strong,
.vocab-book-plan-card h4 {
  color: var(--text);
}

.vocab-today-task-list span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.vocab-review-shortcut .primary-button {
  justify-self: start;
}

.vocab-book-plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.vocab-book-plan-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-book-plan-card.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--brand-primary) 4%, #fff);
}

.vocab-book-plan-card.needs-plan {
  background: #f8fafc;
}

.vocab-book-plan-card h4,
.vocab-book-plan-card p {
  margin: 0;
}

.vocab-book-plan-card h4 {
  margin-top: 6px;
  font-size: 18px;
}

.vocab-book-plan-card p,
.vocab-book-plan-meta span {
  color: var(--muted);
  font-weight: 800;
}

.vocab-book-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}

.vocab-book-plan-next {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-book-plan-next span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.vocab-book-plan-next strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-book-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vocab-custom-learn-panel {
  display: block;
}

.vocab-custom-learn-panel summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.vocab-custom-learn-panel summary::-webkit-details-marker {
  display: none;
}

.vocab-custom-learn-panel summary::after {
  color: var(--muted);
  content: "展开";
  font-size: 13px;
  font-weight: 900;
}

.vocab-custom-learn-panel[open] summary::after {
  content: "收起";
}

.vocab-custom-learn-panel summary span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.vocab-custom-learn-panel summary strong {
  color: var(--text);
}

.vocab-custom-learn-panel summary small {
  color: var(--muted);
  font-weight: 800;
}

.vocab-custom-learn-panel form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.vocab-study-picker-grid.compact {
  grid-template-columns: minmax(180px, 260px);
}

.vocab-learn-workbench-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.56fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 10%, #fff), #fff 74%);
}

.vocab-learn-intro-copy {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.vocab-learn-intro-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.vocab-learn-intro-icon .svg-icon {
  display: block;
}

.vocab-learn-intro-copy h3,
.vocab-preview-head h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-section-title);
  line-height: var(--line-compact);
}

.vocab-learn-intro-copy p:not(.eyebrow),
.vocab-preview-head p:not(.eyebrow) {
  margin: 3px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.vocab-learn-intro-stats,
.vocab-learn-source-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vocab-learn-intro-stats span,
.vocab-learn-source-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.vocab-learn-intro-stats strong,
.vocab-learn-source-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: var(--line-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-learn-source-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.vocab-source-form-grid {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-learn-custom-box {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-learn-start-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.vocab-learn-start-row span {
  color: var(--muted);
  font-weight: 800;
}

.vocab-learn-count-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.vocab-learn-count-field span {
  color: var(--muted);
  font-weight: 900;
}

.vocab-study-plan-banner {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-study-plan-banner.active {
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}

.vocab-study-plan-main,
.vocab-study-plan-meta,
.vocab-study-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.vocab-study-plan-main {
  justify-content: space-between;
}

.vocab-study-plan-main > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.vocab-study-plan-main strong {
  color: var(--text);
  font-size: 16px;
}

.vocab-study-plan-main span,
.vocab-study-plan-meta span,
.vocab-study-plan-grid small,
.vocab-study-plan-summary span {
  color: var(--muted);
  font-weight: 800;
}

.vocab-study-plan-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf5;
}

.vocab-study-plan-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.vocab-study-plan-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.34);
}

.vocab-study-plan-dialog {
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

.vocab-study-plan-dialog form {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.vocab-study-plan-overview-dialog {
  width: min(920px, 100%);
}

.vocab-book-detail-dialog {
  width: min(860px, 100%);
}

.vocab-book-detail-content {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.vocab-book-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.vocab-book-detail-stats span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 900;
}

.vocab-book-detail-stats strong {
  color: var(--text);
  font-size: var(--font-card-title);
  line-height: var(--line-compact);
}

.vocab-book-detail-current {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.vocab-book-detail-current > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-book-detail-current span,
.vocab-book-detail-section-head span,
.vocab-book-detail-list-row span {
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 900;
}

.vocab-book-detail-current strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-book-detail-current small {
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 800;
  line-height: var(--line-normal);
}

.vocab-book-detail-today-status.complete {
  border-color: rgba(16, 185, 129, 0.28);
  background: #f0fdf4;
}

.vocab-book-detail-message {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 900;
}

.vocab-book-detail-message.success {
  border-color: rgba(16, 185, 129, 0.28);
  background: #f0fdf4;
  color: #047857;
}

.vocab-book-detail-message.warning {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffbeb;
  color: #92400e;
}

.vocab-book-detail-section {
  display: grid;
  gap: 10px;
}

.vocab-book-detail-section-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.vocab-book-detail-section-head h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-card-title);
}

.vocab-book-detail-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 2px;
}

.vocab-book-detail-list-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-book-detail-list-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.vocab-book-detail-list-row strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-book-detail-list-row em {
  flex: 0 0 auto;
  color: var(--primary-text);
  font-style: normal;
  font-weight: 900;
}

.vocab-book-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 4px;
}

.vocab-study-plan-overview {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.vocab-study-plan-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.vocab-study-plan-head h3,
.vocab-study-plan-head p {
  margin: 0;
}

.vocab-study-plan-head p {
  color: var(--muted);
  font-weight: 800;
}

.vocab-study-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vocab-study-plan-grid label {
  display: grid;
  gap: 7px;
}

.vocab-study-plan-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-study-plan-summary strong {
  color: var(--text);
}

.vocab-plan-overview-section {
  display: grid;
  gap: 10px;
}

.vocab-plan-overview-section > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.vocab-plan-overview-section h4 {
  margin: 0;
  color: var(--text);
  font-size: var(--font-card-title);
}

.vocab-plan-overview-section > div:first-child span {
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 900;
}

.vocab-plan-book-list {
  display: grid;
  gap: 10px;
}

.vocab-plan-book-row,
.vocab-plan-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.5fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-plan-book-row.active {
  border-color: var(--primary-border);
  background: #f4fafb;
  background: color-mix(in srgb, var(--brand-primary) 5%, #fff);
}

.vocab-plan-book-row-main,
.vocab-plan-book-row-meta,
.vocab-plan-empty {
  min-width: 0;
}

.vocab-plan-book-row-main,
.vocab-plan-book-row-meta,
.vocab-plan-empty {
  display: grid;
  gap: 5px;
}

.vocab-plan-book-row-main > span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-weight: 900;
}

.vocab-plan-book-row-main strong,
.vocab-plan-empty strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-card-title);
  line-height: var(--line-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-plan-book-row-main small,
.vocab-plan-book-row-meta span,
.vocab-plan-empty span {
  color: var(--muted);
  font-size: var(--font-small);
  font-weight: 800;
}

.vocab-plan-book-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.vocab-plan-overview-message {
  margin: 0;
}

.vocab-plan-empty {
  grid-template-columns: minmax(0, 1fr);
  background: #f8fafc;
}

.vocab-preview-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.vocab-preview-head > div {
  min-width: 0;
}

.vocab-preview-head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 900;
}

.vocab-preview-status {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.vocab-learn-preview-list {
  display: grid;
  gap: 8px;
}

.vocab-learn-preview-list > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-learn-preview-list strong {
  color: var(--text);
}

.vocab-learn-preview-list span,
.vocab-learn-current-status span {
  color: var(--muted);
  font-weight: 800;
}

.vocab-learn-word {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  text-align: left;
  word-break: break-word;
}

.vocab-learn-card .vocab-review-meta {
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
}

.vocab-learn-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.vocab-learn-card-top-content {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 4px;
}

.vocab-learn-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.vocab-learn-back-button {
  min-width: auto;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 17px;
  box-shadow: none;
}

.vocab-learn-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 900;
}

.vocab-learn-card .vocab-learn-meter {
  margin-top: -8px;
}

.vocab-learn-progress-row .vocab-learn-meter {
  margin-top: 0;
}

.vocab-learn-word-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.vocab-learn-card .vocab-learn-word {
  font-family: var(--font-word-display);
  font-size: clamp(46px, 7vw, 82px);
  font-weight: 950;
  line-height: 0.95;
  overflow-wrap: normal;
  text-align: center;
  text-decoration: none;
  word-break: normal;
}

.vocab-learn-card .vocab-learn-word:hover,
.vocab-learn-card .vocab-learn-word:focus-visible {
  color: var(--text);
  text-decoration: none;
}

.vocab-learn-sound-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: #f2fafb;
  background: color-mix(in srgb, var(--brand-primary, #267a8d) 7%, #fff);
  color: var(--primary-text);
  box-shadow: 0 8px 18px var(--primary-shadow);
  transform: translateY(2px);
}

.vocab-learn-sound-button .svg-icon {
  width: 20px;
  height: 20px;
}

.vocab-learn-word-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.vocab-learn-word-note .vocab-learn-phonetic {
  color: var(--primary-text);
  font-size: 22px;
  font-weight: 900;
}

.vocab-learn-word-note span:not(.vocab-learn-phonetic) {
  white-space: pre-wrap;
}

.vocab-learn-word:hover,
.vocab-learn-word:focus-visible {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 6px;
  outline: none;
}

.vocab-learn-details {
  display: grid;
  gap: 14px;
  justify-self: center;
  width: min(900px, 100%);
  max-width: 900px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(248 251 253 / 88%);
}

.vocab-learn-card > p,
.vocab-learn-details > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-section-title);
  font-weight: 900;
  line-height: 1.4;
}

.vocab-learn-card > p.vocab-learn-phonetic,
.vocab-learn-details > p.vocab-learn-phonetic {
  color: var(--primary-text);
  font-size: 20px;
  font-weight: 900;
}

.vocab-learn-rich-fields {
  display: grid;
  gap: 10px;
}

.vocab-learn-rich-fields section {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary-border);
  border-left: 3px solid color-mix(in srgb, var(--brand-primary) 38%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-learn-card .vocab-learn-rich-fields section,
.vocab-learn-card .vocab-learn-examples > div {
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-learn-rich-fields h4,
.vocab-learn-examples strong {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.vocab-learn-card .vocab-learn-rich-fields h4,
.vocab-learn-card .vocab-learn-examples strong {
  color: var(--primary-text);
  font-size: 15px;
  font-weight: 950;
}

.vocab-learn-rich-fields p,
.vocab-learn-examples p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.vocab-learn-card .vocab-learn-rich-fields p,
.vocab-learn-card .vocab-learn-examples p {
  font-size: 18px;
  font-weight: 780;
  line-height: 1.6;
}

.vocab-learn-rich-fields ul,
.vocab-learn-examples ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 800;
}

.vocab-learn-rich-fields dl,
.vocab-learn-examples dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.vocab-learn-rich-fields dl > div,
.vocab-learn-examples dl > div {
  display: grid;
  gap: 2px;
}

.vocab-learn-rich-fields dt,
.vocab-learn-examples dt {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.vocab-learn-rich-fields dd,
.vocab-learn-examples dd {
  margin: 0;
}

.vocab-learn-card .vocab-learn-rich-fields dd,
.vocab-learn-card .vocab-learn-examples dd {
  color: var(--muted);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.6;
}

.vocab-learn-examples {
  gap: 12px;
}

.vocab-learn-examples > div {
  display: grid;
  gap: 6px;
}

.vocab-learn-explain-space {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

.vocab-learn-decision {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.vocab-learn-card .vocab-learn-decision {
  align-self: end;
  gap: 12px;
  justify-content: center;
  padding-top: 4px;
}

.vocab-learn-card .vocab-learn-decision .primary-button,
.vocab-learn-card .vocab-learn-decision .secondary-button {
  min-width: 108px;
  min-height: 48px;
  padding: 12px 22px;
  font-size: 22px;
  font-weight: 900;
}

.vocab-learn-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-soft);
}

.vocab-learn-meter i {
  display: block;
  width: var(--vocab-learn-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #79d3e4);
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--brand-primary, #267a8d) 42%, #79d3e4));
}

.vocab-review-start-grid.compact {
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.vocab-learn-current-status {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-learn-queue {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-learn-queue > div:first-child {
  display: grid;
  gap: 3px;
}

.vocab-learn-queue > div:first-child strong {
  color: var(--text);
}

.vocab-learn-queue > div:first-child span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.vocab-learn-queue-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-learn-queue-item.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.vocab-learn-queue-item.done {
  background: #fff;
}

.vocab-queue-index {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vocab-learn-queue-item.active .vocab-queue-index {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.vocab-learn-queue-item.done .vocab-queue-index {
  color: var(--primary-text);
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.vocab-learn-queue-item div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.vocab-learn-queue-item strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-learn-queue-item span:not(.vocab-queue-index) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.vocab-learn-session-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.vocab-learn-card .vocab-learn-session-toolbar {
  align-items: center;
  min-height: 42px;
  margin-bottom: -4px;
}

.vocab-learn-card .vocab-learn-session-toolbar > .secondary-button {
  min-width: auto;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 17px;
  box-shadow: none;
}

.vocab-learn-session-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.vocab-learn-session-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.vocab-too-simple-button {
  min-height: 34px;
  padding: 6px 10px;
}

.vocab-learn-card .vocab-too-simple-button {
  position: absolute;
  top: 26px;
  right: 32px;
  z-index: 3;
  min-height: 34px;
  padding: 7px 12px;
  border-color: var(--green);
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
  background: #eef9f3;
  background: color-mix(in srgb, var(--green) 10%, #fff);
  color: var(--green);
  font-size: 14px;
}

.vocab-review-card .vocab-too-simple-button {
  justify-self: end;
}

.vocab-session-card {
  overflow: visible;
}

.vocab-session-toolbar {
  display: flex;
  justify-content: flex-start;
}

.vocab-session-card .vocab-too-simple-button {
  position: static;
  inset: auto;
  z-index: auto;
}

.vocab-session-title {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.vocab-session-card .vocab-learn-word-row {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}

.vocab-session-card .vocab-learn-word {
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  word-break: normal;
  overflow-wrap: normal;
}

.vocab-session-card .vocab-learn-word:hover,
.vocab-session-card .vocab-learn-word:focus-visible {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 6px;
  outline: none;
}

.vocab-session-card .vocab-learn-sound-button {
  width: 34px;
  height: 34px;
  box-shadow: none;
  transform: none;
}

.vocab-session-card .vocab-learn-sound-button .svg-icon {
  width: 18px;
  height: 18px;
}

.vocab-session-definition {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: -14px 0 24px;
  color: var(--muted);
  font-size: var(--font-body-strong);
  font-weight: 900;
  line-height: 1.55;
  white-space: pre-wrap;
}

.vocab-session-definition .vocab-learn-phonetic {
  color: var(--primary-text);
  font-weight: 900;
}

.vocab-session-body {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.vocab-session-body:empty {
  display: none;
}

.vocab-session-card .vocab-learn-details {
  justify-self: stretch;
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.vocab-session-card .vocab-session-usage-section {
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

.vocab-session-card .vocab-session-text-block {
  color: var(--muted);
  font-family: inherit;
  font-size: 18px;
  font-weight: 780;
  line-height: 1.65;
}

.vocab-session-card .vocab-session-text-block p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.vocab-session-card .vocab-session-text-block > strong {
  display: block;
  color: #172033;
  font-family: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
}

.vocab-session-card .vocab-session-text-block > span,
.vocab-session-card .vocab-session-text-block > small {
  display: block;
  color: var(--muted);
  font-family: inherit;
  font-weight: 800;
  line-height: 1.55;
}

.vocab-session-card .vocab-session-text-block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
  white-space: normal;
}

.vocab-session-card .vocab-session-text-block dl {
  display: grid;
  gap: 8px;
  margin: 0;
  white-space: normal;
}

.vocab-session-card .vocab-session-text-block dl > div {
  display: grid;
  gap: 3px;
}

.vocab-session-card .vocab-session-text-block dt {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.vocab-session-card .vocab-session-text-block dd {
  margin: 0;
}

.vocab-session-card .vocab-session-answer-field {
  width: 100%;
}

.vocab-session-compact-panel {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-session-detail-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.vocab-session-compact-item {
  display: grid;
  gap: 4px;
}

.vocab-session-compact-item + .vocab-session-compact-item {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.vocab-session-compact-item h5 {
  margin: 0;
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 900;
}

.vocab-session-compact-value {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.58;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.vocab-session-compact-value p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.vocab-session-compact-value ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  white-space: normal;
}

.vocab-session-compact-value dl {
  display: grid;
  gap: 6px;
  margin: 0;
  white-space: normal;
}

.vocab-session-compact-value dl > div {
  display: grid;
  gap: 3px;
}

.vocab-session-compact-value dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.vocab-session-compact-value dd {
  margin: 0;
}

.vocab-session-compact-value .vocab-review-collocations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vocab-session-compact-value .vocab-review-collocations span {
  padding: 4px 7px;
}

.vocab-session-compact-value .vocab-review-example {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vocab-session-compact-value .vocab-review-example strong,
.vocab-session-compact-value .vocab-review-example span {
  display: block;
}

.vocab-session-compact-value .vocab-review-source-meta {
  margin-top: 0;
}

.vocab-session-compact-value .vocab-synonym-detail-list,
.vocab-session-compact-value .vocab-review-synonym-detail-list {
  display: grid;
  gap: 6px;
}

.vocab-session-compact-value .vocab-synonym-detail-list article,
.vocab-session-compact-value .vocab-review-synonym-detail-list article {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vocab-session-compact-value .vocab-synonym-term-button {
  display: inline;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
}

.vocab-session-compact-value .vocab-synonym-meaning {
  padding: 0 0 8px 12px;
  border-left: 2px solid var(--line);
}

.vocab-session-compact-value .vocab-review-synonym-detail-list strong {
  font-size: 15px;
}

.vocab-session-compact-value .vocab-review-synonym-detail-list span,
.vocab-session-compact-value .vocab-review-synonym-detail-list small {
  font-size: 13px;
}

.vocab-session-note-list {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-left: 4px solid var(--line-strong);
  background: #f8fafc;
}

.vocab-session-note-item {
  display: grid;
  gap: 4px;
}

.vocab-session-note-item + .vocab-session-note-item {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.vocab-session-note-item h5 {
  margin: 0;
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 900;
}

.vocab-session-note-item p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.58;
  white-space: pre-wrap;
  overflow-wrap: normal;
  word-break: normal;
}

.vocab-session-note-item ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.vocab-session-note-item dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.vocab-session-note-item dl > div {
  display: grid;
  gap: 3px;
}

.vocab-session-note-item dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.vocab-session-note-item dd {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.58;
}

.vocab-session-card .vocab-learn-rich-fields section,
.vocab-session-card .vocab-learn-examples > div,
.vocab-session-card .vocab-review-example,
.vocab-session-card .vocab-review-annotation,
.vocab-session-card .vocab-activation-card,
.vocab-session-card .vocab-rescue-card {
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

.vocab-session-card .vocab-learn-decision,
.vocab-session-card .vocab-review-decision {
  justify-content: flex-start;
}

.vocab-review-layout {
  grid-template-columns: minmax(0, 1fr);
}

.vocab-book-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.58fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.vocab-book-import-panel,
.vocab-book-list-panel,
.vocab-book-import-form,
.vocab-book-list,
.vocab-book-card {
  display: grid;
  gap: 14px;
}

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

.vocab-book-card.personal {
  border-color: var(--primary-border);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--line));
}

.vocab-book-card.tenant {
  border-color: rgba(15, 118, 110, 0.22);
}

.vocab-book-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.vocab-book-actions,
.vocab-book-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.vocab-book-actions {
  justify-content: flex-end;
}

.vocab-book-edit-form {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--line));
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-book-edit-units {
  display: grid;
  gap: 8px;
}

.vocab-book-edit-units h5 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.vocab-book-edit-units > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.vocab-book-edit-units > div > span {
  align-self: center;
  color: var(--muted);
  font-weight: 800;
}

.vocab-book-card-head h4 {
  margin: 6px 0 4px;
  color: var(--text);
  font-size: 18px;
}

.vocab-book-card-head p,
.vocab-book-meta,
.vocab-book-unit-list button span {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.vocab-book-scope,
.vocab-book-type {
  display: inline-flex;
  width: fit-content;
  margin-right: 6px;
  padding: 3px 8px;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--line));
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 900;
}

.vocab-book-type {
  border-color: var(--line);
  background: #f8fafc;
  color: var(--muted);
}

.vocab-book-counts {
  display: grid;
  min-width: 70px;
  justify-items: end;
  gap: 2px;
}

.vocab-book-counts strong {
  color: var(--text);
  font-size: var(--font-metric-compact);
  line-height: 1;
}

.vocab-book-counts span {
  color: var(--muted);
  font-weight: 800;
}

.vocab-book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.vocab-book-unit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.vocab-book-unit-list button {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.vocab-book-unit-list button:hover,
.vocab-book-unit-list button:focus-visible {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: none;
}

.vocab-review-result {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 800;
}

.vocab-review-result.ok {
  border-color: rgba(15, 118, 110, 0.28);
  background: #f0fdfa;
  color: var(--green);
}

.vocab-review-result.warning {
  border-color: rgba(161, 98, 7, 0.3);
  background: #fffbeb;
  color: var(--amber);
}

.vocab-workspace,
.vocab-history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.vocab-generator-panel form {
  display: grid;
  gap: 14px;
}

.vocab-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.vocab-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vocab-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.vocab-style-card {
  display: grid;
  gap: 6px;
  min-height: 142px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-style-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.vocab-style-card input {
  width: 16px;
  height: 16px;
}

.vocab-style-card span,
.vocab-style-card small {
  color: var(--muted);
  line-height: 1.45;
}

.vocab-preview-panel,
.vocab-story-panel,
.vocab-history-list,
.vocab-progress-panel {
  display: grid;
  gap: 14px;
}

.vocab-history-list {
  position: sticky;
  top: 90px;
}

.vocab-history-item {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-history-item.active,
.vocab-history-item:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.vocab-history-item span,
.vocab-history-item small {
  color: var(--muted);
}

.vocab-story-detail {
  display: grid;
  gap: 16px;
}

.vocab-story-detail.compact {
  gap: 12px;
}

.vocab-word-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vocab-word-strip span,
.vocab-word-chip {
  padding: 5px 10px;
  border: 1px solid #d7e3ff;
  border-radius: 999px;
  background: #f2f6ff;
  color: #1f3f8f;
  font-weight: 700;
}

.vocab-word-chip {
  min-width: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1.25;
}

.vocab-word-chip:hover,
.vocab-word-chip:focus-visible,
.vocab-word-chip.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: none;
}

.vocab-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  background: #f0fdfa;
  color: var(--green);
  font-weight: 800;
}

.vocab-coverage.incomplete {
  border-color: rgba(161, 98, 7, 0.28);
  background: #fffbeb;
  color: var(--amber);
}

.vocab-coverage span {
  color: var(--muted);
  font-weight: 700;
}

.vocab-insight-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.vocab-insight-popover {
  position: fixed;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(420px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.vocab-insight-popover.mobile {
  width: auto;
  max-height: 72vh;
}

.vocab-insight-popover-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.vocab-insight-popover-bar strong {
  color: var(--text);
  font-size: 14px;
}

.vocab-insight-popover-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.vocab-insight-popover-content {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.vocab-insight-empty,
.vocab-insight-loading {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 700;
}

.vocab-insight-loading strong {
  color: var(--text);
}

.vocab-insight-content {
  display: grid;
  gap: 14px;
}

.vocab-insight-content.concise {
  gap: 10px;
}

.vocab-quick-card {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.vocab-quick-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: min(100%, 280px);
}

.vocab-quick-card span,
.vocab-quick-card small {
  color: var(--muted);
  font-weight: 700;
}

.vocab-quick-card strong {
  color: var(--primary-text);
  font-size: 22px;
  line-height: 1.2;
}

.vocab-quick-card p {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.vocab-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.vocab-quick-example {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-quick-example p {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.vocab-quick-example span {
  color: var(--muted);
  font-weight: 700;
}

.vocab-insight-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-insight-details summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.vocab-insight-details summary small {
  color: var(--muted);
  font-weight: 700;
}

.vocab-insight-detail-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.vocab-insight-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.vocab-insight-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vocab-insight-head span,
.vocab-insight-head small {
  color: var(--muted);
  font-weight: 700;
}

.vocab-insight-head strong {
  color: var(--text);
  font-size: 18px;
}

.vocab-insight-block {
  display: grid;
  gap: 8px;
}

.vocab-insight-block h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.vocab-insight-block p {
  margin: 0;
  color: var(--text);
  line-height: 1.7;
}

.vocab-dictionary-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.vocab-dictionary-block.missing {
  border-color: #dfe7f3;
  background: #fff;
  color: var(--muted);
}

.vocab-dictionary-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.vocab-dictionary-head > div {
  display: grid;
  gap: 2px;
}

.vocab-dictionary-head strong {
  color: var(--primary-text);
  font-size: 18px;
}

.vocab-dictionary-head span,
.vocab-dictionary-source,
.vocab-dictionary-block small {
  color: var(--muted);
  font-weight: 700;
}

.vocab-dictionary-meta,
.intensive-listening-word-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vocab-dictionary-meta em,
.intensive-listening-word-meta em {
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--primary-soft);
  padding: 3px 6px;
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-style: normal;
  font-weight: 800;
}

.dictionary-meaning-frequencies {
  color: var(--text, #243447);
  font-size: var(--font-body, 14px);
  line-height: 1.75;
}

.dictionary-meaning-frequency-item {
  display: inline;
}

.dictionary-meaning-frequency-item strong {
  margin-left: 2px;
  color: var(--warning-text, #c2410c);
  font-weight: 900;
}

.dictionary-definition-items {
  display: grid;
  gap: 7px;
}

.dictionary-definition-item {
  display: grid;
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  color: var(--text, #243447);
  line-height: 1.6;
}

.dictionary-definition-item > strong {
  color: var(--primary-text, #18576a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02em;
  font-style: italic;
}

.dictionary-definition-item > span {
  min-width: 0;
  white-space: normal;
}

@media (max-width: 420px) {
  .dictionary-definition-item {
    grid-template-columns: minmax(38px, auto) minmax(0, 1fr);
    gap: 7px;
  }
}

.vocab-dictionary-definitions {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}

.vocab-dictionary-definitions li {
  display: grid;
  gap: 3px;
}

.vocab-dictionary-definition-en {
  color: var(--text);
}

.vocab-dictionary-definition-cn {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.vocab-dictionary-etymology {
  display: grid;
  gap: 4px;
  color: var(--text);
}

.vocab-dictionary-etymology span {
  color: var(--muted);
}

.vocab-insight-list,
.vocab-insight-examples {
  display: grid;
  gap: 8px;
}

.vocab-insight-list > div,
.vocab-insight-examples > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #dfe7f3;
  border-radius: 8px;
  background: #fff;
}

.vocab-insight-list strong {
  color: var(--primary-text);
}

.vocab-insight-list span,
.vocab-insight-list small,
.vocab-insight-examples span {
  color: var(--muted);
}

.vocab-insight-examples p {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.vocab-insight-status {
  padding: 8px 10px;
  border: 1px solid #dfe7f3;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.vocab-insight-status.warning {
  border-color: rgba(161, 98, 7, 0.3);
  background: #fffbeb;
  color: var(--amber);
}

.vocab-story-text {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  line-height: 1.85;
}

.vocab-story-text p {
  margin: 0 0 12px;
}

.vocab-story-text p:last-child {
  margin-bottom: 0;
}

.vocab-story-text mark {
  padding: 0 4px;
  border-radius: 4px;
  background: #fff2a8;
  color: #172033;
  font-weight: 800;
}

.vocab-story-text mark.vocab-pronounce-mark {
  cursor: pointer;
}

.vocab-story-text mark.vocab-pronounce-mark:hover,
.vocab-story-text mark.vocab-pronounce-mark:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: 2px solid var(--primary-border);
  outline-offset: 2px;
}

.vocab-note-grid,
.vocab-word-grid,
.vocab-progress-mark-grid,
.vocab-quiz-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.vocab-note-card,
.vocab-word-card,
.vocab-progress-mark,
.vocab-quiz-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vocab-progress-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vocab-progress-toolbar h3 {
  margin: 0;
}

.vocab-progress-toolbar .segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.vocab-progress-toolbar .segmented-control button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
}

.vocab-progress-toolbar .segmented-control button.active {
  background: #fff;
  color: var(--primary-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.vocab-saved-badge {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.vocab-note-card span,
.vocab-note-card small,
.vocab-word-card span,
.vocab-word-card small,
.vocab-word-card time,
.vocab-quiz-card span {
  color: var(--muted);
}

.vocab-word-card time {
  font-size: 12px;
  font-style: normal;
}

.vocab-pronounce-inline {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.vocab-pronounce-inline:hover,
.vocab-pronounce-inline:focus-visible,
.vocab-pronounce-inline.active {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.vocab-word-card.mastered {
  border-color: rgba(15, 118, 110, 0.28);
  background: #f0fdfa;
}

.vocab-word-card.weak {
  border-color: rgba(161, 98, 7, 0.3);
  background: #fffbeb;
}

.vocab-memory-section {
  display: grid;
  gap: 8px;
}

.vocab-memory-section h4,
.vocab-progress-form h4 {
  margin: 0;
}

.vocab-progress-form {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.vocab-progress-mark label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.identity-guide-dialog {
  width: min(980px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
}

.identity-guide-dialog::backdrop {
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(4px);
}

.identity-guide-panel {
  position: relative;
  display: grid;
  gap: 18px;
  max-height: min(820px, calc(100vh - 32px));
  padding: 24px;
  overflow: auto;
  border: 1px solid rgba(38, 48, 68, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

.identity-guide-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}

.identity-guide-head {
  display: grid;
  gap: 8px;
  padding-right: 46px;
}

.identity-guide-head h2,
.identity-guide-head p {
  margin: 0;
}

.identity-guide-head h2 {
  font-size: var(--font-page-title);
  line-height: 1.2;
}

.identity-guide-head > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.6;
}

.identity-guide-demo-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.identity-guide-demo-note span {
  color: #475569;
  line-height: 1.55;
}

.identity-guide-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
}

.identity-guide-pain-list,
.identity-guide-path {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.identity-guide-pain-list h3,
.identity-guide-path h3 {
  margin: 0;
}

.identity-guide-pain-grid {
  display: grid;
  gap: 10px;
}

.identity-guide-pain-card {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  box-shadow: 0 10px 26px rgba(85, 96, 124, 0.08);
}

.identity-guide-pain-card:hover,
.identity-guide-pain-card.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.identity-guide-pain-card strong {
  line-height: 1.35;
}

.identity-guide-pain-card span:not(.identity-guide-route-status),
.identity-guide-pain-card small {
  color: var(--muted);
  line-height: 1.45;
}

.identity-guide-pain-card small {
  font-size: 12px;
  font-weight: 800;
}

.identity-guide-route-status {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-weight: 900;
}

.identity-guide-route-status.in_progress {
  background: #ecfeff;
  color: #155e75;
}

.identity-guide-route-status.completed {
  background: #dcfce7;
  color: #166534;
}

.identity-guide-path {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.identity-guide-path-head {
  display: grid;
  gap: 4px;
}

.identity-guide-path-head span,
.identity-guide-path-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.identity-guide-path-head strong {
  font-size: 18px;
  line-height: 1.35;
}

.identity-guide-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
  color: #4b5872;
  line-height: 1.55;
}

.identity-guide-quest-list {
  padding-left: 0;
  list-style: none;
}

.identity-guide-quest-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.identity-guide-quest-list li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 900;
}

.identity-guide-quest-list li.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}

.identity-guide-quest-list li.completed {
  border-color: rgba(22, 163, 74, 0.28);
  background: #f0fdf4;
}

.identity-guide-quest-list li.completed > span {
  background: #bbf7d0;
  color: #166534;
}

.identity-guide-quest-list strong,
.identity-guide-quest-list small {
  display: block;
  line-height: 1.45;
}

.identity-guide-quest-list small {
  color: #64748b;
}

.identity-guide-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
}

.identity-guide-empty span {
  color: var(--muted);
  line-height: 1.45;
}

.identity-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.identity-guide-message {
  margin: 0;
  color: #b45309;
  font-size: 13px;
  font-weight: 700;
}

.identity-guide-overlay {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: grid;
  gap: 12px;
  width: min(390px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
}

.identity-guide-overlay-head {
  display: grid;
  gap: 3px;
}

.identity-guide-overlay-head span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.identity-guide-overlay-head strong {
  font-size: 16px;
  line-height: 1.35;
}

.identity-guide-overlay-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.identity-guide-overlay-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.identity-guide-overlay-body {
  display: grid;
  gap: 6px;
}

.identity-guide-overlay-body h3,
.identity-guide-overlay-body p,
.identity-guide-overlay-body small {
  margin: 0;
}

.identity-guide-overlay-body p,
.identity-guide-overlay-body small {
  color: #5c6b83;
  line-height: 1.55;
}

.identity-guide-overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.identity-guide-active-anchor {
  position: relative;
  outline: 3px solid var(--primary-shadow);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .identity-guide-dialog,
  .identity-guide-panel {
    max-height: calc(100vh - 20px);
  }

  .identity-guide-panel {
    padding: 18px;
  }

  .identity-guide-head {
    padding-right: 38px;
  }

  .identity-guide-body {
    grid-template-columns: 1fr;
  }

  .identity-guide-overlay {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  .identity-guide-overlay-actions button,
  .identity-guide-actions button {
    flex: 1 1 130px;
  }

  body.home-route .topbar {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 18px;
  }

  body.home-route .topbar-brandline,
  body.home-route .user-area {
    grid-column: 1;
  }

  body.home-route h1 {
    white-space: normal;
  }

  body.module-sidebar-route .app-shell,
  body.module-sidebar-route.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  .ielts-rainbow-module {
    margin: -20px;
    padding: 22px;
    min-height: auto;
  }

  .ielts-rainbow-summary {
    min-height: auto;
  }

  .ielts-rainbow-summary-main {
    max-width: none;
  }

  .ielts-rainbow-summary-art {
    right: -30px;
    top: 36px;
    width: min(48vw, 320px);
    height: 220px;
    opacity: 0.58;
  }

  .ielts-rainbow-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ielts-rainbow-mode-panel,
  .ielts-rainbow-entry-grid {
    grid-template-columns: 1fr;
  }

  .ielts-rainbow-entry-card {
    grid-template-columns: 1fr;
  }

  .ielts-rainbow-art-zone {
    min-height: 210px;
  }

  .ielts-track-selector,
  .ielts-gateway-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ielts-gateway-card {
    min-height: 380px;
  }

  .ielts-home-recent {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
    padding: 16px;
  }

  body.module-sidebar-route .sidebar {
    display: none;
  }

  body.module-sidebar-route.sidebar-open .sidebar {
    display: flex;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }

  body.schedule-route .nav-list {
    grid-template-columns: 1fr;
  }

  .topbar {
    grid-template-columns: 1fr;
    align-items: flex-start;
    padding: 20px;
    position: sticky;
  }

  .topbar-brandline,
  .module-top-menu,
  .user-area {
    grid-column: 1;
  }

  .module-top-menu {
    order: initial;
    width: 100%;
  }

  .module-top-menu-bar {
    width: 100%;
  }

  .module-menu-group {
    position: static;
  }

  .module-menu-panel,
  .module-menu-group:nth-last-child(-n + 3) .module-menu-panel {
    right: auto;
    left: 0;
    width: 100%;
    max-height: 62vh;
    overflow: auto;
  }

  .user-area {
    width: 100%;
    justify-content: flex-start;
  }

  .tenant-switcher,
  .tenant-chip,
  .platform-link {
    width: 100%;
    justify-content: space-between;
  }

  .tenant-switcher select {
    max-width: none;
    flex: 1;
  }

  .user-chip {
    text-align: left;
  }

  .view {
    padding: 20px;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .pet-layout {
    grid-template-columns: 1fr;
  }

  .pet-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pet-inventory-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .pet-activity-card {
    grid-template-columns: 1fr;
  }

  .pet-onboarding-step {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .pet-quest-row,
  .pet-growth-phase {
    grid-template-columns: 1fr;
  }

  .pet-activity-state,
  .pet-growth-phase-state {
    justify-items: start;
    text-align: left;
  }

  .pet-inventory-row .pet-compact-select,
  .pet-inventory-row .compact-button,
  .pet-onboarding-step .compact-button,
  .pet-quest-row .compact-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .pet-room-preview {
    grid-template-columns: 1fr;
  }

  .learning-scope-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .learning-scope-toolbar label {
    min-width: 0;
  }

  .essay-layout {
    grid-template-columns: 1fr;
  }

  .essay-module-summary,
  .essay-history-workspace {
    grid-template-columns: 1fr;
  }

  .essay-summary-metrics {
    grid-template-columns: 1fr;
  }

  .essay-side-panel {
    position: static;
  }

  .daily-plan-workspace,
  .daily-plan-review-workspace {
    grid-template-columns: 1fr;
  }

  .daily-task-calendar-grid.week-view,
  .daily-task-calendar-grid.month-view {
    grid-template-columns: repeat(7, minmax(180px, 220px));
  }

  .daily-task-calendar-day {
    min-width: 180px;
  }

  .daily-task-assignment-grid {
    grid-template-columns: 1fr;
  }

  .writing-profile-strip {
    grid-template-columns: 1fr;
  }

  .writing-rule-status-main,
  .writing-rule-form-actions {
    display: grid;
  }

  .writing-rule-status-actions {
    justify-content: flex-start;
  }

  .writing-rule-core-grid,
  .writing-rule-library-grid {
    grid-template-columns: 1fr;
  }

  .writing-rule-profile-switcher .segment {
    flex: 1 1 180px;
  }

  .split-section {
    grid-template-columns: 1fr;
  }

  .schedule-arrangement-head {
    display: grid;
  }

  .schedule-arrangement-actions {
    justify-content: stretch;
  }

  .schedule-arrangement-actions button {
    flex: 1 1 150px;
  }

  .schedule-batch-bar {
    bottom: 10px;
    margin: 12px;
  }

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

  .batch-preview-metrics,
  .batch-preview-row {
    grid-template-columns: 1fr;
  }

  .schedule-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .user-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-order-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-admin-grid,
  .platform-service-summary-grid,
  .platform-teacher-summary-grid,
  .platform-service-admin-grid,
  .platform-service-admin-metrics,
  .platform-material-summary,
  .platform-material-workbench-summary,
  .platform-material-admin-grid,
  .platform-material-admin-grid.wide,
  .platform-material-package-card,
  .platform-material-current-head,
  .module-material-summary,
  .module-material-upload-grid,
  .module-material-upload-fields,
  .module-material-layout,
  .module-material-catalog-grid,
  .platform-material-lower-grid,
  .platform-material-catalog-admin-grid,
  .platform-material-catalog-workbench-grid,
  .platform-material-tenant-layout,
  .tenant-collaboration-grid,
  .tenant-collaboration-template-grid,
  .tenant-collaboration-metrics,
  .platform-metric-grid,
  .tenant-billing-grid,
  .tenant-config-module-row,
  .tenant-feature-grid,
  .tenant-branding-grid,
  .tenant-rule-grid,
  .tenant-rule-item,
  .tenant-role-permission-row,
  .tenant-role-permission-list,
  .tenant-scope-grid,
  .tenant-member-add-form {
    grid-template-columns: 1fr;
  }

  .platform-teacher-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .platform-teacher-row-side {
    justify-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tenant-ai-point-grant-form {
    grid-template-columns: 1fr;
  }

  .platform-material-package-tile,
  .platform-material-detail .platform-service-admin-row {
    display: grid;
    justify-items: stretch;
  }

  .platform-material-workbench-actions,
  .platform-material-current-actions,
  .platform-material-package-actions {
    justify-content: flex-start;
  }

  .platform-material-detail {
    max-height: none;
  }

  .module-material-import-panel {
    position: static;
    max-height: none;
  }

  .module-material-tree-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .module-material-entry-actions {
    justify-content: flex-start;
  }

  .tenant-ai-point-grant-form .primary-button {
    width: 100%;
  }

  .family-bind-inline-form {
    grid-template-columns: 1fr;
  }

  .schedule-search-field {
    grid-column: 1 / -1;
  }

  .user-search-field {
    grid-column: 1 / -1;
  }

  .user-filter-grid > button {
    grid-column: 1 / -1;
  }

  .sales-order-filter-grid > button {
    grid-column: 1 / -1;
  }

  .user-management-toolbar,
  .user-create-dialog-actions {
    display: grid;
    justify-content: stretch;
  }

  .user-create-trigger,
  .user-create-dialog-actions button {
    width: 100%;
  }

  .schedule-view-row,
  .schedule-table-wrap {
    margin-inline: 0;
    padding-inline: 14px;
  }

  .form-grid,
  .form-grid.three,
  .form-grid.four {
    grid-template-columns: 1fr;
  }

  .tenant-collaboration-referrer-row,
  .tenant-collaboration-default-member-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tenant-collaboration-referrer-row .icon-button,
  .tenant-collaboration-default-member-row .icon-button {
    justify-self: end;
  }

  .role-schedule-head,
  .batch-head,
  .basic-row-head,
  .notification-center-head,
  .notification-card-head,
  .org-card-head,
  .student-profile-dialog-head,
  .student-profile-modal-hero,
  .user-row,
  .tenant-member-row,
  .tenant-collaboration-row,
  .tenant-collaboration-template-row,
  .platform-service-card-head,
  .platform-service-booking-row,
  .platform-service-admin-row,
  .student-card-head,
  .student-module-head,
  .student-hero,
  .pet-profile-card,
  .pet-event-card,
  .writing-config-head,
  .student-mini-row,
  .student-task-row,
  .writing-report-head {
    display: grid;
  }

  .task-card-head,
  .basic-row-actions,
  .product-update-announcement-actions,
  .notification-card-actions,
  .tenant-member-actions,
  .daily-task-actions,
  .daily-plan-item-form-head,
  .daily-plan-edit-toolbar,
  .daily-plan-form-actions,
  .user-actions,
  .student-hero-tags {
    display: grid;
    justify-content: stretch;
  }

  .task-preview-card-content {
    grid-template-columns: 1fr;
  }

  .notification-center-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .notification-center-head .secondary-button,
  .product-update-announcement-actions button {
    width: 100%;
  }

  .task-preview-thumb {
    width: 44px;
  }

  .daily-plan-preview-list article {
    grid-template-columns: 1fr;
  }

  .teacher-color-picker {
    min-width: 0;
    width: 100%;
  }

  .user-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-module-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-filter-bar {
    grid-template-columns: 1fr;
  }

  .week-grid,
  .month-grid {
    grid-template-columns: repeat(7, minmax(128px, 1fr));
  }

  body.home-route .topbar {
    align-items: flex-start;
  }

  body.home-route .user-area {
    justify-content: flex-start;
  }

  .home-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-hero-visual {
    aspect-ratio: 16 / 6;
    min-height: 220px;
    max-height: 320px;
  }

  .home-catalog-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-tabs {
    justify-content: start;
  }

  .home-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pet-profile-card,
  .pet-companion-head {
    grid-template-columns: 1fr;
  }

  .section-heading-row,
  .pet-item-title-row,
  .pet-card-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .pet-profile-card {
    justify-items: start;
  }

  .pet-stat-grid,
  .pet-shop-grid,
  .pet-companion-grid {
    grid-template-columns: 1fr;
  }

  .pet-inline-form input,
  .pet-inline-form textarea,
  .pet-create-form input,
  .pet-create-form select,
  .pet-create-form button,
  .pet-inline-form button,
  .pet-activity-card .compact-button,
  .pet-onboarding-step .compact-button,
  .pet-quest-row .compact-button {
    width: 100%;
    flex-basis: 100%;
  }

  .ielts-rainbow-module {
    margin: -20px;
    padding: 18px;
  }

  .ielts-rainbow-summary {
    padding: 22px 18px;
  }

  .ielts-rainbow-summary::before {
    left: 18px;
    right: 18px;
  }

  .ielts-rainbow-summary-head {
    margin-bottom: 18px;
  }

  .ielts-rainbow-summary h2 {
    font-size: 25px;
  }

  .ielts-rainbow-desc {
    font-size: 14px;
  }

  .ielts-rainbow-stats {
    grid-template-columns: 1fr;
  }

  .ielts-rainbow-stat {
    min-height: 76px;
  }

  .ielts-rainbow-type strong {
    font-size: 22px;
  }

  .ielts-rainbow-entry-copy {
    padding: 22px 18px 30px 26px;
  }

  .ielts-rainbow-entry-title {
    font-size: var(--font-page-title);
  }

  .brand {
    grid-template-columns: 42px 1fr;
  }

  h1 {
    font-size: var(--font-section-title);
  }

  .section-header {
    display: grid;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .pet-stat-grid {
    grid-template-columns: 1fr;
  }

  .nav-link {
    font-size: 13px;
    padding-inline: 8px;
  }

  .module-top-menu-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .module-menu-trigger {
    width: 100%;
    min-height: 40px;
    padding: 7px 8px;
    font-size: 14px;
  }

  .module-menu-list {
    grid-template-columns: 1fr;
    max-height: 50vh;
  }

  .schedule-filter-grid {
    grid-template-columns: 1fr;
  }

  .user-filter-grid,
  .sales-order-filter-grid,
  .user-meta-grid,
  .user-info-scope-grid {
    grid-template-columns: 1fr;
  }

  .user-module-summary .student-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-quick-summary,
  .user-quick-summary-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .user-quick-summary-metrics span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 8px;
  }

  .user-quick-summary .action-dialog-entry,
  .user-summary-detail-trigger {
    width: 100%;
  }

  .sales-order-head,
  .user-row-badges,
  .student-card-badges,
  .sales-order-badges {
    display: grid;
    justify-content: stretch;
  }

  .schedule-dashboard-strip {
    grid-template-columns: 1fr;
    padding-inline: 14px;
  }

  .schedule-dashboard-card {
    min-height: 76px;
  }

  .schedule-conflict-check {
    justify-content: flex-start;
  }

  body.home-route .topbar {
    gap: 12px;
  }

  body.home-route .view {
    padding: 18px 18px 34px;
  }

  .home-hero {
    min-height: auto;
    margin: 0 0 18px;
    padding: 28px 18px 18px;
  }

  .home-hero h2 {
    font-size: var(--font-page-title);
  }

  .home-catalog {
    margin: 0 0 34px;
  }

  .home-catalog-head,
  .home-feature-grid {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-feature-grid {
    grid-template-columns: 1fr;
    padding-bottom: 18px;
  }

  .home-hero-visual {
    aspect-ratio: 9 / 5;
    min-height: 150px;
    max-height: 240px;
  }

  .ielts-home-gateway {
    gap: 20px;
  }

  .ielts-track-selector {
    padding: 12px;
    border-width: 2px;
  }

  .ielts-track-option {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .ielts-track-option strong {
    font-size: var(--font-section-title);
  }

  .ielts-track-radio {
    width: 26px;
    height: 26px;
    border-width: 5px;
  }

  .ielts-track-option.active .ielts-track-radio::after {
    width: 8px;
    height: 8px;
    margin: 4px;
  }

  .ielts-gateway-card {
    min-height: 330px;
    box-shadow: 8px 8px 0 rgba(50, 70, 155, 0.5), 0 4px 16px rgba(15, 23, 42, 0.08);
  }

  .ielts-gateway-head {
    min-height: 88px;
  }

  .ielts-gateway-head strong {
    font-size: var(--font-display);
  }

  .ielts-gateway-illustration,
  .ielts-gateway-illustration.answers {
    transform: scale(0.78);
    margin: -8px 0 -16px;
  }

  .exam-linked-entry,
  .exam-start-card {
    grid-template-columns: 1fr;
  }

  .exam-card-grid {
    grid-template-columns: 1fr;
  }

  .vocab-head,
  .vocab-workbench-head,
  .vocab-story-title-row,
  .vocab-progress-group-head {
    display: grid;
  }

  .vocab-metrics,
  .vocab-workbench-head .vocab-metrics,
  .vocab-learn-layout,
  .vocab-learn-workbench-intro,
  .vocab-workbench-page,
  .vocab-book-layout,
  .vocab-workspace,
  .vocab-history-layout {
    grid-template-columns: 1fr;
  }

  .vocab-workbench-rail {
    position: static;
  }

  .vocab-history-list {
    position: static;
  }
}

@media (max-width: 1280px) {
  .course-center-editor-grid {
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
  }

  .course-center-config-drawer {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 980px) {
  .task-detail-dialog-grid {
    grid-template-columns: 1fr;
  }

  .daily-task-manual-primary-grid,
  .daily-task-text-grid,
  .file-task-detail-content {
    grid-template-columns: 1fr;
  }

  .file-task-detail-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .task-detail-dialog-head {
    display: grid;
  }

  .task-detail-dialog-head-actions {
    justify-content: space-between;
    padding-right: 44px;
  }

  .course-center-shell,
  .course-center-lesson-layout,
  .course-center-editor-grid,
  .course-center-editor-grid.is-drawer-collapsed {
    grid-template-columns: 1fr;
  }

  .course-center-editor-topbar,
  .course-center-detail-head,
  .course-center-lesson-head,
  .course-center-editor-main-head {
    grid-template-columns: 1fr;
  }

  .course-center-editor-nav,
  .course-center-config-drawer {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .course-center-editor-actions {
    justify-content: stretch;
  }

  .course-center-editor-actions button {
    flex: 1 1 140px;
  }

  .course-center-asset-upload-panel,
  .course-center-asset-filter,
  .course-center-asset-bulkbar,
  .course-center-asset-row,
  .course-center-asset-edit-form,
  .course-center-entitlement-row {
    grid-template-columns: 1fr;
  }

  .course-center-upload-queue {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .task-detail-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
  }

  .task-detail-dialog-body {
    padding: 12px;
  }

  .task-detail-dialog-summary,
  .task-detail-dialog-section {
    padding: 12px;
  }

  .daily-task-deadline-inputs {
    grid-template-columns: 1fr;
  }

  .file-task-detail-header {
    padding: 16px;
  }

  .file-task-detail-heading h2 {
    font-size: 24px;
  }

  .file-task-detail-main,
  .file-task-submit-panel {
    padding: 16px;
  }

  .file-task-detail-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .file-task-detail-meta span + span::before {
    display: none;
  }

  .course-center-editor-course,
  .course-center-editor-lesson,
  .course-center-lesson-upload-inline,
  .course-center-bulk-rename-form,
  .course-center-asset-trash-actions {
    grid-template-columns: 1fr;
  }

  .course-center-editor-lesson > div:last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 0;
  }

  .course-center-editor-lesson > div:last-child .danger-button {
    grid-column: 1 / -1;
  }

  .course-center-player,
  .course-center-player-empty {
    min-height: 220px;
  }
}

.intensive-listening-page {
  --il-bg: #f5f7fa;
  --il-panel: #ffffff;
  --il-panel-soft: #f8fafc;
  --il-text: #1f2933;
  --il-muted: #667085;
  --il-line: var(--line);
  --il-accent: var(--primary);
  --il-accent-strong: var(--primary-text);
  --il-accent-soft: var(--primary-soft);
  --il-warm: #b75c2d;
  --il-warm-soft: #fff0e8;
  --il-gold: #8a6500;
  --il-gold-soft: #fff7dd;
  --il-success: #2f855a;
  --il-success-soft: #e6f6ed;
  --il-danger: #b42318;
  --il-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  color: var(--il-text);
}

.intensive-listening-page .panel {
  overflow: hidden;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel);
  box-shadow: var(--il-shadow);
}

.intensive-listening-page .primary-button,
.intensive-listening-page .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.intensive-listening-page .primary-button {
  border-color: var(--il-accent);
  background: var(--il-accent);
  color: #fff;
}

.intensive-listening-page .primary-button:hover {
  background: var(--il-accent-strong);
}

.intensive-listening-page .secondary-button {
  border: 1px solid var(--il-line);
  background: #fff;
  color: var(--il-text);
}

.intensive-listening-page .primary-button.warm,
.intensive-listening-page .secondary-button.warm {
  border-color: #ffd6c0;
  background: var(--il-warm-soft);
  color: var(--il-warm);
}

.intensive-listening-page .danger-soft {
  border-color: #ffd0ca;
  background: #fff5f3;
  color: var(--il-danger);
}

.intensive-listening-page .task-status-pill {
  border-radius: 8px;
  background: var(--il-panel-soft);
}

.intensive-listening-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}

.intensive-listening-topbar h2 {
  margin: 0;
  color: #111827;
  font-size: var(--font-page-title);
  line-height: 1.18;
  letter-spacing: 0;
}

.intensive-listening-topbar p {
  max-width: 920px;
  margin: 10px 0 0;
  color: var(--il-muted);
  font-size: 15px;
}

.intensive-listening-mode-card {
  min-width: 178px;
  display: grid;
  justify-items: end;
  gap: 6px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.05);
  padding: 12px 16px;
  text-align: right;
}

.intensive-listening-mode-card span,
.intensive-listening-mode-card small {
  color: var(--il-muted);
  font-size: 13px;
  font-weight: 700;
}

.intensive-listening-mode-card strong {
  color: var(--il-accent-strong);
  font-size: 19px;
  line-height: 1.2;
}

.intensive-listening-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.intensive-listening-mobile-source-bar,
.intensive-listening-mobile-source-backdrop,
.intensive-listening-mobile-source-close {
  display: none;
}

.intensive-listening-source-panel-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.intensive-listening-stage-nav button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  min-height: 76px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  color: var(--il-text);
  padding: 10px;
  text-align: left;
}

.intensive-listening-stage-nav button.active {
  border-color: var(--il-accent);
  background: var(--il-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(38, 122, 141, 0.12);
}

.intensive-listening-stage-nav button span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-accent-strong);
  font-weight: 900;
}

.intensive-listening-stage-nav button strong,
.intensive-listening-stage-nav button small {
  min-width: 0;
}

.intensive-listening-stage-nav button strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
}

.intensive-listening-stage-nav button small {
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.25;
}

.intensive-listening-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--il-line);
}

.intensive-listening-panel-header h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  line-height: 1.3;
}

.intensive-listening-panel-header p {
  margin: 4px 0 0;
  color: var(--il-muted);
  font-size: 13px;
}

.intensive-listening-panel-body {
  display: grid;
  gap: 16px;
  padding: 16px 18px 18px;
}

.intensive-listening-source-panel,
.intensive-listening-workspace {
  display: grid;
  min-width: 0;
}

.intensive-listening-source-panel {
  position: sticky;
  top: 14px;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 28px);
}

.intensive-listening-source-panel .intensive-listening-panel-body {
  min-height: 0;
  overflow: auto;
}

.intensive-listening-global-stage {
  display: grid;
  gap: 14px;
}

.intensive-listening-global-head,
.intensive-listening-global-player,
.intensive-listening-comprehension-card,
.intensive-listening-full-transcript-card,
.intensive-listening-framework-card,
.intensive-listening-global-form {
  display: grid;
  gap: 12px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.intensive-listening-global-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  background: var(--il-panel-soft);
}

.intensive-listening-global-head h3,
.intensive-listening-comprehension-card h4,
.intensive-listening-full-transcript-card h4 {
  margin: 0;
  color: #111827;
}

.intensive-listening-global-head p,
.intensive-listening-comprehension-card p,
.intensive-listening-full-transcript-card p {
  margin: 4px 0 0;
  color: var(--il-muted);
}

.intensive-listening-global-player {
  grid-template-columns: minmax(0, 1fr) 176px;
  align-items: stretch;
}

.intensive-listening-global-controls {
  display: grid;
  grid-template-rows: minmax(112px, 1fr) auto;
  gap: 10px;
  min-width: 0;
}

.intensive-listening-global-controls > button,
.intensive-listening-global-controls > .intensive-listening-speed-select {
  width: 100%;
}

.intensive-listening-speed-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  color: var(--il-text);
  padding: 0 10px;
  cursor: pointer;
}

.intensive-listening-speed-select:focus-within {
  border-color: var(--il-accent);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.12);
}

.intensive-listening-speed-select select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  outline: none;
  cursor: pointer;
}

.intensive-listening-full-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--il-line);
  padding-top: 14px;
}

.intensive-listening-full-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--il-muted);
  font-size: 13px;
  font-weight: 800;
}

.intensive-listening-full-progress-meta strong {
  color: var(--il-accent-strong);
}

.intensive-listening-full-progress-controls {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.intensive-listening-full-progress-controls .secondary-button {
  min-height: 42px;
  padding-inline: 14px;
  white-space: nowrap;
}

.intensive-listening-full-progress-range {
  width: 100%;
  min-width: 0;
  accent-color: var(--il-accent);
  cursor: pointer;
}

.intensive-listening-global-form label {
  display: grid;
  gap: 7px;
  color: var(--il-muted);
  font-size: 13px;
  font-weight: 800;
}

.intensive-listening-global-form textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-text);
  padding: 10px 11px;
  outline: none;
  font-weight: 500;
}

.intensive-listening-comprehension-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.intensive-listening-comprehension-options .secondary-button.active {
  border-color: var(--il-accent);
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
  box-shadow: inset 0 0 0 1px rgba(38, 122, 141, 0.16);
}

.intensive-listening-framework-card {
  background: #fbfdff;
}

.intensive-listening-framework-card.pending {
  border-color: var(--primary-border);
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
  font-weight: 800;
}

.intensive-listening-framework-card.failed {
  border-color: #ffd0ca;
  background: #fff5f3;
  color: var(--il-danger);
  font-weight: 800;
}

.intensive-listening-framework-topic,
.intensive-listening-framework-structure,
.intensive-listening-signal-list {
  display: grid;
  gap: 8px;
}

.intensive-listening-framework-topic span,
.intensive-listening-framework-structure > span,
.intensive-listening-signal-list > span {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.intensive-listening-framework-topic strong {
  color: #111827;
  font-size: 19px;
  line-height: 1.45;
}

.intensive-listening-framework-structure article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.intensive-listening-framework-structure em {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
  font-style: normal;
  font-weight: 900;
}

.intensive-listening-framework-structure p,
.intensive-listening-full-transcript p {
  margin: 0;
  color: var(--il-text);
  line-height: 1.6;
}

.intensive-listening-framework-structure mark,
.intensive-listening-signal {
  border-radius: 6px;
  background: #fff2cc;
  color: #805400;
  padding: 1px 4px;
  font-weight: 900;
}

.intensive-listening-signal.macro {
  background: #ffe96f;
  color: #5f4300;
}

.intensive-listening-signal.relation {
  background: #dff3f7;
  color: #075f73;
}

.intensive-listening-signal.local {
  background: #edf7ee;
  color: #2f6a3a;
  box-shadow: inset 0 -2px 0 #91c99a;
}

.intensive-listening-signal-list {
  grid-template-columns: 1fr;
}

.intensive-listening-framework-next {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--il-line);
  padding-top: 14px;
}

.intensive-listening-framework-next .primary-button {
  width: min(100%, 240px);
  min-height: 46px;
}

.intensive-listening-chip.signal {
  border-color: #eadb9a;
  background: var(--il-gold-soft);
  color: var(--il-gold);
}

.intensive-listening-chip.signal.relation {
  border-color: #acdce5;
  background: #eaf8fa;
  color: #075f73;
}

.intensive-listening-chip.signal.local {
  border-color: #b9dbbf;
  background: #f0f8f1;
  color: #2f6a3a;
}

.intensive-listening-full-transcript {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 12px;
}

.intensive-listening-local-import {
  display: grid;
  gap: 10px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.intensive-listening-source-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.intensive-listening-source-list {
  display: grid;
  gap: 10px;
}

.intensive-listening-source-filter {
  display: grid;
  gap: 8px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.intensive-listening-source-filter label {
  display: grid;
  gap: 6px;
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 800;
}

.intensive-listening-source-filter input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-text);
  padding: 8px 10px;
  font: inherit;
  font-weight: 700;
  outline: none;
}

.intensive-listening-source-filter input:focus {
  border-color: var(--il-accent);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

.intensive-listening-source-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 4px;
}

.intensive-listening-source-tabs button {
  display: grid;
  gap: 2px;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--il-muted);
  padding: 5px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.intensive-listening-source-tabs button.active {
  background: #fff;
  color: var(--il-accent-strong);
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.06);
}

.intensive-listening-source-tabs small {
  color: inherit;
  font-size: 11px;
}

.intensive-listening-category-tree {
  display: grid;
  gap: 8px;
}

.intensive-listening-category-node {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.intensive-listening-category-node summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--il-text);
  cursor: pointer;
  list-style: none;
}

.intensive-listening-category-node summary::-webkit-details-marker {
  display: none;
}

.intensive-listening-category-node summary > span:first-child {
  color: var(--il-muted);
  font-size: 13px;
}

.intensive-listening-category-node summary strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intensive-listening-category-node summary small {
  display: block;
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.3;
}

.intensive-listening-category-node summary em {
  min-width: 30px;
  border-radius: 999px;
  background: var(--il-panel-soft);
  color: var(--il-muted);
  padding: 3px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.intensive-listening-category-content {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--il-line);
  background: #fbfcfd;
  padding: 8px;
}

.intensive-listening-source-section {
  display: grid;
  gap: 8px;
}

.intensive-listening-source-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--il-text);
}

.intensive-listening-source-section-title strong {
  font-size: 13px;
}

.intensive-listening-source-section-title small {
  color: var(--il-muted);
  font-size: 12px;
}

.institution-library-section {
  border-top: 1px solid var(--il-line);
  padding-top: 10px;
}

.intensive-listening-transcribe-mode {
  display: grid;
  gap: 7px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.intensive-listening-transcribe-mode label {
  display: grid;
  gap: 6px;
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 800;
}

.intensive-listening-transcribe-mode select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-text);
  padding: 7px 9px;
  font-weight: 700;
}

.intensive-listening-transcribe-mode small {
  color: var(--il-muted);
  line-height: 1.45;
}

.intensive-listening-source-card,
.intensive-listening-linked-card {
  width: 100%;
  display: grid;
  gap: 6px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 12px;
  color: var(--il-text);
  text-align: left;
}

.intensive-listening-source-card {
  cursor: default;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.intensive-listening-source-card:hover {
  border-color: var(--primary-border);
  background: #fff;
  transform: translateY(-1px);
}

.intensive-listening-source-card.active {
  border-color: var(--il-accent);
  background: var(--il-accent-soft);
}

.intensive-listening-source-card.institution-library {
  border-color: var(--primary-border);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--il-line));
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--primary-soft) 48%, #fff);
}

.intensive-listening-source-select {
  width: 100%;
  display: grid;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.intensive-listening-source-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid var(--il-line);
  padding-top: 8px;
}

.intensive-listening-source-card-actions .secondary-button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
}

.intensive-listening-source-card-actions .icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  color: var(--il-danger);
}

.intensive-listening-source-card-actions .institution-library-save,
.intensive-listening-source-card-actions .institution-library-start,
.institution-library-saved {
  margin-right: auto;
}

.institution-library-saved {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--il-accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.intensive-listening-start-workspace {
  min-height: 480px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
}

.intensive-listening-start-workspace h3,
.intensive-listening-start-workspace p {
  margin: 0;
}

.intensive-listening-start-workspace p {
  max-width: 580px;
  color: var(--il-muted);
  line-height: 1.7;
}

.intensive-listening-processing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
  padding: 12px 14px;
  font-weight: 800;
  line-height: 1.5;
}

.intensive-listening-processing-banner.failed {
  border-color: #ffd0ca;
  background: #fff5f3;
  color: var(--il-danger);
}

.intensive-listening-source-card strong,
.intensive-listening-linked-card strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.25;
}

.intensive-listening-source-card span,
.intensive-listening-source-card small,
.intensive-listening-linked-card span,
.intensive-listening-linked-card small {
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.45;
}

.intensive-listening-stat-grid,
.intensive-listening-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.intensive-listening-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intensive-listening-stat-grid span,
.intensive-listening-summary-grid div {
  min-height: 76px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.intensive-listening-stat-grid small,
.intensive-listening-summary-grid span {
  display: block;
  color: var(--il-muted);
  font-size: 12px;
}

.intensive-listening-stat-grid strong,
.intensive-listening-summary-grid strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 23px;
  line-height: 1.1;
}

.intensive-listening-progress-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.intensive-listening-progress-summary span,
.intensive-listening-progress-meta span,
.intensive-listening-progress-phase-grid > div {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.intensive-listening-progress-summary strong,
.intensive-listening-progress-meta strong {
  display: block;
  color: #111827;
  font-size: var(--font-metric-compact);
  line-height: 1.15;
}

.intensive-listening-progress-summary small,
.intensive-listening-progress-meta small,
.intensive-listening-progress-phase-grid span,
.intensive-listening-progress-phase-grid small,
.intensive-listening-progress-time,
.intensive-listening-progress-sentence small {
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.5;
}

.intensive-listening-progress-list {
  display: grid;
  gap: 14px;
}

.intensive-listening-progress-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--il-shadow);
  padding: 16px;
}

.intensive-listening-progress-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.intensive-listening-progress-card-head h3 {
  margin: 0;
  color: #111827;
  font-size: 20px;
}

.intensive-listening-progress-card-head p {
  margin: 6px 0 0;
  color: var(--il-muted);
}

.intensive-listening-progress-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5edf3;
}

.intensive-listening-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--il-accent);
}

.intensive-listening-current-progress {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 0 2px;
}

.intensive-listening-current-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--il-muted);
  font-size: 13px;
}

.intensive-listening-current-progress-head strong {
  color: var(--il-ink);
  font-size: 13px;
}

.intensive-listening-progress-meta,
.intensive-listening-progress-phase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.intensive-listening-progress-phase-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intensive-listening-progress-phase-grid strong {
  display: block;
  margin: 5px 0;
  color: #111827;
}

.intensive-listening-progress-time {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.intensive-listening-progress-sentences {
  display: grid;
  gap: 8px;
}

.intensive-listening-progress-sentence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 44px));
  gap: 8px;
  align-items: start;
}

.intensive-listening-progress-sentence-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  color: var(--il-text);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.intensive-listening-progress-sentence-button.done {
  border-color: #d6e3ea;
  background: #f8fafc;
  box-shadow: inset 0 -3px 0 rgba(8, 145, 178, 0.16);
}

.intensive-listening-progress-sentence-button.pronunciation-strong {
  border-color: #a7f3d0;
  background: #dcfce7;
  color: #047857;
  box-shadow: none;
}

.intensive-listening-progress-sentence-button.pronunciation-fair {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e;
  box-shadow: none;
}

.intensive-listening-progress-sentence-button.pronunciation-weak {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b42318;
  box-shadow: none;
}

.intensive-listening-progress-sentence-button.active,
.intensive-listening-progress-sentence-button.active.done,
.intensive-listening-progress-sentence-button.active.pronunciation-strong,
.intensive-listening-progress-sentence-button.active.pronunciation-fair,
.intensive-listening-progress-sentence-button.active.pronunciation-weak {
  border-color: var(--il-accent);
  background: var(--il-accent);
  color: #fff;
  box-shadow: none;
}

.intensive-listening-progress-sentence-detail {
  display: grid;
  gap: 10px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 12px;
}

.intensive-listening-progress-sentence-detail-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.intensive-listening-progress-recording-button {
  display: inline-flex;
  flex: 0 0 auto;
  justify-self: start;
  width: auto;
  max-width: max-content;
  min-height: 24px;
  border-radius: 8px;
  margin-left: 6px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}

.intensive-listening-progress-recording-button span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.intensive-listening-progress-sentence-detail-head b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
}

.intensive-listening-progress-sentence-detail-head b.pronunciation-strong {
  border-color: #a7f3d0;
  background: #dcfce7;
  color: #047857;
}

.intensive-listening-progress-sentence-detail-head b.pronunciation-fair {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e;
}

.intensive-listening-progress-sentence-detail-head b.pronunciation-weak {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b42318;
}

.intensive-listening-progress-sentence-detail strong {
  display: block;
  margin-bottom: 2px;
  color: #111827;
}

.intensive-listening-progress-sentence-title {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 12px !important;
  align-items: baseline;
}

.intensive-listening-progress-sentence-title strong {
  margin: 0;
}

.intensive-listening-progress-sentence-title time,
.intensive-listening-progress-time-missing {
  color: var(--il-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

.intensive-listening-progress-sentence-title time.exact {
  color: #0f766e;
}

.intensive-listening-progress-sentence-detail p {
  margin: 0;
  color: #111827;
  font-weight: 800;
  line-height: 1.5;
}

.intensive-listening-progress-sentence-detail div:not(.intensive-listening-progress-sentence-detail-head) {
  display: grid;
  gap: 4px;
}

.intensive-listening-progress-sentence-detail .intensive-listening-progress-sentence-meta {
  display: inline;
}

.intensive-listening-progress-sentence-detail span,
.intensive-listening-progress-sentence-detail small {
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.5;
}

.intensive-listening-progress-sentence-detail .intensive-listening-progress-recording-button span {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.intensive-listening-progress-sentence-detail em {
  color: var(--il-text);
  font-style: normal;
  line-height: 1.5;
}

.intensive-listening-progress-sentence {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 10px;
}

.intensive-listening-progress-sentence b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
}

.intensive-listening-progress-sentence b.pronunciation-strong {
  border-color: #a7f3d0;
  background: #dcfce7;
  color: #047857;
}

.intensive-listening-progress-sentence b.pronunciation-fair {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e;
}

.intensive-listening-progress-sentence b.pronunciation-weak {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b42318;
}

.intensive-listening-progress-sentence strong {
  display: block;
  margin-bottom: 4px;
  color: #111827;
  line-height: 1.45;
}

.intensive-listening-empty {
  display: grid;
  gap: 8px;
  min-height: 320px;
  align-content: center;
  border: 1px dashed var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-muted);
  padding: 28px;
  text-align: center;
}

.intensive-listening-empty.compact {
  min-height: 240px;
}

.intensive-listening-empty h3,
.intensive-listening-sentence-head h3,
.intensive-listening-step-head h4,
.intensive-listening-study-panel h4,
.intensive-listening-pronunciation h4 {
  margin: 0;
  color: #111827;
  letter-spacing: 0;
}

.intensive-listening-empty p,
.intensive-listening-sentence-head p,
.intensive-listening-step-head p,
.intensive-listening-study-panel p,
.intensive-listening-pronunciation p {
  margin: 4px 0 0;
  color: var(--il-muted);
}

.intensive-listening-sentence-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.intensive-listening-sentence-title h3 {
  font-size: 23px;
  line-height: 1.25;
}

.intensive-listening-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.intensive-listening-jump {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 5px;
}

.intensive-listening-jump-button {
  width: 100%;
  min-width: 0;
  height: 30px;
  border: 1px solid var(--il-line);
  border-radius: 7px;
  background: #fff;
  color: var(--il-text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.intensive-listening-jump-button.active {
  border-color: var(--il-accent);
  background: var(--il-accent);
  color: #fff;
}

.intensive-listening-jump-button.done {
  border-color: #d6e3ea;
  background: #f8fafc;
  color: var(--il-text);
  box-shadow: inset 0 -3px 0 rgba(8, 145, 178, 0.2);
}

.intensive-listening-jump-button.pronunciation-strong {
  border-color: #a7f3d0;
  background: #dcfce7;
  color: #047857;
  box-shadow: none;
}

.intensive-listening-jump-button.pronunciation-fair {
  border-color: #fde68a;
  background: #fef3c7;
  color: #92400e;
  box-shadow: none;
}

.intensive-listening-jump-button.pronunciation-weak {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b42318;
  box-shadow: none;
}

.intensive-listening-jump-button.active,
.intensive-listening-jump-button.active.done,
.intensive-listening-jump-button.active.pronunciation-strong,
.intensive-listening-jump-button.active.pronunciation-fair,
.intensive-listening-jump-button.active.pronunciation-weak {
  border-color: var(--il-accent);
  background: var(--il-accent);
  color: #fff;
  box-shadow: none;
}

.intensive-listening-audio-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 14px;
  align-items: stretch;
  container-type: inline-size;
}

.intensive-listening-sentence-player-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.intensive-listening-sentence-player-controls > button,
.intensive-listening-sentence-player-controls > .intensive-listening-speed-select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}

@container (min-width: 620px) {
  .intensive-listening-sentence-player-controls {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .75fr);
  }
}

.intensive-listening-wave-panel {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #101828;
  padding: 16px;
  color: #fff;
}

.intensive-listening-wave-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #d0d5dd;
  font-size: 12px;
  font-weight: 700;
}

.intensive-listening-wave {
  display: grid;
  grid-template-columns: repeat(40, 1fr);
  gap: 4px;
  align-items: center;
  height: 92px;
  margin-top: 8px;
}

.intensive-listening-wave i {
  display: block;
  height: var(--h);
  min-height: 8px;
  border-radius: 999px;
  background: #6ee7d8;
  opacity: 0.72;
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.intensive-listening-wave.playing i {
  animation: il-wave 820ms ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes il-wave {
  0%, 100% {
    opacity: 0.36;
    transform: scaleY(0.72);
  }
  50% {
    opacity: 0.96;
    transform: scaleY(1.12);
  }
}

.intensive-listening-focus-box {
  display: grid;
  place-items: center;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  text-align: center;
  padding: 12px;
}

.intensive-listening-focus-box span {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 800;
}

.intensive-listening-focus-box strong {
  display: block;
  margin-top: 5px;
  color: var(--il-accent-strong);
  font-size: var(--font-metric);
  line-height: 1;
}

.intensive-listening-blind-panel,
.intensive-listening-attempt-panel,
.intensive-listening-study-panel,
.intensive-listening-pronunciation,
.intensive-listening-sentence-card,
.intensive-listening-dictionary,
.intensive-listening-record-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.intensive-listening-blind-panel {
  border-color: #eadb9a;
  background: var(--il-gold-soft);
}

.intensive-listening-attempt-panel {
  border-color: var(--primary-border);
  background: var(--il-accent-soft);
}

.intensive-listening-blind-panel .task-status-pill,
.intensive-listening-attempt-panel .task-status-pill {
  background: rgba(255, 255, 255, 0.86);
  color: var(--il-accent-strong);
  font-size: 15px;
  font-weight: 900;
}

.intensive-listening-step-head,
.intensive-listening-pronunciation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.intensive-listening-pronunciation-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-muted);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}

.intensive-listening-pronunciation-status.recording {
  border-color: #f2b4ae;
  background: #fff2f0;
  color: #b42318;
}

.intensive-listening-pronunciation-status.processing {
  border-color: var(--primary-border);
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
}

.intensive-listening-pronunciation-recording {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #b8dfcf;
  border-radius: 8px;
  background: var(--il-success-soft);
  padding: 10px 12px;
}

.intensive-listening-pronunciation-recording > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.intensive-listening-pronunciation-recording strong {
  color: var(--il-success);
  font-size: 13px;
}

.intensive-listening-pronunciation-recording small {
  color: var(--il-muted);
  line-height: 1.4;
}

.intensive-listening-pronunciation-recording-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.intensive-listening-pronunciation-recording-actions .secondary-button {
  min-height: 40px;
  white-space: nowrap;
}

.intensive-listening-pronunciation .primary-button.recording {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.intensive-listening-step-head h4 {
  font-size: 16px;
}

.intensive-listening-blind-panel .intensive-listening-step-head h4 {
  color: var(--il-gold);
}

.intensive-listening-attempt-panel .intensive-listening-step-head h4 {
  color: var(--il-accent-strong);
}

.intensive-listening-two-actions,
.intensive-listening-actions-row,
.intensive-listening-toolbar,
.intensive-listening-export-actions {
  display: grid;
  gap: 9px;
}

.intensive-listening-two-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intensive-listening-blind-panel .intensive-listening-two-actions .primary-button,
.intensive-listening-blind-panel .intensive-listening-two-actions .secondary-button,
.intensive-listening-attempt-panel .intensive-listening-actions-row .primary-button,
.intensive-listening-attempt-panel .intensive-listening-actions-row .secondary-button {
  min-height: 58px;
  font-size: 18px;
  letter-spacing: 0;
}

.intensive-listening-blind-panel .intensive-listening-two-actions .primary-button {
  border-color: #ffd5c2;
  background: #fff1ea;
  color: var(--il-warm);
}

.intensive-listening-blind-panel .intensive-listening-two-actions .secondary-button {
  border-color: #dfe5ec;
  background: #fff;
  color: var(--il-text);
}

.intensive-listening-attempt-panel .intensive-listening-actions-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
}

.intensive-listening-attempt-panel .intensive-listening-actions-row .primary-button {
  border-color: #1598ad;
  background: #1598ad;
  color: #fff;
}

.intensive-listening-attempt-panel .intensive-listening-actions-row .primary-button.is-confirmed:disabled {
  border-color: #78bfd0;
  background: #78bfd0;
  color: #fff;
  opacity: 1;
}

.intensive-listening-attempt-panel .intensive-listening-actions-row .danger-soft {
  border-color: #ead5d5;
  background: #fffafa;
  color: #c66f6f;
}

.intensive-listening-attempt-panel .intensive-listening-actions-row .secondary-button:not(.danger-soft) {
  border-color: #d8ebef;
  background: #f6fdff;
  color: #697789;
}

.intensive-listening-actions-row,
.intensive-listening-toolbar,
.intensive-listening-export-actions {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.intensive-listening-actions-row.compact {
  grid-template-columns: repeat(auto-fit, minmax(118px, max-content));
  justify-content: start;
}

.intensive-listening-toolbar .primary-button,
.intensive-listening-toolbar .secondary-button {
  min-height: 46px;
}

.intensive-listening-toolbar.playback {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.intensive-listening-sentence-card {
  gap: 14px;
}

.intensive-listening-line-box {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.intensive-listening-line-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.intensive-listening-english-line {
  min-height: 62px;
  margin: 0;
  color: #111827;
  font-size: var(--font-section-title);
  line-height: 1.35;
  font-weight: 800;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.intensive-listening-english-line.masked {
  color: #98a2b3;
  font-size: var(--font-learning-text);
  letter-spacing: 0;
}

.intensive-listening-word {
  display: inline;
  border: 0;
  border-bottom: 1px dotted var(--il-accent);
  border-bottom: 1px dotted color-mix(in srgb, var(--il-accent) 58%, transparent);
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0;
  text-align: inherit;
  white-space: nowrap;
}

.intensive-listening-word:hover,
.intensive-listening-word:focus-visible {
  border-bottom-color: var(--il-accent);
  color: var(--il-accent);
  outline: none;
}

.intensive-listening-signal .intensive-listening-word {
  border-bottom-color: currentColor;
}

.intensive-listening-word-popover {
  position: fixed;
  z-index: 120;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--il-accent) 34%, var(--il-line));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(23, 54, 68, .2);
  padding: 13px 14px;
}

.intensive-listening-word-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.intensive-listening-word-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.intensive-listening-word-head strong {
  color: var(--il-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
}

.intensive-listening-word-head span,
.intensive-listening-word-section > span,
.intensive-listening-word-source > span {
  color: var(--il-muted);
  font-size: var(--font-caption);
  font-weight: 800;
}

.intensive-listening-word-section {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.intensive-listening-word-base,
.intensive-listening-word-context {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  padding: 9px 10px;
}

.intensive-listening-word-context {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--il-accent) 7%, #fff);
}

.intensive-listening-word-definitions {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--il-text);
  font-size: 13px;
  line-height: 1.55;
}

.intensive-listening-word-inline-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: var(--primary-text);
  font-size: 13px;
  font-weight: 800;
}

.intensive-listening-word-inline-loading .loading-spinner {
  width: 16px;
  height: 16px;
}

.intensive-listening-word-section p,
.intensive-listening-word-source p {
  margin: 0;
  color: var(--il-text);
  font-size: 13px;
  line-height: 1.6;
}

.intensive-listening-word-collocations,
.intensive-listening-dict-collocations {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.intensive-listening-word-collocations em,
.intensive-listening-dict-collocations span {
  border: 1px solid var(--primary-border);
  border: 1px solid color-mix(in srgb, var(--il-accent) 24%, var(--il-line));
  border-radius: 6px;
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--il-accent) 7%, #fff);
  padding: 4px 7px;
  color: var(--primary-text);
  color: color-mix(in srgb, var(--il-accent) 84%, var(--il-text));
  font-size: var(--font-caption);
  font-style: normal;
  font-weight: 800;
}

.intensive-listening-word-source {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  border-left: 3px solid var(--primary-border);
  border-left: 3px solid color-mix(in srgb, var(--il-accent) 42%, var(--il-line));
  background: var(--il-panel-soft);
  padding: 8px 10px;
}

.intensive-listening-word-source p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.intensive-listening-word-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.intensive-listening-word-actions .secondary-button {
  min-width: 0;
  flex: 1 1 120px;
}

.intensive-listening-word-actions .saved {
  border-color: var(--primary-border);
  border-color: color-mix(in srgb, var(--il-accent) 42%, var(--il-line));
  background: var(--primary-soft);
  background: color-mix(in srgb, var(--il-accent) 12%, #fff);
  color: var(--il-accent);
}

.intensive-listening-word-loading {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: 12px;
  color: var(--il-text);
  font-weight: 800;
}

.intensive-listening-word-popover > small {
  display: block;
  margin-top: 9px;
  color: var(--il-muted);
  line-height: 1.5;
}

.intensive-listening-line-box textarea,
.intensive-listening-study-panel textarea,
.intensive-listening-dictionary textarea,
.intensive-listening-record-panel textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  color: var(--il-text);
  padding: 10px 11px;
  outline: none;
}

.intensive-listening-line-box textarea:focus,
.intensive-listening-study-panel textarea:focus,
.intensive-listening-dictionary textarea:focus,
.intensive-listening-record-panel textarea:focus,
.intensive-listening-original-grid textarea:focus {
  border-color: #7fb8b6;
  box-shadow: 0 0 0 3px rgba(31, 122, 122, 0.12);
}

.intensive-listening-transcript-status {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-muted);
  padding: 9px 10px;
  line-height: 1.45;
}

.intensive-listening-transcript-status.pending {
  border-color: var(--primary-border);
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
}

.intensive-listening-transcript-status.done {
  border-color: #aed9c3;
  background: var(--il-success-soft);
  color: var(--il-success);
}

.intensive-listening-transcript-status.skipped {
  border-color: #f0d49a;
  background: #fff9eb;
  color: #8a5b12;
}

.intensive-listening-transcript-status.failed {
  border-color: #ffd0ca;
  background: #fff5f3;
  color: var(--il-danger);
}

.intensive-listening-translation-reveal {
  display: grid;
  gap: 10px;
  min-height: 72px;
  align-content: center;
  border: 1px dashed var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 12px;
}

.intensive-listening-translation-reveal strong {
  color: #344054;
  font-size: 14px;
  line-height: 1.35;
}

.intensive-listening-translation-view {
  min-height: 62px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: #111827;
  padding: 12px;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.intensive-listening-translation-view.empty {
  color: var(--il-muted);
  font-size: 14px;
  font-weight: 700;
}

.intensive-listening-translation-view.failed,
.intensive-listening-translation-status.failed {
  border-color: #ffd0ca;
  background: #fff5f3;
  color: var(--il-danger);
}

.intensive-listening-translation-status {
  display: block;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  line-height: 1.45;
}

.intensive-listening-chunks,
.intensive-listening-quick-list,
.intensive-listening-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.intensive-listening-chip,
.intensive-listening-check-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-text);
  padding: 6px 9px;
  line-height: 1.25;
  cursor: pointer;
}

.intensive-listening-practice-strip {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 10px 12px;
}

.intensive-listening-practice-strip strong {
  color: var(--il-muted);
  font-size: 12px;
}

.intensive-listening-practice-strip span {
  position: relative;
  color: var(--il-text);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.intensive-listening-practice-strip span::before {
  content: "•";
  margin-right: 6px;
  color: var(--il-accent);
}

.intensive-listening-check-grid input {
  margin: 0;
}

.intensive-listening-manual-pass {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--il-muted);
  padding: 2px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.intensive-listening-manual-pass:hover:not(:disabled) {
  color: var(--il-accent-strong);
  text-decoration: underline;
}

.intensive-listening-manual-pass:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.intensive-listening-study-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.intensive-listening-study-panels.single {
  grid-template-columns: minmax(0, 1fr);
}

.intensive-listening-practice-support {
  display: grid;
  gap: 12px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}

.intensive-listening-support-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.intensive-listening-support-head h4 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.intensive-listening-support-head p {
  margin: 4px 0 0;
  color: var(--il-muted);
  font-size: 13px;
  line-height: 1.45;
}

.intensive-listening-support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.intensive-listening-support-grid > .intensive-listening-record-panel,
.intensive-listening-support-grid > .intensive-listening-evidence-panel,
.intensive-listening-support-grid > .intensive-listening-submit-card {
  min-width: 0;
}

.intensive-listening-support-grid > .intensive-listening-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.intensive-listening-score {
  display: grid;
  place-items: center;
  min-width: 82px;
  min-height: 54px;
  border-radius: 8px;
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
  font-size: var(--font-metric-compact);
  font-weight: 900;
}

.intensive-listening-scorebar {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e8edf3;
}

.intensive-listening-scorebar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--il-accent);
}

.intensive-listening-recognized,
.intensive-listening-dict-result,
.intensive-listening-dict-context {
  min-height: 46px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  color: var(--il-muted);
  padding: 10px;
  line-height: 1.55;
}

.intensive-listening-dict-context {
  display: grid;
  gap: 4px;
}

.intensive-listening-dict-context span {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 800;
}

.intensive-listening-dict-result {
  display: grid;
  gap: 6px;
}

.intensive-listening-dict-result strong {
  color: var(--il-text);
}

.intensive-listening-dict-result p,
.intensive-listening-dict-result small {
  margin: 0;
}

.intensive-listening-dict-context strong {
  color: #111827;
}

.intensive-listening-dict-context p {
  margin: 0;
  font-size: 13px;
}

.intensive-listening-dictionary form,
.intensive-listening-record-panel {
  display: grid;
  gap: 10px;
}

.intensive-listening-record-panel audio {
  width: 100%;
}

.intensive-listening-evidence-panel,
.intensive-listening-submit-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 12px;
}

.intensive-listening-evidence-panel h4,
.intensive-listening-submit-card strong {
  margin: 0;
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
}

.intensive-listening-evidence-panel p,
.intensive-listening-submit-card p {
  margin: 0;
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.45;
}

.intensive-listening-evidence-panel label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  color: var(--il-text);
  line-height: 1.35;
}

.intensive-listening-evidence-panel label.disabled {
  color: var(--il-muted);
  opacity: 0.64;
}

.intensive-listening-submit-card {
  border-color: var(--primary-border);
  background: var(--il-accent-soft);
}

.intensive-listening-dialog {
  width: min(420px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.intensive-listening-dialog.wide {
  width: min(640px, calc(100vw - 28px));
}

.intensive-listening-dialog::backdrop {
  background: rgba(38, 48, 68, 0.36);
}

.intensive-listening-dialog-body {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.intensive-listening-dialog-body h3,
.intensive-listening-dialog-body p {
  margin: 0;
}

.intensive-listening-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.intensive-listening-original-grid {
  display: grid;
  gap: 12px;
}

.intensive-listening-original-grid label {
  display: grid;
  gap: 6px;
  color: var(--il-muted);
  font-weight: 800;
}

.intensive-listening-original-grid textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: #fff;
  color: var(--il-text);
  padding: 10px 11px;
  outline: none;
  font-weight: 500;
}

.status-box.danger {
  border-color: rgba(190, 18, 60, 0.24);
  background: #fff1f2;
  color: #9f1239;
}

.muted {
  color: var(--muted);
}

.sentence-structure-page {
  display: grid;
  gap: 16px;
}

.sentence-structure-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.sentence-structure-hero h2 {
  margin: 0;
}

.sentence-structure-mode-chip {
  min-width: 176px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px 16px;
  text-align: right;
}

.sentence-structure-mode-chip span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.sentence-structure-mode-chip strong {
  display: block;
  color: var(--accent-strong);
  font-size: 18px;
}

.sentence-structure-layout {
  display: grid;
  grid-template-columns: minmax(0, 1180px);
  gap: 16px;
  align-items: start;
  justify-content: center;
}

.sentence-structure-panel-header,
.sentence-structure-head,
.sentence-structure-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sentence-structure-panel-header {
  min-height: 66px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.sentence-structure-panel-header h3,
.sentence-structure-head h3,
.sentence-structure-step h3 {
  margin: 0;
  color: var(--ink);
}

.sentence-structure-panel-header p,
.sentence-structure-head p,
.sentence-structure-step-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.sentence-structure-head .badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sentence-structure-sync-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.sentence-structure-sync-chip.syncing,
.sentence-structure-sync-chip.queued {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.sentence-structure-sync-chip.local,
.sentence-structure-sync-chip.readonly {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--muted);
}

.sentence-structure-pack {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.sentence-structure-pack span {
  color: var(--muted);
  font-size: 13px;
}

.sentence-structure-source-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.sentence-structure-source-card {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.sentence-structure-source-card:hover,
.sentence-structure-source-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.sentence-structure-source-card span,
.sentence-structure-source-card small {
  color: var(--muted);
  font-size: 12px;
}

.sentence-structure-workspace > .panel-body {
  display: grid;
  gap: 14px;
}

.sentence-structure-practice-body {
  min-width: 0;
}

.sentence-structure-practice-nav {
  position: relative;
  z-index: 42;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.sentence-structure-practice-nav-bottom {
  margin-top: 2px;
}

.sentence-structure-nav-button {
  min-height: 38px;
  white-space: nowrap;
}

.sentence-structure-current {
  display: grid;
  flex: 1 1 320px;
  min-width: 0;
  gap: 4px;
}

.sentence-structure-current > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sentence-structure-current > strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.sentence-structure-current-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sentence-structure-current-badges em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 4px 8px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.sentence-structure-directory {
  position: relative;
}

.sentence-structure-directory-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 11px;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
  white-space: nowrap;
}

.sentence-structure-directory-toggle::-webkit-details-marker,
.sentence-structure-line-label::-webkit-details-marker {
  display: none;
}

.sentence-structure-directory-toggle::marker,
.sentence-structure-line-label::marker {
  content: "";
  font-size: 0;
}

.sentence-structure-directory[open] .sentence-structure-directory-toggle {
  border-color: #0f9aa8;
  background: #e6f7f5;
  color: #17324d;
}

.sentence-structure-directory-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: grid;
  gap: 12px;
  width: min(560px, calc(100vw - 36px));
  max-height: min(70vh, 620px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.sentence-structure-directory-pack {
  display: grid;
  gap: 8px;
}

.sentence-structure-directory-pack > div {
  display: grid;
  gap: 2px;
  color: var(--ink);
}

.sentence-structure-directory-pack > div span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sentence-structure-directory-item {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.sentence-structure-directory-item:hover,
.sentence-structure-directory-item.active {
  border-color: #0f9aa8;
  background: #e6f7f5;
}

.sentence-structure-directory-item span,
.sentence-structure-directory-item small {
  color: var(--muted);
  font-size: 12px;
}

.sentence-structure-jump {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 8px;
  justify-content: end;
}

.sentence-structure-jump button {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  min-width: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.sentence-structure-jump button.active {
  border-color: #0f9aa8;
  background: #e6f7f5;
  color: #17324d;
  box-shadow: inset 0 0 0 1px rgba(15, 154, 168, 0.26);
}

.sentence-structure-sentence-card,
.sentence-structure-step,
.sentence-structure-aid-card,
.sentence-structure-review-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.sentence-structure-sentence-card {
  position: sticky;
  top: 10px;
  z-index: 34;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.sentence-structure-sentence-card p {
  margin: 10px 0 0;
  max-height: min(34vh, 300px);
  overflow: auto;
  color: var(--ink);
  font-size: var(--font-learning-text);
  line-height: 1.65;
}

.sentence-structure-clickable-sentence {
  word-break: normal;
}

.sentence-structure-lookup-word {
  display: inline;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 1px 2px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: left;
}

.sentence-structure-lookup-word:hover,
.sentence-structure-lookup-word:focus-visible,
.sentence-structure-lookup-word.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  outline: 1px solid var(--primary-border);
}

.sentence-structure-inline-punctuation {
  color: inherit;
}

.sentence-structure-line-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  text-transform: uppercase;
}

.sentence-structure-step {
  display: grid;
  gap: 14px;
  background: #fff;
}

.sentence-structure-step.locked {
  background: var(--panel-soft);
}

.sentence-structure-action-row,
.sentence-structure-intent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sentence-structure-intent-row .secondary-button.active,
.sentence-structure-option-row .secondary-button.active {
  border-color: #0f9aa8;
  background: #e6f7f5;
  color: #17324d;
  box-shadow: inset 0 0 0 1px rgba(15, 154, 168, 0.22);
}

.sentence-structure-keyword-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.sentence-structure-keyword-hint strong {
  color: var(--ink);
}

.sentence-structure-keyword-hint small {
  color: var(--muted);
  font-weight: 700;
}

.sentence-structure-keyword-scope {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.sentence-structure-keyword-admin {
  border: 1px solid rgba(15, 154, 168, 0.24);
  border-radius: 8px;
  background: #f7fcfb;
  padding: 10px 12px;
}

.sentence-structure-keyword-scope summary,
.sentence-structure-keyword-admin summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 800;
}

.sentence-structure-keyword-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.sentence-structure-keyword-scope article {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sentence-structure-keyword-scope h4,
.sentence-structure-keyword-scope p {
  margin: 0;
}

.sentence-structure-keyword-scope p,
.sentence-structure-keyword-group span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.sentence-structure-keyword-group {
  display: grid;
  gap: 2px;
}

.sentence-structure-keyword-group strong {
  color: var(--ink);
  font-size: 13px;
}

.sentence-structure-keyword-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.sentence-structure-keyword-editor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.sentence-structure-keyword-editor label.wide {
  grid-column: 1 / -1;
}

.sentence-structure-keyword-editor textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  line-height: 1.45;
}

.sentence-structure-word-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.sentence-structure-word {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.sentence-structure-word.marked-signal {
  border-color: #0f9aa8;
  background: #e6f7f5;
  color: #17324d;
  box-shadow: inset 0 0 0 1px rgba(15, 154, 168, 0.22);
}

.sentence-structure-punctuation {
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
}

.sentence-structure-word-space {
  display: none;
}

.sentence-structure-choice-grid {
  display: grid;
  gap: 10px;
}

.sentence-structure-choice-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.sentence-structure-choice-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sentence-structure-choice-card p {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.sentence-structure-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sentence-structure-option-row .secondary-button {
  justify-content: flex-start;
  min-height: 40px;
  text-align: left;
}

.sentence-structure-slot-grid,
.sentence-structure-truth-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sentence-structure-slot-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.sentence-structure-slot-grid select,
.sentence-structure-truth-controls select,
.sentence-structure-truth-controls input,
.sentence-structure-note {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  padding: 10px 11px;
  outline: none;
}

.sentence-structure-note {
  min-height: 96px;
  resize: vertical;
}

.sentence-structure-note.compact {
  min-height: 112px;
}

.sentence-structure-truth-list {
  display: grid;
  gap: 10px;
}

.sentence-structure-truth-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.sentence-structure-truth-card p {
  margin: 0 0 10px;
}

.sentence-structure-debrief-grid,
.sentence-structure-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sentence-structure-debrief-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.sentence-structure-debrief-grid h4,
.sentence-structure-aid-card h4 {
  margin: 0 0 8px;
}

.sentence-structure-debrief-grid p,
.sentence-structure-debrief-grid ul {
  margin: 0;
}

.sentence-structure-aid-card {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.sentence-structure-dictionary-card {
  margin-bottom: 12px;
}

.sentence-structure-vocab-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.sentence-structure-vocab-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.sentence-structure-vocab-panel-head strong {
  color: var(--ink);
  font-size: 14px;
}

.sentence-structure-vocab-content {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.sentence-structure-context-head,
.sentence-structure-context-head > div,
.sentence-structure-word-actions,
.sentence-structure-lookup-status {
  display: flex;
  align-items: center;
}

.sentence-structure-context-head {
  justify-content: space-between;
  gap: 10px;
}

.sentence-structure-context-head > div {
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.sentence-structure-context-head strong {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--font-section-title);
}

.sentence-structure-context-head span,
.sentence-structure-word-section > span,
.sentence-structure-word-source > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sentence-structure-lookup-status {
  gap: 8px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 800;
}

.sentence-structure-word-section,
.sentence-structure-word-source {
  display: grid;
  gap: 6px;
}

.sentence-structure-word-section p,
.sentence-structure-word-source p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.sentence-structure-word-source {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.sentence-structure-word-source p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

.sentence-structure-word-collocations,
.sentence-structure-word-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.sentence-structure-word-collocations {
  display: flex;
}

.sentence-structure-word-collocations em {
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-text);
  padding: 4px 7px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.sentence-structure-word-actions .secondary-button {
  min-width: 0;
}

.sentence-structure-save-term.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.sentence-structure-save-row {
  display: grid;
  gap: 6px;
}

.sentence-structure-save-row select {
  min-height: 40px;
}

.sentence-structure-save-message {
  color: var(--muted);
  font-weight: 700;
}

.sentence-structure-dictionary-card > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sentence-structure-aid-card span,
.sentence-structure-summary-grid span {
  color: var(--muted);
  font-size: 12px;
}

.sentence-structure-aid-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.sentence-structure-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.sentence-structure-summary-grid.wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sentence-structure-summary-grid > div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.sentence-structure-summary-grid strong {
  color: var(--ink);
  font-size: 20px;
}

.sentence-structure-report-panel {
  max-width: 1080px;
}

.sentence-structure-review-card {
  display: grid;
  gap: 6px;
}

.sentence-structure-current-badges time {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.sentence-structure-record-times {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.sentence-structure-record-times-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.sentence-structure-record-times-head h4 {
  margin: 0;
}

.sentence-structure-record-times-head small,
.sentence-structure-record-time-list small,
.sentence-structure-record-time-list time {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.sentence-structure-record-time-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.sentence-structure-record-time-list article {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(80px, auto) minmax(180px, auto);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
}

.sentence-structure-record-time-list article + article {
  border-top: 1px solid var(--line);
}

.sentence-structure-record-time-list article > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sentence-structure-record-time-list article > span strong,
.sentence-structure-record-time-list article > span small {
  overflow-wrap: anywhere;
}

.sentence-structure-record-time-list em {
  color: var(--primary-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.sentence-structure-record-time-list time {
  text-align: right;
}

.sentence-structure-feedback:empty {
  display: none;
}

.sentence-structure-feedback-detail {
  display: grid;
  gap: 6px;
}

.sentence-structure-feedback-detail p {
  margin: 0;
}

.sentence-structure-feedback-main {
  font-weight: 700;
}

/* 听力逐句精听四步：纵向呈现，减少装饰性大卡片，让操作和内容成为主角。 */
.intensive-listening-four-step-flow {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--il-line);
}

.intensive-listening-four-step {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--il-line);
}

.intensive-listening-four-step-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.intensive-listening-four-step-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 850;
}

.intensive-listening-four-step h4 {
  margin: 7px 0 3px;
  color: var(--il-text);
  font-size: 20px;
  line-height: 1.25;
}

.intensive-listening-four-step-head p {
  margin: 0;
  color: var(--il-muted);
  font-size: 13px;
  line-height: 1.5;
}

.intensive-listening-four-step-actions,
.intensive-listening-four-step-record-actions,
.intensive-listening-four-step-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.intensive-listening-four-step-actions .primary-button,
.intensive-listening-four-step-actions .secondary-button,
.intensive-listening-four-step-record-actions .primary-button,
.intensive-listening-four-step-record-actions .secondary-button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 14px;
}

.intensive-listening-four-step-actions .soft {
  border-color: var(--primary-border);
  background: var(--il-accent-soft);
  color: var(--il-accent-strong);
}

.intensive-listening-four-step-more {
  width: fit-content;
  color: var(--il-muted);
  font-size: 12px;
}

.intensive-listening-four-step-more summary {
  cursor: pointer;
  font-weight: 750;
}

.intensive-listening-four-step-more[open] {
  display: grid;
  gap: 7px;
}

.intensive-listening-hint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
}

.intensive-listening-hint-item {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 7px 9px;
  color: var(--il-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.intensive-listening-hint-item input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--il-accent);
}

.intensive-listening-hint-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.intensive-listening-hint-term {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.intensive-listening-hint-term strong {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.intensive-listening-hint-term small {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--il-accent-soft);
  padding: 1px 6px;
  color: var(--il-accent-strong);
  font-size: 10px;
  font-weight: 800;
}

.intensive-listening-hint-meaning {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.intensive-listening-hint-more {
  display: grid;
  gap: 7px;
  color: var(--il-muted);
  font-size: 12px;
}

.intensive-listening-hint-more summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 800;
}

.intensive-listening-hint-copy strong {
  color: var(--il-text);
  font-size: 13px;
  line-height: 1.3;
}

.intensive-listening-hint-copy > small {
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.intensive-listening-four-step-transcript {
  border: 1px solid var(--il-line);
  border-radius: 8px;
  background: var(--il-panel-soft);
  padding: 12px 14px;
}

.intensive-listening-four-step-transcript-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--il-muted);
  font-size: 12px;
  font-weight: 800;
}

.intensive-listening-four-step-english {
  min-height: 0;
  margin: 0;
  color: var(--il-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  white-space: pre-wrap;
}

.intensive-listening-four-step-english.masked {
  color: #98a2b3;
  letter-spacing: 0;
}

.intensive-listening-four-step-translation {
  margin-top: 10px;
  border-top: 1px solid var(--il-line);
  padding-top: 10px;
}

.intensive-listening-four-step-translation .intensive-listening-translation-reveal,
.intensive-listening-four-step-translation .intensive-listening-translation-view {
  min-height: 0;
  padding: 9px 10px;
  font-size: 14px;
}

.intensive-listening-four-step-translation .intensive-listening-actions-row {
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  margin-top: 7px;
}

.intensive-listening-four-step-subsection {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--il-line);
  padding-top: 12px;
}

.intensive-listening-four-step-subsection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.intensive-listening-four-step-subsection-head strong {
  color: var(--il-text);
  font-size: 14px;
}

.intensive-listening-four-step-subsection textarea {
  min-height: 58px;
}

.intensive-listening-four-step-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  align-items: start;
}

.intensive-listening-four-step-record-box {
  min-width: 0;
}

.intensive-listening-four-step-record-actions .primary-button.recording {
  border-color: var(--il-danger);
  background: var(--il-danger);
}

.intensive-listening-four-step-record-box .intensive-listening-pronunciation-status {
  margin-top: 8px;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.intensive-listening-four-step-record-meta,
.intensive-listening-four-step-record-transcript {
  display: block;
  margin-top: 6px;
  color: var(--il-muted);
  font-size: 12px;
  line-height: 1.4;
}

.intensive-listening-four-step-score-box {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 82px;
  border: 1px solid #b8e1d2;
  border-radius: 8px;
  background: var(--il-success-soft);
  color: var(--il-success);
  padding: 10px 8px;
  text-align: center;
}

.intensive-listening-four-step-score-box strong {
  font-size: 28px;
  line-height: 1;
}

.intensive-listening-four-step-score-box span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
}

.intensive-listening-four-step-score-box .intensive-listening-scorebar {
  width: 100%;
  height: 5px;
  margin-top: 7px;
}

.intensive-listening-four-step-completion {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--il-line);
  padding-top: 12px;
}

.intensive-listening-four-step-completion > small {
  color: var(--il-muted);
  font-size: 12px;
}

.intensive-listening-four-step-completion .intensive-listening-four-step-actions {
  justify-content: flex-start;
}

@media (max-width: 840px) {
  .intensive-listening-four-step-head,
  .intensive-listening-four-step-record-grid {
    grid-template-columns: 1fr;
  }

  .intensive-listening-four-step-score-box {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
  }

  .intensive-listening-four-step-score-box span {
    margin-top: 0;
  }

  .intensive-listening-four-step-score-box .intensive-listening-scorebar {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .intensive-listening-four-step {
    padding: 15px 0;
  }

  .intensive-listening-hint-grid {
    grid-template-columns: 1fr;
  }

  .intensive-listening-four-step-actions,
  .intensive-listening-four-step-record-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .intensive-listening-four-step-actions > button,
  .intensive-listening-four-step-record-actions > button {
    width: 100%;
  }

  .intensive-listening-four-step-english {
    font-size: 17px;
  }
}

@media (max-width: 1180px) {
  .intensive-listening-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .sentence-structure-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sentence-structure-side-panel {
    grid-column: 1 / -1;
  }

  .intensive-listening-stage-nav {
    grid-template-columns: 1fr;
  }

  .intensive-listening-support-grid,
  .intensive-listening-support-grid > .intensive-listening-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .intensive-listening-topbar,
  .intensive-listening-layout,
  .intensive-listening-sentence-head,
  .intensive-listening-audio-stage,
  .intensive-listening-global-head,
  .intensive-listening-global-player,
  .intensive-listening-study-panels,
  .intensive-listening-support-grid,
  .intensive-listening-support-grid > .intensive-listening-summary-grid,
  .intensive-listening-two-actions,
  .intensive-listening-attempt-panel .intensive-listening-actions-row {
    grid-template-columns: 1fr;
  }

  .intensive-listening-source-panel {
    position: static;
    display: none;
    max-height: none;
  }

  .intensive-listening-mobile-source-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin: 0 0 12px;
    border: 1px solid var(--il-line);
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    box-shadow: var(--il-shadow);
  }

  .intensive-listening-mobile-source-current {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .intensive-listening-mobile-source-current span,
  .intensive-listening-mobile-source-current small {
    overflow: hidden;
    color: var(--il-muted);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intensive-listening-mobile-source-current strong {
    overflow: hidden;
    color: var(--il-text);
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intensive-listening-mobile-source-bar > button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .intensive-listening-mobile-source-backdrop {
    position: fixed;
    z-index: 70;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.42);
    padding: 0;
  }

  .intensive-listening-page.mobile-source-open .intensive-listening-source-panel {
    position: fixed;
    z-index: 80;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    width: auto;
    height: auto;
    max-height: min(78dvh, 720px);
    margin: 0;
    border-color: var(--il-accent);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.24);
  }

  .intensive-listening-page.mobile-source-open .intensive-listening-mobile-source-backdrop {
    display: block;
  }

  .intensive-listening-mobile-source-close {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-height: 32px;
    place-items: center;
    border: 1px solid var(--il-line);
    border-radius: 8px;
    background: #fff;
    color: var(--il-muted);
    font-size: 20px;
    line-height: 1;
  }

  .intensive-listening-page.mobile-source-open .intensive-listening-source-panel .intensive-listening-panel-header {
    padding: 12px 14px 10px;
  }

  .intensive-listening-page.mobile-source-open .intensive-listening-source-panel .intensive-listening-panel-body {
    min-height: 0;
    overflow: auto;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  }

  .sentence-structure-hero,
  .sentence-structure-layout,
	  .sentence-structure-head,
	  .sentence-structure-keyword-editor,
	  .sentence-structure-keyword-scope-grid,
  .sentence-structure-slot-grid,
  .sentence-structure-truth-controls,
  .sentence-structure-debrief-grid,
  .sentence-structure-review-grid,
  .sentence-structure-summary-grid.wide {
    grid-template-columns: 1fr;
  }

  .sentence-structure-record-time-list article {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .sentence-structure-record-time-list time {
    text-align: left;
  }

  .sentence-structure-hero {
    display: grid;
  }

  .sentence-structure-mode-chip {
    justify-items: start;
    text-align: left;
  }

  .sentence-structure-practice-nav {
    gap: 8px;
    padding: 8px;
  }

  .sentence-structure-current {
    order: -1;
    flex: 1 1 100%;
  }

  .sentence-structure-current > strong {
    font-size: 16px;
  }

  .sentence-structure-nav-button {
    order: 1;
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }

  .sentence-structure-directory {
    order: 2;
    flex: 1 1 100%;
  }

  .sentence-structure-directory-toggle {
    width: 100%;
    justify-content: center;
  }

  .sentence-structure-directory-panel {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: 76px;
    left: 10px;
    width: auto;
    max-height: min(62vh, 540px);
  }

  .sentence-structure-sentence-card {
    top: 6px;
    padding: 10px;
  }

  .sentence-structure-sentence-card p {
    max-height: min(30vh, 230px);
  }

  .sentence-structure-practice-nav-bottom {
    position: sticky;
    bottom: 8px;
    z-index: 36;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
  }

  .sentence-structure-practice-nav-bottom .sentence-structure-current {
    display: none;
  }

  .intensive-listening-mode-card {
    justify-items: start;
    text-align: left;
  }

  .intensive-listening-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intensive-listening-comprehension-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sentence-structure-jump {
    justify-content: start;
  }
}

@media (max-width: 560px) {
  .intensive-listening-topbar h2 {
    font-size: var(--font-section-title);
  }

  .intensive-listening-full-progress-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sentence-structure-current-badges {
    display: none;
  }

  .sentence-structure-line-label {
    align-items: flex-start;
    flex-direction: column;
  }

  .intensive-listening-full-progress-range {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .intensive-listening-pronunciation-recording {
    grid-template-columns: 1fr;
  }

  .intensive-listening-pronunciation-recording-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .intensive-listening-source-actions,
  .intensive-listening-stage-nav,
  .intensive-listening-comprehension-options,
  .intensive-listening-two-actions,
  .intensive-listening-actions-row,
  .intensive-listening-actions-row.compact,
  .intensive-listening-toolbar,
  .intensive-listening-practice-strip,
  .intensive-listening-export-actions {
    grid-template-columns: 1fr;
  }

  .intensive-listening-stat-grid,
  .intensive-listening-summary-grid {
    grid-template-columns: 1fr;
  }

  .intensive-listening-english-line,
  .intensive-listening-english-line.masked {
    font-size: 22px;
  }

  .intensive-listening-processing-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .intensive-listening-source-card-actions .institution-library-save {
    width: 100%;
    margin-right: 0;
  }

  .intensive-listening-start-workspace {
    min-height: 360px;
    padding: 24px 14px;
  }
}

.mobile-topbar-actions,
.mobile-topbar-scrim,
.mobile-topbar-panel {
  display: none;
}

.mobile-topbar-scrim[hidden],
.mobile-topbar-panel[hidden] {
  display: none !important;
}

@media (max-width: 860px) {
  body.mobile-topbar-panel-open {
    overflow: hidden;
  }

  .topbar,
  body.home-route .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand mobile-actions";
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 90;
  }

  .topbar-brandline,
  body.home-route .topbar-brandline {
    grid-area: brand;
    grid-column: auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
  }

  .topbar-brandline > div {
    min-width: 0;
  }

  body.module-sidebar-route .topbar-title-block,
  .topbar-title-block {
    display: grid;
    min-width: 0;
  }

  .topbar-title-block .eyebrow {
    display: none;
  }

  .topbar #page-title,
  body.home-route h1 {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    hyphens: none;
  }

  .topbar-mark {
    display: none;
  }

  .sidebar-toggle,
  .home-return {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 8px;
  }

  .home-return {
    grid-template-rows: 1fr;
    padding: 0;
  }

  .home-return-icon {
    width: 21px;
    height: 21px;
  }

  .home-return-label {
    display: none;
  }

  .module-top-menu,
  .user-area,
  body.home-route .user-area {
    display: none !important;
  }

  .mobile-topbar-actions {
    display: flex;
    grid-area: mobile-actions;
    gap: 6px;
    align-items: center;
    justify-self: end;
  }

  .mobile-topbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
  }

  .mobile-topbar-button.active,
  .mobile-topbar-button[aria-expanded="true"] {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: var(--primary-text);
    box-shadow: 0 8px 20px var(--primary-shadow);
  }

  .mobile-topbar-scrim.open {
    display: block;
    position: fixed;
    inset: 58px 0 0;
    z-index: 80;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.26);
  }

  .mobile-topbar-panel.open {
    position: fixed;
    top: 66px;
    right: 10px;
    left: 10px;
    z-index: 95;
    display: grid;
    gap: 12px;
    max-height: min(72vh, calc(100vh - 84px));
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.18);
    backdrop-filter: blur(16px);
  }

  .mobile-topbar-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  .mobile-topbar-panel-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .mobile-topbar-panel-head strong {
    color: var(--ink);
    font-size: 16px;
  }

  .mobile-topbar-panel-head small,
  .mobile-module-section-title span,
  .mobile-module-link small,
  .mobile-account-profile span {
    color: var(--muted);
  }

  .mobile-topbar-panel-head .icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .mobile-module-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-category-chip {
    display: grid;
    place-items: center;
    min-height: 42px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
  }

  .mobile-category-chip.active,
  .mobile-category-chip:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: var(--primary-text);
  }

  .mobile-module-sections {
    display: grid;
    gap: 14px;
  }

  .mobile-module-section {
    display: grid;
    gap: 8px;
  }

  .mobile-module-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-module-section-title strong {
    color: var(--ink);
  }

  .mobile-module-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-module-link {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    text-decoration: none;
  }

  .mobile-module-link.active,
  .mobile-module-link:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
  }

  .mobile-module-link > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-module-link strong,
  .mobile-module-link small {
    overflow-wrap: anywhere;
  }

  .mobile-account-profile,
  .mobile-account-section,
  .mobile-account-actions {
    display: grid;
    gap: 10px;
  }

  .mobile-account-profile {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
  }

  .mobile-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #ffffff;
  }

  .mobile-account-profile-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .mobile-student-membership-entry {
    margin-inline: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .mobile-student-membership-redeem-shortcut {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .mobile-account-profile strong {
    color: var(--ink);
    font-size: 17px;
  }

  .mobile-account-profile span {
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .mobile-account-section .language-switcher,
  .mobile-account-section .identity-switcher {
    justify-content: flex-start;
  }

  .mobile-account-control-grid,
  .mobile-account-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-account-control-grid .tenant-switcher,
  .mobile-account-control-grid .tenant-chip,
  .mobile-account-control-grid .platform-link,
  .mobile-account-actions .secondary-button,
  .mobile-account-section .home-login-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .topbar,
  body.home-route .topbar {
    padding: 7px 8px;
  }

  .topbar #page-title,
  body.home-route h1 {
    font-size: 15px;
  }

  .mobile-topbar-button {
    min-width: 46px;
    padding: 0 10px;
  }

  .mobile-module-list,
  .mobile-account-control-grid,
  .mobile-account-actions {
    grid-template-columns: 1fr;
  }

  .mobile-student-membership-entry {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .mobile-student-membership-entry .student-membership-link-text {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }
}

@media (max-width: 720px) {
  .vocab-review-layout,
  .vocab-learn-layout,
  .vocab-learn-intro-stats,
  .vocab-learn-source-summary,
  .vocab-study-picker-grid,
  .vocab-book-plan-grid,
  .vocab-book-layout,
  .vocab-review-options,
  .vocab-review-start-grid,
  .vocab-review-start-grid.compact,
  .vocab-study-plan-grid,
  .vocab-today-start-main,
  .vocab-today-start-stats,
  .vocab-book-detail-stats,
  .vocab-book-detail-current,
  .vocab-plan-book-row,
  .vocab-review-report-list > div {
    grid-template-columns: 1fr;
  }

  .vocab-today-count {
    justify-items: start;
  }

  .vocab-today-start-footer {
    grid-template-columns: 1fr;
  }

  .vocab-today-start-actions.prominent {
    width: fit-content;
    max-width: 100%;
  }

  .vocab-plan-book-row-actions {
    justify-content: flex-start;
  }

  .vocab-book-card-head {
    display: grid;
  }

  .vocab-book-actions {
    justify-content: flex-start;
  }

  .vocab-book-edit-units > div {
    grid-template-columns: 1fr;
  }

  .vocab-book-counts {
    justify-items: start;
  }

  .vocab-book-unit-list {
    grid-template-columns: 1fr;
  }

  .vocab-learn-word {
    font-size: var(--font-page-title);
  }

  .vocab-learn-card {
    gap: 22px;
    min-height: auto;
    padding: 24px 20px;
  }

  .vocab-learn-card-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vocab-learn-card-top-content {
    padding-top: 0;
  }

  .vocab-learn-progress-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vocab-learn-back-button {
    justify-self: start;
    min-height: 40px;
    font-size: 17px;
  }

  .vocab-learn-card .vocab-learn-session-toolbar > .secondary-button {
    min-height: 46px;
    min-width: auto;
    font-size: 18px;
  }

  .vocab-learn-card .vocab-too-simple-button {
    position: static;
    justify-self: start;
    order: -1;
  }

  .vocab-learn-card .vocab-review-meta {
    align-items: flex-start;
    flex-direction: column;
    font-size: 16px;
  }

  .vocab-learn-card .vocab-learn-word {
    font-size: clamp(36px, 12vw, 48px);
  }

  .vocab-learn-sound-button {
    width: 38px;
    height: 38px;
    transform: translateY(2px);
  }

  .vocab-learn-word-note,
  .vocab-learn-word-note .vocab-learn-phonetic {
    font-size: 20px;
  }

  .vocab-learn-card .vocab-learn-decision .primary-button,
  .vocab-learn-card .vocab-learn-decision .secondary-button {
    flex: 1 1 120px;
    min-width: 0;
    font-size: 18px;
  }

  .vocab-activation-result-grid {
    grid-template-columns: 1fr;
  }

  .vocab-learn-card > p {
    font-size: 22px;
  }

  .vocab-learn-card > p.vocab-learn-phonetic {
    font-size: 18px;
  }

  .vocab-review-word {
    font-size: var(--font-page-title);
  }

  .vocab-review-word.muted,
  .vocab-review-prompt > strong {
    font-size: var(--font-section-title);
  }

  .vocab-review-card > p {
    font-size: 20px;
  }

  .sales-lead-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
    align-items: stretch;
    padding: 10px;
  }

  .sales-lead-search-field {
    grid-column: 1 / -1;
    max-width: none;
  }

  .sales-lead-toolbar-control {
    grid-column: auto;
    flex: initial;
    max-width: none;
  }

  .sales-lead-search-field input,
  .sales-lead-toolbar-control select {
    min-height: 42px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .sales-lead-toolbar-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }

  .sales-lead-toolbar-actions .secondary-button,
  .sales-lead-toolbar-actions .primary-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  .sales-lead-table tr {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 12px 10px;
  }

  .sales-lead-table td {
    min-width: 0;
  }

  .sales-lead-table td[data-label="学生"],
  .sales-lead-table td[data-label="下一步"],
  .sales-lead-table td[data-label="操作"] {
    grid-column: 1 / -1;
  }

  .sales-lead-table .sales-inline-select,
  .sales-lead-table .sales-inline-referrer {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 14px;
  }

  .sales-inline-next-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
  }

  .sales-inline-next-date,
  .sales-inline-next-action {
    width: 100%;
    max-width: none;
  }

  .sales-lead-table-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 8px;
    justify-content: stretch;
  }

  .sales-lead-table-actions .secondary-button,
  .sales-lead-table-actions .primary-button,
  .sales-lead-table-actions .compact-danger-button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 9px;
  }
}

@media (max-width: 560px) {
  .schedule-dashboard-strip {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .schedule-dashboard-card {
    min-height: 74px;
    padding: 10px 12px;
    gap: 3px;
  }

  .schedule-dashboard-card span {
    font-size: 12px;
  }

  .schedule-dashboard-card strong {
    font-size: var(--font-metric-compact);
  }

  .schedule-dashboard-card small {
    font-size: 12px;
    line-height: 1.25;
  }

  .schedule-filter-panel {
    display: grid;
    width: 100%;
    align-items: stretch;
  }

  .schedule-filter-panel .toolbar-row {
    width: 100%;
    min-width: 0;
  }

  .schedule-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    width: 100%;
    padding: 10px;
  }

  .schedule-search-field {
    grid-column: 1 / -1;
  }

  .schedule-filter-grid input,
  .schedule-filter-grid select,
  .schedule-multi-filter summary {
    min-height: 42px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .schedule-multi-filter-menu {
    min-width: min(260px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }
}

@media (max-width: 900px) {
  .workspace-grid,
  .daily-plan-summary-grid,
  .essay-summary-metrics,
  .grammar-translation-metrics,
  .vocab-metrics,
  .pet-stat-grid,
  .intensive-listening-stat-grid,
  .intensive-listening-progress-summary,
  .intensive-listening-progress-meta,
  .intensive-listening-progress-phase-grid,
  .intensive-listening-summary-grid,
  .sentence-structure-summary-grid,
  .batch-preview-metrics,
  .platform-metric-grid,
  .sentence-structure-summary-grid.wide {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 8px;
  }

  .tenant-trial-options,
  .tenant-onboarding-admin-grid,
  .tenant-onboarding-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-tenant-context-bar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tenant-card-editing {
    grid-template-columns: 1fr;
  }

  .platform-tenant-context-meta,
  .platform-tenant-context-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .main,
  .view {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  body.module-sidebar-route .main {
    width: 100vw;
  }

  .view > *,
  .panel,
  .schedule-module-content,
  .essay-module-content,
  .grammar-translation-shell,
  .grammar-translation-head,
  .vocab-shell,
  .intensive-listening-page,
  .sentence-structure-layout,
  .sentence-structure-hero {
    max-width: 100%;
    min-width: 0;
  }

  .grammar-translation-head > *,
  .essay-module-summary > *,
  .vocab-head > *,
  .vocab-workbench-head > *,
  .intensive-listening-page > *,
  .sentence-structure-layout > *,
  .sentence-structure-hero > * {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .workspace-grid,
  .daily-plan-summary-grid,
  .essay-summary-metrics,
  .grammar-translation-metrics,
  .vocab-metrics,
  .pet-stat-grid,
  .intensive-listening-stat-grid,
  .intensive-listening-summary-grid,
  .sentence-structure-summary-grid,
  .sentence-structure-summary-grid.wide,
  .batch-preview-metrics,
  .platform-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 8px;
  }

  .metric-card,
  .daily-plan-summary-grid span,
  .batch-preview-metrics span,
  .platform-metric-grid span,
  .essay-summary-metrics span,
  .grammar-translation-metrics span,
  .vocab-metrics span,
  .pet-stat-grid span,
  .intensive-listening-stat-grid span,
  .intensive-listening-summary-grid div,
  .sentence-structure-summary-grid > div {
    min-height: 58px;
    padding: 9px 10px;
    gap: 3px;
  }

  .metric-card strong {
    margin-top: 4px;
    font-size: var(--font-metric-compact);
    line-height: 1;
  }

  .daily-plan-summary-grid strong,
  .batch-preview-metrics strong,
  .platform-metric-grid strong,
  .essay-summary-metrics strong,
  .grammar-translation-metrics strong,
  .vocab-metrics strong,
  .pet-stat-grid strong,
  .intensive-listening-stat-grid strong,
  .intensive-listening-summary-grid strong,
  .sentence-structure-summary-grid strong {
    font-size: 20px;
    line-height: 1.1;
  }

  .metric-card span,
  .daily-plan-summary-grid span,
  .batch-preview-metrics span,
  .platform-metric-grid span,
  .essay-summary-metrics span,
  .grammar-translation-metrics span,
  .vocab-metrics span,
  .pet-stat-grid span,
  .intensive-listening-stat-grid small,
  .intensive-listening-summary-grid span,
  .sentence-structure-summary-grid span {
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .workspace-grid,
  .daily-plan-summary-grid,
  .essay-summary-metrics,
  .grammar-translation-metrics,
  .vocab-metrics,
  .pet-stat-grid,
  .intensive-listening-stat-grid,
  .intensive-listening-summary-grid,
  .sentence-structure-summary-grid,
  .sentence-structure-summary-grid.wide,
  .batch-preview-metrics,
  .platform-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
  }

  .tenant-trial-options,
  .tenant-onboarding-admin-grid,
  .tenant-onboarding-result-grid,
  .tenant-convert-effects {
    grid-template-columns: 1fr;
  }

  .tenant-resource-edit-grid {
    grid-template-columns: 1fr;
  }

  .tenant-trial-row,
  .tenant-trial-invite {
    display: grid;
  }

  .platform-tenant-context-main {
    align-items: flex-start;
  }

  .platform-tenant-context-actions .secondary-button,
  .platform-tenant-switcher-row .secondary-button {
    width: 100%;
  }

  .platform-tenant-switcher-row {
    display: grid;
  }
}

@media (max-width: 340px) {
  .workspace-grid,
  .daily-plan-summary-grid,
  .essay-summary-metrics,
  .grammar-translation-metrics,
  .vocab-metrics,
  .pet-stat-grid,
  .intensive-listening-stat-grid,
  .intensive-listening-summary-grid,
  .sentence-structure-summary-grid,
  .sentence-structure-summary-grid.wide,
  .batch-preview-metrics,
  .platform-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* 反馈中心：全局辅助功能，不进入学习模块目录。 */
.desktop-feedback-center-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  text-decoration: none;
}

.desktop-feedback-center-link:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 18px var(--primary-shadow);
}

.desktop-feedback-center-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary);
}

.desktop-feedback-center-link > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.desktop-feedback-center-link strong,
.desktop-feedback-center-link small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-feedback-center-link small {
  color: var(--muted);
  font-size: var(--font-caption);
}

.mobile-feedback-center-link {
  gap: 7px;
}

.feedback-center-page {
  width: min(1180px, 100%);
  min-width: 0;
  margin: 0 auto;
}

.feedback-center-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}

.feedback-center-page-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.feedback-center-head h2 {
  margin: 0;
  font-size: var(--font-page-title);
  line-height: 1.18;
}

.feedback-center-head p:not(.eyebrow) {
  max-width: 780px;
  margin: 7px 0 0;
  color: var(--muted);
}

.feedback-center-message {
  margin-bottom: 12px;
}

.feedback-center-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.feedback-center-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 850;
  text-decoration: none;
}

.feedback-center-tabs a.active {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.feedback-center-tabs a strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary-text);
  font-size: var(--font-caption);
}

.feedback-submit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.feedback-submit-form,
.feedback-process-panel,
.feedback-history-list,
.feedback-detail-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.feedback-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
}

.feedback-panel-head > span:first-child {
  display: grid;
  min-width: 0;
}

.feedback-panel-head h3 {
  margin: 0;
  font-size: var(--font-card-title);
  line-height: 1.3;
}

.feedback-panel-head small,
.feedback-form-body label > small,
.feedback-process-panel small,
.feedback-history-item small,
.feedback-detail-meta small,
.feedback-message small {
  color: var(--muted);
  font-size: var(--font-small);
}

.feedback-form-body {
  display: grid;
  gap: 19px;
  padding: 18px;
}

.feedback-form-body > label,
.feedback-form-grid > label,
.feedback-upload-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-weight: 820;
}

.feedback-form-body em,
.feedback-category-fieldset em {
  color: var(--rose);
  font-size: var(--font-small);
  font-style: normal;
}

.feedback-category-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback-category-fieldset legend {
  width: 100%;
  margin-bottom: 8px;
  font-weight: 850;
}

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

.feedback-category-grid label {
  position: relative;
  min-width: 0;
}

.feedback-category-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.feedback-category-grid label > span {
  display: grid;
  gap: 2px;
  min-height: 66px;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.feedback-category-grid label > span small {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 650;
}

.feedback-category-grid input:checked + span,
.feedback-category-grid input:focus-visible + span {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-text);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.feedback-form-body input[type="text"],
.feedback-form-body input:not([type]),
.feedback-form-body select,
.feedback-form-body textarea,
.feedback-supplement-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
}

.feedback-form-body input[type="text"],
.feedback-form-body input:not([type]),
.feedback-form-body select {
  min-height: 44px;
  padding: 0 12px;
}

.feedback-form-body textarea,
.feedback-supplement-form textarea {
  padding: 11px 12px;
  resize: vertical;
}

.feedback-form-body input:focus,
.feedback-form-body select:focus,
.feedback-form-body textarea:focus,
.feedback-supplement-form textarea:focus {
  border-color: var(--primary);
  outline: 3px solid var(--primary-shadow);
}

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

.feedback-source-context {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.feedback-source-context > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.feedback-source-context > div {
  display: grid;
  min-width: 0;
}

.feedback-source-context small,
.feedback-source-context code {
  color: var(--muted);
  font-size: var(--font-caption);
}

.feedback-source-context code {
  overflow-wrap: anywhere;
}

.feedback-upload-field > small {
  justify-self: start;
}

.feedback-upload-control {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 13px;
  border: 1px dashed var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  cursor: pointer;
}

.feedback-upload-control > svg {
  justify-self: center;
  color: var(--primary);
}

.feedback-upload-control > span {
  display: grid;
  min-width: 0;
}

.feedback-upload-control input {
  width: min(230px, 100%);
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-caption);
}

.feedback-contact-toggle {
  display: flex !important;
  align-items: flex-start;
  gap: 9px !important;
  color: var(--muted) !important;
  font-size: var(--font-small);
  font-weight: 650 !important;
}

.feedback-contact-toggle input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.feedback-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 17px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}

.feedback-process-panel > section {
  display: grid;
  gap: 11px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.feedback-process-panel > section:last-child {
  border-bottom: 0;
}

.feedback-process-panel h3,
.feedback-detail-section h4 {
  margin: 0;
  font-size: 16px;
}

.feedback-process-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.feedback-process-step b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--font-caption);
}

.feedback-process-step span,
.feedback-process-title {
  display: grid;
  min-width: 0;
}

.feedback-process-title {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.feedback-process-title a {
  color: var(--primary-text);
  font-size: var(--font-small);
  font-weight: 800;
}

.feedback-recent-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.feedback-recent-item:last-child {
  border-bottom: 0;
}

.feedback-recent-item > span {
  display: grid;
  min-width: 0;
}

.feedback-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #526074;
  font-size: var(--font-caption);
  font-weight: 900;
  white-space: nowrap;
}

.feedback-status-pill.reviewing {
  background: #fff6d8;
  color: #8a5a00;
}

.feedback-status-pill.planned {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.feedback-status-pill.resolved {
  background: #eaf7ef;
  color: #18794e;
}

.feedback-status-pill.closed {
  background: #fff0ee;
  color: #b42318;
}

.feedback-history-layout {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.feedback-history-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.feedback-history-item.active {
  background: var(--primary-soft);
  box-shadow: inset 4px 0 0 var(--primary);
}

.feedback-history-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.feedback-history-item p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-small);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.feedback-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--muted);
  font-size: var(--font-small);
}

.feedback-pagination > div {
  display: flex;
  gap: 6px;
}

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

.feedback-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.feedback-detail-meta > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--primary-text);
  font-size: var(--font-caption);
  font-weight: 800;
}

.feedback-prewrap {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.feedback-detail-section {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.feedback-timeline {
  display: grid;
  gap: 9px;
}

.feedback-timeline > div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.feedback-timeline b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
}

.feedback-timeline span,
.feedback-message > div {
  display: grid;
  min-width: 0;
}

.feedback-timeline small {
  color: var(--muted);
}

.feedback-message {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border-left: 3px solid var(--line-strong);
  background: var(--panel-soft);
}

.feedback-message.staff {
  border-left-color: var(--primary);
}

.feedback-supplement-form {
  display: grid;
  gap: 9px;
}

.feedback-inline-upload {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.feedback-inline-upload input {
  width: min(220px, 100%);
  font-size: var(--font-caption);
}

.feedback-supplement-form .primary-button {
  justify-self: end;
}

.feedback-empty-state {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 56px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
}

.feedback-empty-state h3,
.feedback-empty-state p {
  margin: 0;
}

.feedback-empty-state p {
  color: var(--muted);
}

@media (max-width: 920px) {
  .feedback-submit-layout {
    grid-template-columns: 1fr;
  }

  .feedback-process-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-process-panel > section {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .feedback-process-panel > section:last-child {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .feedback-center-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .feedback-center-page-icon {
    width: 44px;
    height: 44px;
  }

  .feedback-center-head .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .feedback-category-grid,
  .feedback-form-grid,
  .feedback-process-panel,
  .feedback-history-layout {
    grid-template-columns: 1fr;
  }

  .feedback-process-panel > section {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .feedback-center-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-center-tabs a {
    min-width: 0;
    justify-content: center;
    padding: 0 8px;
  }

  .feedback-source-context,
  .feedback-upload-control {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .feedback-source-context code,
  .feedback-upload-control input {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .feedback-center-head h2 {
    font-size: 25px;
  }

  .feedback-panel-head,
  .feedback-form-body,
  .feedback-detail-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .feedback-form-footer,
  .feedback-supplement-form .primary-button {
    width: 100%;
  }

  .feedback-form-footer .primary-button,
  .feedback-form-footer .secondary-button {
    flex: 1 1 140px;
  }

  .feedback-inline-upload {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .feedback-inline-upload input {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .course-center-player {
    background: #111827;
  }

  .parent-task-child-card.active {
    box-shadow: 0 0 0 2px var(--primary-shadow);
  }

  .parent-task-child-stats em,
  .daily-task-calendar-event .parent-task-student-pill,
  .schedule-table tbody tr.schedule-row-status-completed,
  .vocab-learn-workbench-intro,
  .vocab-study-plan-banner.active,
  .intensive-listening-source-card.institution-library,
  .intensive-listening-word-collocations em,
  .intensive-listening-dict-collocations span,
  .intensive-listening-word-actions .saved {
    background: var(--primary-soft);
  }

  .task-quick-complete-toggle {
    border-color: var(--task-type-accent, var(--primary));
  }

  .task-quick-complete-toggle:focus-visible {
    outline-color: var(--primary-border);
  }

  .daily-task-calendar-event .parent-task-student-pill,
  .student-profile-shared-header,
  .student-profile-domain-tabs button.active,
  .student-profile-event-card:hover,
  .sales-customer-linked-banner,
  .vocab-review-collocations span,
  .vocab-study-plan-banner,
  .vocab-book-card.personal,
  .vocab-book-edit-form,
  .vocab-book-scope,
  .intensive-listening-source-card.institution-library,
  .intensive-listening-word-popover,
  .intensive-listening-word-collocations em,
  .intensive-listening-dict-collocations span,
  .intensive-listening-word-actions .saved {
    border-color: var(--primary-border);
  }

  .student-profile-event-card:hover,
  .vocab-review-collocations span {
    background: var(--primary-soft);
  }

  .brand-theme-swatch {
    border-color: var(--swatch-color);
    background: var(--swatch-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 18px var(--primary-shadow);
  }

  .brand-theme-option:has(input:checked) {
    background: var(--primary-soft);
    box-shadow: 0 0 0 2px var(--primary-shadow), 0 10px 22px var(--primary-shadow);
  }

  .vocab-review-source-meta,
  .vocab-learn-rich-fields section,
  .intensive-listening-word-source {
    border-left-color: var(--primary-border);
  }

  .intensive-listening-word {
    border-bottom-color: var(--il-accent);
  }

  .intensive-listening-word-collocations em,
  .intensive-listening-dict-collocations span {
    color: var(--primary-text);
  }
}

/* 每日任务的两个确认稿弹窗独立使用纸张工作台视觉，不影响全站通用弹窗。 */
.daily-task-calendar-add-dialog,
.task-detail-dialog.file-task-detail-dialog {
  --task-paper: #fffdf4;
  --task-paper-strong: #fffef9;
  --task-ink: #4c4037;
  --task-ink-strong: #312923;
  --task-muted: #897b6c;
  --task-blue: #2f9bc9;
  --task-blue-deep: #177ba8;
  --task-blue-soft: #e4f7ff;
  --task-green: #4ebc68;
  --task-green-deep: #268d41;
  --task-green-soft: #e9faeb;
  --task-yellow-soft: #fff4cc;
  --task-pink-soft: #fff0f3;
  --task-line: #eadcaf;
  --task-line-blue: #a7d9eb;
  --task-paper-shadow: 0 24px 60px rgba(75, 67, 49, 0.18);
  --task-paper-shadow-soft: 0 8px 22px rgba(51, 137, 177, 0.12);
  width: min(1120px, calc(100vw - 28px));
  max-height: calc(100vh - 108px);
  border: 3px solid var(--task-line);
  border-radius: 24px;
  padding: 0;
  background: var(--task-paper);
  color: var(--task-ink);
  box-shadow: var(--task-paper-shadow);
  font-family: "Comic Sans MS", "Marker Felt", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow: hidden;
}

.daily-task-calendar-add-dialog {
  width: min(980px, calc(100vw - 28px));
}

.daily-task-calendar-add-dialog::backdrop,
.task-detail-dialog.file-task-detail-dialog::backdrop {
  background:
    radial-gradient(circle, rgba(245, 200, 85, 0.2) 1px, transparent 1.5px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(47, 155, 201, 0.14) 1px, transparent 1.5px) 12px 12px / 24px 24px,
    rgba(230, 246, 252, 0.92);
}

.daily-task-calendar-add-dialog *,
.task-detail-dialog.file-task-detail-dialog * {
  font-family: inherit;
  letter-spacing: 0;
}

.daily-task-calendar-add-dialog .published-task-edit-dialog-panel,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-dialog-panel {
  max-height: calc(100vh - 108px);
  background: var(--task-paper);
}

.daily-task-calendar-add-dialog .student-profile-dialog-head,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-header {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  border-bottom: 3px dashed var(--task-line);
  background: rgba(255, 253, 244, 0.96);
  padding: 24px 28px 20px;
  backdrop-filter: blur(10px);
}

.daily-task-calendar-add-dialog .student-profile-dialog-head strong {
  color: var(--task-ink-strong);
  font-size: 34px;
  font-weight: 950;
  line-height: 1.18;
}

.daily-task-calendar-add-dialog .student-profile-dialog-head small,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-meta {
  color: var(--task-muted);
  font-size: 14px;
  font-weight: 750;
}

.daily-task-calendar-add-dialog .dialog-close,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-close {
  display: inline-grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border: 2px solid #e3d9bd;
  border-radius: 14px;
  background: #ffffff;
  color: var(--task-ink);
  padding: 0;
  box-shadow: none;
  cursor: pointer;
}

.task-detail-dialog.file-task-detail-dialog button.file-task-detail-close {
  display: inline-grid;
  place-items: center;
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  gap: 0;
  padding: 0;
}

.task-detail-dialog.file-task-detail-dialog button.file-task-detail-close .svg-icon {
  width: 28px;
  min-width: 28px;
  height: 28px;
  stroke-width: 2.4;
}

.daily-task-calendar-add-dialog .dialog-close:hover,
.daily-task-calendar-add-dialog .dialog-close:focus-visible,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-close:hover,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-close:focus-visible {
  border-color: var(--task-blue);
  background: #ffffff;
  color: var(--task-blue-deep);
  outline: 3px solid rgba(47, 155, 201, 0.14);
}

.daily-task-calendar-add-dialog .published-task-edit-dialog-body {
  gap: 14px;
  min-height: 0;
  padding: 16px 28px 0;
  background: var(--task-paper);
  overflow-y: auto;
}

.daily-task-calendar-add-dialog .daily-task-create-mode-switch {
  border: 2px solid rgba(126, 192, 218, 0.55);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  padding: 4px;
}

.daily-task-calendar-add-dialog .daily-task-create-mode-switch .segment {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  color: var(--task-muted);
  padding: 7px 14px;
  font-weight: 900;
  white-space: nowrap;
}

.daily-task-calendar-add-dialog .daily-task-create-mode-switch .segment.active {
  background: var(--task-paper-strong);
  color: var(--task-blue-deep);
  box-shadow: 0 4px 12px rgba(44, 132, 169, 0.14);
}

.daily-task-calendar-add-dialog .published-task-edit-form {
  display: grid;
  gap: 0;
  margin: 0 -28px;
  padding: 4px 28px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.daily-task-calendar-add-dialog .daily-task-manual-primary-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.9fr) minmax(190px, 0.65fr);
  gap: 15px;
  align-items: end;
  padding-bottom: 18px;
}

.daily-task-calendar-add-dialog .daily-task-text-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 15px;
  padding: 16px 0 18px;
  border-top: 2px dashed var(--task-line);
}

.daily-task-calendar-add-dialog .daily-task-text-grid.single {
  grid-template-columns: 1fr;
}

.daily-task-calendar-add-dialog .published-task-edit-form label,
.daily-task-calendar-add-dialog .daily-task-deadline-field,
.daily-task-calendar-add-dialog .daily-task-more-settings-body label,
.task-detail-dialog.file-task-detail-dialog .compact-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--task-ink-strong);
  font-weight: 900;
}

.daily-task-calendar-add-dialog .daily-task-deadline-field legend {
  margin-bottom: 7px;
  color: var(--task-ink-strong);
  font-weight: 900;
}

.daily-task-calendar-add-dialog input,
.daily-task-calendar-add-dialog select,
.daily-task-calendar-add-dialog textarea,
.task-detail-dialog.file-task-detail-dialog input,
.task-detail-dialog.file-task-detail-dialog select,
.task-detail-dialog.file-task-detail-dialog textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 2px solid #e4d9bb;
  border-radius: 12px;
  background: #ffffff;
  color: var(--task-ink);
  padding: 10px 12px;
  outline: none;
}

.daily-task-calendar-add-dialog textarea,
.task-detail-dialog.file-task-detail-dialog textarea {
  resize: vertical;
  white-space: pre-wrap;
}

.daily-task-calendar-add-dialog input:focus,
.daily-task-calendar-add-dialog select:focus,
.daily-task-calendar-add-dialog textarea:focus,
.task-detail-dialog.file-task-detail-dialog input:focus,
.task-detail-dialog.file-task-detail-dialog select:focus,
.task-detail-dialog.file-task-detail-dialog textarea:focus {
  border-color: var(--task-blue);
  box-shadow: 0 0 0 3px rgba(47, 155, 201, 0.13);
}

.daily-task-calendar-add-dialog .daily-task-deadline-inputs {
  grid-template-columns: minmax(150px, 1fr) minmax(104px, 0.55fr);
  gap: 0;
  overflow: hidden;
  border: 2px solid #e4d9bb;
  border-radius: 12px;
  background: #ffffff;
}

.daily-task-calendar-add-dialog .daily-task-deadline-inputs:focus-within {
  border-color: var(--task-blue);
  box-shadow: 0 0 0 3px rgba(47, 155, 201, 0.13);
}

.daily-task-calendar-add-dialog .daily-task-deadline-inputs input {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.daily-task-calendar-add-dialog .daily-task-deadline-inputs input + input {
  border-left: 2px dashed var(--task-line);
}

.daily-task-calendar-add-dialog .daily-task-text-grid textarea {
  min-height: 108px;
}

.daily-task-calendar-add-dialog .daily-task-more-settings {
  margin: 0 0 18px;
  border: 2px solid #e4d9bb;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.55);
}

.daily-task-calendar-add-dialog .daily-task-more-settings summary {
  min-height: 52px;
  padding: 11px 15px;
  color: var(--task-ink-strong);
  font-weight: 900;
  list-style: none;
}

.daily-task-calendar-add-dialog .daily-task-more-settings summary::-webkit-details-marker {
  display: none;
}

.daily-task-calendar-add-dialog .daily-task-more-settings summary::after {
  float: right;
  color: var(--task-muted);
  content: "展开";
}

.daily-task-calendar-add-dialog .daily-task-more-settings[open] summary {
  border-bottom: 2px dashed var(--task-line);
  background: var(--task-yellow-soft);
}

.daily-task-calendar-add-dialog .daily-task-more-settings[open] summary::after {
  content: "收起";
}

.daily-task-calendar-add-dialog .daily-task-more-settings-body,
.daily-task-calendar-add-dialog .daily-task-repeat-field,
.daily-task-calendar-add-dialog .basic-action-submission-field {
  border-color: var(--task-line);
  background: var(--task-paper-strong);
}

.daily-task-calendar-add-dialog .published-task-edit-form > .row-actions {
  position: sticky;
  bottom: 0;
  z-index: 7;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 -28px;
  border-top: 3px dashed var(--task-line);
  background: rgba(255, 253, 244, 0.96);
  padding: 14px 28px;
  backdrop-filter: blur(10px);
}

.daily-task-calendar-add-dialog .published-task-edit-form > .row-actions .ghost-button {
  order: 1;
}

.daily-task-calendar-add-dialog .published-task-edit-form > .row-actions .secondary-button {
  order: 2;
}

.daily-task-calendar-add-dialog .published-task-edit-form > .row-actions .primary-button {
  order: 3;
}

.daily-task-calendar-add-dialog .primary-button,
.daily-task-calendar-add-dialog .secondary-button,
.daily-task-calendar-add-dialog .ghost-button,
.task-detail-dialog.file-task-detail-dialog .primary-button,
.task-detail-dialog.file-task-detail-dialog .secondary-button,
.task-detail-dialog.file-task-detail-dialog .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 13px;
  padding: 10px 18px;
  font-weight: 950;
}

.daily-task-calendar-add-dialog .primary-button,
.task-detail-dialog.file-task-detail-dialog .primary-button {
  border: 2px solid var(--task-green-deep);
  background: var(--task-green);
  color: #ffffff;
  box-shadow: 0 7px 0 rgba(38, 141, 65, 0.18);
}

.daily-task-calendar-add-dialog .primary-button:hover,
.task-detail-dialog.file-task-detail-dialog .primary-button:hover {
  background: var(--task-green);
  transform: translateY(-1px);
  box-shadow: 0 9px 0 rgba(38, 141, 65, 0.18);
}

.daily-task-calendar-add-dialog .secondary-button,
.daily-task-calendar-add-dialog .ghost-button,
.task-detail-dialog.file-task-detail-dialog .secondary-button,
.task-detail-dialog.file-task-detail-dialog .ghost-button {
  border: 2px solid #dfd4b7;
  background: #ffffff;
  color: var(--task-ink);
  box-shadow: none;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-heading {
  gap: 12px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-title-row,
.task-detail-dialog.file-task-detail-dialog .file-task-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-title-row h2 {
  min-width: 0;
  margin: 0;
  color: var(--task-ink-strong);
  font-size: 34px;
  font-weight: 950;
  line-height: 1.18;
}

.task-detail-dialog.file-task-detail-dialog .file-task-kind-badge,
.task-detail-dialog.file-task-detail-dialog .task-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.task-detail-dialog.file-task-detail-dialog .file-task-kind-badge {
  border: 2px solid var(--task-line-blue);
  background: var(--task-blue-soft);
  color: var(--task-blue-deep);
}

.task-detail-dialog.file-task-detail-dialog .task-status-pill {
  border: 2px solid #efcf65;
  background: var(--task-yellow-soft);
  color: #9a6900;
}

.task-detail-dialog.file-task-detail-dialog .task-status-pill.completed,
.task-detail-dialog.file-task-detail-dialog .task-status-pill.passed {
  border-color: #a9dda9;
  background: var(--task-green-soft);
  color: var(--task-green-deep);
}

.task-detail-dialog.file-task-detail-dialog .task-status-pill.revision_required {
  border-color: #efb3bd;
  background: var(--task-pink-soft);
  color: #b43b51;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-meta {
  margin-top: 0;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-meta span + span::before {
  margin-right: 2px;
  color: #c8b995;
  content: "·";
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-y: auto;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-main,
.task-detail-dialog.file-task-detail-dialog .file-task-submit-panel {
  padding: 26px 28px 30px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-main {
  border-right: 3px dashed var(--task-line);
}

.task-detail-dialog.file-task-detail-dialog .file-task-submit-panel {
  background: rgba(246, 251, 246, 0.58);
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-section,
.task-detail-dialog.file-task-detail-dialog .file-task-submit-panel,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-form,
.task-detail-dialog.file-task-detail-dialog .file-task-review-panel,
.task-detail-dialog.file-task-detail-dialog .file-task-optional-review {
  gap: 14px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-section + .file-task-detail-section,
.task-detail-dialog.file-task-detail-dialog .file-task-history {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 2px dashed #eadfbe;
}

.task-detail-dialog.file-task-detail-dialog .file-task-section-heading,
.task-detail-dialog.file-task-detail-dialog .file-task-review-panel h3,
.task-detail-dialog.file-task-detail-dialog .file-task-optional-review h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--task-ink-strong);
  font-size: 19px;
  font-weight: 950;
  line-height: 1.3;
}

.task-detail-dialog.file-task-detail-dialog .file-task-section-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--task-blue-soft);
  color: var(--task-blue-deep);
}

.task-detail-dialog.file-task-detail-dialog .file-task-detail-copy {
  margin: 0;
  color: var(--task-ink);
  font-size: 17px;
  line-height: 1.82;
  white-space: pre-wrap;
}

.task-detail-dialog.file-task-detail-dialog .file-task-requirement-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  border: 0;
  border-left: 5px solid #f5c855;
  border-radius: 12px;
  background: var(--task-yellow-soft);
  color: #765a19;
  padding: 12px 14px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-requirement-note strong {
  color: #765a19;
}

.task-detail-dialog.file-task-detail-dialog .task-attachment-card,
.task-detail-dialog.file-task-detail-dialog .task-linked-card,
.task-detail-dialog.file-task-detail-dialog .file-task-complete-action,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-summary,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-empty,
.task-detail-dialog.file-task-detail-dialog .file-task-feedback-box,
.task-detail-dialog.file-task-detail-dialog .file-task-review-panel,
.task-detail-dialog.file-task-detail-dialog .file-task-optional-review,
.task-detail-dialog.file-task-detail-dialog .file-task-manager-actions,
.task-detail-dialog.file-task-detail-dialog .file-task-submit-more {
  border: 2px solid #eadfbf;
  border-radius: 14px;
  background: var(--task-paper-strong);
}

.task-detail-dialog.file-task-detail-dialog .task-attachment-card,
.task-detail-dialog.file-task-detail-dialog .task-linked-card,
.task-detail-dialog.file-task-detail-dialog .file-task-complete-action,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-summary,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-empty,
.task-detail-dialog.file-task-detail-dialog .file-task-feedback-box,
.task-detail-dialog.file-task-detail-dialog .file-task-review-panel,
.task-detail-dialog.file-task-detail-dialog .file-task-optional-review,
.task-detail-dialog.file-task-detail-dialog .file-task-manager-actions {
  padding: 14px;
}

.task-detail-dialog.file-task-detail-dialog .task-attachment-card > strong {
  display: none;
}

.task-detail-dialog.file-task-detail-dialog .submission-attachment-list a,
.task-detail-dialog.file-task-detail-dialog .submission-image-attachment {
  min-height: 44px;
  border: 2px solid var(--task-line-blue);
  border-radius: 11px;
  background: var(--task-blue-soft);
  color: var(--task-blue-deep);
  font-weight: 900;
}

.task-detail-dialog.file-task-detail-dialog .file-task-submission-form .submission-dropzone-field > .form-label {
  display: none;
}

.task-detail-dialog.file-task-detail-dialog .file-task-submission-form .submission-dropzone {
  place-items: center;
  min-height: 150px;
  border: 3px dashed var(--task-line-blue);
  border-radius: 18px;
  background: rgba(228, 247, 255, 0.58);
  color: var(--task-blue-deep);
  padding: 20px;
  text-align: center;
}

.task-detail-dialog.file-task-detail-dialog .file-task-submission-form .submission-dropzone strong {
  color: var(--task-blue-deep);
  font-size: 16px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-submission-form .submission-dropzone span,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-form .submission-dropzone small,
.task-detail-dialog.file-task-detail-dialog .file-task-complete-action p,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-summary p,
.task-detail-dialog.file-task-detail-dialog .file-task-submission-summary small {
  color: var(--task-muted);
}

.task-detail-dialog.file-task-detail-dialog .file-task-submission-form > .primary-button,
.task-detail-dialog.file-task-detail-dialog .file-task-complete-action > .primary-button {
  width: 100%;
  margin-top: 2px;
}

.task-detail-dialog.file-task-detail-dialog .file-task-submit-more summary,
.task-detail-dialog.file-task-detail-dialog .file-task-history summary {
  color: var(--task-ink-strong);
  font-weight: 900;
}

.task-detail-dialog.file-task-detail-dialog .file-task-feedback-box {
  border-color: #efb6bf;
  border-left-width: 6px;
  background: var(--task-pink-soft);
}

.task-detail-dialog.file-task-detail-dialog .file-task-feedback-box strong {
  color: #a63249;
}

.task-detail-dialog.file-task-detail-dialog .file-task-feedback-box p {
  color: #70424a;
}

@media (max-width: 980px) {
  .daily-task-calendar-add-dialog .daily-task-manual-primary-grid,
  .daily-task-calendar-add-dialog .daily-task-text-grid,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-content {
    grid-template-columns: 1fr;
  }

  .task-detail-dialog.file-task-detail-dialog .file-task-detail-main {
    border-right: 0;
    border-bottom: 3px dashed var(--task-line);
  }
}

@media (max-width: 820px) {
  .daily-task-calendar-add-dialog,
  .task-detail-dialog.file-task-detail-dialog {
    max-height: calc(100vh - 32px);
    border-radius: 18px;
  }

  .daily-task-calendar-add-dialog .published-task-edit-dialog-panel,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-dialog-panel {
    max-height: calc(100vh - 32px);
  }

  .daily-task-calendar-add-dialog .student-profile-dialog-head,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-header {
    padding: 18px 18px 15px;
  }

  .daily-task-calendar-add-dialog .student-profile-dialog-head strong,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-title-row h2 {
    font-size: 26px;
  }

  .daily-task-calendar-add-dialog .published-task-edit-dialog-body {
    padding: 14px 18px 0;
  }

  .daily-task-calendar-add-dialog .published-task-edit-form {
    margin-inline: -18px;
    padding-inline: 18px;
  }

  .daily-task-calendar-add-dialog .published-task-edit-form > .row-actions {
    margin-inline: -18px;
    padding-inline: 18px;
  }

  .task-detail-dialog.file-task-detail-dialog .file-task-detail-main,
  .task-detail-dialog.file-task-detail-dialog .file-task-submit-panel {
    padding: 20px 18px;
  }
}

@media (max-width: 560px) {
  .daily-task-calendar-add-dialog,
  .task-detail-dialog.file-task-detail-dialog {
    inset: 0;
    width: 100vw;
    max-width: none;
    max-height: 100vh;
    min-height: 100vh;
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .daily-task-calendar-add-dialog .published-task-edit-dialog-panel,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-dialog-panel {
    max-height: 100vh;
    min-height: 100vh;
  }

  .daily-task-calendar-add-dialog .student-profile-dialog-head,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-header {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    padding: 16px 14px 14px;
  }

  .daily-task-calendar-add-dialog .student-profile-dialog-head strong,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-title-row h2 {
    font-size: 24px;
  }

  .daily-task-calendar-add-dialog .dialog-close,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-close {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .task-detail-dialog.file-task-detail-dialog button.file-task-detail-close {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .daily-task-calendar-add-dialog .published-task-edit-dialog-body {
    padding: 12px 14px 0;
  }

  .daily-task-calendar-add-dialog .published-task-edit-form {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .daily-task-calendar-add-dialog .daily-task-deadline-inputs {
    grid-template-columns: 1fr;
  }

  .daily-task-calendar-add-dialog .daily-task-deadline-inputs input + input {
    border-top: 2px dashed var(--task-line);
    border-left: 0;
  }

  .daily-task-calendar-add-dialog .published-task-edit-form > .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: -14px;
    padding: 10px 14px;
  }

  .daily-task-calendar-add-dialog .published-task-edit-form > .row-actions .primary-button {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .daily-task-calendar-add-dialog .published-task-edit-form > .row-actions .secondary-button,
  .daily-task-calendar-add-dialog .published-task-edit-form > .row-actions .ghost-button {
    width: 100%;
  }

  .task-detail-dialog.file-task-detail-dialog .file-task-detail-title-row,
  .task-detail-dialog.file-task-detail-dialog .file-task-detail-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-detail-dialog.file-task-detail-dialog .file-task-detail-meta span + span::before {
    display: none;
  }

  .task-detail-dialog.file-task-detail-dialog .file-task-detail-main,
  .task-detail-dialog.file-task-detail-dialog .file-task-submit-panel {
    padding: 18px 14px;
  }
}

/* 听力精听：已确认水豚预览的真实页面实现。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) {
  --il-capy-ink: #403a35;
  --il-capy-muted: #73818c;
  --il-capy-paper: #fffdf7;
  --il-capy-line: #e0d3b5;
  --il-capy-sky: #45aeda;
  --il-capy-sky-strong: #1685c1;
  --il-capy-sky-soft: #e7f8ff;
  --il-capy-green: #50b96a;
  --il-capy-green-soft: #effbf1;
  --il-capy-yellow: #f4c85b;
  --il-capy-yellow-soft: #fff8df;
  --il-capy-purple: #a779d3;
  --il-capy-purple-soft: #fbf7ff;
  --il-capy-shadow: 0 10px 24px rgba(72, 72, 62, 0.1);
  background:
    radial-gradient(circle, rgba(255, 213, 94, 0.22) 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(circle, rgba(69, 174, 218, 0.14) 1px, transparent 1.5px) 11px 11px / 22px 22px,
    linear-gradient(180deg, #fffdf7, #fff8e9);
  color: var(--il-capy-ink);
}

@media (min-width: 861px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]).module-sidebar-route .app-shell,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]).module-sidebar-route.sidebar-collapsed .app-shell {
    grid-template-columns: 162px minmax(0, 1fr);
    gap: 0;
    max-width: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]).module-sidebar-route .sidebar,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]).module-sidebar-route.sidebar-collapsed .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    width: auto;
    height: 100vh;
    overflow-y: auto;
    border: 0;
    border-right: 4px dashed #a6daf0;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(223, 246, 255, 0.98), rgba(205, 239, 252, 0.98));
    box-shadow: none;
    padding: 15px 11px;
    transform: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar-close {
    display: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 76px;
    padding: 8px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .topbar-brandline {
    grid-column: 1;
    min-width: 0;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .topbar-title-block {
    display: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .module-top-menu {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .module-top-menu-bar {
    display: grid;
    grid-template-columns: repeat(9, minmax(52px, 1fr));
    gap: 3px;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .module-menu-trigger {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 6px 5px;
    font-size: 12px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .user-area {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .main {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar-head {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 0 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .brand {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .brand > div:last-child {
  display: grid;
  justify-items: center;
  gap: 2px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .brand strong {
  color: var(--il-capy-sky-strong);
  font-family: var(--font-word-display);
  font-size: 18px;
  line-height: 1.15;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .brand span {
  color: #6c8ca0;
  font-size: 10px;
  line-height: 1.35;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .intensive-listening-brand-mark {
  display: grid;
  width: 70px;
  height: 70px;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(96, 74, 46, 0.16);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .intensive-listening-brand-mark img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  transform: translateY(3%);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .nav-list {
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .nav-link,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .module-side-section a {
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: 14px;
  color: #557386;
  background: transparent;
  padding: 8px 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .nav-link:hover,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .nav-link.active,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .module-side-section a:hover {
  border-color: #8fd3ea;
  background: rgba(255, 255, 255, 0.9);
  color: var(--il-capy-sky-strong);
  box-shadow: 0 4px 0 rgba(34, 145, 190, 0.1);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .nav-link-icon,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .module-side-icon {
  color: currentColor;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sidebar .module-side-section {
  border-top: 2px dashed rgba(89, 169, 201, 0.35);
  padding-top: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .topbar {
  min-height: 72px;
  margin: 8px 10px 0;
  border: 2px solid #e3d8bd;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(78, 73, 59, 0.08);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .topbar .home-return,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .topbar .icon-button {
  border-color: #dfd4ba;
  background: #fff;
  color: var(--il-capy-sky-strong);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .module-menu-trigger.active,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .module-menu-trigger:hover {
  border-color: #8fd3ea;
  background: var(--il-capy-sky-soft);
  color: var(--il-capy-sky-strong);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .view {
  width: 100%;
  min-width: 0;
  padding: 16px clamp(10px, 1.8vw, 24px) 72px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page {
  --il-bg: transparent;
  --il-panel: var(--il-capy-paper);
  --il-panel-soft: #fffefb;
  --il-text: var(--il-capy-ink);
  --il-muted: var(--il-capy-muted);
  --il-line: var(--il-capy-line);
  --il-accent: var(--il-capy-sky);
  --il-accent-strong: var(--il-capy-sky-strong);
  --il-accent-soft: var(--il-capy-sky-soft);
  --il-warm: #9b611c;
  --il-warm-soft: var(--il-capy-yellow-soft);
  --il-gold: #8c681b;
  --il-gold-soft: var(--il-capy-yellow-soft);
  --il-success: #32854a;
  --il-success-soft: var(--il-capy-green-soft);
  --il-shadow: var(--il-capy-shadow);
  width: min(1480px, 100%);
  gap: 14px;
  color: var(--il-capy-ink);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .panel {
  border: 2px solid var(--il-capy-line);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.98);
  box-shadow: var(--il-capy-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .secondary-button {
  width: auto;
  min-height: 38px;
  border-width: 2px;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.25;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button {
  border-color: var(--il-capy-sky);
  background: var(--il-capy-sky);
  color: #fff;
  box-shadow: 0 3px 0 rgba(15, 126, 172, 0.18);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button:hover {
  border-color: var(--il-capy-sky-strong);
  background: var(--il-capy-sky-strong);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .secondary-button {
  border-color: #ded4bd;
  background: #fff;
  color: #5e554c;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button.warm {
  border-color: var(--il-capy-yellow);
  background: var(--il-capy-yellow);
  color: #735117;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .task-status-pill {
  border: 1px solid #e6d9ba;
  border-radius: 12px;
  background: #fff9e8;
  color: #78643e;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .task-status-pill.completed {
  border-color: #b9e5c0;
  background: var(--il-capy-green-soft);
  color: #348149;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar {
  align-items: center;
  border: 2px solid #e2d7bc;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--il-capy-shadow);
  padding: 16px 18px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-copy > div:last-child {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-mascot {
  display: grid;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  overflow: hidden;
  place-items: center;
  border: 2px solid #a9dff0;
  border-radius: 50%;
  background: var(--il-capy-sky-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-mascot img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar .eyebrow {
  margin: 0 0 3px;
  color: var(--il-capy-sky-strong);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar h2 {
  color: var(--il-capy-sky-strong);
  font-family: var(--font-word-display);
  font-size: clamp(25px, 2.4vw, 34px);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar p {
  margin-top: 5px;
  color: var(--il-capy-muted);
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions small {
  flex-basis: 100%;
  color: var(--il-capy-muted);
  text-align: right;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 2px solid #d8c5ee;
  border-radius: 14px;
  background: var(--il-capy-purple-soft);
  color: #75549a;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill::before {
  content: "✎";
  margin-right: 5px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-layout {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

@media (min-width: 841px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-panel {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 108px);
    overflow: auto;
  }
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-header {
  border-bottom: 2px dashed var(--il-capy-line);
  background: var(--il-capy-yellow-soft);
  padding: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-header h3 {
  color: #795a23;
  font-family: var(--font-word-display);
  font-size: 20px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-header p {
  margin-top: 3px;
  font-size: 11px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-body {
  gap: 13px;
  padding: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-local-import,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-filter,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcribe-mode {
  border: 0;
  border-bottom: 2px dashed #eadfca;
  border-radius: 0;
  background: transparent;
  padding: 0 0 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-filter input,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcribe-mode select {
  border: 2px solid #d9e6e8;
  border-radius: 10px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-tabs {
  overflow: hidden;
  border: 2px solid #d8e7ea;
  border-radius: 10px;
  background: #f8fcfd;
  padding: 3px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-tabs button {
  border-radius: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-tabs button.active {
  background: var(--il-capy-sky-soft);
  color: var(--il-capy-sky-strong);
  box-shadow: inset 0 0 0 1px #addfec;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-category-node > summary {
  border-bottom: 1px dashed #e2d7c0;
  color: #7a6b58;
  padding: 8px 2px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-category-content {
  gap: 8px;
  padding: 8px 0 2px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-linked-card {
  border: 2px solid #e3dac7;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(100, 82, 57, 0.05);
  padding: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card:hover,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.active {
  border-color: #81cbe5;
  background: var(--il-capy-sky-soft);
  transform: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.institution-library {
  border-color: #c6e3ec;
  background: #f8fdff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-select {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #c8e6ef;
  border-radius: 11px;
  background: #fff;
  color: var(--il-capy-sky-strong);
  font-size: 18px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-copy strong {
  overflow-wrap: break-word;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions {
  border-top: 1px dashed #ddd2bc;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stat-grid span {
  min-height: 64px;
  border: 2px solid #e4dbc8;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stat-grid span:nth-child(2) {
  border-color: #bce2c2;
  background: var(--il-capy-green-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stat-grid span:nth-child(3) {
  border-color: #dfcbed;
  background: var(--il-capy-purple-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-processing-banner {
  border: 2px solid #b8e3ef;
  border-radius: 12px;
  background: var(--il-capy-sky-soft);
  color: #39768f;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  border-bottom: 2px dashed var(--il-capy-line);
  padding-bottom: 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button {
  min-height: 66px;
  border: 2px solid #e1dac9;
  border-radius: 13px;
  background: #fff;
  padding: 8px 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button:nth-child(2) span {
  background: var(--il-capy-yellow);
  color: #735117;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button:nth-child(3) span {
  background: var(--il-capy-green);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button.active {
  border-color: #76c9e6;
  background: var(--il-capy-sky-soft);
  color: var(--il-capy-sky-strong);
  box-shadow: 0 3px 0 rgba(43, 149, 190, 0.12);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-stage {
  gap: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-head,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-player,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form {
  border: 0;
  border-top: 2px dashed #e2d8c3;
  border-radius: 0;
  background: transparent;
  padding: 14px 0 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-head:first-child {
  border-top: 0;
  padding-top: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-head h3,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-title h3 {
  color: #5d4d3d;
  font-family: var(--font-word-display);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-wave-panel {
  border: 2px solid #c9e2e8;
  border-radius: 13px;
  background: #f8fdff;
  color: #557687;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-wave-meta {
  color: #6c8794;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-wave i {
  background: var(--il-capy-sky);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button {
  min-height: 48px;
  border-color: #dfd8c8;
  border-radius: 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button.active {
  border-color: #71c5e4;
  background: var(--il-capy-sky-soft);
  color: var(--il-capy-sky-strong);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-card {
  border: 2px dashed #d7c1f0;
  border-radius: 14px;
  background: var(--il-capy-purple-soft);
  padding: 14px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-head {
  gap: 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-jump {
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 5px;
  border: 2px solid #e2dac8;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-jump-button {
  height: 30px;
  border: 2px solid #ded8c9;
  border-radius: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-jump-button.active {
  border-color: var(--il-capy-sky);
  background: var(--il-capy-sky-soft);
  color: var(--il-capy-sky-strong);
  box-shadow: 0 0 0 2px rgba(69, 174, 218, 0.14);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-flow {
  gap: 0;
  border-top: 2px dashed var(--il-capy-line);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 12px;
  border: 0;
  border-bottom: 2px dashed #e6decd;
  border-radius: 0;
  background: transparent;
  padding: 16px 0;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step::before {
  content: "0" attr(data-il-four-step);
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--il-capy-sky);
  color: #fff;
  box-shadow: 0 4px 0 rgba(8, 127, 172, 0.16);
  font-family: var(--font-word-display);
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(2)::before {
  background: var(--il-capy-yellow);
  color: #735117;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(3)::before {
  background: var(--il-capy-purple);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(4)::before {
  background: var(--il-capy-green);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step > * {
  grid-column: 2;
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head {
  align-items: start;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head h4 {
  color: #4f453c;
  font-size: 16px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-kicker {
  color: var(--il-capy-sky-strong);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-actions,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-hint-item,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-check-grid label {
  border: 1px solid #e2d9c7;
  border-radius: 10px;
  background: #fff;
  padding: 8px 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-transcript,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-score-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-completion {
  border: 2px solid #d6e6e9;
  border-radius: 12px;
  background: #f9fdfe;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-english,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript {
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre-wrap;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions {
  position: sticky;
  z-index: 15;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px 12px;
  border: 2px solid #d4e3e5;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 22px rgba(60, 83, 93, 0.14);
  padding: 8px;
  backdrop-filter: blur(10px);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-progress-summary span,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-progress-card {
  border-width: 2px;
  border-color: #e1d8c4;
  border-radius: 13px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-progress-summary span:nth-child(2),
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-progress-summary span:nth-child(4) {
  border-color: #bfe4c5;
  background: var(--il-capy-green-soft);
}

@media (max-width: 1100px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions {
    justify-content: flex-start;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions small {
    flex-basis: auto;
    text-align: left;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-layout {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .view {
    padding: 10px 8px 80px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-layout {
    grid-template-columns: 1fr;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-mascot {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar {
    border-radius: 14px;
    padding: 12px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar h2 {
    font-size: 25px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .panel {
    border-radius: 14px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button {
    min-height: 58px;
    padding: 6px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button small {
    display: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0 9px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step::before {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 10px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions {
    position: static;
  }
}

@media (max-width: 560px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-copy {
    align-items: flex-start;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-mascot {
    display: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions > div {
    width: 100%;
    align-items: stretch;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions > button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions button {
    flex: 1 1 130px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill {
    flex: 1 1 100%;
    justify-content: center;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-actions,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-progress-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-audio-stage,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-grid {
    grid-template-columns: 1fr;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-focus-box {
    min-height: 70px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-step-head,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head {
    grid-template-columns: 1fr;
  }
}

/* 听力精听：独立挂载已确认预览外壳，彻底隔离旧全站外壳。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) {
  --il-preview-side: 162px;
  --il-preview-sky-50: #eefaff;
  --il-preview-sky-100: #d9f4ff;
  --il-preview-sky-200: #b8e9f8;
  --il-preview-sky-400: #46b9df;
  --il-preview-sky-500: #1597c7;
  --il-preview-sky-600: #087fac;
  --il-preview-paper: #fffdf6;
  --il-preview-paper-strong: #fff9e9;
  --il-preview-ink: #493b33;
  --il-preview-muted: #88766a;
  --il-preview-line: #ecd7a2;
  --il-preview-line-soft: #f4e8ca;
  --il-preview-green: #42bd68;
  --il-preview-green-soft: #eafbea;
  --il-preview-yellow: #ffc95b;
  --il-preview-yellow-soft: #fff3c9;
  --il-preview-purple: #8f7bd8;
  --il-preview-shadow: 0 10px 0 rgba(235, 210, 149, 0.28);
  --il-preview-soft-shadow: 0 8px 24px rgba(99, 80, 53, 0.09);
  --il-preview-font-cute: "Comic Sans MS", "Marker Felt", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle, rgba(255, 213, 94, 0.24) 1px, transparent 2px) 0 0 / 22px 22px,
    radial-gradient(circle, rgba(69, 174, 218, 0.16) 1px, transparent 2px) 11px 11px / 22px 22px,
    linear-gradient(90deg, #dff5ff 0 var(--il-preview-side), transparent var(--il-preview-side)),
    linear-gradient(180deg, #fffdf5, #fff7e8);
  color: var(--il-preview-ink);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) > .app-shell {
  display: block !important;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) > .app-shell > #app-sidebar,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) > .app-shell > .main > .topbar {
  display: none !important;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) > .app-shell > .main {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) > .app-shell > .main > .view {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.intensive-listening-preview-shell {
  display: grid;
  grid-template-columns: var(--il-preview-side) minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  color: var(--il-preview-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

.intensive-listening-preview-shell > .side.side-rail {
  position: sticky;
  inset: auto;
  top: 0;
  z-index: 30;
  display: flex;
  width: auto;
  height: 100vh;
  overflow-y: auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 12px;
  border: 0;
  border-right: 4px dashed #a6daf0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(223, 246, 255, 0.98), rgba(205, 239, 252, 0.98));
  box-shadow: none;
}

.intensive-listening-preview-shell .mascot {
  display: grid;
  width: 72px;
  height: 72px;
  min-height: 72px;
  flex: 0 0 72px;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(96, 74, 46, 0.16);
}

.intensive-listening-preview-shell .mascot .capy-avatar {
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
  transform: translateY(3%);
}

.intensive-listening-preview-shell > .side .brand {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1685c1;
  font-family: var(--il-preview-font-cute);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.95);
}

.intensive-listening-preview-shell .side-nav.rail-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

.intensive-listening-preview-shell .side-nav .side-item {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 82px;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 9px 6px;
  border: 2px solid rgba(232, 219, 184, 0.85);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 7px 16px rgba(51, 137, 177, 0.11);
  color: #47382e;
  text-align: center;
  text-decoration: none;
}

.intensive-listening-preview-shell .side-nav .side-item.active {
  border-color: #58cf67;
  background: linear-gradient(180deg, #f7fff5, #eaffea);
  box-shadow: inset 0 0 0 2px rgba(88, 207, 103, 0.28), 0 9px 16px rgba(54, 174, 73, 0.15);
}

.intensive-listening-preview-shell .side-emoji {
  font-size: 29px;
  line-height: 1;
}

.intensive-listening-preview-shell .side-nav .side-item strong {
  display: block;
  margin-top: 6px;
  color: #47382e;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.1;
}

.intensive-listening-shell-more {
  position: relative;
  width: 100%;
  margin-top: auto;
}

.intensive-listening-shell-more > summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  border: 2px solid rgba(224, 211, 181, 0.86);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  color: #655649;
  font-size: 12px;
  font-weight: 900;
}

.intensive-listening-shell-more > summary::-webkit-details-marker {
  display: none;
}

.intensive-listening-shell-more > div {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.intensive-listening-shell-more a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #5f554d;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.intensive-listening-shell-more a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intensive-listening-preview-main {
  min-width: 0;
  margin: 0;
  padding: 18px;
}

.intensive-listening-preview-shell .mobile-bar {
  display: none;
}

.intensive-listening-preview-shell > .intensive-listening-preview-main > .topbar {
  position: sticky;
  top: 12px;
  z-index: 25;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(1380px, 100%);
  min-height: 80px;
  margin: 0 auto 18px;
  padding: 9px;
  border: 3px solid #f0dfba;
  border-radius: 24px;
  background: rgba(255, 253, 246, 0.94);
  box-shadow: 0 14px 30px rgba(96, 74, 46, 0.12);
  backdrop-filter: blur(12px);
}

.intensive-listening-preview-shell .topbar .home-button,
.intensive-listening-preview-shell .topbar .nav-pill,
.intensive-listening-preview-shell .topbar .top-role-button,
.intensive-listening-preview-shell .topbar .desktop-notification-trigger,
.intensive-listening-preview-shell .topbar .desktop-account-trigger {
  display: inline-flex;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 2px solid rgba(224, 211, 181, 0.86);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 0 rgba(219, 203, 166, 0.42);
  color: #47382e;
  font-weight: 950;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.intensive-listening-preview-shell .topbar .home-button svg {
  width: 19px;
  height: 19px;
}

.intensive-listening-preview-shell .nav-scroll.global-nav {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-width: none;
}

.intensive-listening-preview-shell .nav-scroll.global-nav::-webkit-scrollbar {
  display: none;
}

.intensive-listening-preview-shell .nav-scroll.global-nav .nav-pill {
  flex: 0 0 auto;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  padding: 8px 12px;
}

.intensive-listening-preview-shell .nav-scroll.global-nav .nav-pill.active {
  border-color: #75c9e9;
  background: linear-gradient(180deg, #e6fbff, #caf0ff);
  box-shadow: 0 6px 0 rgba(118, 198, 232, 0.34);
  color: #1685c1;
}

.intensive-listening-preview-shell .account-zone.top-actions,
.intensive-listening-preview-shell .account-zone .desktop-user-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.intensive-listening-preview-shell .account-zone > [data-intensive-listening-account-mount],
.intensive-listening-preview-shell .account-zone .user-area {
  display: contents;
}

.intensive-listening-preview-shell .account-zone .desktop-user-toolbar {
  display: contents;
}

.intensive-listening-preview-shell .topbar .language-switcher {
  order: 1;
}

.intensive-listening-preview-shell .topbar .desktop-notification-menu {
  order: 2;
}

.intensive-listening-preview-shell .topbar .top-role-button {
  order: 3;
}

.intensive-listening-preview-shell .topbar .desktop-account-menu,
.intensive-listening-preview-shell .topbar .home-login-button {
  order: 4;
}

.intensive-listening-preview-shell .topbar .language-switcher {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 3px;
  border: 2px solid rgba(224, 211, 181, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.intensive-listening-preview-shell .topbar .locale-button {
  width: auto;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: #47382e;
  font-weight: 950;
}

.intensive-listening-preview-shell .topbar .locale-button.active {
  background: #39ace4;
  color: #fff;
}

.intensive-listening-preview-shell .topbar .desktop-notification-trigger {
  position: relative;
  width: 40px;
  padding: 0;
}

.intensive-listening-preview-shell .topbar .notification-badge {
  top: -7px;
  right: -6px;
  min-width: 23px;
  height: 23px;
  border: 2px solid #fff;
  background: #ed5260;
}

.intensive-listening-preview-shell .topbar .desktop-account-trigger {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  min-width: 160px;
  min-height: 58px;
  max-width: 210px;
  padding: 5px 10px 5px 6px;
  border-color: #bde8b7;
  background: #f4fff1;
  text-align: left;
}

.intensive-listening-preview-shell .topbar .desktop-account-avatar {
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 50%;
  background: #e8ffe8;
  object-fit: contain;
}

.intensive-listening-preview-shell .topbar .desktop-account-brief strong,
.intensive-listening-preview-shell .topbar .desktop-account-brief span {
  font-family: var(--il-preview-font-cute);
}

.intensive-listening-preview-shell .topbar .desktop-account-brief span {
  color: #948470;
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
}

.intensive-listening-preview-shell .topbar .desktop-account-popover,
.intensive-listening-preview-shell .topbar .desktop-notification-popover {
  z-index: 80;
}

.intensive-listening-preview-page-shell {
  width: min(1380px, 100%);
  margin: 0 auto;
}

.intensive-listening-preview-page-shell > * {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-preview-page-shell .intensive-listening-page {
  width: 100%;
  max-width: none;
  gap: 14px;
  color: var(--il-preview-ink);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-preview-page-shell .intensive-listening-topbar {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 15px 20px;
  border: 3px solid var(--il-preview-line);
  border-radius: 22px;
  background: rgba(255, 253, 246, 0.94);
  box-shadow: var(--il-preview-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-mascot {
  display: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-copy {
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar .eyebrow {
  margin: 0 0 3px;
  color: var(--il-preview-green);
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar h2 {
  margin: 0 0 4px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 30px;
  line-height: 1.05;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar p {
  margin: 0;
  color: var(--il-preview-muted);
  font-size: 14px;
  font-weight: 700;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .secondary-button {
  min-height: 40px;
  border-width: 2px;
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 4px 0 rgba(118, 93, 52, 0.08);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill {
  border-color: var(--il-preview-line);
  background: var(--il-preview-paper-strong);
  color: var(--il-preview-muted);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill::before {
  content: "📝";
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .primary-button {
  border-color: var(--il-preview-sky-500);
  background: var(--il-preview-sky-500);
  color: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .secondary-button {
  border-color: #d9c599;
  background: #fff;
  color: var(--il-preview-ink);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-layout {
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: 16px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .panel {
  overflow: hidden;
  border: 3px solid var(--il-preview-line);
  border-radius: 24px;
  background: rgba(255, 253, 246, 0.97);
  box-shadow: var(--il-preview-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-panel {
  top: 116px;
  max-height: calc(100vh - 134px);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-header {
  padding: 16px 17px;
  border-bottom: 2px dashed var(--il-preview-line);
  background: linear-gradient(180deg, #fffef9, #fffaf0);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-header h3 {
  margin-bottom: 2px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 21px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-header p {
  color: var(--il-preview-muted);
  font-size: 12px;
  font-weight: 700;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-panel-body {
  padding: 13px 14px 16px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-linked-card {
  border: 2px solid #e7d6b1;
  border-radius: 17px;
  background: #fff;
  box-shadow: none;
  padding: 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.active {
  border-color: var(--il-preview-sky-400);
  background: var(--il-preview-sky-50);
  box-shadow: inset 5px 0 var(--il-preview-sky-400);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav {
  gap: 7px;
  padding-bottom: 13px;
  border-bottom: 2px dashed var(--il-preview-line);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button {
  min-height: 64px;
  border: 2px solid #dfdac9;
  border-radius: 13px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-nav button.active {
  border-color: var(--il-preview-sky-400);
  background: var(--il-preview-sky-50);
  box-shadow: 0 0 0 3px rgba(70, 185, 223, 0.15);
  color: var(--il-preview-sky-600);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-flow {
  border-color: var(--il-preview-line);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 16px 0;
  border-bottom-color: var(--il-preview-line-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step::before {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--il-preview-sky-500);
  box-shadow: 0 4px 0 rgba(8, 127, 172, 0.18);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(2)::before {
  background: var(--il-preview-yellow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(3)::before {
  background: var(--il-preview-purple);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(4)::before {
  background: var(--il-preview-green);
}

@media (max-width: 1080px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) {
    --il-preview-side: 78px;
  }

  .intensive-listening-preview-shell {
    grid-template-columns: var(--il-preview-side) minmax(0, 1fr);
  }

  .intensive-listening-preview-shell > .side.side-rail {
    padding: 10px 6px;
    gap: 8px;
    border-right-width: 3px;
  }

  .intensive-listening-preview-shell .mascot {
    width: 48px;
    height: 48px;
    min-height: 48px;
    flex-basis: 48px;
  }

  .intensive-listening-preview-shell > .side .brand {
    font-size: 13px;
  }

  .intensive-listening-preview-shell .side-nav.rail-nav {
    gap: 8px;
  }

  .intensive-listening-preview-shell .side-nav .side-item {
    min-height: 62px;
    padding: 5px 3px;
    border-radius: 16px;
  }

  .intensive-listening-preview-shell .side-emoji {
    font-size: 21px;
  }

  .intensive-listening-preview-shell .side-nav .side-item strong {
    font-size: 12px;
  }

  .intensive-listening-shell-more > summary span,
  .intensive-listening-shell-more a span {
    display: none;
  }

  .intensive-listening-shell-more a {
    justify-content: center;
  }

  .intensive-listening-preview-main {
    padding: 8px;
  }

  .intensive-listening-preview-shell > .intensive-listening-preview-main > .topbar {
    display: none;
  }

  .intensive-listening-preview-shell .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: 38px 38px minmax(0, 1fr) 58px 58px;
    gap: 6px;
    align-items: center;
    margin: -8px -8px 10px;
    padding: 7px;
    border-bottom: 3px dashed #a6daf0;
    background: rgba(223, 246, 255, 0.95);
  }

  .intensive-listening-preview-shell .mobile-title {
    overflow: hidden;
    color: #1685c1;
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intensive-listening-preview-shell .mobile-bar .icon-button {
    display: grid;
    width: 38px;
    height: 38px;
    min-height: 38px;
    place-items: center;
    padding: 0;
    border: 2px solid rgba(224, 211, 181, 0.86);
    border-radius: 13px;
    background: #fff;
    color: var(--il-preview-ink);
  }

  .intensive-listening-preview-shell .mobile-bar .secondary-button {
    width: auto;
    min-height: 38px;
    padding: 5px 7px;
    border: 2px solid #d9c599;
    border-radius: 12px;
    background: #fff;
    color: var(--il-preview-ink);
    font-size: 12px;
    font-weight: 900;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-layout {
    grid-template-columns: 1fr;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-panel {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    width: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mobile-source-bar,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mobile-source-backdrop,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mobile-source-close {
    display: none !important;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-category-tree {
    max-height: 360px;
    overflow-y: auto;
  }
}

@media (max-width: 620px) {
  .intensive-listening-preview-shell .mobile-bar {
    grid-template-columns: 34px 34px minmax(0, 1fr) 50px 50px;
    gap: 5px;
  }

  .intensive-listening-preview-shell .mobile-bar .icon-button {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 12px;
  }

  .intensive-listening-preview-shell .mobile-bar .secondary-button {
    min-height: 34px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-preview-page-shell .intensive-listening-topbar {
    align-items: flex-start;
    padding: 13px;
    border-radius: 18px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-topbar h2 {
    font-size: 25px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions {
    max-width: 120px;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions .intensive-listening-mode-pill,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions .secondary-button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-heading-actions small {
    display: none;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-page .panel {
    border-radius: 19px;
  }
}

/* 听力预览最终优先级：阻断旧模块规则继续穿透。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .heading-title.intensive-listening-heading-copy {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-pill::before {
  content: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .material-list.intensive-listening-category-tree {
  align-content: start;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-category-node {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-category-node > summary {
  border-bottom: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-category-content {
  border-top: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .learning-step.intensive-listening-four-step::before {
  content: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell.intensive-listening-jump {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  min-width: 0;
  margin: 0 0 14px;
  padding: 7px;
  gap: 7px;
  border: 2px solid #ead8a9;
  border-radius: 14px;
  background: #fffef9;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell.intensive-listening-jump .sentence-shift {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell.intensive-listening-jump .sentence-jump {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 3px 1px 5px;
  gap: 5px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #a6daf0 transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-nav-shell.intensive-listening-jump .sentence-jump button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  aspect-ratio: auto;
  padding: 0;
  border-radius: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .play-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  border: 0;
  border-radius: 50%;
  background: var(--il-preview-sky-500);
  color: #fff;
  box-shadow: 0 5px 0 #08759c;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .waveform {
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .waveform i {
  width: 4px;
  height: var(--h);
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--il-preview-sky-400);
  opacity: .68;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .time-box {
  color: var(--il-preview-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .speed-select {
  width: 118px;
  height: 36px;
  border: 2px solid #d5e7eb;
  border-radius: 11px;
  background: #fff;
  padding: 0 8px;
  color: var(--il-preview-ink);
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-current-progress {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-current-progress .progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--il-preview-muted);
  font-size: 12px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-current-progress .progress-track {
  height: 11px;
  overflow: hidden;
  border-radius: 20px;
  background: #e7edf0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-current-progress .progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--il-preview-sky-400);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step > .step-badge {
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  align-self: start;
  border-radius: 14px;
  color: #fff;
  background: var(--il-preview-sky-500);
  box-shadow: 0 4px 0 rgba(8, 127, 172, .18);
  font-family: var(--il-preview-font-cute);
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(2) > .step-badge { background: var(--il-preview-yellow); color: #735117; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(3) > .step-badge { background: var(--il-preview-purple); }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step:nth-child(4) > .step-badge { background: var(--il-preview-green); }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step > .step-body {
  grid-column: 2;
  min-width: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head {
  align-items: flex-start;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head h3 {
  margin: 0 0 3px;
  color: #4f453c;
  font-size: 16px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head p {
  margin: 0;
  color: var(--il-preview-muted);
  font-size: 11px;
  line-height: 1.45;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-head .optional-tag {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 12px;
  color: #856b28;
  background: var(--il-preview-yellow-soft);
  font-size: 10px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-grid {
  display: block;
  padding: 12px;
  white-space: normal;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row {
  margin-top: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box {
  min-width: 0;
  margin-top: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button {
  align-self: center;
  min-width: 82px;
  white-space: nowrap;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation .intensive-listening-translation-reveal,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation .intensive-listening-translation-view {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation .intensive-listening-translation-reveal {
  gap: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation .intensive-listening-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-actions {
  margin-top: 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-result {
  margin-top: 10px;
  padding: 12px 13px;
  white-space: normal;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-result .intensive-listening-pronunciation-status {
  min-height: 0;
  margin-top: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-result .intensive-listening-four-step-score-box {
  min-height: 0;
  margin-top: 10px;
  border: 0;
  border-top: 1px dashed #c7dfe3;
  border-radius: 0;
  background: transparent;
  padding: 10px 0 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-completion {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-box {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  white-space: normal;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-score-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px dashed #c7dfe3;
  border-radius: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-score-box strong {
  color: #4e9960;
  font-size: 24px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-score-box span {
  color: var(--il-preview-muted);
  font-size: 11px;
  font-weight: 800;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-score-box .intensive-listening-scorebar {
  flex: 1 1 160px;
  min-width: 100px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-toolbar > div,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-stage-footer {
  justify-content: flex-end;
  margin-top: 15px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-more {
  position: relative;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-more > summary {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  list-style: none;
  border: 2px solid #d9c599;
  border-radius: 14px;
  background: #fff;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-more > summary::-webkit-details-marker {
  display: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-more .menu-pop {
  position: absolute;
  z-index: 20;
  top: 45px;
  right: 0;
  min-width: 150px;
  padding: 5px;
  border: 2px solid #e4d7bb;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--il-preview-soft-shadow);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-more .menu-pop button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .listen-counter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 13px 0;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .listen-counter strong {
  font-size: 13px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .listen-dot {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 2px solid var(--il-preview-yellow);
  border-radius: 50%;
  background: var(--il-preview-yellow-soft);
  color: #a97b21;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .listen-dot.done {
  border-color: var(--il-preview-green);
  background: var(--il-preview-green);
  color: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-view {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-toolbar {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 2px dashed var(--il-preview-line);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-toolbar .learning-scope-toolbar {
  min-width: min(100%, 560px);
  flex: 1 1 480px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: end;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-toolbar .learning-scope-toolbar select {
  height: 41px;
  border: 2px solid #dce7e9;
  border-radius: 12px;
  background: #fff;
  padding: 0 10px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stats-grid {
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat {
  min-width: 0;
  padding: 13px;
  border: 2px solid #e4d7ba;
  border-radius: 15px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat:nth-child(2) {
  border-color: #b9e7be;
  background: var(--il-preview-green-soft);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat:nth-child(4) {
  border-color: var(--il-preview-sky-200);
  background: var(--il-preview-sky-50);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat strong,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat span {
  display: block;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat strong {
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
  font-size: 24px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stat span {
  margin-top: 3px;
  color: var(--il-preview-muted);
  font-size: 11px;
  font-weight: 800;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-materials {
  padding: 0 15px 17px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row.intensive-listening-progress-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: 2px dashed var(--il-preview-line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row p {
  margin: 0;
  color: var(--il-preview-muted);
  font-size: 11px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row .status-tag {
  margin-top: 7px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row .intensive-listening-progress-sentences {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row .intensive-listening-progress-sentence-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row .intensive-listening-progress-sentence-button {
  width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  border: 1px solid #d7dedf;
  border-radius: 8px;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row .intensive-listening-progress-sentence-button.done {
  border-color: var(--il-preview-green);
  background: var(--il-preview-green);
  color: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row-more {
  align-self: center;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row-more > summary {
  list-style: none;
  white-space: nowrap;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row-more > summary::-webkit-details-marker {
  display: none;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row-more[open] {
  grid-column: 1 / -1;
  width: 100%;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row-more-body {
  margin-top: 10px;
  padding: 13px;
  border: 2px dashed var(--il-preview-line);
  border-radius: 14px;
  background: #fff;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .parent-notice {
  display: block;
  padding: 28px;
  text-align: center;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .parent-notice img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  padding: 12px;
  border-radius: 50%;
  background: var(--il-preview-sky-50);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .parent-notice h2 {
  margin: 14px 0 7px;
  color: var(--il-preview-sky-600);
  font-family: var(--il-preview-font-cute);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .parent-notice p {
  max-width: 540px;
  margin: 0 auto 15px;
  color: var(--il-preview-muted);
  line-height: 1.6;
}

@media (max-width: 760px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-toolbar .learning-scope-toolbar,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stats-grid,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row.intensive-listening-progress-card {
    grid-template-columns: 1fr;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .progress-row-more[open] {
    grid-column: 1;
  }
}

/* 终端覆盖：必须位于全部历史精听规则之后。 */
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-groups { display: grid !important; gap: 12px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-group { display: grid !important; min-width: 0 !important; gap: 7px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-status-group .material-group-label { margin: 2px 0 0 !important; padding: 0 2px !important; color: var(--il-preview-muted) !important; font-size: 11px !important; font-weight: 950 !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-panel,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-workspace { display: block !important; grid-template-rows: none !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card { width: 100% !important; min-width: 0 !important; gap: 7px !important; margin: 0 0 9px !important; padding: 12px !important; border-width: 2px !important; border-radius: 17px !important; box-shadow: none !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.active { border-color: var(--il-preview-sky-400) !important; background: var(--il-preview-sky-50) !important; box-shadow: inset 5px 0 var(--il-preview-sky-400) !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card.processing { border-color: #cfc0ed !important; background: #fbf8ff !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions { margin-top: 9px !important; padding-top: 0 !important; border-top: 0 !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-source-card-actions .secondary-button { min-height: 34px !important; padding: 6px 10px !important; border-radius: 11px !important; font-size: 13px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions { margin: 0 14px 14px !important; padding: 9px !important; border-radius: 16px !important; }

@media (min-width: 621px) and (max-width: 840px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sticky-actions { position: sticky !important; bottom: 10px !important; }
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h2,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .content-heading h3 { margin: 0 0 5px !important; color: var(--il-preview-sky-600) !important; font-family: var(--il-preview-font-cute) !important; font-size: 24px !important; line-height: 1.16 !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-stage > .content-heading,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-sentence-head { padding-top: 0 !important; border-top: 0 !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .sentence-count { padding: 7px 11px !important; border: 2px solid var(--il-preview-sky-200) !important; border-radius: 20px !important; background: var(--il-preview-sky-50) !important; color: var(--il-preview-sky-600) !important; font-size: 12px !important; font-weight: 900 !important; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-full-transcript-card { display: grid !important; gap: 12px !important; padding: 14px 0 0 !important; border: 0 !important; border-top: 2px dashed var(--il-preview-line) !important; border-radius: 0 !important; background: transparent !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-global-form .prompt-block,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-card { padding: 0 !important; border-top: 0 !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 7px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button { min-height: 52px !important; padding: 6px !important; border: 2px solid #dfdac9 !important; border-radius: 13px !important; background: #fff !important; font-size: 11px !important; font-weight: 900 !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options .secondary-button.active { border-color: var(--il-preview-sky-400) !important; background: var(--il-preview-sky-50) !important; color: var(--il-preview-sky-600) !important; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-flow { margin-top: 14px !important; border-top: 2px dashed var(--il-preview-line) !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step { grid-template-columns: 48px minmax(0, 1fr) !important; gap: 13px !important; padding: 16px 0 !important; border-bottom: 2px dashed var(--il-preview-line-soft) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: stretch !important; gap: 8px !important; margin-top: 10px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box { min-width: 0 !important; margin-top: 0 !important; padding: 12px 13px !important; border-radius: 13px !important; line-height: 1.65 !important; font-size: 13px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row .original-box { border: 2px solid #d5e8ed !important; background: #f8fdff !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row .translation-box { border: 2px solid #eadcf2 !important; background: #fcf9ff !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > .secondary-button { align-self: center !important; min-width: 82px !important; white-space: nowrap !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-result { margin-top: 10px !important; padding: 12px 13px !important; border: 2px solid #c8eacb !important; border-radius: 13px !important; background: #f2fff3 !important; line-height: 1.65 !important; font-size: 13px !important; }
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-framework-structure article { border: 0 !important; border-top: 1px dashed #e3d7ef !important; border-radius: 0 !important; background: transparent !important; padding: 9px 0 0 !important; }

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-advanced-controls > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-secondary-actions > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-more > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-advanced > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-drill-advanced > summary,
body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-transcript-advanced > summary { display: inline-flex !important; min-height: 26px !important; align-items: center !important; padding: 3px 2px !important; color: var(--il-preview-muted) !important; font-size: 11px !important; font-weight: 850 !important; cursor: pointer !important; }

@media (max-width: 760px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-comprehension-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row { grid-template-columns: 1fr !important; }
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-text-row > .secondary-button,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-four-step-translation-row > .secondary-button { justify-self: start !important; }
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--il-preview-line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-choice + .intensive-listening-mode-choice {
  margin-top: 9px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-choice input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-choice span {
  display: grid;
  gap: 3px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-mode-choice small {
  color: var(--il-preview-muted);
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-cross-module-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--il-preview-muted);
  font-size: 12px;
}

body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-cross-module-hint .ghost-button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
}

@media (max-width: 560px) {
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .time-box,
  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) :is(.intensive-listening-audio-stage, .intensive-listening-global-player) .speed-select {
    grid-column: 1 / -1;
    width: 100%;
    white-space: normal;
  }

  body:is([data-active-module="intensive-listening"], [data-active-module="extensive-listening"]) .intensive-listening-cross-module-hint {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}